Konden merken vroeger af met een strakke huisstijlgids, vandaag de dag moet de ontwerper bedrijven hier bijna dagelijks in begeleiden. Samen met de opdrachtgever stelt hij een bouwpakket samen van de specifieke merkstijl en de bijbehorende interface-elementen die gezamenlijk een herkenbaar geheel vormen. Zo’n bouwpakket is niet compleet zonder een bruikbare handleiding. Hoe ga je te werk bij het samenstellen van een goede stijlhandleiding?
Tekst: Wessel Jansen
Een duidelijk herkenbare en consistente merkidentiteit is in het digitale landschap belangijker dan ooit. Maar tegelijkertijd zorgt de razendsnelle ontwikkeling van nieuwe digitale technieken, mobile en responsive webdesign ervoor dat de merkidentiteit van elke organisatie constant in ontwikkeling is.
Een stijlhandleiding onderbouwt de beeldtaal van een merk. Het geeft richting aan het gebruik van de grafische elementen, zoals logo’s, typografie en kleur, die samen een herkenbaar geheel vormen. Hiermee kunnen ontwerpteams verschillende mediaproducten van een merk op een consistente wijze vormgeven.
Conceptueel gezien zijn stijlhandleidingen essentieel om de identiteit en uitstraling van een merk te bewaken. In de praktijk zijn het echter vaak statische momentopnames die aan het eind van een project worden samengesteld. Er wordt weinig tot geen rekening gehouden met de snelle ontwikkelingen van het digitale medialandschap. Hierdoor raken deze ‘gebruiksaanwijzingen’ snel verouderd en verliezen ze hun waarde. Organisaties lopen vervolgens het risico dat hun identiteit en merkbeleving gaan afwijken van het initiële concept.
Nieuw soort
In tegenstelling tot traditionele media zijn digitale producten en diensten altijd in ontwikkeling. Het komt daarnaast zelden tot nooit voor dat hier één vast ontwerpteam bij betrokken is. Regelmatig schuiven nieuwe ontwerpers en programmeurs aan om aanpassingen te bedenken en door te voeren. Er is dus een behoefte ontstaan aan een nieuw soort stijlhandleiding die rekening houdt met innovatie en de workflow van ontwerpteams.
Hoe gedetailleerd de handleiding moet worden is afhankelijk van de wensen van de opdrachtgever. In de meeste gevallen is een digitale stijlhandleiding bedoeld voor ontwerpers, content-ontwikkelaars en programmeurs. Dit houdt in dat alle verschillende onderdelen uit de handleiding toegankelijk moeten zijn voor een brede doelgroep.
Verken mogelijke manieren om een digitale identiteit te documenteren. Naast Material Design van Google [zie kader, red.] zijn er veel goede digitale stijlgidsen online beschikbaar ter inspiratie.
Drie onderdelen
Doorgaans bevat een goede stijlhandleiding voor digitale producten de volgende drie onderdelen:
- gebruiksvriendelijke interactie elementen en functionaliteiten;
- consistente stijlelementen die de merkidentiteit- en beleving van het desbetreffende merk weerspiegelen;
- schaalbare user interface componenten die samen een digitaal product vormen.
Het is belangrijk om de totstandkoming van een stijl stapsgewijs toe te lichten. Presenteer daarom alle belangrijke stijlcomponenten op een heldere manier. Dit kan met behulp van visuele voorbeelden, tekstuele toelichting en geschreven code.
Style tiles
Een schaalbare merkidentiteit moet in staat zijn om op elk denkbaar schermformaat dezelfde uitstraling te hebben. Dat is makkelijker gezegd dan gedaan. Het is belangrijk om tijdens de startfase van een project goed na te denken over mogelijke stijl- en interactie-elementen. Een handige methode om dit eenvoudig te presenteren is door style tiles te ontwikkelen. Style tiles zitten tussen moodboards en design templates in. Ze bevatten de belangrijkste stijl- en interface elementen van een merk in één overzicht, bijvoorbeeld het logo, de typografie, het kleursysteem, knoppen en beeldmateriaal.
Aan de hand van style tiles kunnen belangrijke ontwerpbeslissingen al in de beginfase van een project worden genomen. Ze zijn ideaal om een discussie over het uiterlijk van een eindproduct op gang te brengen, zonder direct pixel-perfect templates uit te werken. Hierdoor kan men veel tijd en geld besparen.
Componentenbibliotheek
Tijdens en na de productie van digitale producten is het belangrijk om overzicht te houden. Organisaties kunnen overwegen om een componentenbibliotheek samen te stellen: een overzicht met alle UI-componenten, waarin interface- en stijlelementen eenvoudig aangepast of aangevuld kunnen worden.
Een mooi voorbeeld is de Pattern Library van Mailchimp. Het nieuwsbrief-marketingplatform staat bekend om zijn gebruiksvriendelijkheid en speelse tone of voice. Ook in de presentatie van de richtlijnen gebruikt het deze principes. In de inleiding beschrijft MailChimp de volgende voordelen van een algemene code en UI-elementen bibliotheek:
- efficiëntie: consistente ontwikkeling met focus op workflow;
- duurzaamheid: geschreven code gemakkelijk hergebruiken;
- onderhoud: alle componenten op één plek creëert overzicht en consistentie.
Weerspiegeling
Een stijlhandleiding is een goed middel om de totstandkoming van beeldtaal stapsgewijs toe te lichten. Om ervoor te zorgen dat de opdrachtgever zoveel mogelijk kan deelnemen tijdens het ontwerpproces, moeten alle losse stijlcomponenten op een heldere manier worden gepresenteerd. Geef advies hoe ze er naar moeten kijken en het eventueel zelf kunnen presenteren. Hun begrip is tenslotte een weerspiegeling van uw presentatie.
------------------------------------------------------------
Google Material Design
Tijdens het jaarlijkse Google I/O event presenteerde Google dit jaar Material Design, een digitale stijlhandleiding waarin het bedrijf zijn responsive design systeem onderbouwt. Material Design heeft twee doelen:
- een beeldtaal ontwikkelen die de klassieke ontwerpprincipes met innovatie en de mogelijkheden van technologie en wetenschap samenbrengt,
- een onderliggend systeem ontwikkelen dat leidt tot een gelijkmatige gebruikerservaring op verschillende platformen en apparaten.
Hiermee slaat Google de spijker op de kop. Het ‘levende’ document bevat een rijk aantal animatie- en stijlcomponenten, die zijn afgeleid van drie doordachte designprincipes. Designteams binnen Google kunnen hiermee aan de slag om op een consistente en efficiënte manier producten te ontwikkelen van hoge kwaliteit, zonder dat hun creativiteit wordt belemmerd door strakke vastgestelde regels.
------------------------------------------------------------
Wessel Jansen is visueel designer bij Jungle Minds, bureau voor digitale innovatie.
Dit artikel verscheen eerder in Twinkle 1-2015.
Er is op dit moment 0 keer gereageerd op:
Vaktrend: het vloeibare digitale merk
Je kunt niet meer reageren op dit artikel.