071 - 576 13 23
Weg met de webpagina!

Weg met de webpagina!

door Erwin de Zwart op 30 november 2017


Tijdens onze 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.

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.

atomic design

Atomic design, het ontwerp van alle losse onderdelen als beeldtaal, rekeninghoudend met de onderlinge visuele verbinding van deze componenten, is dus een belangrijk onderdeel van een designsysteem. Het geeft ons namelijk niet alleen antwoord op hoe iets er uit ziet, maar ook op hoe het werkt.

De right tools for the right job

Moderne ontwerp- en prototype tools zoals Sketch, InVision en plugins als Craft en Zeplin zijn niet alleen perfect voor een goede workflow en participatie binnen ontwerp- en ontwikkelteams, ze blijken ook nog eens uitermate geschikt voor het maken van een designsysteem.

Binnen InVision is het mogelijk om prototypes en moodboards te maken en door de klant direct te laten beoordelen en becommentariëren als onderdeel van het designproces. Sketch, inmiddels hét belangrijkste gereedschap voor webdesigners, geeft binnen één bestand de mogelijkheid om een uitgebreid designsysteem op te tuigen. Door de centrale positie van ‘symbols’ binnen een project kunnen ontwerpers projectbreed één component voor het hele systeem aanpassen.

Goed verhaal, lekker kort

Het ontwerpen van een volledig designsysteem is een krachtige manier om grip op vormgeving en functionaliteiten te krijgen. Het zorgt voor consistentie over verschillende pagina’s, en bepaald niet alleen hoe iets er uit ziet, maar ook hoe het werkt onder verschillende omstandigheden. Weg met de webpagina als definitief eindproduct, op naar complete designsystemen waarin online strategie, vorm en functionaliteit samenkomen.

Wil je meer weten over vormgeving voor het web, of eens sparren met een goed kop koffie over wat we voor jouw bedrijf kunnen betekenen? Neem contact op met erwin@swis.nl