Les 4 - Introductie tot Wireframes

• Online marketing
• MBO
• Studiejaar 1

UX en wireframe

Les 4 - Introductie tot Wireframes

Waar gaat de module over?

Les 1 - Introductie tot UX Design

Les 2 - Doelgroepanalyse & Gebruikersgedrag

Les 3 - Usability & Navigatieprincipes

Les 4 - Introductie tot Wireframes

Les 5 - Praktijk: Eerste Wireframe Schetsen

Les 6 - Digitale Wireframes Maken

Les 7 - Usability Testing 

Aan het einde van de les...

...kun je uitleggen wat een wireframe is en het belang ervan;

... kun je uitleggen wat heat maps zijn en het belang ervan;

... weet je waar je op moet letten bij het maken van een wireframe (homepagina);

... heb je een wireframe voor jouw homepagina gemaakt.

Wireframes

Wireframes zijn simpele tekeningen of schetsen die laten zien hoe een website eruit kan zien voordat deze wordt gemaakt.

Ze geven de indeling van een website weer, zoals waar tekst, plaatjes, knoppen en menu’s komen. Het is alsof je een blauwdruk maakt, maar dan voor een website.

Heat maps

Een heatmap voor websites is een soort kaart die laat zien waar bezoekers op een website het meest klikken, bewegen of kijken. 

Het gebruikt kleuren om dit duidelijk te maken: warme kleuren zoals rood en oranje betekenen veel activiteit, terwijl koelere kleuren zoals blauw minder activiteit aangeven.

Wat kun je ermee doen?

• Zien wat werkt: Je kunt ontdekken welke knoppen, links of afbeeldingen bezoekers vaak gebruiken.
• Verbeteren: Als je merkt dat mensen een belangrijke knop niet opmerken, kun je de website aanpassen.
• Beter begrijpen: Je leert hoe bezoekers door je website navigeren.

Waar moet je op letten (wireframe homepagina)

• Duidelijke indeling: Zorg dat alles logisch staat, zoals de titel bovenaan, menu's makkelijk te vinden en belangrijke info in het midden.
• Navigatie: Zet een goed menu in zodat bezoekers snel kunnen klikken naar andere pagina's.
• Belangrijkste informatie eerst: Wat is het doel van de site? Laat dat direct zien, zoals een welkomsboodschap of een grote knop.
• Gebruik eenvoudige vormen: Gebruik blokken, lijnen en cirkels om te laten zien waar tekst, afbeeldingen en knoppen komen.
• Witruimte: Houd het overzichtelijk, niet alles op elkaar gepropt.

Opdracht

Opdracht bij les 4 - Wireframe in Figma