Les 2.2 - Navigatiestructuur en wireframe

• Online marketing
• MBO
• Studiejaar 2

Mijn Website

Les 2.2 - Navigatiestructuur en wireframe 

Aan het einde van de les...

... weet je (weer) wat een wireframe is en waarom het wordt gebruikt.

... kan je een logische navigatiestructuur voor zijn/haar website maken en weet je waar je op moet letten

... heb je een ontwerpt gemaakt middels een low-fidelity wireframe van je website

Maar eerst...

Wat hebben we al gedaan?

Product

Je hebt een product(groep) of dienst gekozen waar je de komende periode aan gaat werken.

Doelgroep

Je hebt een doelgroep bepaald en onderzocht aan de hand van de 5 stappen van doelgroep analyse.

Waardepropositie

Je hebt aan de hand van het waardeproposite-canvas een waardepropositie geformuleerd.

Concurrentie

Je heb bedacht wie je concurrenten zijn en wat je daarvan kunt leren

Contentstrategie

Je hebt bedacht hoe je de doelgroep wil bereiken in de verschillende fase van de CJ. En welke tone of voice bij jouw past.

Wat is een wireframe?

Een wireframe is een schematische weergave van een webpagina (zonder kleuren, foto's of design).

Je moet inhoud en structuur bepalen, vóór je begint aan het visuele ontwerp.

Waarom een wireframe?

• Bespreken en plannen van pagina-indeling
• Begrijpen hoe een gebruiker door de site beweegt
• Focus op gebruiksvriendelijkheid en logica vóór vormgeving

Low- vs. High-fidelity

Navigatiestructuur 

Navigatiestructuur = hoe bezoekers door je website klikken.

Kernprincipes:

• Logica: de menustructuur moet intuïtief zijn
• Simpliciteit: max. 5-7 hoofdcategorieën, niet te veel sublagen
• Herkenbare benamingen 

Van structuur naar wireframe

1. Navigatiestructuur uittekent (hoofdpagina’s, subpagina’s)
2. Dit omzet in een wireframe van de homepage:
   - Header (logo + menu)
   - Hoofdvisual (afbeelding/banner)
   - Belangrijke info (USP’s, call-to-action)
   - Footer (socials, contact, nieuwsbrief)

Navigatiestructuur (1)

Navigatiestructuur (2)

Van het geheel naar detail....

Nu kun je wireframe maken...

1. Bepaal het doel van je pagina
2. Ken je doelgroep
3. Maak een lijst van de benodigde onderdelen (inhoud)
4. Teken de globale indeling van de pagina (blokken)
5. Controleer op logica en overzicht
6. Vraag feedback en verbeter

1. Bepaal het doel van je pagina

Vraag jezelf af:

Wat moet de bezoeker hier doen of vinden?

Bijvoorbeeld: informatie lezen, iets kopen, contact opnemen.

2. Ken je doelgroep

Pas de inhoud en indeling aan op:

• Leeftijd
• Digitale ervaring
• Verwachtingen

Voorbeeld: Jongeren willen snel info en actieknoppen, oudere bezoekers zoeken overzicht en uitleg.

3. De benodigde onderdelen

Denk aan:

• Navigatie (vast onderdeel - kies voor een permanente plaats)
• Koptekst (H1)
• Afbeelding of banner
• Informatieblokken (tekst, USP’s)
• Knoppen (CTA’s zoals "Koop nu")
• Footer (contact, social media)

Schrijf dit uit vóór je gaat tekenen.

4. Globale indeling van de pagina

Gebruik simpele vormen:

• Rechthoeken voor tekstblokken
• Cirkels of kaders voor afbeeldingen
• Streepjes voor menu
• Geen kleuren of opmaak

Tip: begin op papier met potlood of gebruik wireframe.cc 

5. Controleer op logica en overzicht (1)

Stel jezelf vragen zoals:

• Staat het belangrijkste bovenaan?
• Is er genoeg witruimte?
• Is het duidelijk waar ik op kan klikken?

5. Controleer op logica en overzicht (2)

Gebruik eventueel het AIDA-model als controle:

• Aandacht (header, afbeelding)
  
• Interesse (USP’s, info)
  
• Desire (voordelen)
  
• Actie (knop)

6. Vraag feedback en verbeter

Laat je wireframe zien aan een klasgenoot:

1. Begrijpt hij/zij wat je bedoelt?
2. Zou diegene snappen wat hij/zij moet doen op je site?
3. Pas daarna je wireframe aan.

Het resultaat...

Opdracht 1 - Wireframe

1. Maak een overzicht van alle pagina's die je website nodig heeft.

2. Maak van elke pagina een wireframe volgens het stappenplan.

LET OP! Al het denkwerk dat je nu investeert, gaat je enorm helpen in het verdere proces. 

De volgende les...

 ...gaan we verder met branding en huisstijl.