WEB Week 7b / ONT-I / Wireframes herhaling

Python intro
Programming basics-II
Les 3 / Week 7a
Wireframes herhaling
WEB: ONT-I Ontwerpen
Week 7 / Les 2
1 / 14
volgende
Slide 1: Tekstslide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

In deze les zitten 14 slides, met tekstslides.

Onderdelen in deze les

Python intro
Programming basics-II
Les 3 / Week 7a
Wireframes herhaling
WEB: ONT-I Ontwerpen
Week 7 / Les 2

Slide 1 - Tekstslide

Herhaling week 5: Wireframe

Slide 2 - Tekstslide

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.

Slide 3 - Tekstslide

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

Slide 4 - Tekstslide

low fidelity wireframe
  • potlood en papier
  • makkelijk aan te passen

Slide 5 - Tekstslide

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

Slide 6 - Tekstslide

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

Slide 7 - Tekstslide

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

Slide 8 - Tekstslide

Dit is een voorbeeld van een wireframe voor een app

Slide 9 - Tekstslide

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.


Slide 10 - Tekstslide

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.

Slide 11 - Tekstslide

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:

Slide 12 - Tekstslide

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.

Slide 13 - Tekstslide

Inleveropdracht: Dropplace
maak de inlever opdracht van hoofdstuk 2 van het ONT-I 
module boek

Slide 14 - Tekstslide