developer.overheid.nl

Ontwikkelaarsportaal van de Nederlandse overheid

Ga naar hoofdinhoud

NL Design System

NL Design System is een project dat specialisten van verschillende overheidsorganisaties laat samenwerken aan concrete oplossingen voor websites en applicaties. Denk bijvoorbeeld aan code, ontwerp en richtlijnen.

Direct naar NL Design System

Binnen de overheid is digitale dienstverlening de standaard geworden. Dit betekent dat veel organisaties zelf een website of webapplicatie moeten bouwen om hun diensten aan te bieden. Om dubbel werk te voorkomen is de NL design system community opgericht. Hiermee kunnen publieke organisaties samenwerken aan herbruikbare componenten en sneller eigen design systemen opzetten die voldoen aan toegankelijkheidseisen.

Door organisatie-overstijgend samen te werken en de krachten te bundelen is het mogelijk om web-componenten te bouwen die consistenter, gebruiksvriendelijker en toegankelijker zijn.

Toch is NL Design System meer dan een manier om een organisatiebrede component-library aan te leggen. Het bestaat namelijk uit de volgende onderdelen:

  • Richtlijnen voor hoe je de beste digitale diensten maakt, zoals voor het maken van formulieren.
  • Design kit voor grafisch vormgevers en UX-ontwerpers.
  • Componentenbibliotheek voor ontwikkelaars.
  • Gedeelde inzichten over toegankelijkheid, opgenomen in die richtlijnen en in documentatie voor componenten.
  • Een methode om je huisstijl toe te passen op onze componenten (design tokens).
  • Technische infrastructuur om werk efficiënt te testen, te delen en uit te rollen (zoals een voorbeeldrepository met Storybook en visuele regressietests).
  • Stijlgids om de huisstijl van je organisatie consistent te gebruiken.

Al deze onderdelen hebben dit gedeelde doel: makkelijk consistente, toegankelijke en gebruiksvriendelijke websites en applicaties maken.

NL Design System en het Estafettemodel​

Het NL Design System is een framework waarmee organisaties hun eigen design system kunnen bouwen. Het belangrijkste voordeel is dat componenten die zijn gebouwd met dit framework eenvoudig kunnen worden uitgewisseld tussen verschillende design systems. Door middel van design tokens worden white-label componenten voorzien van een eigen huisstijl, waardoor dezelfde componentcode herbruikbaar is voor meerdere organisaties.

Het Estafettemodel staat centraal in NL Design System: teams ontwikkelen componenten die anderen kunnen hergebruiken en verbeteren. Door samen te werken aan herbruikbare componenten maken we het mogelijk om over organisatiegrenzen heen consistentie en kwaliteit te bereiken en standaarden te creëren.

Als je zelf een publieke organisatie bent, en je wilt een design systeem opzetten is dit waar je wilt beginnen.

Van lokaal en specifiek naar centrale hoogwaardige componenten​

Het implementeren van het NL Design System vergt wel enige inspanning van jou en je organisatie, maar levert uiteindelijk veel op. De tijd die je als developer voorheen besteedde aan het aanpassen of bouwen van specifieke front-end-oplossingen, kun je nu investeren in het verbeteren van centrale componenten. Alle verbeteringen die je aanbrengt, komen ten goede aan de hele organisatie, waardoor iedereen profiteert van jouw bijdragen.

Extra tijd inplannen​

Wat natuurlijk wel vereist is, is dat er binnen jouw project extra tijd wordt vrijgemaakt voor de werkzaamheden die komen kijken bij het opzetten van alle tooling.

Aan de slag​

Om NL Design System te gebruiken, dien je eerst een eigen thema voor jouw organisatie te ontwikkelen. Een thema bestaat uit design tokens die de basis vormen van jouw huisstijl: denk aan kleuren en typografie.

Theme example repository​

Je kunt makkelijk beginnen met het bouwen van een eigen thema op basis van de example template op Github. Deze repository bevat al direct:

  • Twee example components
  • Een opzet met Storybook (componenten-catalogus)

Example Repo van NL Design System »

Aan de slag met components zonder theme?​

Als developer vraag je je natuurlijk direct af, kan ik ook gebruik maken van NL Design System zonder dat ik een thema hoeft te bouwen voor mijn organisatie? Het antwoord is; op zich kan dat. Je moet alleen wel toestemming vragen aan de maker van het thema. Een voorbeeld is het auteursrecht van het Design System van gemeente Utrecht.

Rijkshuisstijl Community​

De Rijkshuisstijl Community is een opensource community die een concrete implementatie van de Rijkshuisstijl heeft ontwikkeld als design system componenten. Een van de vele design systemen die is aangesloten bij het NL Design System framework.

Het verschil: Waar NL Design System het framework is om een design system te bouwen, biedt Rijkshuisstijl Community direct bruikbare componenten die al zijn vormgegeven volgens de Rijkshuisstijl. Dit maakt het eenvoudiger om snel aan de slag te gaan met projecten die de Rijkshuisstijl moeten volgen.

Als je zelf geen design system wilt opzetten, maar snel wilt bouwen met componenten die voldoen aan de Rijkshuisstijl, dan is dit de plek om te beginnen.

Levende voorbeelden​

Een aantal goede voorbeelden van NL Design System implementaties en communities zijn:

Op de hoogte blijven​