Les 5 wireframes

• Burgerschap
• MBO
• Studiejaar 1

        Wireframes

leerdoelen

Aan het einde van de les weten jullie meer over:

• wat een homepage is
• wat wireframes zijn
• hoe je wireframes zelf kunt ontwerpen

wie weet wat wireframes zijn?

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. 

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.

 

• Wat is belangrijk?
  Staat dat duidelijk in beeld?

• Gebruik herkenbare patronen

• Ontwerp alleen voor wat je nodig hebt

Wireframe

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.

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.

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.

 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.

Wireframes

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

Opdracht wireframes

Jullie krijgen dit blad.

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.

evaluatie

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