Design System: dé digitale handleiding die jouw organisatie nodig heeft

Het werken met zware design files en het uitwisselen daarvan is niet meer van deze tijd. Tegenwoordig werken we met lichtgewicht gecompresseerde documenten en online links. Dit alles zorgt voor veel beweging in de online markt en maakt ruimte voor veel nieuwe dingen. Zo ook het ‘Design System’. Wellicht heb je er weleens van gehoord. Wij zijn er fan van! Bij HYPER houden we van efficiënt ontwerpen en een design system sluit daar feilloos bij aan. Wij leggen je graag meer uit over het design system en waarom dit een must-have voor jouw webshop én merk is!

Van chaos naar een overzichtelijke werkwijze

Hier een document en daar een document, verspreid over vele locaties. Als groot of klein bedrijf komt het vaak voor dat belangrijke online merk componenten in verschillende documenten en op verschillende plekken staan. Voor developers zijn deze ergens anders vindbaar dan voor designers en marketeers. Wanneer de keuze wordt gemaakt om een button of kleur te veranderen, is dit niet meteen bij iedereen doorgevoerd. Dit zorgt voor hobbels in het werk. Het zou toch vervelend zijn als iemand een oud logo gebruikt.

Wat als er één centrale plek was waar alle UX elementen samengebracht waren, waar het volledige team gebruik van kan maken? Dat klinkt erg handig: maak kennis met het design system!

Wat is een design system?

We beginnen bij het begin. Wat is het nu precies? Een design system is een online verzameling van herbruikbare visuele componenten met duidelijke richtlijnen. Dit systeem wordt gebruikt om een user interface (webshop pagina’s) mee op te bouwen. Denk hierbij aan huisstijlkleuren en design regels voor buttons.

Het design system wordt ontwikkeld op basis van het Atomic Design Model. Atomic Design kan je zien als kleine elementen, die je samenvoegt tot blokken, die samen gegroepeerde blokken vormen, waar templates uit voortkomen die weer een pagina vormen. De interface kan volledig uit elkaar gehaald worden en vervolgens opnieuw opgebouwd worden uit hele kleine stukjes.

Om een simpel voorbeeld te geven: we ontwerpen een generieke button. Deze wordt vervolgens gebruikt binnen een widget, maar kan tevens hergebruikt worden binnen andere componenten, templates en pagina’s.

Styleguide en design system – dat is hetzelfde toch?

Het design system wordt weleens verward met een styleguide. Beide hebben te maken met het volgen van ontwerpregels en begrijpen hoe componenten zijn opgebouwd. Zo is een styleguide voornamelijk merkgebonden. Denk hierbij aan kleuren, lettertypes, typografie etc.

Een design system bevat dat én meer, het gaat verder dan een styleguide. Denk aan herbruikbare componenten zoals carrousels, headers en buttons. Voor Magento webshops kan het bijvoorbeeld heel nuttig zijn om het design system aan te vullen met verschillende widgets, productlabels en social media elementen. Daarbij is het efficiënter en schaalbaarder om mee te werken, vooral in grote teams.

Waarom heb je een design system nodig?

Wanneer het design system is ontwikkeld, heeft dit vele voordelen voor jouw bedrijf. We lichten hier twee grote voordelen toe, al zijn er natuurlijk veel meer!

Snelheid

Een groot voordeel aan een design system is snelheid. Bij HYPER ontwerpen wij onze user interfaces in Figma. Dit geeft ons de mogelijkheid om binnen het design system templates te ontwikkelen, waar alle componenten en styling in zijn opgenomen. Dit gebruiken we als basis om vervolgens jouw webshop op te bouwen. Beide files staan in verbinding met elkaar, wat het wijzigen van styling veel makkelijker en efficiënter maakt. Wil jij in plaats van rechthoekige buttons, ronde buttons proberen? Met deze nieuwe werkwijze kunnen we het complete design veranderen. Met één klik op de knop zijn alle pagina’s gewijzigd! Dit betreft natuurlijk alleen het design.

Consistentie

Een ander groot voordeel is consistentie. Een design system is web based waardoor je altijd de meest recente versie bij de hand hebt. Zo weet je precies wat er beschikbaar is, of wat er nog ontworpen moet worden. Dit overzicht zorgt er tevens voor dat er efficiënter nagedacht kan worden over interactie van elementen. Daarnaast scheelt het vaak ook dubbel werk, fijn! Na het invoeren van het Design Language System (LDS) hebben de designers bij Airbnb 30% in tijd bespaard door het gebruiken van herbruikbare componenten en gelijke design regels.

Een design systeem is voor iedereen!

Een design system is voor iedereen in het team geschikt. Je kunt ervoor kiezen om het design system te openen via een online link. Daarmee is deze eenvoudig te delen binnen een team, voor zowel het marketing team als de social media strategen en de directie. Dit biedt houvast binnen de organisatie.

Omdat een design system zorgt voor meer overzicht, is het voor developers ook een fijne houvast. Het maakt het verbanden leggen en code hergebruiken makkelijker. Dit kan een hoop onnodige CSS schelen. Minder CSS = betere performance!

Het implementeren van een design system in het designproces

Een design system laten opzetten kan altijd. Wil je het met terugwerkende kracht laten uitvoeren, zodat je in de toekomst sneller design wijzigen kunt doorvoeren en meer overzicht hebt in de beschikbare interface elementen? Dat is een goede zet. 

Voordat je een design system wil gaan opstellen, is het belangrijk om alle bestaande elementen te verzamelen. Daarnaast is het goed om kritisch te kijken naar de huidige digitale identiteit. Sluit deze nog goed aan bij je bedrijf? 

Net als je webshop en assortiment is een design system een interactief en dynamisch document. De huidige elementen kunnen aan de hand van data, user cases en testen doorontwikkeld worden. Altijd op weg naar een nog betere webshop.

Standaard werkwijze in ons designproces

Wij weten als geen ander dat een goede basis belangrijk is en houden van efficiënt werken. Daarom nemen we bij het ontwikkelen van een nieuwe webshop het opzetten van een design system standaard mee in het designproces. Het opzetten neemt wellicht wat extra design uurtjes in beslag, maar met deze duurzame oplossing heb je hier profijt van in de toekomst. Uit een onderzoek van Adobe blijkt dat het gebruik van een design system de tijd van een project met 52% kan verlagen.

Daarnaast geeft het ons de mogelijkheid om consistente ontwerp keuzes te maken en beter na te denken over de basis die jouw user interface vormt, zonder al te veel afleiding. Uiteraard houden we hierbij ook rekening met de eventuele brand guidelines van jouw merk. 

Hoe gaat dat in zijn gang, in het designproces?

Begin je vanaf scratch, dan leggen we eerst de focus op kleurgebruik, typografie en rondingen. Met deze combinatie proberen we het juiste gevoel te leggen bij het merk. Deze styling wordt opgeslagen en hergebruikt in de elementen die verder ontworpen worden. Dit zijn de primairy buttons, secondary buttons, call to actions. Hierbij wordt tevens gekeken naar het gedrag van de buttons bijvoorbeeld wanneer je er overheen beweegt met je muis. Vervolgens gaan we denken in wat grotere elementen en leggen we de focus op productkaartjes en complete widgets. Ook hier zie je dat we in steeds grotere componenten gaan denken. Daarom wordt het design system als basis gebruikt voor het opzetten van de nieuwe frontend.

Lang verhaal kort: met een design system leg je een stevige fundering voor jouw digitale organisatie. We kunnen het goed voorstellen dat je graag een aantal voorbeelden wilt zien. Hoe het er precies uitziet en hoe wij ermee werken. We hebben er genoeg op de plank liggen! Bel of mail ons om in contact te komen ons webdesign team.