Wireframes, tijdsbesparend en helderheid vroeg in het proces.

In de zoektocht naar een goede webdesigner kom je nogal wat verschillende termen tegen. Hoe kom je er nou achter wat deze betekenen en waarom je bepaalde onderdelen wel of niet nodig hebt? Ik leg je graag uit wat mijn proces is en waarom ik bepaalde fasen met mijn klanten doorloop. Vandaag: Wireframing.

Wireframes, Wat zijn dat nou precies?

Een Wireframe is een schetsmatige weergave van de content en functionaliteiten van je website. Er zijn nog geen design elementen als typografie, kleuren of beelden aanwezig. Wireframes worden gebruikt om lay out, content structuur en ‘flow’ van de gebruiker (de route die de gebruiker aflegt) visueel te maken.

User Flow Wireframe

De User Flow is de route, of verschillende routes, die een gebruiker af kan leggen binnen de website of app.
Binnen de User Flow worden verschillende pagina’s, knoppen en links en hoe zij met elkaar in verhouding staan gevisualiseerd.

Low Fidelity Wireframe

Een Low Fidelity Wireframe is een allereerste snelle schets van de indeling van de lay-out en structuur van de content. Low Fidelity Wireframes worden vaak met pen en papier gemaakt om zo snel mogelijk alle ideeën visueel te krijgen en snel te kunnen itereren zonder direct in de details te duiken. In dit stadium is de kans groot dat er nog geen definitieve content aanwezig is. Als het goed is heb je (naar aanleiding van de strategie sessie) wel een idee van het type content dat onderdeel moet zijn van de website: Header, Footer, Call to Action, Blog, Social Media, Zoekfunctionaliteit en een Nieuwsbrief Opt-in.

Medium Fidelity Wireframe

In de Medium Fidelity Wireframes worden keuzes gemaakt met betrekking tot hiërarchie, welke onderdelen van de content of functionaliteiten zijn belangrijker dan anderen, en wat voor soort grid gaat er gebruikt worden? Naar aanleiding van deze wireframes zal er ook een duidelijk beeld zijn welke content exact ingevuld dient te gaan worden.

High Fidelity Wireframe

Zonder in Sketch te starten en daadwerkelijk aan het design van de website te beginnen wordt hier wel een begin gemaakt aan de daadwerkelijke website. De definitieve content wordt geplaatst in de vorm van tekst en iconen. In dit stadium wordt nog steeds geen beeld of typografie gebruikt. Hierna is wel een heel exact beeld van de flow, lay-out in hiërarchie van de content van de website.

Waarom heb ik wireframes nodig?

Het wireframing proces stelt je in staat eventuele problemen in de flow of structuur van je website vroeg te spotten, alvorens je weken hebt geïnvesteerd in de look & feel van je website. Het is vele malen makkelijker veranderingen aan te brengen in je wireframes dan in je uiteindelijke design, of nog erger als je website al (deels) ontwikkeld is. Het dwingt je vooraf na te denken over de doelen en prioriteiten met betrekking tot je website. Wil je een product verkopen of je doelgroep iets bijbrengen? Wireframing helpt je deze vragen te beantwoorden.

Wat levert het mij op?

Ondanks dat je misschien in eerste instantie schrikt van de uren in de offerte die ‘extra’ lijken verdien je deze uren in de design- en developmentfase dubbel en dwars terug.. Uiteindelijk scheelt wireframing je dus tijd en geld en ontwikkel je een website die vele malen doeltreffender is dan een website waar direct gestart is met design en ontwikkeling. Je neemt de tijd om na te denken over je doelgroep en doelstellingen en spot eventuele bottle necks al vroeg in het proces. Shooting for the stars? Sla wireframing dan zeker niet over.

Is je interesse gewekt?

Ik kom graag vrijblijvend kennismaken om van gedachten te wisselen hoe we wireframing in kunnen zetten om je volgende project nog succesvoller te maken. Mail me voor een afspraak!