IA - Ontwerpen - Wireframe

Nóg een goed voorbeeld, maar mist goede info over navigatie en pagina-namen
1 / 20
next
Slide 1: Slide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

This lesson contains 20 slides, with interactive quiz and text slides.

Items in this lesson

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

Slide 1 - Slide

Als ik praat ben je stil​.

We praten om de beurt.
Niet lopen onder de les !

Slide 2 - Slide

Absentie​
Wat heb je nodig​
Herhaling​
Wat ga je doen, doel van de les​
Instructie​
Zelfwerkzaamheid​
Bespreken/evalueren​
Afsluiting

Slide 3 - Slide

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.

Slide 4 - Slide

Wireframe

Slide 5 - Slide

Wireframe
Wat is het?
Wie gebruikt het?
Waarvoor?
Wanneer?
Wat is het voordeel?
Voor wie is het bedoeld?

Slide 6 - Slide

Slide 7 - Slide

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.

Slide 8 - Slide

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

Slide 9 - Slide

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

Slide 10 - Slide

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

Slide 11 - Slide

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.

Slide 12 - Slide

Navigeren

Slide 13 - Slide

Navigeren

Slide 14 - Slide

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.

Slide 15 - Slide

Nog een goed voorbeeld

Slide 16 - Slide

Goed voorbeeld

Slide 17 - Slide

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.

Slide 18 - Slide

Low-Fidelity
Medium-Fidelity
High-Fidelity

Slide 19 - Drag question

Welke categoriën zijn er?

Slide 20 - Slide