Wat is een design system?

In dit blog beschrijf ik wat een design system is, waarom je deze zou willen gebruiken en waarom Sigma Solutions hier ook in mee gaat.

Een design system zorgt voor een centrale definitie van bouwstenen waarmee je software opbouwt. Hierin staan definities opgeslagen van visuele componenten die je gebruikt in bijvoorbeeld een website. Denk dan bijvoorbeeld aan kleur, typografie, buttons, menubalken, formulieren etc. Bekende design systemen zijn o.a. Google Material Design, Apple Human Interface Guidelines en IBM Carbon Design System. Ook deze bedrijven zijn gaan inzien wat een goed design system kan doen bij het ontwikkelen van software.

Een veelgebruikte visie van een Design System is Atomic Design, deze term betekent dat een design system bestaat uit verschillende atomen die bij elkaar weer grotere elementen kunnen zijn, die noemen we dan ook van klein tot groot; atomen, moleculen, organismen, templates, pagina’s.

Door te beginnen met het uitgebreid neerzetten en definiëren van je atomen zorg je ervoor dat je gemakkelijk en op een gestructureerde manier de moleculen, organismen, templates en als laatste pagina’s weet neer te zetten.

Met een goed design system weet iedereen in het team; van developer tot product owner en van designer tot marketeer hoe elementen er uit moeten komen te zien en hoe deze voor de gebruiker zal moeten werken.

Mijn ervaringen rondom design systems

Vanuit mijn ervaring als front-end developer en UX designer zie ik vooral de volgende voordelen van een design system, namelijk de consistentie, snelheid en duidelijkheid.

Consistentie

Consistentie is hetgeen wat een gebruiker in zijn gebruikerservaring helpt de software gemakkelijker te gebruiken omdat er herkenbare patronen door een hele applicatie heen zitten. De gebruiker weet bijvoorbeeld te herkennen hoe hij gemakkelijk een dialog kan openen of wegklikken. Vaak zie je een soort wildgroei ontstaan van verschillend gebruik van visuele elementen wanneer er niet gebruik wordt gemaakt van een design system.

Snelheid

Door het hebben staan van goede definities van atomen en moleculen, is het erg makkelijk en snel om een nieuw organisme of template te creëren. Het mooie daaraan is dan ook wanneer er wordt besloten om in de huisstijl te kiezen voor ronde vormen en daarmee buttons en cards ronde hoeken krijgen dit maar op 1 centrale plek hoeft te worden aangepast en dit vervolgens in alle componenten is terug te zien.

Duidelijkheid

Wanneer een design system staat is het duidelijk wat er moet gebeuren om componenten en daarmee gebruiksvriendelijke interfaces neer te zetten. Zo is het voor minder ervaren collega’s ook gemakkelijker om dit op te zetten omdat de structuur al is neergezet.