IA - Ontwerpen - Wireframe

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Nóg een goed voorbeeld, maar mist goede info over navigatie en pagina-namen

Als ik praat ben je stil​.

We praten om de beurt.

​

Niet lopen onder de les !

Absentie​

Wat heb je nodig​

Herhaling​

Wat ga je doen, doel van de les​

Instructie​

Zelfwerkzaamheid​

Bespreken/evalueren​

Afsluiting

Wireframe

Term uit industriële designwereld

ontwerp van een voorwerp.

Dit design geeft de klant een goed idee over hoe bv. auto eruit gaat zien en waar alles komt te staan.

Wireframe

Wireframe

Wat is het?

Wie gebruikt het?

Waarvoor?

Wanneer?

Wat is het voordeel?

Voor wie is het bedoeld?

Web design

In web- en applicatiedesign gebruiken we wireframes om een klant te laten zien:

1. Welke layout de site zal hebben;
2. Hoe je door een deze website of applicatie gaat navigeren;
   
3. Wat de knoppen en links op een website doen.
   

low fidelity wireframe

• Potlood en papier
• In paar minuten gemaakt
  
• Makkelijk aan te passen
• Bij wijze van spreken "op de achterkant van een servetje"

medium fidelity wireframe

• Ziet er netter uit
• Minder makkelijk aan te passen.
• Kan digitaal zijn, liefst nog met potlood.
  

High fidelity wireframe

• Ziet er professioneel uit.
• Moeilijker aan te passen.
• Afspraken over design moeten vooraf heel duidelijk zijn.

Navigeren

In een wireframe is het belangrijk dat het navigeren van de site erin staat. 

• Waar gaan de links naar toe;
• Wat doen de buttons;
• Zijn er andere interactieve dingen op de site;
• Noteer de namen van je pagina's.
  

Navigeren

Navigeren

Regels voor een goed wireframe

• Werk op papier;
• Alleen de belangrijkste knoppen, links en invulvelden;
• Alleen de belangrijkste woorden, maar geen teksten;
• Afbeelding als vakje met een kruisje er in;
• Geef je pagina's een naam, en laat zien hoe je navigeert.
  

Nog een goed voorbeeld

Goed voorbeeld

Wat gaan we doen?

Kort onderzoek

Wat is wireframing

Wie gebruikt het

Wanneer

Waarom

Waarvoor

Wat is het nut

Hoe?

Schrijf een kort verslag.

Minimaal half a4-tje

Lettergrootte max. 13 pt.

Volledige informatie

Geen steekwoorden

Minimaal 3 foto's

Leg uit wat waarom die foto's.

Low-Fidelity

Medium-Fidelity

High-Fidelity

Welke categoriën zijn er?