Design System: de bron van jouw merk

Creative Director

Design systems zijn een belangrijk onderdeel van het dagelijkse werk van elk design agency geworden. Merken hebben steeds meer behoefte aan structuur door een style guide, uniformiteit en efficiënt teamwork. Lees wat de voordelen van een design system voor jou zijn en hoe jij je team kunt helpen de productkwaliteit te verbeteren.

Een design system is een online organisme dat constant evolueert om altijd op de hoogte te zijn van de meest actuele informatie, tools en technologieën. Laten we dit spannende fenomeen eens onder de loep nemen zodat jij als ondernemer weet wat de voordelen voor jouw merkidentiteit zijn.

Wat is een design system niet

Wij horen veel verschillende definities en merken dat klanten wisselende verwachtingen hebben. Laten we beginnen met te zeggen wat een design system niet is: het is geen Sketch Library, niet zomaar een style guide (stijlgids), huisstijlhandboek of een asset library (design componenten bibliotheek)… Eigenlijk is het dit allemaal… en nog veel meer!

Het ontstaan van design systems

Is een design system een innovatief idee? Verre van. Tot de 80er jaren was een huisstijl niet iets waar consistent mee omgesprongen werd. Een logo werd naar hartenlust aangepast en de toepassing van een huisstijl was afhankelijk van de waan van de dag. Designers zagen al snel de behoefte om de door hun ontworpen huisstijl te documenteren zodat de klant deze zelf kan toepassen.

Met de komst van het internet was de deur geopend voor geautomatiseerde online systemen voor het beheren van huisstijlen. Maar voordat er design systems waren was een huisstijlhandboek jarenlang een gangbare oplossingen. Dit waren dikke geprinte statische boekwerken waarin elk element, elke toepassing en elke poep en scheet vastgelegd werden. Vaak heel belerend en met vele ‘do’s and don’ts’ wat veel mensen tegen de haren streek. Ze moesten ineens dingen doen die ze opgelegd werden die in de praktijk vaak niet praktisch waren.

Wij hebben ons hier eerlijk gezegd ook schuldig aan gemaakt. Sinds 1995 hebben we voor vele grote bedrijven complexe huisstijlen gemanaged en het gebruik hiervan gedocumenteerd in ultra dikke handboeken. Onze ervaring is dat weinig klanten hier daadwerkelijk gebruik van gemaakt hebben. De huisstijlhandboeken werden geproduceerd en verdwenen in archiefkasten waarna niemand er meer naar omkeek. Vanaf het moment dat ze opgeleverd werden waren ze praktisch al outdated. Dat is natuurlijk niet het nut van zinvolle huisstijl management.

NASA’s iconische huisstijlhandboek

Eén van de meest iconische huisstijlhandboeken is de NASA Graphics Standards Manual uit 1976. Een 90 pagina’s dik handboek met een uitgebreide uitleg over hun futuristisch nieuw logo (genaamd ‘The Worm’) en huisstijl. Van praktische huisstijl toepassingen tot signage op vliegtuigen en de Spaceshuttle, je vindt alles in deze style guide.

NASA Graphics Standards Manual - Rene Verkaart
Logo design voor de Spaceshuttle

The one single source of truth

Een design system is de enige bron van waarheid die alle merkelementen van het logo, tot kleur, typografie, vormentaal, fotografie, iconen, motion graphics en meer groepeert zodat teams een product kunnen ontwerpen, realiseren en ontwikkelen. Het verenigt productteams rond een gemeenschappelijke beeldtaal, versnelt het ontwerpproces en bouwt bruggen tussen teams die samenwerken om producten tot leven te brengen.
René Verkaart
Creative Director

Voordelen van een design system

Het doel van een goed design system is altijd consistentie. Consistentie voor de interne werkwijze voor de toepassing hiervan en een consistente beleving bij de doelgroepen.
Als je zeker wilt weten of je een design system nodig hebt, boek dan een Design System Audit. Als je nog twijfelt of meer wilt weten, dan zijn hier een paar argumenten die je helpen bij het nemen van een besluit:

  • Kostenbesparing: Doordat alle aspecten van je merkidentiteit gestructureerd gedocumenteerd zijn, kunnen alle betrokkenen snel en eenvoudig de juiste informatie boven water halen om huisstijl uitingen te kunnen maken. Niet lang zoeken, zelf nadenken of onnodig overleggen.
  • Consistentie: Door de uitgebreide instructies, richtlijnen en voorgefabriceerde design elementen kunnen betrokkenen gemakkelijk consistente uitingen produceren.
  • Schaal: Denk je dat je bedrijf of product assortiment gaan groeien? Design systems groeien moeiteloos mee met je ambities omdat ze digitaal en daarmee flexibel zijn.
  • Teamwork: Teamleden, design bureau’s, service partners en andere betrokkenen zien dezelfde informatie en werken als één team aan dezelfde branding.
  • Efficiëntie: Wil je processen versnellen? Moeten front-end ontwikkelaars, designers en projectmanagers samenwerken? Met een design system spreekt iedereen dezelfde taal en zijn er geen misverstanden over de details.

Met de komst van het internet ontstond ook een complexiteit aan informatie en bedrijfsstructuren. Allerlei nieuwe disciplines, verschillende computer systemen, internationale vestigingen, etcetera, maken het moderne samenwerken tot een echte uitdaging. Mensen uit verschillende teams en/of zelfs landen werken samen aan dezelfde merkidentiteit, en dit moet goed beheerd en gecontroleerd worden.

Een design system is daarvoor een perfecte oplossing. De compacte versie is een online style guideHet volledige design system bestaat uit een bibliotheek gevuld met designprincipes, style guide, UX en UI visual-design, frontend-componenten, technische documentatie, tone of voice, copywriting en meer.

Waaruit bestaat een design system

De structuur van een design system is afhankelijk van de complexiteit van de merkidentiteit. Voor grote bedrijven zal deze zeer uitgebreid zijn. Voor een MKB’er kan deze begrensd zijn tot een visuele style guide voor een kleine huisstijl, print uitingen en website.
De volgende informatie is de basis voor de meeste design systems:

  • Bedrijf: Waar staat het bedrijf voor? Wat zijn de missie en visie? Welke doelgroep wil je bereiken?
  • Design principes: Deze basisprincipes definiëren de kernwaarden van je product(en) en team. Goede ontwerp principes onderscheiden je producten, definiëren je waarden en helpen bij het bepalen van succesvolle resultaten.
  • Logo: Hoe zien de verschillende logo varianten eruit en hoe mogen die gebruikt worden? Mag het beeldmerk los gebruikt worden van het woordmerk? Hoe worden de tagline en kleuren toegepast in het logo?
  • Tagline: Een tagline, of pay-off, beschrijft het bedrijf nog concreter. Het is verstandig om deze ook vast te leggen in het design system, want deze kan ik de toekomst veranderen.
  • Kleuren: Een belangrijk visueel onderdeel van de branding zijn de kleuren. Een kleurenpalet moet geschikt zijn voor online- en offline uitingen. RGB, Hex, PMS, CMYK en RAL zijn gangbaar. Lees hier meer over de 5 kleursystemen.
  • Typografie: Een set goed gekozen lettertypen bepaalt de stijl van het logo en daarmee het DNA van je merkidentiteit. Hoe worden deze lettertypen toegepast in huisstijl ontwerpen? Gebruik je retail fonts of heb je een eigen custom font? Werk je internationaal en heb je lettertypen nodig met een uitgebreide taalextensie?
  • Brand style guide: Deze sectie met huisstijl elementen is wat uitgebreider en wordt vaak als geheel in een style guide opgenomen. Hier vindt je print- en web elementen als briefpapier, visitekaartjes, enveloppen, email handtekeningen, etc.
  • Code style guide: Consistentie is niet alleen belangrijk in wat je gebruikers zien, maar ook in wat je team produceert. Een code style guide bevat conventies en best practices voor het produceren van beheerbare, schaalbare HTML code die andere teamleden gemakkelijk kunnen begrijpen en hergebruiken.
  • Visuals: Een beeld zegt meer dan 1.000 woorden. Onder visuals verstaan we illustraties, pictogrammen / iconen, foto’s en animaties. Deze kunnen illustratief of suggestief van aard, maar ook direct en informatief zijn. De keuze voor foto’s met vrolijke mensen in de natuur of harde industriële gebouwen is zeer bepalend voor de uitstraling van de identiteit. Visualiseer wie jij bent.
  • Teksten: Tone of voice is de stijl waarin een bedrijf of merk communiceert met haar doelgroep, het is letterlijk de ‘stem’ van de organisatie. Een uniforme tone of voice in tekst én beeld zorgt voor een herkenbaar en geloofwaardig imago.

Dit voorbeeld is een uittreksel van de Assets en Typography style guide, een onderdeel van het design system van de TBinnovators branding die wij ontworpen hebben.

TBinnovators design system Assets - Rene Verkaart
TBinnovators style guide Assets
TBinnovators style guide Typography
TBinnovators style guide Typography

Huisstijl management: bewaak je merk

Mooie en consistente merkidentiteiten zijn succesvoller. Wij besteden veel aandacht aan een unieke en opvallende merkidentiteit met een sterk verhaal. Van responsive webdesign, webshops, apps, tot creatieve campagnes en traditionele print media. Een correcte omgang met huisstijl management is hierbij cruciaal. Het hebben van een design system is een goed begin, maar niet voldoende. Het gaat tenslotte om je merkimago.

Design System Audit: Heb jij een design system nodig?

Niet ieder bedrijf heeft een design system nodig, maar vanaf een bepaalde schaal en complexiteit is het zinvol om je merkidentiteit, team en externe partners te stroomlijnen. Onder de streep begint het met de vraag:
Werken er meerdere mensen aan mijn merkidentiteit en zijn de uitingen visueel en inhoudelijk consistent?

Met onze kennis en ervaring sinds 1995 weten wij precies waar de knelpunten bij het managen van merkidentiteiten en samenwerkingspartners liggen. Heb je meer begeleiding en structuur nodig bij je huisstijl management? Hoe uitgebreid en schaalbaar moet jouw systeem zijn? Met onze persoonlijke Design System Audit weet jij als ondernemer precies wat je aan een design system hebt.

Boek een Design System Audit

Wil je een nieuwe huisstijl met een design system laten ontwikkelen? Heb je al een huisstijl waarvoor je een design system nodig hebt? Maak een afspraak voor een Design System Audit om de mogelijkheden te bespreken.

Design System Audit aanvragen