Wireframes: bepaal de ideale structuur voor jouw website

Wat zijn wireframes?

Wireframes zijn simpele lijntekeningen waarin wij de structuur van je website uittekenen. In deze tekeningen ligt de focus op de ideale opbouw, verhoudingen en navigatiestructuur van de website. Er wordt hierbij dus nog niet nagedacht over de uiteindelijke vormgeving van de website. Zo kun jij je volledig concentreren op de structuur van je website, zonder afgeleid te worden door visuele onderdelen. Later in het proces nemen we alle tijd voor de uiteindelijke vormgeving en zorgen wij voor een gelikt design en resultaat.

Waarom gebruiken wij wireframes?

De structuur van je website is een van de belangrijkste onderdelen. Je wilt immers dat de bezoekers van jouw website een optimale user experience ervaren. Om hierop in te spelen moet je in een vroeg stadium al nadenken over de route die de bezoekers op jouw website afleggen. Door aandacht te besteden aan de navigatie, de prioriteiten en de structuren binnen de site, werkt jouw website straks veel gevoelsmatiger voor jouw bezoekers. Zo voorkom je dat je je bezoekers gaat afleiden met spectaculaire afbeeldingen of functies en het voor hen niet vanzelfsprekend is hoe de website werkt.

Een andere belangrijke reden waarom wij wireframes maken, is om te controleren of alles aanwezig is. In wireframes wordt weergeven welke onderdelen waar te vinden zijn. Op deze manier kun jij snel zien of alle onderdelen volgens jou op de juiste plek staan en of er onderdelen missen. De wireframes zijn in verhouding nog makkelijk aan te passen. Wanneer een website in de bouwfase zit brengen aanpassingen vaak veel extra tijd en wellicht ook kosten met zich mee. Door in dit stadium al te bepalen of alle onderdelen en functies aanwezig zijn, voorkomen we dat er later in het proces nog grote structurele veranderingen moeten plaatsvinden.

Hoe komen wireframes tot stand?

Wanneer wij wireframes gaan tekenen, beginnen wij niet uit het niets iets te tekenen. Vooraf wordt de structuur van de website besproken op basis van drie onderwerpen:

• Hoe kan de informatie op de website het beste worden weergeven? Het moet voor de bezoeker overzichtelijk en eigenlijk vanzelfsprekend zijn hoe hij bij de gewenste informatie komt.
• Hoe zorgen we voor een duidelijke en overzichtelijke navigatie tussen de pagina’s en links?
• Hoe richten we de elementen in die de bezoeker nodig heeft om de website te gebruiken? Hierbij ligt de focus op gebruiksvriendelijkheid, duidelijkheid en efficiëntie.

De input vanuit deze drie onderwerpen worden samengevoegd. Zo wordt er op verschillende niveaus rekening gehouden met de optimale gebruikerservaring van een website. Hieruit ontstaan de wireframes.

Hoe ziet zo’n wireframe eruit en welke elementen komen hier in voor?

Een wireframe kan op drie verschillende manier worden weergeven. In een basis wireframe is heel eenvoudig met zwart/wit-tekeningen vlakken, lijnen en voornamelijk test-content geplaatst. Dit wordt ook wel een low-fidelity wireframe genoemd. In een high-fidelty wireframe worden meer details verwerkt. Hierbij kunnen koppen, buttons en body-teksten ook daadwerkelijk benoemd worden. Ook is het mogelijk om kleur, logo’s en foto’s toe te voegen in deze wireframes. Op de laatste manier wordt een soort interactieve animatie van de wireframes gemaakt. Voor onze klanten is het ook mogelijk om een click-model te maken van de wireframes in een online tool zoals Invision. Hierdoor kun je door de pagina’s en buttons heen klikken. Op deze manier krijg je een goede indruk van hoe de site werkt en navigeert. Ook is dit ideaal om de user experience van de bezoekers te ervaren.

Elementen in de wireframes

Een wireframe is opgebouwd uit verschillende elementen en iconen. Hieronder zie je een overzicht van de belangrijkste onderdelen die je tegen kunt komen:

1. Foto/ illustratie
Dit element gebruiken we als er op een specifieke plek ruimte wordt gemaakt om een passende illustratie of sfeerfoto te plaatsen. Dit kan een product zijn (in geval van een webshop) of een headerfoto boven aan de pagina.

2. Video
Om aan te duiden dat er plaats is gemaakt voor een video gebruiken wij een rechthoek met een Play-button in het midden. Dit kan een film zijn die vanaf de server wordt gestart of via een YouTube link.

3. Kader
Dit element in de wireframe vraagt niet veel uitleg. Dit element wordt gebruikt om afscheidingen in een website weer te geven. Een kader bovenop een grotere foto wordt vaak een wit of gekleurd vlak met inhoud er in.

4. Knop
De call-to-action knoppen worden aangegeven door middel van een tekst met een kader eromheen, al dan niet met een pijltje.

Tekstlink
Naast een call-to-action knop bestaat er ook nog een tekstlink. Dit element bestaat uit een woord met een streep eronder.

Waar moet je op letten?

Natuurlijk maken wij wireframes om de structuur van een website te bepalen, maar ook om te kijken of we op dezelfde lijn zitten met onze klanten. Daarom vragen wij ook altijd of zij feedback willen geven op de wireframes. Wij geven daarvoor een aantal richtlijnen die belangrijk zijn om in deze fase over na te denken:

• Menu: Is de opbouw van het menu zoals je wenst? Staan alle belangrijke onderdelen hierin?
• Stijl: Past het beeld bij jou idee? Is de geschetste stijl(opbouw) naar wens?
• Inhoud: Staan alle onderdelen erop? Moeten er nog onderdelen op sommige pagina’s worden toegevoegd?
• Tekst: Is er voldoende ruimte op de plekken waar je tekst wilt hebben? Moet er nog ruimtes worden toegevoegd of andere juist kleiner worden gemaakt?
• Prioriteiten: Staat de informatie op de juiste plek en in de juiste volgorde?

Dit zijn de belangrijkste vragen om bij stil te staan in dit stadium. Vragen over het design en de inhoudelijk tekst die op de website komt te staan, is pas later in het proces van belang. Zo wordt er in dit stadium alleen de focus gelegd op de structuur van de website. Vanuit hier wordt er gewerkt naar de optimale gebruikerservaring op jouw website.

Wil jij met behulp van wireframes bepalen of de structuur van jouw website optimaal is ingericht? Neem contact met ons op voor al je vragen en om te kijken wat wij voor jou kunnen betekenen!