Design system: gewoon elegant of echt essentieel?

Design system: gewoon elegant of echt essentieel?
Design system: gewoon elegant of echt essentieel?

Waarom werkt die ene app nu zo handig en consistent terwijl andere dan weer onduidelijk en verwarrend zijn? Of waarom zijn grote merken als Google en Apple zo herkenbaar? De kans zit er dik in dat het team achter die ene app gebruik maakt van een design system. Dat grote merken en bedrijven dit doen, hoeven we je natuurlijk niet te vertellen. Maar wat zo’n systeem net is, waarom het ook voor jouw bedrijf goed van pas komt en hoe wij het bij RMDY gebruiken, lees je in deze blog.

via GIPHY

Wat is een design system?

Een design system is een set van regels, richtlijnen, patronen, en componenten voor het ontwikkelen van producten, merken, of (digitale) experiences.

Deze richtlijnen helpen het designteam met het maken van keuzes, en zorgen ervoor dat je ontwerp logisch, duidelijk en consistent wordt. Wat er onder die richtlijnen, patronen en componenten valt, komt later aan bod.

Een design system is geen blauwdruk voor je vormgeving; er staat namelijk niet letterlijk in wat je moet maken. Zie het eerder als een raamwerk dat verschillende teams de juiste beslissingen helpt maken.

Je kan de volgende dingen terugvinden in een design system:

  • Welke kleuren gebruiken we voor welke elementen?
  • Wat is de tone of voice van alle teksten binnen de app?
  • Hoe pas je het logo toe?
  • Wat de is de afstand (spacing) tussen tekst en titels?
  • Hoe zien onze pop-ups (modals) eruit en hoe vaak keren ze terug?
  • …  
Een voorbeeld uit het RMDY design system; Buttons
Een voorbeeld uit het RMDY design system; Buttons

Waarom is het belangrijk?

Design systems zorgen ervoor dat niet enkel designers, maar ook andere  teamleden zoals developers of contentcreators dezelfde taal spreken.

Dit helpt hen met het ontwerpen en ontwikkelen van een samenhangende user experience en grafisch ontwerp. Zo zorgt een goed systeem ervoor dat vergelijkbare acties binnen een app of website op een vergelijkbare manier worden opgelost.

Op die manier hoeft het warm water niet steeds opnieuw uitgevonden te worden.   

Stel je voor: je maakt een shopping app waarbij je het winkelmandje moet kunnen legen en de gebruiker in dat geval een waarschuwing moet krijgen. Die handeling stelt zich op drie verschillende plekken in de app. 

Om tijd te besparen, werken hier drie verschillende teams aan met telkens een andere oplossing:

Voorbeeld 3 verschillende designs voor hetzelfde probleem
Drie verschillende designs voor hetzelfde probleem

Elk van bovenstaande pop-ups lost het probleem even adequaat op, maar ze verschillen sterk in taalgebruik, kleur en UX (user experience).

Daarnaast heeft elk team ook tijd en moeite gestoken in een oplossing te vinden voor hetzelfde probleem. 

Je verliest daar als bedrijf dus al een stukje efficiëntie en er ontstaat mogelijk verwarring of onenigheid over de verschillende oplossingen.

De afspraken die je maakt binnen het design system sluiten dit uit en zouden dit als volgt kunnen opnemen:

Example of standard modal
Een gestandaardiseerde modal

Wat zit er allemaal in een design system?

Je kan jouw systeem zo uitgebreid maken als je zelf wil of nodig hebt. Sommige bedrijven zullen voldoende hebben aan enkele afspraken met betrekking tot kleurgebruik, één of twee primaire lettertypes en een algemeen idee over  tone of voice.

Voor andere ondernemingen zal dit verder worden uitgebreid naar terugkerende patronen en/of componenten. Ruwweg kun je een design system in vier hoofdstukken opdelen (van algemeen naar specifiek):

  • Guidelines: High-level richtlijnen over bijvoorbeeld kleur, spacing en typografie.
  • Content: Richtlijnen over de invulling van de content zoals bijvoorbeeld tone of voice, grammatica, beeldtaal en afspraken met betrekking tot (social) media.
  • (UX) Patronen: Acties en flows die herhaaldelijk terugkomen in je ontwerp zoals bijvoorbeeld login, checkout, loading en foutmeldingen.
  • Componenten: Specifieke uitwerkingen van terugkerende elementen zoals buttons, forms, modals en dropdowns.

Afhankelijk van het soort product dat je uitwerkt, het formaat van je team, en het soort business waarin je werkt, wordt in grote lijnen bepaald hoe je design system eruit ziet. Je moet het dan ook zien als een levend document. In plaats van in één keer alles top-down vast te leggen, groeit het over tijd. 

Vaak is er ook iemand verantwoordelijk voor; de design system manager. Die zorgt ervoor dat de regels en afspraken consistent worden toegepast en kijkt binnen de organisatie of er nieuwe componenten en patterns zijn die daaraan toegevoegd kunnen worden.

Ook bij RMDY gebruiken we een design system. Dat helpt ons vooral met het consistent houden van onze vormgeving, maar ook voor een herkenbare stijl op social media tot zelfs consistente presentaties door bijvoorbeeld het salesteam. Hiervoor maken we onder andere gebruik van veel simpele do’s en don’ts die duidelijk laten zien wat wel en niet de bedoeling is. 

Example of spacing
De do’s en don’ts voor spacing in het design system van RMDY

Zo heeft iedereen in het team, niet alleen de designers, een snel overzicht wat wel en niet de bedoeling is. Ook geeft het een duidelijke invulling aan de richtlijnen en geven in één oogopslag weer waarom een bepaalde afspraak belangrijk is.

Example of color in titles
De do’s en don’ts voor kleurgebruik in het design system van RMDY

Voorbeelden van bestaande design systems

Zoals gezegd, maken veel grote bedrijven gebruik van duidelijke design systems, waardoor ze intussen ook door het grote publiek herkend worden.

Hieronder vind je een lijstje met een aantal voorbeelden van openbare design systems ter inspiratie.  Deze voorbeelden zijn erg uitgebreid, maar geven een goed beeld van onder andere de structuur en inhoud.

Besluit: heeft mijn organisatie een design system nodig?

Een helder en uitgewerkt design system lijkt veel werk en staat niet in een wip en een gauw op punt. Is het daarom wel de moeite waard? Daarnaast hebben grote bedrijven zoals Google en IBM zelfs hele teams in dienst die het design system onderhouden en updaten. 

Maar ook als klein team heeft een design system veel meerwaarde. Hoewel het een investering vraagt om het goed op te zetten, betaalt het zich viervoudig uit:

  1. Voor je klanten en gebruikers levert het een consistente gebruikerservaring op.
  2. Voor je team scheelt het veel dubbel werk; code en design patterns zijn immers herbruikbaar.
  3. Ook geeft het duidelijke richtlijnen en handvatten voor (toekomstige) designkeuzes. Je designproces wordt schaalbaar.
  4. Tot slot levert een design system snelheid op in je design- en ontwikkelingsproces op, waardoor verschillende teams binnen je bedrijf efficiënter zullen werken.

Het ontwikkelen van een goed design system lijkt dus een grote sprong, maar het is er zeker één die de moeite loont om te wagen.

Zoals gezegd, is het een proces dat zich geleidelijk aan zal voltrekken mits de juiste focus en bepaal je zelf hoe ver je daarin gaat.

Daarnaast kunnen de richtlijnen zoals hierboven beschreven je vast en zeker al op pad zetten. Je zal het je niet beklagen wanneer je een nieuwe post voor social media, landingspagina of zelfs interne presentatie voorbereidt en je kan terugvallen op een aantal basiselementen.

Overtuigd van wat een sterk design kan betekenen voor jouw bedrijf?