Een huis bouw je met een plan. Een IKEA-kast ook. Je kunt immers veel fout doen en als het fundament niet goed is dan rammelt je huis (of IKEA-kast) aan alle kanten.

Een nieuwe website bouw je ook best met een plan. Hoe beter het plan, hoe efficiënter het bouwproces en hoe succesvoller je website zal zijn.

Het plan voor een nieuwe website wordt een ‘wireframe‘ genoemd.

In dit artikel lees je wat wireframes zijn, waarom wireframes belangrijk zijn en hoe wireframes je website en je bedrijf succesvoller kunnen maken.

Wat is een wireframe?

Een wireframe is een eenvoudige schematische voorstelling van de structuur of ruwbouw van je website. Een wireframe illustreert de opbouw van de pagina’s van je website en hoe alle pagina’s met elkaar verbonden zijn.

Wireframes zijn een efficiënt hulpmiddel om in de ontwerpfase de wensen van de klant in het ontwerp van de website te verwerken.

Daarom bevatten wireframes geen of weinig teksten en afbeeldingen en slechts een minimum aan kleuren. De focus ligt uitsluitend op:

  • structuur: de (samenhang van alle) pagina’s op je website
  • layout: de schikking van de onderdelen op elke pagina
  • navigatie: menus en links op je website
  • functionaliteit: elementen (tekstvelden, foto’s, filmpjes, sliders, knoppen…) die de interactie, het gebruiksgemak en de efficiëntie van je website bepalen

Pas als een klant en een website designer het eens zijn over het wireframe van de website worden de kleuren, teksten en illustraties ingevuld.

Daarna wordt de website daadwerkelijk gemaakt. Het wireframe dient dan als bouwplan voor de website ontwikkelaar.

Ontvang gratis marketingtips!

Ontvang onze blog posts voortaan automatisch in je mailbox.

Ik ga akkoord met het Privacybeleid

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Nieuwe website? 4 redenen om wireframes te gebruiken

1. Wireframes dwingen je om strategisch na te denken

Wireframes dwingen je om strategisch na te denken over je bedrijfsdoelen, je doelpubliek, je proposities (producten en diensten) en hoe je website kan helpen om je bedrijfsdoelen te behalen.

Bij Lincelot krijgen we vaak klanten over de vloer die een nieuwe website willen maar die (nog) niet helder weten wat hun (doelpubliek en) proposities zijn.

Wat volgt is dan een gesprek waarin we achtereenvolgens de bedrijfsdoelen en het doelpubliek bepalen en heldere proposities definiëren. Deze proposities vertalen we vervolgens in pagina’s en ‘calls to action’ op de website en we leggen alles vast in een wireframe.

Het gebeurt vaak dat klanten ons contacteren voor een nieuwe website en dat ze buitengaan met duidelijke doelen, sterkere proposities en uiteraard een website die deze proposities ondersteunt.

2. Eerst structuur, dan design

Met wireframes concentreer je je eerst op de structuur en de navigatie van de website. Pas daarna werk je het design uit en vul je de teksten, afbeeldingen etc. in.

Het is immers veel eenvoudiger om de structuur van je website vast te leggen zonder afleiding van kleuren, teksten en afbeeldingen. Het is ook ook efficiënter en prettiger om een uitgedachte structuur ‘aan te kleden’.

Met wireframes focus je maar op één ding (structuur, design of inhoud) tegelijk. Deze focus maakt het ontwerpproces efficiënter en het resultaat doordachter, doelgerichter en beter.

3. Betere communicatie en efficiënter feedbackproces

Wireframes opstellen is een gezamenlijke denkoefening voor de website designer en de klant. Tijdens dit proces leert de web designer de klant en zijn wensen snel kennen. Dat is goed voor het ontwerpproces, de tussentijdse communicatie en het eindresultaat.

Verder tonen wireframes de structuur van de website. Zo’n ontwerp zegt meer dan duizend woorden. Met een goed wireframe kan een klant kan zich – letterlijk – een beeld vormen van de structuur en de navigatie van zijn nieuwe website.

Meer zelfs: als je de juiste programma’s gebruikt dan kun je letterlijk door het wireframe van een website klikken.

Bij Lincelot werken we met ‘clickable pdfs‘ van onze wireframes zodat onze klanten op alle menu’s, knoppen en links in het pdf-bestand (wireframe) kunnen klikken. Zo kunnen onze klanten nog voor de website ontwikkeld is door de structuur van hun website klikken.

Wireframes verbeteren niet alleen de communicatie maar ook het feedbackproces tussen de klant en de web designer. Designers kunnen met wireframes snel en eenvoudig een websiteconcept opstellen en dit verder optimaliseren op basis van de wensen en behoeften van hun klanten.

4. Wireframes maken complexe websites goedkoper

Wil je een complexe en/of uitgebreide website (laten) maken? Dan maken wireframes het ontwerp- en ontwikkelproces en de communicatie tussen de klant, de website designer en de website ontwikkelaar veel efficiënter en hierdoor ook goedkoper.

Een goed wireframe zorgt ervoor dat alle neuzen in de goede richting staan voor de echte ontwikkeling van de website begint. Dit is handig want het kost veel minder tijd en geld om een wireframe aan te passen dan een opgeleverde website.

En moet er later toch nog iets aangepast worden? Dan kan dat eenvoudig als een wijziging op het originele wireframe gecommuniceerd worden.

Vragen of interesse?

Vond je dit artikel interessant? Bedankt om het met je netwerk te delen.

Heb je vragen of extra tips over wireframes? Aarzel niet en deel ze hieronder of via 03 – 455 80 77 of info@lincelot.com. Wij kijken uit naar je reactie!

Meer weten?

Vond je dit artikel interessant en wil je je website verder verbeteren? Neem vrijblijvend contact met ons op. Wij helpen je graag!

Contacteer ons