Les 5 wireframes

        Wireframes
1 / 14
suivant
Slide 1: Diapositive
BurgerschapMBOStudiejaar 1

Cette leçon contient 14 diapositives, avec quiz interactif et diapositives de texte.

time-iconLa durée de la leçon est: 45 min

Éléments de cette leçon

        Wireframes

Slide 1 - Diapositive

leerdoelen
Aan het einde van de les weten jullie meer over:
  • wat een homepage is
  • wat wireframes zijn
  • hoe je wireframes zelf kunt ontwerpen

Slide 2 - Diapositive

wie weet wat wireframes zijn?

Slide 3 - Carte mentale

Wireframes
Een wireframe is niets anders dan een schematische weergave van een website of van een webpagina. 
Bij het ontwikkelen van een website maken we zowel een wireframe voor de homepagina als een wireframe voor een andere pagina. 

Slide 4 - Diapositive

Hoe maak je nu zo’n wireframe?
 Allereerst is het belangrijk om voldoende input te hebben voor een zo compleet mogelijk wireframe. 
Vervolgens ga je aan de slag met pen en papier. Je maakt simpelweg een schets van hoe de website er globaal uit moet komen te zien.  
Het belangrijkste deel is natuurlijk hetgeen wat uitgedacht moet worden.


 

Slide 5 - Diapositive




  • Wat is belangrijk?
    Staat dat duidelijk in beeld?


  • Ontwerp alleen voor wat je nodig hebt
Wireframe

Slide 6 - Diapositive

Voorbeeld wireframe Homepage
Op de homepage zorg je voor een rustige lay-out, 
waarbij het voor de bezoekers direct duidelijk is 
waar ze wat kunnen vinden wat ze zoeken.   Door 
productgroepen prominent bovenaan te plaatsen, 
zijn ze direct zichtbaar zijn voor de bezoekers.

Slide 7 - Diapositive

Voorbeelden wireframes
Om de bezoekers te tonen waar ze op kunnen 
klikken om bij een item te komen, kun je met 
behulp van pijltjes in de wireframe duidelijk 
maken hoe ze door de verschillende 
categorieën kunnen navigeren. 
Door de prijzen weer te geven, wordt het voor 
de klant snel duidelijk wat het product kost, en
 door de beschikbare maten te tonen, kan de klant snel de juiste maat zien.

Slide 8 - Diapositive

wireframe caroussel/slideshow
Deze wireframe is om duidelijk te maken hoe 
de plaatsing van verschillende call-to-action 
knoppen onder de slideshow weergegeven 
kunnen worden. Hier zorgt voor helderheid
 over de locatie van elk element, zodat de 
functionaliteit en interactie van de 
webpagina's duidelijk worden voor de 
opdrachtgever.

Slide 9 - Diapositive

 wireframecontactformulier
Wanneer de bezoeker op de knop 'Contact' 
klikt, wordt een contactformulier 
weergegeven waarin de klant zijn of haar 
gegevens kan invullen en verzenden. 
De velden voor naam, e-mailadres en 
bericht zijn duidelijk zichtbaar, zodat de 
gebruiker gemakkelijk zijn of haar gegevens
 kan invoeren en het bericht kan verzenden.

Slide 10 - Diapositive

Wireframes
  • Belangrijk is dat je van verschillende pagina's een wireframe maakt.
  • Je mag een wireframe tekenen of  op je laptop maken.

Slide 11 - Diapositive

Opdracht wireframes
Jullie krijgen dit blad.




Slide 12 - Diapositive

En nu zelf aan de slag. 
Ga nu bezig om de wireframes te tekenen. Zorg dat je alle onderdelen tekent die voor jou belangrijk zijn.  Kijk in jullie samenvatting van het klantengesprek wat de opdrachtgever voor eisen heeft aangegeven.

Slide 13 - Diapositive

evaluatie
  • Hoe vond jij de les?
  • Is het je nu duidelijk hoe je een wireframe maakt?
  • Wat zou je de volgende keer anders doen?

Slide 14 - Diapositive