Les 5 - Mockup

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

Functioneel Ontwerp

Les 5: Mockup

Software Developer

Cohort 2023

Planning komende weken

4 december	11 december	18 december	22 december
Mockup	Mockups - Tijd voor feedback en verbetering	Afronden - Tijd voor feedback en verbetering	DEADLINE Oplevering Functioneel Ontwerp - Onderzoek - Sitemap - Wireframes - Kleurenschema - Webtypografie - Teksten - Mockups

Wat is de planning?

Leerdoelen​

Wat is een mockup?​

Hoe maak je een mockup?​

Voorbeeld van een mockup pagina​

Handige linkjes​

Wat is dan de opdracht?​

Hoe lever je dit in?

Leerdoelen

Ik zoek en verzamel afbeeldingen voor in mijn eigen portfolio. ​

Ik ontwerp een mockup van alle pagina’s voor mijn eigen portfolio. ​

Ik verwerk het kleurenschema, webtypografie, afbeeldingen en teksten in de mockup. ​

​

Zet de onderwerpen op de juiste volgorde!

Onderzoek

Sitemap

Wireframes

Kleurenschema

Webtypografie

Teksten schrijven

Mockup

Wat is een mockup?

Wat is een mockup?

• Een mockup bouwt verder op het wireframe en gaat verder in detail wat betreft kleuren en design.​
  
• Een mockup-ontwerp van een website wordt gebruikt om definitieve beslissingen te nemen over de kleurenschema's, visuele stijl en typografie van de website.​
  
• Met een mockup kan je experimenteren met het visuele aspect van je website om te zien wat er het beste uitziet, vervolgens wordt de website zelf gebouwd.​​

Heeft een in 1x een duidelijk beeld van wie jij bent.

Goede teksten zijn van grote invloed op je vindbaarheid in de zoekmachines.

Op welke manieren bedrijven/mensen contact kunnen opnemen

Voorbeeld van een mockup

Een goede mockup bevat.....

1. afbeeldingen en juiste teksten
2. kleuren en afbeeldingen
3. lorem ipsum en voorbeeld afbeeldingen
4. juiste teksten, afbeeldingen en kleuren

Hoe maak je een mockup?

1. Bekijk je wireframes (in PowerpPoint of in je Functioneel Ontwerp)​
   
2. Vervang alle “lorem ipsum”/voorbeeldtekst, door teksten die je daadwerkelijk in je website gaat zetten.​ (Vorige les geschreven)
   
3. Bekijk in je wireframes de plekken waar een afbeelding komt te staan.​ Verzamel alle afbeeldingen in een map op je computer/laptop.​
   
4. Zorg er voor dat je de afbeeldingen in je wireframe zet.
   
5. Bekijk je kleurenschema en webtypografie en pas de kleuren en lettertypes toe op de manier waarop jij ze uitgedacht hebt.​
   
6. Zorg er voor dat de mockup eruit gaat zien als het daadwerkelijke ontwerp van je toekomstige portfolio website.​

Handige linkjes

- https://blog.hubspot.com/website/website-mockup

- https://www.mockplus.com/blog/post/website-mockup-tools

- https://www.mockplus.com/blog/post/website-mockup

Is dit sans serif of serif lettertype? En waarvoor gebruik je dit?

1. Dit is serif, voor web
2. Dit is serif, voor bedrukking
3. Dit is sans serif, voor web
4. Dit is sans serif, voor bedrukking

Een wireframe bevat kleuren en teksten

1. Waar
2. Niet waar

Wat vond je van de les?

😒🙁😐🙂😃

Tips en Tops
Heb je nog een vraag?

De opdracht

Maak van alle pagina’s een mockup​

Zorg ervoor dat je: ​

• de “lorem ipsum”/voorbeeldteksten veranderd in daadwerkelijke teksten​
• afbeeldingen verwerkt in je mockup​
  
• kleurenschema toepast op je mockup​
• mockups bijna niet afwijkt van je wireframes
• een img map maakt en al je afbeeldingen daarin verzamelt

Voeg je mockups toe aan het Functioneel Ontwerp.