Website wireframes: wat, waarom en hoe?

Inhoudsopgave
Heb je vragen over je marketing of website?

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.

Ze 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: menu’s 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.

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 ze 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.

Ze 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.

Wil je verder je website verbeteren?

Wil je nog meer informatie over WordPress of wil je een nieuwe WordPress website (laten) bouwen? Aarzel dan niet om ons te contacteren.

Deze publicatie werd geschreven door:

Foto van Laurens Mertens
Laurens Mertens
Laurens Mertens is Senior Content Marketeer bij Lincelot. Na een eerste 'tour of duty' tussen 2015 en 2020 en een 'we were on a break' van 3 jaar, is hij nu aan zijn tweede termijn bij Lincelot bezig. Laurens is copywriter pur sang, SEO-specialist de luxe en (marketing) geek by nature. Fun fact: Laurens typt zo snel dat hij een USB-ventilator nodig heeft om zijn vingers af te koelen.
Foto van Laurens Mertens
Laurens Mertens
Laurens Mertens is Senior Content Marketeer bij Lincelot. Na een eerste 'tour of duty' tussen 2015 en 2020 en een 'we were on a break' van 3 jaar, is hij nu aan zijn tweede termijn bij Lincelot bezig. Laurens is copywriter pur sang, SEO-specialist de luxe en (marketing) geek by nature. Fun fact: Laurens typt zo snel dat hij een USB-ventilator nodig heeft om zijn vingers af te koelen.

Hallo!

Heb je vragen over dit artikel, of wil je advies of hulp met je marketing of website?

Lincelot - Team - Sam Geentjens - Junior Webdesigner

Hallo!

Heb je vragen over dit artikel, of wil je advies of hulp met je marketing of website?

Laurens Mertens - Senior Content Marketeer Lincelot

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

"*" geeft vereiste velden aan

Naam*
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Privacy(Vereist)