Menu
the REFERENCE

De chemie van een ‘living style guide’

Een ‘living style guide’ is de ideale, wendbare en toekomstbestendige uitrusting om een merkimago om te zetten naar een visuele (digitale) voorstelling. In deze blog leren we u wat dergelijke ‘style guide’ is en hoe we deze implementeren in het aanbod voor onze klanten.

Een digitaal project vereist een nauwe samenwerking tussen diverse teamleden waarbij elke bijdrage naadloos moet samenvloeien in het geheel. We hebben het hier niet alleen over de ontwerpers en ontwikkelaars van een dergelijk project, maar dat begreep u vast al. We bekijken hier het bredere plaatje, dus daar komt ook de inbreng van strategen, analisten, ontwerpers, ontwikkelaars, testers… én de klant zelf natuurlijk, bij kijken.

Al deze betrokkenen interageren en definiëren samen de eindoplossingen die we bouwen. Zeer vaak is dit een vloeiend proces dat een efficiënte workflow vraagt, waar dit vroeger eerder een rigide proces was. Maar door de immer veranderende aard van digitaal, is dergelijk rigide proces niet altijd een goed idee. We moeten immers altijd wendbaar blijven. We moeten ook continu toekomstgericht denken. Wat bij aanvang ‘enkel een website’ is, kan snel evolueren naar een platform of een mobiele app, of zelfs naar een app op TV, of een VR ervaring. (Woehoew! We hebben zonet hét VR buzzwoord gebruikt in deze blogpost. Pluim voor onszelf!)

Om een lang verhaal kort te maken: we hebben een set tools en methodologieën, die ons helpen om te gaan met de vluchtige digitale wereld, aan onze noden aangepast. Eén van deze tools helpt ons om een merkimago om te zetten in een visuele voorstelling die door alle betrokken partijen in het digitale project kan worden gebruikt: de ‘living styleguide’.

Say what?

Een ‘living style guide’ is een enkel en uniek referentiepunt voor alle belanghebbenden om te bevatten hoe een digitaal project eruit zal zien, voelen en werken.

Met deze tool kunnen de ontwikkelaars en de ontwerpers in een veel sneller tempo werken. Het laat de ontwikkelaars toe om snel een functie te bouwen die naadloos past binnen de rest van het project en tegelijk trouw blijft aan de visuele branding die werd bepaald.

Ten voordele van de wendbaarheid laat dit aan het hele team toe om zaken simpelweg ‘aan te passen’ in de plaats van telkens vanaf nul te moeten beginnen wanneer nieuwe functionaliteiten vereist zijn, hetgeen het risico op inconsistenties verlaagt.

Style guides helpen ontwerpers ook om de bestaande merkrichtlijnen te vertalen in de complexe context van websites en apps die uiteraard perfect aangepast moeten zijn voor ieder scherm.

Hetzelfde geldt voor de ontwikkelaar. De ‘levende stijlgids’ helpt om het herschrijven van de zelfde codelijnen te vermijden. Het vermijden van duplicaten in CSS creëert een overzichtelijkere code en helpt om mysterieuze bugs te vermijden. Op deze manier wordt er ook tijd bespaart. De style guide vormt ook de opstap voor andere teams om over te nemen en verder te werken en op te bouwen.

Het kan ook een referentiepunt vormen voor de klant. Zij kunnen steunen op de style guide om elementen te implementeren in andere digitale projecten waaraan ze werken.

Dankzij zijn digitale aard, kunnen ze er ook zeker van zijn dat deze altijd up-to-date is.

Uiteindelijk, laat het ons toe een consistente gebruikerservaring naar uw klanten te creëren. 

De aanpak: de chemie van een style guide

We ontwerpen geen pagina’s, we ontwerpen systemen van componenten.
Stephen Hay

We implementeren de creatie van een style guide bij de start van al onze nieuwe projecten. De style guide herformuleert de ontwerp elementen naar een responsieve modulaire ‘component set’ met atomen, moleculen, organismen en pagina’s.

Atomen

 Atomic design - atoms

Atomen zijn de basis bouwstenen. Ze bevatten de fundamenten zoals de kleuren, knoppen en andere typografische elementen zoals headers of lijsten.

Atomic design - atoms - animated example

 

Moleculen

Atomic design - molecules 

Moleculen zijn kleine combinaties van twee of meer atomen. Denk bijvoorbeeld aan een eenvoudig teaser artikel.

Atomic design - molecules - animated example

 

Organismen

Atomic design - organisms 

Organismen bestaan uit een combinatie van molecule en atomen. Denk aan een volledige header sectie, or een ‘recente blogpost’ blok op de homepage.

Atomic design - organisms - animated example

Pagina's

Atomic design - pages 

Pagina’s vormen een meer compleet beeld waar combinaties van organismen een definitieve volledige pagina voorstellen.

Atomic design - pages - animated example

Het eindresultaat: alleen maar voordelen

Atomic design overview 

Deze ‘buildingblock-methodology’ is natuurlijk niet nieuw. Veel grote bedrijven werken immers met een ‘live style guide’. Wij deden veel inspiratie op bij de bestaande PHP frameworks zoals Patternlab, maar we hebben ook een manier gevonden om deze methodologie naadloos in onze workflow en (.NET) ontwikkelingsomgeving in te passen. We zijn hier heel trots op.

Onze implementatie:

  • Helpt onze teams om beter te presteren en zeer kwalitatieve producten af te leveren op een efficiënte manier
  • Stelt u, als onze klant, in staat om een duidelijke visie te hebben over uw digitale representatie, en een referentie te hebben voor toekomstige projecten en uitdagingen
  • Helpt uw klanten, aangezien zij de voordelen plukken van de consequente gebruikerservaring die u hen biedt in alle touchpoints met uw bedrijf.

In het thema ‘Eat your own dogfood’ bewijzen we dat we niet terugdeinzen voor het toepassen van deze slogan. De bovenstaande screenshots zijn afkomstig uit onze eigen ‘living style guide’ die we ook gebruiken voor de creatie van onze website.

Geïnteresseerd in het creëren van uw eigen 'living style guide'?
CONTACTEER ONS VANDAAG NOG!

Op de hoogte blijven?

top
more than digital
The Reference is niets zonder haar klanten. Carglass is de specialist in het herstellen en vervangen van autoruiten, waarvoor we een volledige responsive Sitecore website gebouwd hebben. Lees meer over deze klant.