Wireframe
Wat is een wireframe?
Een wireframe is een eenvoudige schets van een webpagina. Je ziet alleen waar onderdelen als menu, tekst, afbeeldingen en knoppen komen, zonder kleuren, foto's of definitieve teksten.
Veelgestelde vragen over wireframe
Hoe maak ik zelf een wireframe voor mijn website?
Begin met pen en papier of een eenvoudige tool. Zo pak je het aan:
- Bepaal het doel van de pagina, bijvoorbeeld een offerteaanvraag of een aankoop.
- Zet alle onderdelen op een rij: menu, kop, tekst, afbeeldingen, knoppen en formulier.
- Teken ze als simpele blokken, met het belangrijkste bovenaan.
- Maak ook een versie voor mobiel, want daar is veel minder ruimte.
- Laat het aan een klant of collega zien en vraag of die snapt wat de volgende stap is.
Welke tool gebruik ik het beste voor een wireframe?
Dat hangt af van wat je ermee wilt. Voor een eerste opzet is pen en papier vaak het snelst. Wil je het digitaal delen of makkelijk aanpassen, dan zijn dit bekende opties:
- Figma: veel gebruikt door ontwerpers en er is een gratis versie.
- Balsamiq: ziet er bewust uit als een schets, zodat niemand over kleuren gaat discussiëren.
- Whimsical: eenvoudig om snel blokken te slepen.
Werk je met een webbouwer, vraag dan welke tool die gebruikt. Dan kun je samen in hetzelfde bestand opmerkingen plaatsen.
Moet mijn wireframe er al mooi uitzien?
Nee, en dat is een veelgemaakte fout. Een wireframe gaat over indeling en volgorde, niet over uiterlijk. Voeg je al kleuren, lettertypes en foto's toe, dan gaat het gesprek al snel over smaak in plaats van over de vraag of bezoekers vinden wat ze zoeken. Gebruik grijze blokken, een kruis op de plek van een afbeelding en korte aanduidingen zoals "kop" of "knop: offerte aanvragen". Het uiterlijk komt later in een mockup, een uitgewerkt ontwerp, als de structuur eenmaal klopt.
Kan ik een wireframe direct in WordPress maken?
Dat kan, maar het is niet altijd handig. Met de standaard blokkeneditor van WordPress of een paginabouwer als Elementor zet je snel grijze vlakken, kolommen en knoppen op een pagina. Het voordeel is dat je meteen ziet hoe het op mobiel uitpakt. Let wel op:
- Werk in een concept of op een testomgeving, niet op je live website.
- Je raakt sneller afgeleid door details zoals kleuren en lettertypes.
- Eerst op papier schetsen en daarna bouwen gaat vaak sneller.
Hoe lang duurt het maken van een wireframe?
Dat hangt af van het aantal pagina's en hoe ingewikkeld ze zijn. Een simpele contactpagina schets je snel, een homepage of productpagina met veel onderdelen kost meer tijd. Ook het aantal feedbackrondes telt mee: elke keer dat iemand meekijkt en iets wil verschuiven, komt er tijd bij. Tip: maak niet voor elke pagina een apart wireframe. Vaak is één wireframe per paginatype genoeg, zoals homepage, dienstpagina, blogbericht en contactpagina. De overige pagina's volgen dan dezelfde opbouw.
