# Structuur en wireframing



# 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:

<div class="_tableContainer_16hzy_1" id="bkmrk-onderdeel-functie-he"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="1735" data-start="1211"><thead data-end="1234" data-start="1211"><tr data-end="1234" data-start="1211"><th data-col-size="sm" data-end="1223" data-start="1211">Onderdeel</th><th data-col-size="md" data-end="1234" data-start="1223">Functie</th></tr></thead><tbody data-end="1735" data-start="1259"><tr data-end="1316" data-start="1259"><td data-col-size="sm" data-end="1272" data-start="1259">**Header**</td><td data-col-size="md" data-end="1316" data-start="1272">Bovenkant van de pagina met logo en menu</td></tr><tr data-end="1382" data-start="1317"><td data-col-size="sm" data-end="1333" data-start="1317">**Navigatie**</td><td data-col-size="md" data-end="1382" data-start="1333">Menu of knoppen om tussen pagina’s te bewegen</td></tr><tr data-end="1461" data-start="1383"><td data-col-size="sm" data-end="1402" data-start="1383">**Hero / intro**</td><td data-col-size="md" data-end="1461" data-start="1402">Eerste opvallende gedeelte, vaak een afbeelding + titel</td></tr><tr data-end="1536" data-start="1462"><td data-col-size="sm" data-end="1489" data-start="1462">**Content / hoofdtekst**</td><td data-col-size="md" data-end="1536" data-start="1489">De kern: tekst, afbeeldingen, video’s, etc.</td></tr><tr data-end="1595" data-start="1537"><td data-col-size="sm" data-end="1565" data-start="1537">**Sidebar** *(optioneel)*</td><td data-col-size="md" data-end="1595" data-start="1565">Extra menu, info, zoekbalk</td></tr><tr data-end="1668" data-start="1596"><td data-col-size="sm" data-end="1623" data-start="1596">**Call to action (CTA)**</td><td data-col-size="md" data-end="1668" data-start="1623">Knop of oproep tot actie (“Meld je aan!”)</td></tr><tr data-end="1735" data-start="1669"><td data-col-size="sm" data-end="1682" data-start="1669">**Footer**</td><td data-col-size="md" data-end="1735" data-start="1682">Onderaan: contact, social media, links, copyright</td></tr></tbody></table>

</div></div>Deze structuur helpt gebruikers **verwachtingen herkennen** – ze weten instinctief waar ze dingen kunnen vinden.

#### **Wat is een wireframe?**

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/yocimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/yocimage.png)

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](https://figma.com), [Balsamiq](https://balsamiq.com), [Whimsical](https://whimsical.com), [Canva](https://canva.com)

#### **Werken met grids en kolommen**

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/8Tlimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/8Tlimage.png)

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**

1. Bedenk een onderwerp voor een fictieve website (bijv. een portfolio, muziekevenement, schoolproject of vereniging).
2. 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
3. Reflecteer: komt de belangrijkste boodschap duidelijk in beeld?

#### **Opdracht B: Subpagina wireframe**

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