Hoe creëer je een style guide?

Als bedrijf, merk, persoon, etc. wil je niet all over the place overkomen. Je wil herkenbaar zijn voor je publiek en consistent zijn in wat je van jezelf of bedrijf laat zien. Hoe je elke keer weer diezelfde herkenbaarheid terug kan laten komen is via een design style guide. Een style guide is een reeks normen, principes en regels die elke ontwikkelaar of ontwerper moet volgen om de digitale aanwezigheid van het product te verbeteren.

Korte tips

Om te beginnen neem ik wat korte tips en tricks met jullie door, die je moet weten als je een style guide wilt maken.  

• Eerst het product ontwerpen en daarna de stijlgids.
• Je moet contact maken met de front-end ontwikkelaars.
• Zorg voor consistentie op alle pagina’s en neem tegelijkertijd het doel van het bedrijf en de behoeften van de klant op.
• Voeg alle mogelijke details toe, voor knoppen, titels, links, uitzonderingen, hoekgevallen, enzovoort. Het principe less is more werkt hier niet.
• Laat ontwikkelaars geen stijlen aanpassen op basis van persoonlijke voorkeur. Zorg ervoor dat ze jouw ontwerp-documentatie volgen.
• Promoot je style guide zo veel als je kunt. Houd je teamgenoten in de up to date met alle updates die je hebt.

Hoe creëer je een style guide?

Een competente lay-out heeft een stevige structuur erachter met een volledig responsief en betrouwbaar raster, waarbij de inhoud op de juiste manier wordt uitgelijnd. 

Om een ​​raster in te stellen, moet je rekening houden met bepaalde verplichte aspecten zoals container, eenheden, aantal rijen en kolommen, marges en rugmarge. Ontwikkelaars zijn vooral geïnteresseerd in de functionaliteit van het product, dus al jouw elementen moeten op de juiste manier worden geplaatst, zonder de lay-out aan te tasten.

Of het nu zwart, wit of een andere kleur is die je inspireert, de witte ruimte vertegenwoordigt de lege ruimte tussen de elementen van jouw ontworpen site. Profiteer van jouw ruimte door deze echt te gebruiken en probeer niet je inhoud te persen of te verspreiden. Zoek de middelste grond; witte ruimtes geven een elegante en vredige noot die de ogen ontspant terwijl de hoofdboodschap wordt benadrukt.

Begin met het uitpakken van de kleuren, zowel primaire als secundaire, op lichte en donkere achtergronden. Voor een opgeruimde look en een inspirerend resultaat, zorg ervoor dat ze er perfect uitzien gecombineerd als alleen.

Een correct opgebouwde typografie biedt de basis voor het creëren van een harmonieuze style guide. Houd indien mogelijk een of twee lettertypen vast om uw tekst door alle pagina’s een fijne leesbaarheid, duidelijkheid en consistentie te geven. Zorg ervoor dat je de details van de details invoert, zoals hiërarchie, gewicht, lijnhoogte, letter-spacing en voorbeelden van gebruik in jouw product.

Het kan even duren om te zoeken en de juiste afbeeldingen voor jouw site te kiezen, maar als alles goed is, zal het resultaat spectaculair zijn. Investeer tijd in het zoekproces, want afbeeldingen brengen emotie met zich mee en verbinden de gebruiker op een visueel niveau.

Heb je niet het budget om foto’s te kopen? Geen probleem, kijk eens op sites zoals Unsplash. Zorg wel dat de afbeeldingen ook weer toevoeging geven aan jouw product en binnen de style guide passen. Zo kan je bijvoorbeeld kijken of het kleurenschema er wel bij past, of je past het aan met een fotobewerkingsprogramma.

Het ontwerpen van de componenten van jouw product kan veelvoorkomende problemen oplossen zoals navigatie, CTA-knoppen, formulier elementen, meldingen enzovoort. Verbeter je style guide door deze nuttige elementen toe te voegen die consistentie creëren en een beter totaalbeeld geven. Elk van hen heeft zijn eigen persoonlijkheid, zijn eigen regels en eigenschappen die zowel individueel als samen kunnen communiceren, als onderdeel van een evoluerend systeem.