De meerwaarde van wireframes voor maatwerk websites

Een website die staat als een huis

Een veelgemaakte fout bij het ontwikkelen van websites ontstaat uit ongeduld; de haast om zo snel mogelijk iets in de lucht te krijgen. Te werk gaan zonder doordacht plan. Direct content publiceren of afbeeldingen plaatsen zonder over de indeling na te denken. Natuurlijk, er mag best een beetje vaart achter zitten. Maar laat je steken vallen in de beginfase, dan zie je dat terug in het eindresultaat.

Als je geen basis hebt voor een website, zal dat je blijven achtervolgen. Probeer daarom de verleiding te weerstaan en duik niet meteen de details in. Veel beter: het metselen van een stevig fundament voor die nieuwe site. Een wireframe fungeert als bouwtekening voor ieder geslaagd project. Voor een website die staat als een huis.

Globale indeling

De indeling en het ontwerp van pagina’s bepalen grotendeels de beleving van toekomstige bezoekers. Verstandig dus, om eerst goed na te denken over de manier waarop je pagina’s inricht. Met wireframes maak je een ruwe schets en veranker je de globale indeling van pagina's en visuele elementen. Een onmisbare stap in onze werkwijze, want dit geeft vormgevers iets om mee aan de slag te gaan. Zij werken de schets uiteindelijk uit tot een compleet en aantrekkelijk design.

Usability en UX

Het wireframe heeft in de kern twee pijlers: usability en user experience (UX). Usability vertaalt letterlijk naar ‘gebruiksvriendelijkheid’. Kan een bezoeker eenvoudig vinden waar hij naar op zoek is? Wat is zijn doel eigenlijk? En draagt de websitestructuur hieraan bij? De user experience kijkt naar het totaalplaatje van de gebruikerservaring. Is de algehele beleving van de bezoeker optimaal? Brengen pagina's van het wireframe hem content die relevant en waardevol is?

Bekijk ook: Dit is het werk van een UX-designer

Wireframing

Waar een webdesign vaak kleurrijk en levendig is, zijn wireframes juist sober. Een kleurloos basisontwerp zonder in het oog springende elementen. Wel maakt het direct duidelijk waar menu’s, afbeeldingen en knoppen komen te staan op een pagina. Ook vragen we ons af hoe de vlakverdeling eruit gaat zien. En waar we bijvoorbeeld ruimte reserveren voor een paar overtuigende USP’s.

Een wireframe maakt bovendien de flow van je website inzichtelijk. Het bestaat om die reden meestal uit meerdere pagina’s. Denk aan de homepage, een detailpagina en een conversiepagina. In welke stappen komt een bezoeker bijvoorbeeld bij het contactformulier terecht? En via welke knoppen? Uiteraard is hier het streven om alles intuïtief aan te laten voelen.

Lo-fi & hi-fi wireframes

Om het nog ietsjes ingewikkelder te maken, zijn er twee soorten wireframes. Een lo-fi wireframe geeft antwoord op een simpele vraag: wat komt waar te staan? Je kunt dit zien als schets van de te ontwikkelen website, puur en alleen bedoeld om een idee te geven van de indeling. Een hi-fi wireframe komt een stapje dichterbij het daadwerkelijke design. Het geeft een helderder beeld van de uiteindelijke look & feel van de website – uiteraard nog zonder werkende functionaliteiten.

Meer lezen: Designkeuzes maken op basis van psychologie

Pagina-indeling

Iedere pagina heeft een bepaalde vlakverdeling: een verzameling rijen en kolommen die samen de indeling vormen. Wat bezoekers gemeen hebben, is dat ze over het algemeen van linksboven naar rechtsonder lezen. Maar hoe ze een pagina verder bekijken, loopt gigantisch uiteen. Een snelle beslisser wil waarschijnlijk meteen een bestelknop zien op je webshop. Terwijl iemand anders juist op zoek kan zijn naar zoveel mogelijk informatie voordat hij een aankoop doet. Afhankelijk van de pagina én de bezoeker bepalen wij welke indeling het effectiefst is.

Paginastructuur

Een doeltreffende paginastructuur verbetert de gebruikerservaring aanzienlijk. Oftewel: jouw site moet logisch opgebouwd zijn. Afgestemd op de bezoeker, om zijn klantreis zo soepel mogelijk te laten verlopen. Door uitvoerig onderzoek te doen naar jouw publiek weten we waar de behoeftes liggen. Zo stellen we de meest effectieve paginastructuur vast. Welke pagina’s hebben prioriteit? Beginnen we bijvoorbeeld met een dienstenpagina of moeten een paar indrukwekkende cases de aandacht krijgen?

Conclusie

Wireframes helpen om de vertaalslag te maken van concept tot ontwerp. Een onmisbare schakel voor ieder project, hoe groot of klein de website ook moet worden. Door te werken met een wireframe schets je een globaal beeld van de pagina-indeling en paginastructuur. Niet alleen handig om alvast een beeld te krijgen van het eindproduct, maar ook ideaal om keuzes te maken die passen bij de toekomstige bezoeker. Een intuïtieve gebruikerservaring en optimale gebruiksvriendelijkheid zijn hierbij belangrijke uitgangspunten. Met een wireframe als bouwtekening heb je altijd iets om op terug te vallen. Wij kunnen inmiddels niet meer zonder.

Niet zomaar een website op maat

VrijdagOnline bedenkt, ontwerpt en ontwikkelt al meer dan 10 jaar websites op maat. Dat doen we met een unieke PRFT-werkwijze. Aan de basis van onze projecten ligt een overzichtelijke Plattegrond, waarmee we doelgroep en markt in kaart brengen. Vervolgens stippelen we een Route uit richting doelstellingen en conversies. We stellen een Formule op voor aansprekende functionaliteiten, maar ook voor stijl en content. En ten slotte passen we alles toe in de Techniek, voor de ontwikkeling van een website die top in elkaar zit.

Onze steun en toeverlaat in ons werk is Umbraco CMS. De structuur en indeling van pagina’s die zijn bepaald in het wireframe verwerken we eenvoudig in een goedwerkende website. Makkelijk aan te passen en uit te breiden. Altijd mogelijk om nieuwe pagina’s te publiceren, volgordes te bewerken en nieuwe elementen en componenten toe te voegen.