waarom je een design system in je workflow wilt
Een design system. Klinkt misschien wat technisch, niet? Maar vergis je niet. Het is niet zomaar een reeks met regels en onderdelen. Het is hèt kompas van je designproces. Net als een dirigent een orkest leidt, stuurt een design system hoe en wat je ontwerpt. Design je zonder system? Dan wordt het een aardige chaos.
waarom een design system waardevol is voor jouw workflow
Voor we je meenemen in alle venijnige details, zetten we graag eerst iets recht: een design system is niet hetzelfde als een visuele identiteit of brandbook. Waar een visuele identiteit en brandbook zich focussen op hoe dingen eruitzien, is een design system een set van richtlijnen en componenten. Een design system stuurt het proces van design en development. Het is de blauwdruk die helpt bij het bouwen en onderhouden van al je digitale producten. En dat leidt elk component wat je je uiteindelijk de wereld in duwt. Van de kleinste buttons tot een volledig ontwikkeld scherm.
Als je een nieuwe visuele identiteit ontwikkelt, dan is het net zo belangrijk om tijd te besteden aan je design system. Daarvoor ontwerp je uiteindelijk componenten en leg je uit hoe en waarom je deze gebruikt. Dat is het hart van je design system.
hoe een design system je organisatie boost
Een design system is een investering die echt de moeite waard is. Of je nu deel uitmaakt van een kleine start-up of een grote multinational. Het doel is simpel: naast een consistente visuele identiteit, verhoog je je efficiëntie verhogen aanzienlijk. En de impact daarvan is groot.
Je werkt efficiënter
Met een design system praten designers, developers, marketeers en andere stakeholders dezelfde taal. Dat bevordert samenwerking en communicatie, wat leidt tot een efficiëntere workflow. En het mooiste: het maken van uitingen, landingspagina’s of het toevoegen van visuals wordt binnen no-time gefixt. Dat maakt het opschalen weer een stukje eenvoudiger.
Het is gebruikelijk om een daling tot 35% in development kosten te zien wanneer je een design system gebruikt.
Je richt je op het oplossen van problemen die ertoe doen
Designers en developers beschikken met een design systeem over herbruikbare componenten die in de praktijk getest en goed bevonden zijn. Een centraal framework bespaart je daarom tijd (plus discussies) en geld. Dat kan weer direct geïnvesteerd worden in het verbeteren van de gebruikerservaring (UX).
de bouwstenen van een design system
Het komt dus wel eens voor dat sommige een design system en een brandbook door elkaar halen. Niet gek ook. Want beide zijn inderdaad gericht op het volgen van ontwerpregels. Maarrrrrrr: er is een duidelijk verschil.
Een brandbook is vooral gericht op het merk. Kleuren, lettertypes, typografie en toepassingen worden zoal besproken. Een design system bevat dat én meer. Wat er precies in zit? Dat hangt af van de context. Toch bestaat het vaak uit het volgende:
- Brandbook: zorgt voor consistentie in visuele uitdrukking, zoals kleur en lettertype.
- Icon library: bevat de visuele symbolen van je system.
- Component library: ook bekend als UI-kits, met herbruikbare elementen.
- Pattern library: helpen bij het bieden van consistente gebruikerservaringen.
- Merkwaarden: beïnvloeden beslissingen in design en inhoud.
- Designprincipes: gericht op afstemming in het gebruik van je system.
- Contentrichtlijnen: voor een consistente tone of voice en grammatica.
- Accessbility richtlijnen: essentieel voor inclusiviteit. Denk aan lettergroottes en contrast.
- Design tokens: vertegenwoordigen gecodeerde waarden zoals ruimte, kleur en typografie.
de techniek achter een design system
Bij het opbouwen van een design system is de keuze van je tool bepalend. Je bent niet gebonden aan één enkele methode. Er zijn allerlei tools voor designers, marketeers en developers. Elk heeft zijn eigen smaak. En ja, die verschillen vaak per groep. Dit is hoe wij deze tools inzetten in onze projecten:
- Figma voor designers. Hier gebeurt het creatieve werk. Het stelt hen in staat om efficiënt te werken met een uitgebreide bibliotheek van componenten. Dit bevordert samenwerking en creativiteit in het ontwerpproces.
- Webflow voor marketeers en developers. Webflow geeft je de mogelijkheid om snel met componenten te werken. Deze componenten kunnen direct worden geïntegreerd in websites, wat een vloeiende overgang van ontwerp naar ontwikkeling bevordert. En dus je time-to-market of nieuwe landingspagina’s op te zetten aanzienlijk verlaagd.
wanneer heb je een design system nodig?
Voor een kleine marketingwebsite is het soms niet nodig om een design system te hebben. Een praktischere aanpak is om dan een component library of brandbook te ontwikkelen. Dat is niet alleen handig voor nu, maar ook voor de toekomst. Want weet jij nog wat je vorige week donderdag hebt gegeten? Precies. Laat staan als je een half jaar geleden ongedocumenteerde regels hebt toegepast op je designs.
Als er ergens een belletje rinkelt bij het checken van onderstaande punten, kan het een slimme move zijn om een design system op te tuigen:
- Eenheid in uitstraling: jouw producten moeten consistent ogen en functioneren. Een design system zorgt voor eenheid.
- Terugkerende functionaliteit: gebruik je vaak dezelfde functies in je website of applicatie? Een design system helpt om deze functies gestandaardiseerd en herkenbaar te houden.
- Meer impact maken: je wilt niet steeds hetzelfde werk opnieuw doen voor verschillende media. Een design system bespaart tijd en moeite, waardoor je sneller vooruit beweegt.
- Terugkerende designfouten: als je vaak tegen dezelfde issues aanloopt, biedt een design system een gestructureerde oplossing.
- Consistentie voor designers: wij (en designers) willen dat hun werk altijd ‘on-brand’ is. Een design system geeft duidelijke richtlijnen.
- Kortere time-to-market: organisaties die hun producten sneller op de markt willen brengen, profiteren van de efficiëntie die een design system biedt.
- Discussies over stijl of functionaliteit: is er vaak discussie over stijl of functionaliteit? Een design system zet duidelijke standaarden en vermindert discussies.
voorbeelden van design systems
onze ervaring met design systems
Een design system maakt altijd deel uit van onze projecten. Soms heel minimaal, soms aardig verfijnd. Hoe dan ook: wij passen het altijd toe in ons werk en onze deliverables, zodat het eindproduct zo duurzaam mogelijk gebouwd wordt. Very efficient, we like it zoals je Jeroen wel eens hoort zeggen.