Les 2 - Het maken van je eigen wireframe en sitemap

• ICT
• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Functioneel Ontwerp

Les 2: Het maken van je eigen 

wireframe en sitemap

Software Developer

Cohort 2023

Heb je de opdracht van vorige week af?

1. Ja
2. Nee
3. Wat was de opdracht?

Wat gaan we doen vandaag?

Leerdoelen doornemen

Korte samenvatting van de vorige les

Sitemap + demo

Wireframe + demo

Feedback

De opdracht

Leerdoelen

1. Ik ontwerp een sitemap voor mijn eigen portfolio website.
   
2. Ik gebruik het onderzoek dat ik gemaakt hebt tijdens de vorige les om mijn wireframes te ontwerpen.
   
3. Ik controleer of de sitemap overeen komt met mijn wireframes.
   
4. Ik gebruik een juiste tool voor het ontwerpen van mijn wireframe en sitemap. (PowerPoint)

Wat weet je nog van de vorige les?
Wat heb je ervan geleerd?

Sitemap

Navigatiestructuur van de website.

Een weergave van alle pagina's binnen je website. 

Hoe kan ik beginnen?

• Denk eerst aan de pagina's die je vanuit je Home pagina kan bezoeken en schrijf ze op.
• Bedenk daarna welke PAGINA'S er bezocht kunnen worden vanuit de onderliggende pagina's
• Je sitemap kan je bijwerken tijdens het ontwerpen van je wireframes.

Geef demo van hoe je een wireframe opstelt.

Geef een voorbeeld van 3 pagina's

Voor het gemakt gebruikt Powerpoint.

Wireframe

Schematische weergave van een website.

Het toont de layout van de webpagina zonder stijl, kleur en afbeelding. 

Hoe kan ik beginnen?

• Kijk naar de onderdelen die je hebt verzamelt tijdens het onderzoek.
  
• Begin eerst met een kader waarin je je website gaat vormgeven. 
• Bekijk waar je de onderdelen uit het onderzoek zou willen plaatsen.
• Denk aan de vlakverdeling van je wireframe.

Korte demo van hoe het kan in Adobe XD of PPT

Wat vond je van de les?

😒🙁😐🙂😃

Tips en tops
Heb je nog een vraag?

De opdracht

• Maak de sitemap van je portfolio website
• Zoek op internet wat een wireframe is en hoe dat eruit ziet.
• Maak van alle pagina's een wireframe

Ben je klaar?

Zet de sitemap en de wireframes in je Functioneel Ontwerp document en lever het in op Teams