Design System

Laten we beginnen met de belangrijkste term. Wat is een Design System? Jeremy Keith, oude rot in het vak, omschrijft het als volgt:

“The generally-accepted definition of a design system is that it’s the outer circle—it encompasses pattern libraries, style guides, and any other artefacts. But there’s something more. Just because you have a collection of design patterns doesn’t mean you have a design system. A system is a framework. It’s a rulebook. It’s what tells you how those patterns work together.”

Het omvat volgens Jeremy dus vrijwel alles wat met Design te maken heeft. Deze definitie is wat mij betreft te abstract. Laten we eens kijken wat de UX experts van het eerste uur van de Nielsen Norman Group hierover te zeggen hebben:

“A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.”

In het eerste gedeelte van deze definitie zitten ook de voordelen van een Design System opgesloten, namelijk dat design makkelijker op te schalen is en onnodige herhalingen worden voorkomen. Het tweede deel geeft wat mij betreft beter weer wat en Design System is. Als mensen aan mij vragen wat een Design System is omschrijf ik het als volgt:

Een Design System is een plek waar alle design keuzes binnen een organisatie zijn vastgelegd die door iedereen hetzelfde geïnterpreteerd worden.

Door middel van visuele ondersteuning weten designers hoe een component werkt en developers kunnen de exacte code van hetzelfde component inzien en gebruiken. Daarnaast is er een (publiekelijke) omgeving waar de rest van de organisatie de documentatie (en dus beargumentering) van het component kan zien.

Component

Een component is een veelgebruikte term voor de representatie van een design keuze. Een voorbeeld van een component is een button. Deze button kan bestaan uit de volgende onderdelen:

• achtergrondkleur
• ruimte om de tekst heen (padding)
• lijn om de button (border)
• tekst, die weer gedefinieerd wordt door:
• lettertype
• lettergrootte
• tekst kleur
• gewicht van de tekst (bijvoorbeeld bold of regular)
• decoratie (cursief of onderstreept)

Patterns

Dit is een combinatie van components die een bepaalde functionaliteit bieden. Denk aan een zoekformulier. Deze kan bestaan uit:

• Input component waarmee gebruikers een zoekterm kunnen invoeren
• Button component waarmee gebruikers de zoekopdracht kunnen starten
• Functionaliteit waarbij zoekwoorden automatisch worden aangevuld

Andere patterns kunnen zijn:

• Een formulier bestaande uit meerdere formuliervelden zoals een tekst veld en radio buttons
• Nieuwsoverzicht bestaande uit nieuwsberichten die weer bestaan uit een afbeelding, titel, datum en introductie tekst
• Navigatie bestaande uit menu items, een zoekoptie en een talen switch

Design Tokens

Dit zijn variabelen waarin je verschillende waarden opslaat die te maken hebben met de look en feel van de components. Een goed voorbeeld is een design token van een kleur. Als de primaire kleur van je huisstijl rood is kan je deze waarde als volgt opslaan:

color-primary: #ff0000

Het voordeel hiervan is dat je in een component deze token kan hergebruiken. Bijvoorbeeld bij de achtergrondkleur van een button. 

background-color: var(--color-primary)

Wanneer je dit consequent doorvoert bij al je componenten kan je door alleen de waarde van de color-primary design token aan te passen overal deze kleur wijzigen. Je hoeft dit dan niet per component aan te passen.

De truc is om zoveel mogelijk variabelen in design tokens vast te leggen zodat je components, en dus je design system, gemakkelijk aan te passen is wanneer bijvoorbeeld de huisstijl wijzigt. 

Voorbeelden van andere waarden die ook in design tokens opgeslagen kunnen worden zijn:

• Lettertype
• Letterdikte
• Lettergrootte
• Afstanden (margin en padding)
• Afronding van hoeken (border radius)
• Dikte van lijnen (border-width)

Figma

Figma is een design en prototyping tool dat vooral de laatste jaren erg populair is geworden. Met name omdat de lay-out functionaliteit zeer uitgebreid is en jet dicht in de buurt komt van een daadwerkelijke situatie in HTML en CSS.

Ook kun je in Figma components maken en deze hergebruiken. Het is zelfs mogelijk om een bibliotheek van components te delen onder werknemers binnen dezelfde organisatie. Wanneer er een update gedaan wordt aan een component kan deze automatische doorgevoerd worden in alle designs en prototypes waarmee de verschillende werknemers bezig zijn. 

Figma is bij uitstek geschikt om snel schetsen en prototypes te maken. Het blijven echter interactieve afbeeldingen en komen daarom nooit helemaal overeen met hoe een website of applicatie daadwerkelijk gaat werken.

Storybook

Storybook is een open source tool waarmee je componenten kan bouwen in code. Het voordeel is dat je direct ziet hoe een component eruit ziet in de browser of op verschillende apparaten zoals smartphones en tablets. Daarnaast kan een ontwikkelaar de code bekijken om te zien hoe het component is opgebouwd. Deze code kan direct gekopieerd worden door een ontwikkelaar.

Ook is het mogelijk om in Storybook componenten aan te bieden voor verschillende Javascript frameworks (waaronder React, Angular, Vue). Wanneer een ontwikkelaar een applicatie bouwt in eenzelfde Javascript framework kunnen de componenten direct geïntegreerd worden.

Met Storybook kun je ook voorbeelden van pagina’s opbouwen met de beschikbare componenten om te demonstreren hoe de componenten het beste met elkaar gebruikt kunnen worden.

Atomic Design

Atomic Design is een designfilosofie bedacht door Brad Frost. Hij trekt de vergelijking tussen design elementen en elementen zoals we die kennen uit de scheikunde. Waarbij een molecule het kleinste niet op te delen element is. Bijvoorbeeld een button. Je kan deze niet verder opsplitsen zonder dat het niet meer functioneert als geheel. 

Wanneer je meerdere molecules samenvoegt krijg je een atom. Zoals een zoekveld bestaande uit een tekst veld om een zoekterm in te vullen en een button om de zoekopdracht te starten.

Een organism is een weer een verzameling van atoms, zoals een navigatiebalk met een menu en een zoekveld.

Zoals je kan zien overlapt deze terminologie met die van de components en patterns hierboven. Zelf merk ik dat de termen zoals molecules, atoms en organisms niet voor alle stakeholders voor de hand liggend zijn. Ik gebruik daarom zelf de termen components en patterns.

Meer termen

Ben je zelf weleens een term tegengekomen met betrekking tot Design Systems waar je meer uitleg over wil? Of heb je een mooie toevoeging voor deze lijst? Laat het mij dan weten door hieronder een reactie achter te laten.