Een wireframe. Wat is het en waarom heb je het nodig?

Tom Grims
Tom Grims
Misschien heb je de term weleens gehoord. Als je in het digitale design-vak zit natuurlijk wel, maar voor wie niet: dit korte artikel vertelt je wat het is en waarom het lastig wordt als je het weglaat uit het designproces.
Wireframe

Wat is een wireframe?

De bouwtekening van de website

Van origine is een wireframe een visualisering van driedimensionale objecten. Bij het bouwen van een website of app vormt een wireframe de weergave van het ‘skelet’ van een website. Het vormt een soort blauwdruk of bouwtekening. Net als bij de bouwtekening van een huis is het met een wireframe mogelijk om voorafgaand aan de bouwfase alle functionaliteiten een gebruiksvriendelijke plaats te geven. Er kan gemakkelijk geschoven worden met de verschillende elementen. Die elementen vormen samen een pagina. Hierdoor kom je tot de meest bruikbare en best passende opstelling van content op jouw pagina’s.

In het begin…

Een wireframe wordt al vroeg in het proces gemaakt. Het is een basisstructuur van een webpagina zonder dat daar al een ontwerp of inhoud aan is toegevoegd. Een wireframe kun je tekenen op papier, in HTML/CSS of je kunt een specifieke app gebruiken.

De veel abstractere sitemap waarmee normaal gesproken de ontwikkeling van een website begint, mondt uit in een wireframe. Het helpt om de focus te leggen bij de werking van de website en niet de opmaak. Het brengt de functionaliteiten van de site in kaart. Een wireframe laat de plaatsing van de functionaliteiten op de site zien. Er blijkt ook uit hoe ze samenwerken met de rest van de functies. Het kan dus ook zijn dat je tot de conclusie komt dat een bepaalde functie moet komen te vervallen omdat deze niet past in de eerder opgestelde lijst met doelen, het waarom een website te bouwen. 

Klantreis

Met een wireframe kun je zonder dat de opmaak en design in de weg zitten, goed overzien wat de klantreis is. Je kunt beoordelen of deze klantreis logisch en gebruiksvriendelijk in elkaar steekt. En dit alles natuurlijk altijd vanuit het zichtveld van de bezoeker, het outside in-principe. Een wireframe geeft ook inzicht in hoe een bezoeker tot een conversie komt. Of het gebruiksgemak voldoende is geoptimaliseerd en hoe je op de site navigeert.

wireframe_tekenen

Veel voordelen wireframe

  • Het maken van zo’n bouwtekening van je website, geeft je ook de mogelijkheid toekomstige uitbreidingen al te zien zonder dat je die meteen hoeft te bouwen. Daarmee is je website op de groei die je zeker gaat doormaken, voorbereid. Net als met een bouwtekening voor een huis waarop je eventuele toekomstige uitbouwen kunt uitwerken, zo kan dat ook bij een wireframe.
  • Het helpt ook de gebruiker (lees: eigenaar) van de website om niet meteen alles ineens op één tekening samen te voegen. Net als er bij een normale bouwtekening verschillende deeltekeningen zijn waarop bijvoorbeeld de elektriciteit of de verwarmingsbuizen zijn aangegeven, zo werkt dat ook bij een wireframe. Als het goed is zullen onderdelen als layout, creatieve elementen en/of de functionaliteiten afzonderlijk in kaart worden gebracht. Dit zal de gebruiker van de website helpen beter op één onderdeel te concentreren, met een beter resultaat tot gevolg.

Deze voordelen van het maken van een wireframe voorafgaand aan het bouwen van een website, zorgen ervoor dat iedere persoon die bij het bouwen betrokken is, weet wát er wordt gemaakt. Daarmee kunnen zij allemaal zorgvuldiger hun werk op dat van de andere experts laten aansluiten. Hierdoor zal het niet nodig zijn later in de websiteontwikkeling, nog iets te veranderen, aan te vullen, te schrappen of opnieuw te bouwen. Hierdoor wordt zowel een scope creep als een feature creep voorkomen. En dat spaart dus weer tijd en geld uit.

Van wireframe naar mockups

Op basis van een wireframe wordt door de designer één of meerdere mockups gemaakt. Waar een wireframe vooral gericht is op de plaatsing van elementen in het grotere geheel van de website, wat gaat waar, vormen de mockups een volgende stap in het designproces. Met een mockup wordt een veel realistischere impressie gegeven van de te bouwen website. Een gebruiker kan dan nog zonder dat er iets gebouwd is, een goede indruk krijgen van hoe de website er uiteindelijk uit komt te zien.

wireframe_mockup

Laat het wireframe niet weg

Hoewel beide designonderdelen veel van elkaar weg hebben, bezitten ze ook significante unieke eigenschappen binnen het webdesignproces. Stappen overslaan in een designproces is daarom echt niet aan te raden. Wil je graag meer weten over wij tot het eindresultaat van een website voor jouw onderneming komen? Vul dan dit formulier in en wij komen met je in contact voor een vrijblijvend gesprek.

Deel dit bericht

Share on facebook
Share on linkedin
Share on whatsapp
Share on email

Deel dit bericht

Share on facebook
Share on linkedin
Share on whatsapp
Share on email