Wireframe

Een wireframe is een soort van schematische weergave van een website of een webpagina. Bij het ontwerpen en ontwikkelen van een website maak je er zowel voor je website alsook voor elke aparte pagina. De homepage is uniek. Designers en webbouwers kunnen dan in een later stadium aan de slag gaan met deze wireframes.

Een wireframe wordt vaak verward met een prototype. Maar er is wel degelijk een verschil tussen deze 2 begrippen. Een wireframe focust zich voornamelijk op de functionaliteit en de content maar niet direct op een strak uiterlijk. Het toont de lay-out van de pagina’s van een website zonder stijl, kleur of grafische elementen. Daarnaast is het doel om de informatiestructuur met bijbehorende content en navigatiefuncties te tonen.

Belang wireframe

Wanneer wordt een wireframe ingezet? Vanaf het moment dat de doelstelling van de website bekend is, kunnen deze uitgewerkt worden. Probeer zo vroeg mogelijk in het proces een visuele weergave van een website of applicatie te maken. Een wireframe kan op de volgende 2 manieren worden ingezet.

Communicatiehulpmiddel

Dankzij dit element communiceer je helder en duidelijk met de betrokken van dit project zoals je klant, projectmanager, front-end developer, programmeur, etc. Het is gemakkelijk om via een wireframe een concept te verduidelijken alvorens dit te verwoorden.

Concept aftoetsen

Daarnaast kan je dankzij een wireframe snel een concept of idee aftoetsen. Je gebruikt het niet alleen om te kijken of een idee goed uitgewerkt is maar ook of het gebruiksvriendelijk is. Zal de gebruiker wel weten hoe de website of applicatie werkt? Nadien zet je dit heel eenvoudig om in een werkend prototype. Zo kan je nog meer test-data verzamelen alvorens het concept verder uit te werken.

Wireframe maken

Hoe maak je een wireframe? Er zijn verschillende manieren om dit op te maken. Je kan dit zelf tekenen met behulp van een pen en ruitjespapier. Daarnaast zijn er ook een aantal programma’s die je hier zeker bij kunnen helpen. We leggen er hieronder 4 voor je uit. Natuurlijk zijn er nog meer programma’s die je kan gebruiken.

Microsoft Visio

Visio werd ontwikkeld als programma om complexe situaties voor te stellen en relaties in kaart te brengen. De aanwezige functies gaan veel verder dan het maken van wireframes. Je kan er namelijk nog veel meer mee doen.

Microsoft PowerPoint

Iedereen kent PowerPoint en heeft dit ongetwijfeld op zijn computer staan. PowerPoint is misschien niet bedoeld om een wireframe te maken want je moet alle elementen nog zelf ontwerpen. Maar gelukkig heeft Yahoo een bestand samengesteld waarin de meeste basiselementen van een webpagina opgenomen zijn. Dit scheelt voor de meesten een hoop tekenwerk.

Het grote nadeel van PowerPoint is dat er enorm veel tijd en werk in kruipt om iets te maken, en aan te passen. Daarnaast kan er ook discussie optreden omdat de elementen te netjes vormgegeven zijn.

Adobe Indesign, XD of Illustrator

Veel designers gebruiken Indesign, XD of Illustrator om een wireframe in elkaar te steken. Deze programma’s bieden namelijk veel tekenmogelijkheden. Daarnaast kan je ook eenvoudig de elementen verplaatsen. Hiervoor moet je wel over de nodige kennis en ervaring beschikken. Met deze programma’s van Adobe kan je juist ook heel getailleerd gaan ontwerpen, maar dit is bij een wireframe nog niet de bedoeling.

Balsamiq

Balsamiq is een erg gebruiksvriendelijk programma dat ontwikkeld werd als output en een echte ‘sketch style’ heeft. Hierdoor zal het voor iedereen steeds duidelijk zijn dat het om een grove schets gaat. Een nadeel van dit programma is dat je bij grote websites met heel wat verschillende documenten werkt. Je zal dus steeds erg georganiseerd moet werken om een overzicht te bewaren.

We raden je aan om te kiezen voor een programma waar jij gemakkelijk mee kan werken. Elk programma heeft zijn voordelen en nadelen, maar het belangrijkste is dat jij het programma gebruikt waar je je het beste bij voelt.

Soorten wireframes

Er zijn 4 verschillende soorten wireframes, van de meest eenvoudige tot de meest complexe soort. We leggen ze hieronder even voor je uit.

• Basiswireframe: dit wordt ook wel de low-fidelity prototype genoemd. Dit is een zeer eenvoudig schema voor een bepaalde pagina die meestal in het zwart-wit is opgesteld.
• Geannoteerde wireframe: dit soort wireframe voegt een groot aantal details toe aan een basiswireframe. Annotaties zijn korte aantekeningen. Deze bevinden zich meestal aan de zij- of onderkant van een wireframe. Hierin beschrijven ze de inhoud of functies en de reden en het doel van elk item.
• Gebruikersstroom-wireframe: zijn deze annotaties niet genoeg? Dan heb je meer informatie nodig. Deze wireframes kunnen volledig interactief zijn of ze bevatten een slideshow of collectie aan wireframes. Hiermee kan je duidelijk de gebruikersstroom laten zien.
• Interactieve wireframe: binnen de verschillende wireframes kunnen zich interacties zoals tikken, klikken en swipen voorkomen. Door deze toe te voegen aan de wireframe bespaart de ontwerper en ontwikkelaar veel tijd. Dit type wireframe kan enkel gemaakt worden in een bepaald soort software.

Ontdek meer SEO-termen!