Als UX/web-designer word ik vaak gevraagd naar mijn werkwijze. Waar begin je? Hoe ontwerp je een goede en gebruiksvriendelijke website?

Als UX Designer word ik vaak gevraagd naar mijn werkwijze. Waar begin je? Hoe ontwerp je een goede en gebruiksvriendelijke website? Hoe verplaats je je in de gebruiker? Het hele proces uitleggen in één blog is niet te doen, dus heb ik één essentieel element gekozen waar ik dieper op in wil gaan: wireframing.

Schetsen

Laat ik eerst kort uitleggen wat wireframing precies inhoudt. Wireframes kun je zien als de ‘schetsen’ of ‘blauwdrukken’ van een website. Met alle vergaarde informatie uit gebruikersinterviews en persona’s creëren we ruwe schetsen, die we ook wel Low-Fidelity Wireframes noemen. Dit doen we gewoon ‘old school’ met pen en papier.

In deze wireframes wordt de structuur, navigatie en inhoud vastgesteld. Ik maak deze ‘schetsen’ voor iedere belangrijke pagina, zodat ik een duidelijk overzicht krijgen van de omvang en grootte van de website.

 

Wireframe-tekentafel

 

Het leuke van deze schetsen is de eenvoud en de overzichtelijkheid. Ik gebruik ze om onze ideeën door te nemen met klanten, maar ook intern om met het hele team te bepalen of ik op de goede weg ben. Mocht er iets zijn dat niet helemaal lekker gaat werken of niet gebruiksvriendelijk genoeg is, dan schiet ik direct terug naar de tekentafel om het aan te passen. Vele malen efficiënter natuurlijk dan later in het proces de final designs aan te moeten passen.

You can never be too sure

Next up? Nog één keertje doornemen. Zijn de schetsen voor iedereen te begrijpen? Begrijpt de gebruiker hoe de site straks gaat werken? Ja? Mooi!

Door naar de High-Fidelity Wireframes. De echte blauwdrukken van de website die ik ook ga gebruiken om het prototype te bouwen. Hierin worden tot in detail alle technische en visuele elementen verwerkt. Ik gebruik de final content voor zover die beschikbaar is, definieer specifieke interacties en geef de dimensies van containers en afbeeldingen tot op de pixel nauwkeurig weer.

 

highfidelity-wireframes-tekentafel

 

Alle plooien gladstrijken

Dan gaat het snel. De in Sketch gemaakte High-Fidelity Wireframes worden omgeturnd tot prototypes in InVision. Alles komt tot leven. Perfect om een tussentijdse usability-test uit te voeren! Wat vindt de doelgroep ervan? Toch nog wat last-minute aanpassingen om het geheel logischer te maken? Geen probleem, we passen het aan in de wireframes en testen het product nogmaals in het team, bij de gebruiker en bij de klant. Alle plooien gladstrijken voordat we aan de slag gaan met het daadwerkelijke design.

Nu vraag jij je zeker af: belanden al die wireframes na akkoord in de prullenbak? Zeker niet! Omdat ik de High-Fidelity Wireframes in Sketch maak, worden deze blauwdrukken gebruikt voor het uiteindelijke ontwerp van de website. De nog eenvoudige en kleurloze elementen uit de wireframes worden opgemaakt in de huisstijl van de klant waarna de website klaar is om door onze techniek afdeling gebouwd te worden.

Zo blijft de oude vertrouwde tekentafel een belangrijke rol spelen in onze digitale branche.

#sharing is caring