Design system

Het design van een groot product of dienst bestaat al snel uit misschien wel honderden onderdelen voor allerlei verschillende beeldformaten. En dan hebben we het nog niet gehad over alle varianten, oude versies en hersenspinsels die de designers in hun bestanden hebben staan. Hoe krijg je je design bij de juiste mensen? Wat dacht je van een developer die met je UI design aan de slag wil, of een collega designer die het project van je over gaat nemen?

Bij Idean werken we veel met design systems. Sterker nog, in samenwerking met Adobe hebben we het boek Hack the Design System uitgebracht.

Inhoud

Wat heb ik aan een design system?

Een design system helpt om consistente visuele uitingen binnen je bedrijf op te zetten. Dit kun je van te voren doen (yes!), maar vaak gebeurt dit pas achteraf. Op dit moment heeft het bedrijf vaak al een wildgroei aan applicaties die stuk voor stuk net anders werken. Juist op dit moment helpt een design system.

Daarbij is een design system niet alleen gericht op visuele winst. Wanneer je een consistente manier van visuele uitingen hebt, is dit voor het development team eenvoudig te implementeren; ze hoeven elk component één keer te bouwen, waarna deze makkelijk te herbruiken zijn.

Dit betekent dat je als bedrijf niet alleen goed herkenbaar bent, maar jezelf ook zeer snel kunt ontwikkelen.

Hoe begin ik aan een design system?

Om een design system tot een succes te maken, moet het systeem door de hele organisatie gedragen worden. Dit begint met het opzetten van het kernteam die eindverantwoordelijk wordt voor het systeem. Dit zijn de mensen die het systeem ontwerpen, zoals designers, maar ook ontwikkelaars, marketeers en managers.

Dit team gaat samen met stakeholders de principes en richtlijnen opstellen waaraan elke visuele uiting van het bedrijf moet voldoen.

Mijn werkwijze

Wanneer ik een project begin, maak ik altijd een aantal groepen aan om mijn werk te verdelen. Eén hiervan is de stijlgroep. Naarmate het design voor een project groeit, groeit ook deze groep. Met elk scherm wat ik ontwerp, ontwerp ik componenten die later in andere schermen terug gaan komen. Het lastige zit hem in het feit dat dit component vaak meer varianten heeft dan dat ik in het ontwerp laat zien.

Als voorbeeld wil ik kijken naar het tekstveld. Dit is misschien wel het meest voorkomende component op een website of in een applicatie. Het is echter geen eenvoudig component, ook al lijkt dat wel zo. Een tekstveld heeft een aantal statussen, namelijk…

  • Standaard
  • Actief
  • Ingevuld
  • Goed ingevuld
  • Foutmelding

Het is zelden zo dat binnen een project budget is om schermen te ontwerpen die speciaal bedoeld zijn om deze varianten te tonen. Een design system biedt hier uitkomst. Elke component die ik ontwerp, plaats ik in het design system. Zo vult deze ‘bibliotheek van componenten’ zich automatisch, zonder dat ik daar extra tijd aan kwijt ben. Het resultaat? Een development team wat snel aan de slag kan waarbij het design geen belemmerende factor is.

De bovenstaande afbeeldingen komen uit het File Transfer UI en Inner Circle project. Dit zijn beiden projecten waarbij ik het UI design gemaakt heb. Bekijk mijn UI design portfolio voor meer voorbeelden hiervan.