Alle collecties
Voor platformbeheerders
Tips & Tricks: Wireframing
Tips & Tricks: Wireframing
Jasper Versteege avatar
Geschreven door Jasper Versteege
Meer dan een week geleden bijgewerkt

Of je nou een volledige website of slechts één pagina bouwt, het is altijd goed om eerst na te denken over de structuur van het platform of je pagina. Welke pagina's wil je allemaal hebben, welke informatie wil je delen en hoe wil je het menu inzetten?

Als je dit weet kan je aan de slag met het schematisch uittekenen van alle pagina's. Dit kan je letterlijk uittekenen, maar je kan een pagina ook meteen bouwen door gebruik te maken van onze "wireframing-tool". Daarmee kun je snel een "gevulde" structuur neerzetten waardoor je een goed beeld krijgt van de uiteindelijke vorm van je platform.

Met onderstaande links spring je snel naar de juist informatie.

Eerst even een stapje terug.


Wat is een wireframe?

Een wireframe is een visuele weergave in grijsschaal van de structuur en functionaliteit van een webpagina of een scherm (in een mobiele app). Een wireframe laat zien waar de verschillende onderdelen (zoals secties, informatie en buttons) komen te staan en hoe de ruimte wordt benut. Omdat het wireframe dient als de allereerste opzet van een webpagina, blijven kleuren, afbeeldingen en/of videos, lettertypen en andere stilistische elementen tot een minimum beperkt.

Als de structuur eenmaal bekend is en de wireframes af zijn kan er gewerkt worden aan de opmaak en tekstuele invulling.


Hoe werkt het?

  1. Maak een nieuwe pagina aan en voeg een eerste paginasectie toe via het paginabewerkersmenu. Het maakt niet uit welke sectie je kiest. Als er minimaal één sectie is kan je namelijk vanuit de paginabewerker zelf werken. Als je een pagina bewerkt kan je direct naar stap 3.

  2. Klik ergens in het donkere gedeelte op het scherm zodat het menu verdwijnt en je in de paginabewerker zit. Je ziet nu een lege pagina.

  3. Zweef over de/een sectie zodat je een gestippelde rand boven- en onderaan de sectie ziet. In het midden zie je nu een plus-teken, met daarnaast een leeg-raamwerk icoontje (zie hieronder). Dat gebruiken we om te wireframen.

  4. Als je op het icoontje klikt verschijnen er een aantal opties die grotendeels overeenkomen met alle bestaande secties. Als je een optie selecteert dan wordt er een content-sectie aangemaakt waarbij er automatisch al teksten en buttons aan toegevoegd zijn.

  5. Ga zo door met het toevoegen van secties totdat je tevreden bent. Let op: Je vindt niet alle pagina-secties terug als wireframe. Zo zul je een activiteiten- of een blogsectie via de normale weg toe moeten voegen. Die secties verwijzen namelijk naar content op het platform zelf, en hebben niet standaard tekst of een button.

Tip: Als je de structuur neergezet hebt kan je het beste ook snel even wat foto’s toevoegen. Dit hoeven niet meteen de uiteindelijke foto’s te zijn, want je kan ze later altijd nog aanpassen. Het gaat er in deze fase vooral om dat je een goed beeld van het volledige plaatje krijgt.

Je kan in deze fase ook makkelijk spelen met verschillende sectiethema’s.


Uitlegvideo


Op deze manier heb je in een paar minuten een eerste opzet voor je pagina (die je kan bespreken met de rest van het team). Daarna hoef je alleen nog aan de slag met de daadwerkelijke teksten en afbeeldingen.

Veel plezier!

Was dit een antwoord op uw vraag?