Design Systeem: Waarom het nodig is voor cohesie op je website

Geschreven door:

Alaa Fouad

Datum publicatie:

30 september 2022

Als je naar een website of app van Google kijkt, weet je direct dat je het van google is. Dit komt doordat zij structureel een uniform kleur- iconen en typografie gebruik hebben. Het document waarin deze standaarden worden weergegeven, noemen we het Design systeem. Hoewel men het vaak verwart met een brand guide, is een design systeem uitgebreider en duidelijker dan een brand guide: Het is meer dan alleen je brand identity.

 

Veel grote bedrijven gebruiken en beheren al jaren design systems, denk aan Material.io van Google of Carbon Design System van IBM. Echter zien veel kleinere bedrijven de waarde ervan vaak niet in – deels door onbekendheid, deels doordat het enige tijd kost om dit op te zetten.

 

Op de lange termijn zorgt een design system voor efficiëntie in je proces. Dit is handig als je bedrijf en je website of app aan het groeien is en er steeds meer elementen of spelers bij komen.

 

In dit artikel leggen we uit wat design systemen zijn, waaruit ze bestaan en voor wie ze zijn. 

Wat is een design systeem?

Een design systeem is digitale bibliotheek waar alle productprincipes en componenten (zoals knoppen en invoervelden) van je website of app worden vastgesteld. Deze componenten worden weergegeven in elke interactie staat, zoals de default, hover en active staten met de juiste richtlijnen en code erbij. Daarbij zijn ze allemaal ook nog eens herbruikbaar. Een design systeem is in principe is een human interface guideline.

 

Omdat alles pre-built is, zijn de dagen dat je alles van nul moet bouwen weg. Dit zorgt voor een sneller en consistent proces. Hierdoor kan er meer focus gelegd worden op het creëren van oplossingen en producten voor je klanten, dan op kleine aanpassingen in je ontwerpen die uiteindelijk te veel tijd in gebruik nemen.

 

Is het nog niet helemaal duidelijk welke elementen naar voren komen in een design systeem? Hieronder geven wij 8 voorbeelden zodat jij direct kan beginnen met je eigen design systeem.

Iconen

Hierin beschrijf je welke iconen in welke contexten en in welke stijl worden gebruikt. Daarnaast beschrijf je welke maten worden gehanteerd op elke apparaatgrootte en de kleur van je iconen op elke mogelijke achtergrond.

Knoppen

Verzendknoppen, bestelknoppen, bevestigknoppen, annuleringsknoppen. Je hebt allerlei soorten knoppen waar je soms zelf niet bewust van bent. Hoe geef je elke soort knop weer? Hebben ze een border-radius of juist niet? Hoe zien ze er uit per interactie? Welke padding hebben de knoppen en hoe ziet de tekst in de knoppen eruit? Hoe geef je een knop weer bij een formulier als het formulier niet correct of volledig ingevuld is? Dit zijn enkele vragen die je jezelf moet stellen bij het maken van een design systeem, dan kom je tijdens het ontwerpen veel minder vragen tegen.

Kleuren

Welke kleuren hanteer je niet alleen voor de knoppen, maar ook voor de titels, paragrafen en achtergronden? Welke grijswaarden hanteer je op de website? Definieer alle kleurcodes en de kleuren in andere staten. Is er bijvoorbeeld sprake van een donkere kleurwaarde van de knoppen voor de hover state of de active state?

Formulieren

Hier bepaal je per form element hoe het eruit ziet in de default lege staat, een ingevulde staat en een errorstaat. Simpel gezegd,  wanneer een veld niet, incorrect of juist correct ingevuld is.

Typografie

Naast het bepalen van het lettertype, bepaal je hier ook al je lettergroottes voor de verschillende apparaatgroottes. Hierbij komen natuurlijk je H1 tot en met je H6 van pas, maar ook je paragrafen, display heading en je voetnotenfootnotes.

Afbeeldingen

Wat voor soort afbeeldingen mogen er gebruikt worden? Denk aan de sfeer van de foto’s die het juiste gevoel moeten tonen op je website of in je app. Welke elementen komen er nog meer bij kijken? Dit kan een schaduw achtergrond zijn of misschien zelfs een border-radius.

Spacing

Hierin bepaal je alle margins en paddings voor elke apparaatgrootte. Denk aan de spacing tussen secties, maar ook de spacing tussen elementen in een sectie.

Krijg een analyse van je landingspagina binnen 2 werkdagen, gedaan door een UX expert!

Neem contact met ons op!

Maar… waarom?

Het gebruik van een design systeem zorgt voor een sneller en consistent proces. Maar wat is de gedachte hierachter? Brad Frost beschrijft het in zijn boek Atomic Design.

Stel dat je een website hebt met 10, 20 of zelfs 100 pagina’s die herontworpen moeten worden. In principe bestaan deze pagina’s maar uit een paar contenttypes en lay-outs.

 

Eén contenttype bestaat bijvoorbeeld uit een formulier, denk aan een contactformulier of bestelformulier. Je wil formulieren op elke pagina consistent weergegeven hebben, ongeacht wat er gevraagd wordt in het formulier. 


Om verder te borduren op dit voorbeeld van een formulier: Het formulier is nog geen pagina, het vormt de pagina samen met de andere elementen die je eromheen kan vinden. Zoals je footer en header. Het formulier is in je design system, volgens Frosts Atomic Design concept, nog maar een organisme. Dit organisme bestaat uit diverse moleculen. Wat is een molecule binnen een formulier? Een invoerveld voor je naam, een e-mailadresveld, en meer.. Een invoerveld heeft een label erboven en een placeholder eronder. Misschien nog een informatie-icoon die, wanneer je erover heen scrolt, meer informatie biedt aan de gebruiker. Deze subelementen zijn elk een atoom.

In je design system beschrijf je dus niet alleen je molecule, maar ook elk atoom dat er in zit. Als je vooraf je design- en developmenttraject bepaalt hoe een molecule in elkaar zit en gebouwd moet worden, dan heb je al gauw herbruikbare componenten die je samen kan voegen tot één modulair organisme.

Omdat het modulair is, kan je de elementen dus makkelijk verschuiven in je organisme. Ook kan je secties verwijderen of toevoegen. Net als bij een modulaire bank van de Ikea. Je hoeft voor een accountregistratie-pagina, bestelformulier en contactformulier niet steeds opnieuw een formulier te ontwerpen. In je design system geef je al aan uit welke moleculen een formulier kan bestaan en hoe elk atoom daarbinnen eruit ziet.

Je hoeft de modulaire moleculen alleen te slepen naar je canvas en te verschuiven.

Voor wie zijn design systems bedoeld?

Designers, de naam zegt het al een beetje. Heb je weleens wat ontwerpen gemaakt voor een klant waarna de klant of brand owner opeens van gedachten veranderde over een knop, de typografie of een ander element wat meerdere malen voorkomt in je ontwerpen? Het laatste wat je wil doen is elk element één voor één aanpassen. Met een design system zou je dit maar één keer hoeven aanpassen.

 

 

Niet alleen voor designers is dit handig, maar denk ook aan developers die het moeten bouwen. Een handige gids zoals een design system vertelt hun eigenlijk al genoeg over uit welke elementen je website of app bestaat en wat de codes en richtlijnen daarbij zijn.

 

 

Daarnaast heb je de brand owner die hier op een plek overzicht heeft van de hele brand, omdat dit gedetailleerder is dan alleen een brand guide.

 

En natuurlijk de marketingafdeling, die hier zich ook aan moet houden, en alle andere stakeholders, die niet weken of maanden willen wachten tot twee pagina’s definitieve ontwerpen heb, maar hun oplossing gewoon zo snel mogelijk live willen hebben.

De voordelen van design systems

Samenvattend zijn dit de voordelen van het gebruik van een design systeem:

 

  1. Alle bouwstenen van je merk, website of app staan allemaal op één plek. Ook wel: “a single source of truth”
  2. Visuele consistentie in je proces en eindproduct
  3. Sneller ontwerpen en bouwen, dit is geldbesparend en zo heb je ook een snellere time-to-market
  4. Aanpassingen hoeven maar één keer op één plek gedaan te worden
  5. Alle componenten zijn herbruikbaar
  6. Uitgebreider en duidelijker dan een brand guide, niet alleen fijn voor de brand owner, maar ook handig voor de designers, developers, marketeers en alle andere stakeholders

Hoe zorg je voor langetermijnsucces met je design system?

  1. Zorg dat een design systeem officieel is en iedereen dit waarborgt.
  2. Houd het up-to-date en zorg ervoor dat het up-to-date te blijven houden is.
  3. Zorg voor een cross-disciplinaire samenwerking, een design systeem is niet alleen voor designers.
  4. Maak het contextueel, voor welke contexten is het voor jouw bedrijf relevant?
  5. Maak het aanpasbaar en flexibel.

Een design systeem moet je dus bijhouden. Wil je hier meer over lezen? Brad Frost legt het hier verder mooi uit in zijn online boek.

Gerelateerde blogs