Style guide

Style guides

Het design van een groot bestaat al snel uit tientallen schermen voor allerlei verschillende beeldformaten. En dan hebben we het nog niet gehad over alle varianten, oude versies en hersenspinsels die een designer in zijn bestand heeft staan. Hoe krijg je je design bij de juiste mensen? Wat dacht je van een developer die met je design aan de slag wil, of een collega designer die het project van je over gaat nemen? Een style guide biedt uitkomst.

In het kort

  • Alle varianten van alle elementen in een duidelijk overzicht.
  • Direct toegevoegde waarde voor het project.
  • Snel aan te passen.

Mijn style guide 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 elementen later in andere schermen terug gaan komen. Het lastige zit hem in het feit dat dit element vaak meer varianten heeft dan dat ik in het ontwerp laat zien.

Nu hoor ik je denken…allemaal leuk en aardig, Nick, maar wat bedoel je allemaal? Laten we daarvoor naar een voorbeeld kijken. Heb je wel eens stilgestaan bij het aantal varianten van een standaard tekstveld? 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 style guide biedt hier uitkomst. Elk element die ik ontwerp, plaats ik in mijn style guide. Zo vult deze ‘bibliotheek van elementen’ 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 2.0 project.