Het voordeel van wireframes

7 mei 2014 15:05
Laatste update: 21 juni 2021 12:59
Door Chantal van de Vijver

Wat zijn wireframes?

Bij het ontwikkelen van een website is een wireframe (draadmodel) over het algemeen de eerst genomen stap. Wireframes zijn eenvoudige illustraties van de structuur en de componenten van een webpagina. Ze laten zien wat een websitebouwer van plan is met betrekking tot zaken als de plaatsing van elementen op een webpagina, de sitenavigatie, de inhoud van de site en de manier waarop bezoekers de website gebruiken. Meestal wordt een wireframe gemaakt voordat de elementen inhoudelijk worden ingevuld en voordat het  artwork wordt gemaakt.

Een wireframe is dus eigenlijk te vergelijken met een blauwdruk van een website. Bij de blauwdruk van een huis wordt niet precies beschreven wat voor tegels en douchekop in de badkamer komen, maar de algemene lay-out en plaatsing van de badkamer staan er wel in. Bij een wireframe zijn de elementen van een site nog niet inhoudelijk ingevuld, maar je kunt zien waar alles komt te staan en hoe de gebruiker er mee om moet gaan. Hoe gedetailleerd een wireframe precies is verschilt nogal, het hangt af van degene die hem maakt, maar je kunt er een goede algemene indruk van opdoen van hoe een website ongeveer gaat worden. Het is heel handig voor het ontwerpteam om dit wireframe als leidraad te gebruiken voor het verder invullen van alle elementen van een site.

Hoe maak je een wireframe?

Er is niet echt een goede of verkeerde manier om een wireframe te maken, belangrijkste is dat het vooral werkbaar moet zijn. Toch zijn er enkele dingen om over na te denken voor je je eerste wireframe maakt:

Je kunt nagaan welke zaken getoond moeten worden op elke webpagina en deze kan je weergeven in je wireframe. Denk bijvoorbeeld aan de belangrijkste interface elementen: header, footer, sidebar en de inhoud (content). Verschaf genoeg informatie om een idee te geven van hoe deze elementen eruit komen te zien.

Denk daarna aan verdere elementen die dit specifieke project zal moeten bevatten: zaken als een zoekveld, navigatie, tabs, interactieve elementen en illustraties of foto’s. Verwerk deze zaken in je wireframe.

Je hoeft nog niet alles tot in detail in te vullen. Het ene wireframe is gedetailleerder dan het andere. Als je het wireframe gebruikt als wegwijzer voor jezelf dan hoeft het niet al te gedetailleerd te zijn, je weet immers zelf wel ongeveer wat je wilt. Heb je een heel team dat aan je project werkt en gebruik je het wireframe als referentiepunt voor dat team, dan is het verstandiger om wat meer in detail te treden en een meer formele toon te hanteren. Die formele toon is ook verstandig voor als je je wireframe door de klant wilt laten bekijken.

 

 

Waarom wireframes?

Voor de allereenvoudigste projecten is een wireframe niet per se nodig, maar als het wat complexer wordt kan een wireframe je helpen om te zien welke elementen er precies moeten komen op de verschillende pagina’s van je website. Dit zijn enkele voordelen van het maken van een wireframe:

Verhelderen – Gebruik wireframes om een duidelijk beeld te krijgen van welke informatie nodig is voor je begint met ontwerpen

Focussen – Investeer tijd om uitvoerig te kijken naar de layout en de inhoud van je website

Begrijpen – Kijk eens goed naar hoe de site zal reageren op bezoekers, zonder dat je wordt afgeleid door drukke kleuren en designelementen

Aanpassen – Wireframes zijn makkelijk te maken en aan te passen zodat je de planningsfase soepel doorkomt

Specificeren – Geef je designers en ontwikkelaars een duidelijk pakket aan visuele specificaties

Verbinden – Betrek de klant intensief bij het planningsproces

Veiligstellen – Zet markeerpunten uit waar je naar terug kunt keren, om te voorkomen dat het project te uitgebreid wordt en je dingen opnieuw moet doen

Verfijnen – Je kunt terugkoppelrondes opzetten met je team en de klant

Profiteren – Bespaar tijd, geld en moeite door van te voren de belangrijke ontwikkelstappen vast te leggen

 

 

Wanneer maak je een wireframe?

Hoewel het nooit te laat is om een wireframe te maken, is het het handigst om er een te maken aan het begin van het ontwikkelproces. Ook als je een site opnieuw indeelt, oftewel herontwerpt, is het verstandig om te beginnen met een wireframe. Dat komt omdat wireframes je helpen om eerst de belangrijkste zaken op een rijtje te krijgen voordat het ontwerpproces begint.

Wireframes helpen om na te denken over wat het doel van de site is, hoe de structuur moet zijn, welke navigatie-elementen er nodig zijn, welke elementen op welke pagina thuishoren en wat er op de subpagina’s en landingspagina’s moet staan. Als je daar midden in het ontwikkelproces nog over na moet denken en er dan achter komt dat je niet op de goede weg zit, moet je alles weer omgooien en heb je dus een hoop werk voor niks gedaan. Dit wordt voorkomen door te beginnen met een wireframe.