PRO - Wireframe & logboek herhaling - Jv49

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Python intro

Programming basics-II

Les 3 / Week 7a

Wireframe

PRO-A

Deze week

Herhaling: Logboek

Herhaling: Wireframes

De hele week: Logboek bijhouden

Opdracht 'Dropplace afmaken'

Vuistregels logboek

• Op het uur nauwkeurig (ongeveer)
• Wees specifiek
• Blijf eerlijk

Goede logboek-entry?
"Maandag: aan opdracht gewerkt."

1. Ja, je weet wat je hebt gedaan.
2. Nee, dit is niet zo specifiek.

Goede logboek-entry?
"Do. 09u - 11u: opdracht 3.2 gemaakt."

1. Ja, je weet wat je hebt gedaan.
2. Nee, dit is niet zo specifiek.

Voorbeeld: Logboek maken

Wireframe

Een wireframe is een tekening waarin je vastlegt hoe je app of website eruit komt te zien.

Je legt de “lay-out” vast: welke onderdelen komen waar op het scherm.

Wireframe

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 website of applicatie gaat navigeren
   
3. Wat de knoppen en links op een website doen
   

Wireframes

We hebben drie specifieke varianten

LOW-FI

Medium-FI

High-FI

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.
  
•     Moeilijk on the fly aan te passen.
•     Afspraken over design moeten vooraf heel duidelijk zijn

Wireframe

• Lay-out leg je vast in een wireframe.

• Snelle schets, de eerste stapjes van je ontwerp.

• Nog géén kleuren, fonts

Voor de opdrachten gaan we nog uit van low/medium fidelity wireframes

Nu nog niet, maar je zult later ook moeten nadenken hoe je ontwerp er uit komt te zien op verschillende devices

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
• Annoteer de namen van je pagina's
  

Regels voor een goed wireframe

• Werk op papier (tenzij je een tekentablet hebt)
• Alleen de belangrijkste knoppen, links en invulvelden
• Alleen de belangrijkste woorden, maar geen lopende tekst
• Afbeelding als vakje met een kruisje er in
• Geef je pagina's een naam, en laat het zien hoe je navigeert.
  
• Geef extra uitleg / comments waar nodig.

Goed voorbeeld

Nog een goed voorbeeld, maar mist goede info over navigatie en pagina-namen

Wat is het belangrijkste verschil tussen een wireframe en een flowchart?

1. Een wireframe toont de visuele lay-out van een webpagina, terwijl een flowchart de stappen en beslissingen in een proces weergeeft.
2. Een wireframe is een gedetailleerde beschrijving van een proces, terwijl een flowchart alleen de hoofdlijnen laat zien.
3. Een wireframe is altijd interactief, terwijl een flowchart statisch is.
4. Een wireframe wordt gebruikt voor het testen van software, terwijl een flowchart wordt gebruikt voor het ontwerpen van de gebruikersinterface.

Dropplace

Lees de opdracht 'Hoofdstuk 7: Dropplace Wireframe'

Maak de opdracht alleen.

Let op! Dit is een ontwerp voor de dropplace website.
Er is dus geen voorbeeld van deze site. Jij maakt
nu een schets van hoe de site eruit gaat zien.