Structuur en wireframing

Uitleg
Oefeningen

Uitleg

Waarom is structuur belangrijk?

Een website zonder structuur is als een boek zonder hoofdstukken of inhoudsopgave. De bezoeker weet niet waar hij is, wat belangrijk is of waar hij heen moet. Structuur zorgt voor:

Overzicht en rust
Logische navigatie
Efficiënt gebruik van ruimte
Een duidelijke visuele hiërarchie

Een goed ontwerp begint niet met kleur of plaatjes, maar met opbouw.

De basisstructuur van een webpagina

De meeste websites zijn opgebouwd uit vaste onderdelen:

Onderdeel	Functie
Header	Bovenkant van de pagina met logo en menu
Navigatie	Menu of knoppen om tussen pagina’s te bewegen
Hero / intro	Eerste opvallende gedeelte, vaak een afbeelding + titel
Content / hoofdtekst	De kern: tekst, afbeeldingen, video’s, etc.
Sidebar (optioneel)	Extra menu, info, zoekbalk
Call to action (CTA)	Knop of oproep tot actie (“Meld je aan!”)
Footer	Onderaan: contact, social media, links, copyright

Deze structuur helpt gebruikers verwachtingen herkennen – ze weten instinctief waar ze dingen kunnen vinden.

Wat is een wireframe?

Een wireframe is een schematische tekening van de indeling van een webpagina. Het is géén ontwerp met kleur of stijl, maar een soort bouwtekening.

Kenmerken van een wireframe:

Geen opmaak, kleuren of lettertypes
Alleen grijze vlakken, lijnen en tekstlabels
Laat de positie zien van onderdelen (menu, titel, afbeeldingen, knoppen, etc.)
Helpt keuzes maken over wat waar komt en waarom

Wireframes kun je maken:

Op papier (snel, laagdrempelig)
Digitaal met tools als Figma, Balsamiq, Whimsical, Canva

Werken met grids en kolommen

Webdesigners werken vaak met een grid: een denkbeeldig raster met kolommen en rijen. Dit helpt om content:

uit te lijnen
evenwichtig te verdelen
consistent te maken over meerdere pagina’s

Bijvoorbeeld: een 12-koloms grid laat toe dat je 1/2, 1/3 of 1/4 van een pagina gebruikt voor bepaalde elementen.

🎯 Goed gebruik van witruimte, marges en verdeling zorgt voor rust en overzicht.

Tips voor wireframing

Begin met de homepage: wat moet daar sowieso op?
Bepaal daarna wat op een subpagina komt (zoals 'Over ons' of 'Contact')
Plaats elementen op volgorde van belang (visuele hiërarchie)
Gebruik duidelijke labels: “Afbeelding”, “Titel”, “Tekstblok”, “Button”
Denk aan verschillende apparaten: hoe werkt dit mobiel?

💡 Vraag jezelf steeds af: wat ziet de bezoeker eerst? Wat moet opvallen?

Oefeningen

Opdracht A: Homepage wireframe

Bedenk een onderwerp voor een fictieve website (bijv. een portfolio, muziekevenement, schoolproject of vereniging).
Teken (op papier of digitaal) een wireframe voor de homepage.
- Gebruik vlakken en tekstlabels (geen kleur)
- Zorg voor: header, hero, menu, tekstvakken, afbeelding(en), knop(pen), footer
Reflecteer: komt de belangrijkste boodschap duidelijk in beeld?

Opdracht B: Subpagina wireframe

Kies een subpagina: bijv. “Over ons”, “Contact” of “Galerij”
Maak een wireframe in dezelfde stijl als de homepage
Zorg voor structuur: waar komt de inhoud, waar navigeer je terug?