Wat is een wireframe, en waarom ziet het er zo kaal uit?

Het is een bekend moment. U heeft met uw webbouwer gesproken over de nieuwe site, en een week later krijgt u een bestand met grijze vlakken, een paar kruisen waar foto’s moeten komen en tekst die uit streepjes bestaat. Geen kleur, geen logo. Dit is een wireframe. Wat is een wireframe precies, waarom krijgt u die eerst te zien en wat moet u ermee? Dat leest u hieronder.

Wat is een wireframe?

Een wireframe is een schets van een webpagina die alleen laat zien wat er op de pagina staat en in welke volgorde. Denk aan de bouwtekening van een huis: die vertelt waar de keuken komt en hoe groot de woonkamer wordt, maar niet welke kleur de tegels krijgen. Een wireframe doet hetzelfde voor een pagina. Bovenaan de kop en het menu, dan een blok met de belangrijkste boodschap en een knop, dan drie diensten naast elkaar, dan een stuk over werkwijze, enzovoort.

Er bestaan grovere en fijnere varianten. Sommige bouwers schetsen het letterlijk op papier, anderen maken het in een ontwerpprogramma zoals Figma. Soms is het klikbaar, zodat u van de homepage naar een dienstenpagina kunt. Het principe blijft hetzelfde: inhoud en indeling, nog geen vormgeving.

Waarom eerst zo kaal?

Juist omdat het kaal is, kijkt u naar de goede dingen. Laat iemand een volledig ontwerp zien, dan gaat het gesprek binnen een minuut over het groen van de knoppen of de foto van het team. Terwijl de echte vraag is of een bezoeker op de homepage meteen ziet wat u doet en hoe hij contact opneemt.

Daarnaast is een wireframe snel aan te passen. Een blok verplaatsen in een schets kost een paar minuten. Dezelfde verandering in een uitgewerkt ontwerp, of erger nog in een gebouwde pagina, kost veel meer. Fouten in de indeling wilt u dus vinden in deze fase.

Wat u op een wireframe ziet

• Grijze vlakken met een kruis: daar komt een foto of illustratie.
• Streepjes of “lorem ipsum”: opvultekst. De lengte geeft aan hoeveel tekst er ongeveer komt.
• Rechthoeken met een woord erin: knoppen, met de tekst die erop komt, bijvoorbeeld “Offerte aanvragen”.
• Notities in de kantlijn: uitleg van de bouwer, bijvoorbeeld “hier de drie laatste projecten, automatisch”.
• Soms twee versies naast elkaar: de computerweergave en de telefoonweergave. Die laatste is minstens zo belangrijk, omdat veel bezoekers op hun telefoon kijken.

Waar u op let als u een wireframe beoordeelt

Ziet u binnen vijf seconden wat het bedrijf doet?

Kijk naar het bovenste deel van de homepage. Staat daar in gewone woorden wat u aanbiedt en voor wie? En is er een knop of telefoonnummer zonder dat u hoeft te scrollen?

Klopt de volgorde?

Een bezoeker leest van boven naar beneden en haakt onderweg af. Wat het belangrijkst is voor uw doel, hoort hoog. Staat het kopje “Onze geschiedenis sinds 1987” boven uw diensten, dan is dat een signaal.

Mist er iets wat klanten altijd vragen?

Leg de vragen die u vaak krijgt naast de schets. Werkgebied, prijsindicatie, levertijd, garantie. Als het antwoord nergens een plek heeft, zeg het nu.

Werkt het op een telefoon?

Drie blokken naast elkaar worden op een telefoon drie blokken onder elkaar. Is de telefoonversie dan nog logisch, of moet u eerst lang scrollen voor u bij de knop bent?

Hoe u die opmerkingen zo opschrijft dat de bouwer er iets mee kan, leest u in feedback geven op een webdesign.

Waar u niet op let

Kleur, lettertype, sfeer, welke foto er precies komt. Daar is het wireframe niet voor. Wilt u daar toch al iets over kwijt, bewaar het voor het ontwerp, of verzamel het in een moodboard voor uw website. Dan gaat het niet verloren en blijft het wireframe-gesprek zuiver.

Ook de tekst zelf is nog niet definitief. Wel is het verstandig om te kijken of de hoeveelheid klopt. Staat er een blok voor drie regels tekst terwijl u weet dat u daar een halve pagina over wilt vertellen, dan moet dat nu op tafel.

Is een wireframe altijd nodig?

Bij een kleine site op basis van een bestaand thema slaan sommige bouwers deze stap over en gaan meteen naar een ontwerp. Dat kan, zeker als de indeling simpel is. Bij een site met meerdere soorten pagina’s, een webshop of een site die een oude vervangt, bespaart een wireframe meestal juist tijd, omdat discussies over de indeling dan niet midden in het bouwen opduiken.

Waar het wireframe past in het hele traject

Het wireframe komt na de structuur (welke pagina’s er zijn) en voor het ontwerp (hoe het eruitziet). Bij ons krijgt u het na het voorstel met vaste prijs; pas als u akkoord bent met de indeling, maken we het ontwerp in uw huisstijl. Hoe de andere stappen eruitzien, leest u op de pagina over de werkwijze bij een website laten maken.