PRO Week 5 / Ontwerpen / Wireframe

Python intro
Programming basics-II
Les 3 / Week 7a
Wireframe
PRO-A
Week 5 - Hoofdstuk 6
1 / 26
volgende
Slide 1: Tekstslide
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

In deze les zitten 26 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Python intro
Programming basics-II
Les 3 / Week 7a
Wireframe
PRO-A
Week 5 - Hoofdstuk 6

Slide 1 - Tekstslide

Deze slide heeft geen instructies

PRO:
Praktijkondersteuning



Modules:
WED-I
ONT-I
PLA-I
Enz..

Slide 2 - Tekstslide

Een vak bestaat uit verschillende modules. Module duurt meestal een paar weken, en in één blok volg je meerdere modules per vak.

Wij starten met WED-I. Duurt vier weken. "Werken als developer". Absolute basics van wat je moeten weten om de praktijkopdrachten te maken.
Vorige week
Hoofstuk 4 en 5
Logboek en Gericht zoeken.

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Deze week
Hoofstuk 6
Wireframes

Heb je je feedbackmoment opdracht ingeleverd? (Logboek)

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Slide 5 - Tekstslide

Wireframes zijn onderdeel van de fase Ontwerpen binnen het V-model
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.

Slide 6 - Tekstslide

Deze slide heeft geen instructies

The Original 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 7 - Tekstslide

Deze slide heeft geen instructies

Wireframe

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Wireframes
We hebben drie specifieke varianten

Slide 10 - Tekstslide

Deze slide heeft geen instructies

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 11 - Tekstslide

Deze slide heeft geen instructies

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

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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

Slide 13 - Tekstslide

Deze slide heeft geen instructies

Wireframe
  • Lay-out leg je vast in een wireframe.

  • Snelle schets, de eerste stapjes van je ontwerp.

  • Nog géén kleuren, fonts

Slide 14 - Tekstslide

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

Slide 15 - Tekstslide

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

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Goed voorbeeld

Slide 17 - Tekstslide

Deze slide heeft geen instructies

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.

Slide 18 - Tekstslide

Deze slide heeft geen instructies

Nog een goed voorbeeld

Slide 19 - Tekstslide

Deze slide heeft geen instructies

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

Slide 20 - Tekstslide

Deze slide heeft geen instructies

Wat is het belangrijkste verschil tussen een wireframe en een flowchart?
A
Een wireframe toont de visuele lay-out van een webpagina, terwijl een flowchart de stappen en beslissingen in een proces weergeeft.
B
Een wireframe is een gedetailleerde beschrijving van een proces, terwijl een flowchart alleen de hoofdlijnen laat zien.
C
Een wireframe is altijd interactief, terwijl een flowchart statisch is.
D
Een wireframe wordt gebruikt voor het testen van software, terwijl een flowchart wordt gebruikt voor het ontwerpen van de gebruikersinterface.

Slide 21 - Quizvraag

Deze slide heeft geen instructies

Opdracht 4: Natekenen
Kies een app of website die je veel gebruikt en teken minstens drie schermen na als wireframe.
(houd de besproken regels in de gaten -- zie moduleboekje bladzijde 23).
Besteed maximaal 20 minuten aan het natekenen, je moet immers niet teveel details tekenen. Het gaat om een snelle schets van de lay-out.
timer
20:00

Slide 22 - Tekstslide

Deze slide heeft geen instructies

Lever je foto in

Slide 23 - Open vraag

Deze slide heeft geen instructies

Opdracht 5 en 6: Website ontwerpen
Je krijgt de opdracht om met zijn tweeën een website te ontwerpen voor een klein bedrijfje. Teken wireframes voor de volgende pagina’s:
  • Homepage: bovenaan een menubalk, dan een grote foto en daaronder twee blokken tekst naast elkaar met als koppen “Over ons” en “Het bedrijf”. Daaronder komen twee afbeeldingen naast elkaar, en daar weer onder een footer met wat algemene info.
  • Medewerkers –zelfde menubalk en foto, daaronder een kleine ronde foto van de directeur, rechts daarnaast persoonlijke info. Hieronder over de hele breedte een stukje tekst over deze persoon. Dezelfde lay-out voor een tweede medewerker. Daaronder dezelfde footer als de homepage.
Probeer als je het wat professioneler wilt doen eens voor een app of online omgeving. (wireframe.cc)
timer
20:00

Slide 24 - Tekstslide

Deze slide heeft geen instructies

Samenwerk Opdracht
Ga nu met twee groepjes bij elkaar zitten en overleg samen eens wat jullie anders hebben gedaan. Gaat er niet om wie gelijk heeft, maar wel om te kijken of jullie tot een nieuwe wireframe kunnen komen met zijn vieren. Let op: Die hoef je niet te maken maar alleen te bedenken

Slide 25 - Tekstslide

Deze slide heeft geen instructies

Het zit er weer op. Tot volgende week.

Slide 26 - Tekstslide

Deze slide heeft geen instructies