WEB Week 7b / ONT-I / Wireframes herhaling

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Python intro

Programming basics-II

Les 3 / Week 7a

Wireframes herhaling

WEB: ONT-I Ontwerpen

Week 7 / Les 2

Herhaling week 5: Wireframe

Origin story

De term wireframe komt uit de industriële designwereld en wordt vaak gebruikt om een ontwerp van een voorwerp, bijv. een auto, aan te tonen bij een klant.

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

Web design

In web en applicatie design gebruiken we wireframes om een klant te laten zien

1. welke opmaak de site zal hebben
2. hoe je door een deze website of applicatie gaat navigeren.
   
3. wat doen de knoppen en links op een website
   

low fidelity wireframe

• potlood en papier
• makkelijk aan te passen

medium fidelity wireframe

• ziet er netter uit
• minder makkelijk aan te passen.
• afspraken over design moeten vooraf redelijk duidelijk zijn
  

High fidelity wireframe

•     ziet er professioneel uit.
  
•     moeilijk on the fly aan te passen.
•     afspraken over design moeten vooraf heel duidelijk zijn

Week 7: Flow

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

Dit is een voorbeeld van een wireframe voor een app

Lay-out en details

✔ Wel laten zien waar de gebruiker op kan klikken en wat hij kan invullen.

❌ Géén details zoals lange teksten, kleuren, op de pixel nauwkeurig, precies recht, enzovoort.

Opdracht 5: zelf aanvullen

In deze opdracht gaan we kijken naar de wireframes van een eenvoudige webwinkel. Je ziet wireframes van het betaalproces. Op scherm nummer 4 moet een formulier komen, maar hier staat alleen nog een groot leeg vak. Het is dus onvoldoende duidelijk hoe de applicatie “bestuurd” zal worden. Je ziet ook de échte webpagina. Teken het formulier-vak correct in.

Opdracht 6: onderzoek

Veel websites hebben ongeveer dezelfde lay-out. Je zult bijvoorbeeld weinig websites tegenkomen die hun menubalk rechtsonder hebben verstopt.

Bekijk een aantal websites, en schrijf op wat je opvalt. Welke dingen zijn vaak hetzelfde? Kijk naar de aanwezigheid van onderdelen, of de positie op de pagina die vaak hetzelfde is. Je mag zelf een aantal websites uitkiezen, of bezoek er een paar uit dit lijstje:

Opdracht 7: invullen wireframe

We gaan terug naar de kleine webwinkel van opdracht 5. Op de volgende pagina vind je drie wireframes:

1. De overzichtspagina, hierop zie je alle artikelen onder elkaar. Ieder vak is één artikel.

2. Detailpagina, een klik op een artikel brengt je naar de detailpagina.

3. Winkelwagentjes.

Inleveropdracht: Dropplace

maak de inlever opdracht van hoofdstuk 2 van het ONT-I 

module boek