Creatief én consistent met design systems
Grootschalige applicaties, websites en tools worden maar zelden door één team vormgegeven. Vaak is het ontwikkelproces een onoverzichtelijke samenwerking tussen interne en externe (UX)-designers, programmeurs, marketeers en managers. Onhandig toch? Want om een consistente merkbeleving te garanderen, wil je wel dat iedereen dezelfde stijl hanteert. Daarom adviseren we onze klanten steeds vaker om een design system te implementeren. Het hoe, wat en waarom lees je hier.
Waarom een design system en wat is het?
Zo’n design system zorgt voor samenhang. Klinkt handig, maar hoe werkt het precies? Je begint hier: binnen je bedrijf maak je productoverstijgende afspraken over design, zodat teams zich bij alle opdrachten aan dezelfde richtlijnen houden. Zo creëer je uniformiteit over de breedte van al je producten, en voorkom je een hoop dubbel werk. Een goed design system is gebouwd volgens bewust gekozen designprincipes en sluit naadloos aan op jouw brand. Belangrijke feature: het is net zo makkelijk te gebruiken door marketeers, managers, (UX-)designers en programmeurs.
We kunnen een design system op veel verschillende manieren invullen, afhankelijk van de wensen en behoeften van de klant. Dat is maatwerk. Een voorbeeld daarvan is een componentenbibliotheek. Dit is een centrale hub waar je herbruikbare elementen in opslaat. Denk aan logo’s, templates, kleuren, lettertypes en formulieren. Het wordt ook wel een single source of truth genoemd: dé database waar je informatie verzamelt en vandaan haalt, toegankelijk voor iedereen. Als je allemaal dezelfde elementen gebruikt – aan welk product je ook werkt –, garandeer je een consistente gebruikerservaring die past bij je bedrijfsidentiteit.
Atomic design systems
Atomic design is een veelgebruikte manier om over ontwerp na te denken, die we bij Synetic in onze workflow hebben opgenomen. Het is een systematische benadering – gebaseerd op de scheikunde –, waarin je 5 niveaus onderscheidt:
- atomen
- moleculen
- organismen
- templates
- pagina’s
Klinkt ingewikkeld, maar dat is het niet: elk niveau is een samenstelling van elementen uit de laag eronder. Als je atomen – denk aan HTML-tags, labels en knoppen – combineert, krijg je moleculen. Zet bijvoorbeeld een zoekknop en invulformulier bij elkaar, en je krijgt een zoekfunctie-molecuul. Moleculen vormen samen organismen, organismen maken templates en templates worden pagina’s. Zo werk je stukje voor stukje, van klein naar groot, en van abstract naar concreet naar een duidelijk beeld van hoe jouw producten eruit komen te zien. Met een atomic design system kun je eindeloos combineren, intuïtief werken en bovenal: niemand hoeft zich zorgen te maken over de uniformiteit van je product of brand.
Onze ervaring met design systems
Bij Synetic werken we er maar wat graag mee. Zo konden we de nieuwe website van de KRO-NCRV flexibel en toekomstbestendig ontwikkelen. En doordat ze er nu een design system gebruiken, kan de redactie heel eenvoudig zelf componenten toevoegen. Denk aan webpagina’s voor nieuwe tv-programma’s die naadloos aansluiten bij de rest van de website. Ook voor FrieslandCampina ontwikkelden we een toolbox waarmee ze voor hun verschillende merken – zoals Friesche Vlag, Mona en Vifit – snel en eenvoudig pagina’s kunnen bouwen en aanpassen.
Voor wie is een design system interessant?
Een design system is interesant voor iedereen die digitale producten ontwikkelt: van grote corporates tot mkb’ers. Vooral als je met verschillende experts aan een hoop uiteenlopende producten samenwerkt. Hoe complexer je organisatie of de samenwerking, hoe meer je aan een design system hebt. Als er veel merken of businessunits op projecten samenkomen, loop je het gevaar dat ze langs elkaar drijven – als losse eilandjes. Met een systematische benadering zorg je voor verbinding en uniformiteit.
Onderaan de streep is een design system het resultaat van een compleet andere manier van denken: systematisch, consequent en stap voor stap.
Voordelen van design systems
Wat zijn nu concreet de voordelen voor je organisatie? Voorop staat dat je zorgt voor een samenhangende merkbeleving, doordat iedereen hetzelfde gereedschap gebruikt. Teams werken makkelijker samen, en je vermijdt lange discussies over ontwerp – de designprincipes staan immers vast. Niemand doet dubbel werk, want in een oogopslag zie je de gemaakte afspraken en welke elementen je al tot je beschikking hebt. Zo voorkom je verwarring en werk je efficiënter, goedkoper, en sneller dan het licht.
