Les 5 Wireframes en Design

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

😒🙁😐🙂😃

 Wireframes en Design

Wat weet je nog over het boxmodel?

Leerdoelen

Aan het einde van de les kunnen studenten:

• Uitleggen wat wireframes zijn en waarom ze belangrijk zijn.
• De verschillende typen wireframes onderscheiden (low-fidelity vs. high-fidelity).
• Een basis wireframe schetsen voor een webpagina of app.

Inhoud

Wat is een wireframe

Waarom zijn wireframes belangrijk

Type wireframes

Tools en technieken

Oefeningen

Wat is een wireframe

• Een visuele blauwdruk van een website of app.
• Toont de structuur en functionaliteit, zonder design.
• Helpt bij het plannen en organiseren van content.

Waarom zijn wireframes belangrijk

•  Efficiëntie: voorkomt onnodig herontwerp.
• Focus op functionaliteit: zonder afleiding van kleuren of stijlen.
• Betere communicatie: tussen designers, developers en opdrachtgevers.
• Testen van gebruikerservaring vóór de ontwikkeling.

Type wireframes

Low-fidelity:

• Eenvoudige schetsen, blokken en lijnen.
• Snelle iteratie en conceptontwikkeling.

High-fidelity:

• Meer details, soms met tekst en interacties.
• Nauwkeuriger beeld van de eindoplossing.

Tools en technieken

📝Papier en pen (voor snelle schetsen)

💻 Digitale tools:

• Figma (populair bij designers)
• Adobe XD (geschikt voor high-fidelity ontwerpen)
• Balsamiq (gericht op low-fidelity wireframes)

Wat: Maak in duo's een wireframe voor een blogpagina.

Hoe:

Gebruik alleen blokken en labels (geen kleuren of afbeeldingen).

Denk na over de structuur en indeling.

Hulp: Docent

Tijd: 10 minuten

Klaar: Uit wisselen met andere groep en geef elkaar feedback

Wat:Ontwerp een wireframe voor een mobiele app-homepage

Hoe:

Gebruik een digitaal tool.

Voeg minstens 4 basiselementen toe (bijv. header, menu, content, footer).

Hulp: Medestudent

Tijd: -

Klaar: Lever in op teams

Schrijf 3 dingen die je vandaag heb geleerd

Schrijf 1 ding op wat je nog niet begrijpt