logo

Weg met de webpagina!

De digitale variant van het aloude huisstijlhandboek

Tijdens strategische sessies definiëren we expliciet onze doelgroepen, de online doelstellingen en gaan we dieper in op de functionaliteiten die nodig zijn om de website succesvol te maken. Die strategie vertalen we naar schetsen, de zogenaamde wireframes, om een beeld te geven hoe de gebruiker snel zijn doel bereikt. Na wat iteraties presenteren we dan een aantal visueel uitgewerkte pagina’s.

Als eerste...
Dit artikel verscheen eerder op swis.nl/blog

Pixel perfecte webpagina’s

Het grootste probleem met het ontwerpen van volledige, pixel perfecte pagina’s is echter dat het een inaccurate weergave is van hoe de eindgebruiker de website uiteindelijk zal ervaren. Pagina’s worden als statische afbeeldingen gepresenteerd en de tekst in een titel heeft heel toevallig altijd een voor het ontwerp perfecte lengte. Daarnaast: pagina-ontwerpen schalen simpelweg niet mee en een plaatje vertelt ons niets over hoe een knop er uitziet als je er met de muis overheen gaat.

Lettertypes, interlinie en spatiëring worden altijd toch net weer anders weergegeven op verschillende browsers en platforms en uiteindelijk komt er altijd een minder fraaie foto op de website dan de ontwerper aanvankelijk in zijn ontwerp heeft gebruikt. Weg met die webpagina’s dus.

De digitale variant van het aloude huisstijlhandboek

Maar, er is tegenwoordig een heel bruikbaar alternatief: design een systeem, en geen pagina. Een designsysteem brengt branding, kleur, typografie, animaties, user experience, tone of voice en fotografie bij elkaar en geeft een vormgever zijn krachtigste gereedschap terug: beeldtaal. Maar hoe doe je dat dan?

Een designsysteem is in essentie de digitale variant van het aloude huisstijlhandboek. Maar waar een huisstijlhandboek vertelt hoe iets er uit ziet, vertelt een designsysteem ons ook hóe het werkt. En in onze wereld van user experience, waar de gebruiker centraal staat, is dat cruciaal.

Terwijl we eerst een grafische uitwerking van een aantal van de belangrijkste schermen opleverden kun je in een nieuwe situatie voorstellen dat er door de visual- en UX designer heel andere zaken worden opgeleverd:

  • Een aantal wireframes van de belangrijke user flows en functionaliteiten.
  • Een moodboard met voorbeelden voor de tone of voice en het type fotografie.
  • Een digitale style guide met kleuren, iconen, lettertypes en lettergrootte voor koppen en broodtekst.
  • De individuele bouwstenen (vaak ook in werkende HTML-prototypes of kleine stukjes code) voor knoppen, tab-sets, sliders, navigatie en alles wat bijvoorbeeld nodig is om formulieren te maken.
  • Om alle componenten van ons voorstel samen te brengen kunnen we alsnog een aantal belangrijke schermen ontwerpen om de product owner in ieder geval een gevoel te geven van hoe deze er uit gaan zien en hoe alle losse componenten samenwerken, uiteraard met alle eerder genoemde kanttekeningen.

In essentie produceren we alleen de losse bouwstenen, aangevuld met workflows en prototypes om te tonen hóe iets werkt. We knippen onze interface letterlijk op in kleinere stukken.

Atomic design

Brad Frost schreef er een interessant boek over: Atomic Design. In dit boek beschrijft hij hoe we interfaces kunnen opdelen in atomen, moleculen, organismen, templates en uiteindelijk schermen. Een korte uitleg:

Atomen zijn alle kleine onderdelen: een kleur, een invoerveld, een knop, een titel, een label. Een titel, label, input en een knop kunnen samen een weer molecuul vormen om je bijvoorbeeld voor een nieuwsbrief in te schrijven. Zo’n formulier kan ook weer onderdeel van een footer zijn, de onderkant van de webpagina waar we een navigatie en de social media knoppen vinden. Al deze elementen vormen dan samen een organisme.

Dat is het moment waarop een interface concreter wordt. Met templates brengen we de organismen samen en kunnen we bekijken hoe de verschillende functionaliteiten zich tot elkaar verhouden. Pagina’s zijn uiteindelijk specifieke vormen van een uitgewerkte template.