Wireframes en design

Homepage

Wat zijn wireframes?

Heb je ooit al eens een architect een huis zien bouwen zonder plan? Een bouwtekening zorgt ervoor dat je overzichtelijk kan zien waar de muren, ramen, deuren en verwarmingselementen zullen komen zonder dat je hoeft te weten welke kleur de vloeren of muren zullen krijgen. Ook een website of webapplicatie wordt best gebouwd volgens een plan. Want net zoals bij een huis geldt dat hoe beter het plan is, hoe efficiënter en aantrekkelijker de website gebouwd zal worden. Het bouwplan van een website of webapplicatie noemen we een wireframe.

Hoe zien wireframes eruit?

Een wireframe is een eenvoudige visuele weergave van de structuur van je website. Het illustreert de opbouw van de website en hoe pagina’s met elkaar in verbinding staan. Een wireframe moet vooral functioneel zijn en legt de nadruk op usability en gebruiksvriendelijk (UX). Een wireframe heeft dus niet als doel er mooi uit te zien. Het bevat daarom weinig of geen tekst en afbeeldingen en wordt vaak opgebouwd in zwart, wit en grijs. De focus bij een wireframe ligt op volgende elementen:

  • Structuur: hoe hangen de pagina’s aan elkaar?
  • Lay-out: hoe worden de verschillende onderdelen op de pagina’s geplaatst?
  • Navigatie: hoe ziet de menustructuur van de website eruit?
  • Functionaliteit: welke elementen zijn noodzakelijk om de interactie, gebruiksgemak en efficiëntie van de website te bepalen?

Het ultieme doel van wireframes is het vastleggen hoe de website zal werken en niet zozeer hoe de website eruit zal zien. Daarover buigen we ons pas in de volgende fase van het project: het design.

Wireframes besparen tijd en geld

Hoe groot of klein een website of webapplicatie ook is, onze ervaring leert ons dat het altijd verstandig is om te starten met het maken van wireframes. Klanten denken vaak dat wireframes alleen maar tijd en geld kosten, maar niets is minder waar. Het maken van wireframes zorgt ervoor dat er voorafgaand aan het design en de ontwikkeling van een website al goed wordt nagedacht over hoe die functioneel en structureel in elkaar moet zitten. Uiteindelijk bespaart het dus heel wat tijd, geld en discussies doordat er tijdens het ontwikkelingsproces niet continu wijzigingen nodig zijn. Bovendien zorgt het ervoor dat alle betrokken partijen op dezelfde lijn zitten waardoor het ontwikkelingsproces een stuk vlotter zal verlopen.

LO-FI en HI-FI wireframes

Bij het uittekenen van wireframes onderscheiden we twee verschillende soorten: low-fidelity en high-fidelity. Het niveau geeft aan hoe dicht een wireframe bij het eindproduct zit. Een low-fi wireframe omvat een ruwe schets van de basisstructuur, meestal op papier. Het is iets dat vaak gebeurt door klanten zelf om iets duidelijk te maken. Het is eenvoudig en snel gemaakt, maar maakt het delen met andere betrokkenen moeilijker. Een hi-fi wireframe omvat meer detail, beschrijft de interacties en wordt meestal getekend in softwareprogramma’s zoals Invision of Figma. Ze zijn laagdrempeliger voor de klant omdat ze dichter aanleunen tegen een design. Welke versie onze designers gebruiken, is afhankelijk van het project en de vraag van de klant.

User eXperience (UX)

Je wil een website of webapplicatie hebben waarvan gebruikers tevreden weggaan en waarnaar ze met plezier terugkomen. Tijdens het uittekenen van de wireframes ligt de focus daarom volledig op gebruiksvriendelijkheid (Usability) en User eXperience (UX). Je wil je bezoekers of gebruikers namelijk op de juiste manier door de website of webapplicatie leiden. Een goede User eXperience kan het verschil maken tussen veel conversie of gemiste kansen.

Alvorens we starten met het uittekenen van de wireframes zullen we eerst proberen een beeld te vormen van volgende zaken:

  • Wat is het doel van de website?
  • Wat wil je in de verf zetten op de website?
  • Waar zit de doelgroep op te wachten?

Zo zorgen we er onder andere voor dat bezoekers met een minimaal aantal clicks vinden wat ze zoeken en dat de call-to-actions op de juiste plaats staan. Heb je een digitale strategie laten uitvoeren, dan werden bovenstaande vragen al beantwoord en uitgeschreven in het digitale transformatieplan.

The best designers and the best programmers are the ones that can determine what just doesn’t matter. That’s where the real gains are made.

Jason Fried

Na de wireframes komt het design

Het oog wil ook wat: deze uitspraak geldt zeker ook voor websites en webapplicaties. Naast een duidelijke navigatiestructuur speelt ook het uiterlijk een belangrijke rol. Nadat iedereen het eens is over de wireframes, kunnen onze designers starten met het inkleuren ervan, namelijk het maken van de designs. Hierbij wordt onder andere rekening gehouden met de huisstijl van de onderneming, typografie en kleurschema’s. Als de huisstijl het mogelijk maakt, zullen onze designers kiezen voor complementaire kleuren zodat het contrast op de website evenwichtig is.

De visuele elementen van het webdesign moeten samengaan met een ​​duidelijke en beknopte boodschap aan je bezoekers. Pagina’s met te veel inhoud zien er vaak slordig uit en kunnen de conversieratio beïnvloeden. Hoe komt dat? Visueel onoverzichtelijke pagina’s met veel tekst kunnen moeilijk leesbaar zijn, wat resulteert in desinteresse van de bezoeker waardoor ze niet terug willen komen of je website snel verlaten. Om te voorkomen dat dit gebeurt, is het raadzaam om het webdesign af te stemmen op de hoeveelheid inhoud van je website. 

Tijdens deze fase kan je het project beoordelen op het uiterlijk, want je krijgt een mooi beeld van hoe je uiteindelijke website of webapplicatie er zal uitzien op verschillende toestellen (dit noemen we het responsive webdesign). Door je website of webapplicatie zich te laten aanpassen aan het schermformaat, wordt de inhoud steeds op een goede manier weergegeven voor de eindgebruiker. Een responsive webdesign maakt je site mobile friendly, verbetert het uiterlijk op apparaten met zowel grote als kleine schermen en verhoogt de tijd die bezoekers op je website of gebruikers op de webapplicatie doorbrengen.

We zorgen ervoor dat je tijdens het project de wireframes en designs altijd kan bekijken. Zo kan je voortdurend feedback geven en creëren we een resultaat dat voldoet aan je verwachtingen. Ben je tevreden? Dan gaan onze ontwikkelaars aan de slag om de designs om te zetten naar een perfect werkende website of webapplicatie.

Tools en technologieën

Figma
Sketch
InVision

Wil jij je website of webapplicatie opfrissen?