Na de sitemap weten we welke pagina's er komen. Nu gaan we bepalen hoe elke pagina eruitziet, structureel, niet visueel.
Een wireframe is een zwart-witte schets van een pagina. Geen kleuren, geen foto's, geen typografie. Alleen blokken, tekst en lijnen die aangeven waar welke informatie staat, hoe secties georganiseerd zijn en hoe een bezoeker door de pagina beweegt. Denk aan een architectentekening: de muren staan al, maar de verf moet nog.
Het grootste risico bij websiteontwikkeling is dat je iets ziet wat je niet had verwacht. Na de bouw. Een sectie die anders werkt dan je dacht. Een formulier op de verkeerde plek. Een navigatiestructuur die niet logisch aanvoelt. In dat stadium kost herstructureren veel tijd en geld.
Wireframes voorkomen dat. Je ziet de structuur van elke pagina voordat er ook maar één pixel aan design is besteed. Je kunt in dit stadium moeiteloos schuiven: die sectie omhoog, die knop anders plaatsen, die tekst beknopter. Dat kost nu minuten. Hetzelfde verzoek bij een afgerond design kost uren.
Bovendien dwingt een wireframe tot nadenken over de inhoud. Wat staat er precies in die sectie? Welke call-to-action gebruik je? Hoe kort of lang is deze tekst? Die vragen komen hoe dan ook aan bod — maar liever nu dan tijdens de bouw.
Wij maken wireframes in Figma. Elke pagina uit de sitemap krijgt een eigen wireframe. We werken device-first: de wireframes tonen zowel de desktopversie als de mobiele versie, zodat je direct ziet hoe de pagina op elk scherm werkt.
Lay-out en sectieopbouw Hoe is de pagina opgebouwd van boven naar beneden? Welke secties staan in welke volgorde? Hoe lang is elke sectie globaal? Dit bepaalt het ritme van de pagina en de logica waarmee een bezoeker door de content beweegt.
Content-blokken
Welke informatie staat waar? We werken met placeholders: [Koptekst], [Introductietekst: 2-3 regels], [Afbeelding: horizontaal]. Zo is direct duidelijk welke content jij moet aanleveren en in welk formaat.
Navigatie en conversiepaden Welke knoppen staan waar? Waar navigeer je naartoe als je klikt? Hoe kom je van een blogpagina bij een contactformulier? Het navigatiepad van bezoeker naar conversie tekenen we expliciet uit, zodat geen enkel klikpad aan het toeval wordt overgelaten.
Interactieve elementen Formulieren, uitklap-menu's, tabs, sliders: alles wat beweegt of interactief is, geven we een plek in de wireframe. Zo voorkomt u verrassingen bij de bouw over wat er precies verwacht wordt.