Voordat je nadenkt over kleuren en beelden, bepaal je waar alles staat. Een wireframe is die kale blauwdruk: de structuur van een pagina, zonder afleiding.
In dit artikel lees je wat een wireframe is, waarom je een ontwerp ermee begint, en hoe het verschilt van een mockup.
Een wireframe is een schematische, kale weergave van een pagina-indeling: blokken die laten zien waar tekst, beelden, knoppen en navigatie komen, zonder kleuren, beelden of stijl. Het is de blauwdruk waarmee je eerst de structuur en gebruiksvriendelijkheid bepaalt, voordat je aan de vormgeving begint. Door met een wireframe te starten, los je structuurproblemen op voordat ze duur worden.
- Waarom begin je met een wireframe?
- Wat staat er wel en niet in?
- Verschil met een mockup?
Waarom je met een wireframe begint
Het is verleidelijk om meteen met mooie kleuren en beelden te beginnen, maar dan los je de verkeerde vraag eerst op. Een wireframe dwingt je eerst na te denken over wat belangrijk is: welke informatie komt waar, wat moet de bezoeker als eerste zien, en waar staat de actieknop? Door dat kaal te bepalen, zonder de afleiding van vormgeving, bouw je een logische, gebruiksvriendelijke pagina.
Aanpassen in een wireframe kost minuten; aanpassen in een gebouwde pagina kost uren. Daarom is dit de goedkoopste fase om keuzes te maken.
Wireframe versus mockup
Een wireframe is de kale structuur (grijze blokken, plaatsing). Een mockup voegt daar de visuele laag aan toe: kleuren, lettertypen, beelden en de echte uitstraling. De volgorde is logisch: eerst de structuur goed (wireframe), dan de vormgeving (mockup), dan de bouw. Bij een professioneel website-traject hoort vaak een wireframe-fase, zeker voor belangrijke pagina's. Bekijk alle stappen in website bouwen voor MKB.