Les 4 - Het maken van je eigen wireframe en sitemap

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

Portfolio

Les 4: Het maken van je eigen 

wireframe en sitemap

Software Developer

Cohort 2021

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. (Adobe XD, PowerPoint, Lucidchart etc.)

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 of links 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 PPT of andere wireframetool(s)

Wat vond je van de les?

😒🙁😐🙂😃

Tips en tops
Heb je nog een vraag?

De opdracht

• Maak de sitemap van je portfolio website
• Maak van elke pagina een wireframe

Ben je klaar?

Begin alvast met het Functioneel Ontwerp.

Deadline: 11-10-2021