PRO wk5 - Ontwerpen - Wireframe

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Wireframes

Ontwerpen-I

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.

Wireframe

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.

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
   

low fidelity wireframe

• Potlood en papier
• In paar minuten gemaakt
  
• Makkelijk aan te passen
• Bij wijze van spreke "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

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 liefst zien hoe je navigeert
  

Nog een goed voorbeeld

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

Goed voorbeeld

Opdracht: Natekenen

Kies een app of website die je veel gebruikt en teken minstens twee schermen na als wireframe. (Houd de besproken regels in de gaten)

Besteed maximaal 15 minuten aan het natekenen, je moet immers niet teveel details tekenen. Het gaat om een snelle schets van de lay-out.

Opdracht: Website ontwerpen

Je krijgt de opdracht om 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, daarondereen 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.
  

Wireframes Uitbreiden

ONT-I

Les 4 / Week 14

Wat gaan we doen

1. Feedbackmoment nabespreken
2. Terugblik op Wireframes
3. Bestaande ontwerpen analyseren
4. Bestaande ontwerpen aanpassen

Nabespreking Feedbackmoment

Terugblik op Wireframes

Low-Fidelity

Medium-Fidelity

High-Fidelity

Wat is er belangrijk bij het maken van een wireframe van een formulier?

Formulier is niet duidelijk voor de ontwikkelaar

Duidelijke afspraken gemaakt over de inhoud van het formulier

Hoe lang moet je met een wireframe bezig zijn?

1. 1 tot 5 minuten
2. 5 tot 10 minuten
3. langer dan 10 minuten
4. Tot alle details er in verwerkt zijn

Wireframe Tip!

Als je langer dan 10 minuten bezig bent met een wireframe, dan ben je waarschijnlijk te precies of gedetailleerd bezig!!!

Hoe gaven we de "flow" van een wireframe aan?

Wat waren de afspraken voor het maken van een wireframe?

Maak een wireframe van de homepagina van strato.nl.

Bestaande ontwerpen analyseren

Klopt het ontwerp nog?

De opgeleverde wireframe

De website zoals het nu is

Klopt de wireframe nog?

1. Hoe kun je nu het beste een aanpassing doen aan het wireframe?
2. Wat voor programma zou je kunnen gebruiken, of werk je op papier?
3. Waar kun je tegenaan lopen bij het doen van een aanpassing aan een bestaande tekening?