Design system

Digitale platformen zijn steeds essentiëlere onderdelen van een moderne IT-omgeving. Ze vormen een stevig fundament onder je digitale strategie, bieden volop innovatiemogelijkheden, dienen als krachtige datahubs en tillen klantervaringen naar een hoger niveau.

Bij het ontwikkelen van een digitaal platform komt vaak heel wat kijken. Het UX-design, de UI en de look en feel van het platform zijn allemaal zaken die veel aandacht vereisen. Maar je kunt het jezelf een stukje makkelijker maken door bij het bouwen van een platform een design system te gebruiken. Een design system beschrijft standaard designelementen en levert zo richtlijnen en bouwstenen die je in staat stellen om makkelijker en sneller een digitaal platform te bouwen.

Op deze pagina lees je wat een design system precies is, maar ook waarom je eigenlijk niet meer zonder kan. We laten je ook zien waarom en hoe Savvy.codes gebruikmaakt van de kracht en voordelen van een goed design system.

Wat is een design system?

Een design system is een centrale plek waar herbruikbare design- en UX-elementen (fonts, kleuren, elementen, componenten, animaties, etc.) zijn samengebracht. Het is een verzameling gestandaardiseerde en herbruikbare componenten en patronen die ontwikkelaars kunnen gebruiken voor het bouwen van applicaties en platformen. Een design system bevat dus de bouwstenen voor jouw te ontwikkelen platform.

Een design system bouwt voort op bewezen oplossingen en ervaringen uit het verleden. Het geeft een overzicht van de bouwblokken die al bestaan, maar ook van de combinaties die mogelijk zijn met die componenten. Het is belangrijk om te beseffen dat een goed design system niet automatisch een goed ontwerp maakt. Het design system is een van de kerncomponenten van een goed ontwerp, naast het UX-design (hoe het werkt) en het UI-design (hoe het eruit ziet). Deze twee vormen de basis voor het op te zetten design system.

Je begint met de UX, waarna je de UI en het design system hand in hand ontwikkelt. Die twee laatste ontstaan grotendeels samen, waarbij je in het design system het ontwerp voor je platform helemaal voltooit. Je kunt nog een stapje dieper gaan door gebruik te maken van design tokens. In een design token staan properties. De tokens zijn platform-agnostisch, waardoor designers en developers (die in diverse talen programmeren) het over dezelfde properties hebben. Door de verbinding tussen de design tokens in het design system en de codebase blijft de frontend in lijn met het design system. In een volgend artikel vertellen we je meer over design tokens.

Waarom een goed design system onmisbaar is

Het gebruiken van een design system voor het ontwikkelen van digitale platformen heeft veel praktische voordelen. Sterker, bij Savvy.codes vinden we dat je eigenlijk niet moet beginnen aan het ontwikkelen van een digitaal platform zonder een goed design system. We zetten de belangrijkste voordelen op een rij.

Consistentie = kwaliteit

Een goed design system zorgt voor consistentie, zowel in de interne werkwijzen als de beleving bij je doelgroep. Je creëert een centrale omgeving waar de belangrijkste componenten van het digitale platform samenkomen; de single source of truth voor het design van het platform. Ontwikkelaars hoeven niet te zoeken naar waar de verschillende onderdelen te vinden zijn. Ook zijn er geen interne discussies over de stijl en identiteit van het te ontwikkelen platform. Dat maakt het realiseren van een consistente merkbeleving en gebruikerservaring een stuk makkelijker.

Niet steeds het wiel opnieuw uitvinden

De standaarden die je vastlegt in een design system helpen bij het efficiënt ontwikkelen van digitale platformen. De bevindingen die ontstaan tijdens het ontwerpen en ontwikkelen van zo'n systeem kun je meenemen bij het bouwen van een volgende release. Door steeds voort te borduren op bestaande standaarden en designelementen, biedt een design system volop mogelijkheden tot doorontwikkeling. Je kunt elementen toevoegen of nog verder uitwerken.

Zo wordt je design system als het ware een digitaal organisme dat met jou meegroeit als je er maar voldoende aandacht aan besteedt. Je effent het pad naar het snel ontwikkelen en introduceren van nieuwe functionaliteiten en visuele elementen binnen een digitaal platform.

Kostenbesparing

Omdat je de belangrijkste aspecten van je platform- en merkidentiteit gestructureerd documenteert, kunnen alle betrokkenen snel en eenvoudig de juiste informatie boven water halen om platformen optimaal af te stemmen op de bestaande visuele stijl van een organisatie. Ontwikkelaars hoeven niet lang te zoeken of onnodig te overleggen, waardoor je uiteindelijk ook flink bespaart op ontwikkelkosten.

Schaalbaarheid

Verwacht je dat jouw bedrijf of productaanbod in de nabije toekomst gaat groeien? Design systems zijn schaalbaar en groeien moeiteloos mee met je organisatie en ambities. Sterker nog, zonder design system zal er hoogstwaarschijnlijk wildgroei gaan ontstaan die de schaalbaarheid in de weg zit.

Design systems en Savvy.codes

Bij Savvy.codes weten we uit eigen ervaring hoe waardevol design systems zijn bij het ontwerpen van digitale platformen. Alles wat bij Savvy.codes op een pagina belandt, komt dan ook in een design system. Het design system dat wij gebruiken, is gebaseerd op het door Brad Frost geïntroduceerde concept van atomic design.

Dit is een systeem dat designelementen naar analogie van de scheikunde opdeelt in de volgende categorieën, die lopen van klein naar groot:

• Atomen zijn de fundamentele componenten op detailniveau van een design system. Voorbeelden zijn kleuren, lettertypes, knoppen en invoervelden.
• Moleculen zijn combinaties van atomen. Denk bijvoorbeeld aan een label, invoerveld en knop (allemaal atomen) die samen een zoekveld (molecuul) vormen.
• Organismen zijn bouwstenen waarmee je een design opbouwt. Een CTA die bestaat uit componenten als een logo, tekstblok en navigatie (bouwstenen) is bijvoorbeeld een organisme.
• Templates zijn combinaties van gegroepeerde organismen die samen een pagina gaan vormen.
• De pagina, in feite een template gevuld met content, is het hoogste niveau binnen het concept van atomic design.

Eigen variant op atomic design

Bij Savvy.codes maken we gebruik van een wat minder abstracte variant op het atomic design. We doorlopen daarbij een aantal vaste stappen. De eerste is het bepalen van het ontwerpprincipe. Denk daarbij bijvoorbeeld aan de ruimtelijke opbouw van het platform, de informatiedichtheid en de animaties (snel of juist smooth).

Vervolgens gaan we aan de slag met de elementen vanuit de merkidentiteit. Denk aan kleuren, lettertypes, lijnen en de andere elementen die de huisstijl van een organisatie en platform bepalen. Daarna schakelen we over op de functionele elementen zoals buttons, stijlen, drop-downs, lay-outs en kolommen.

Stap vier is het ontwikkelen van de componenten van het digitale platform. Dit zijn zaken als kaarten en CTA-blokken. Het sluitstuk is het bouwen van de UI en de pagina’s. Vanuit de UI-omgeving bouw je uiteindelijk de hele pagina op die de gebruiker van het platform te zien krijgt.

Het design system: een absolute noodzaak

Bij Savvy.codes zijn we van mening dat je niet moet beginnen aan het ontwikkelen van een digitaal platform zonder goed design system. Doe je dat wel? Dan loop je geheid tegen zaken aan waar je vooraf niet over hebt nagedacht. Los van dat het eindresultaat een rommeltje wordt...

Een design system omschrijft niet alleen de bouwstenen van een digitaal platform, maar ook de werking ervan middels states. Dit zijn visuele representaties waarmee je de status van een component of interactief element toont en communiceert. Je ziet heel snel of iets wel of niet werkt. Dat bespaart je veel ellende en kosten, want het is lastiger en duurder om problemen op te lossen als je reeds in de testfase zit. Door een heldere blik op je UX, UI en design system, voorkom je problemen in de afrondende fase van het ontwikkeltraject.

Meer weten?

Wil je meer weten over design systems? En ben je benieuwd hoe Savvy.codes jou kan helpen om dit handige stukje gereedschap te gebruiken voor het bouwen van een modern en toekomstbestendig digitaal platform? Neem dan gerust vrijblijvend contact met ons op.