portfolio functioneel ontwerp

We maken gebruik van Lessonup.
Quizes kunnen gemaakt worden "online" met de telefoon
of door het antwoord op een papier op te schrijven.
1 / 18
volgende
Slide 1: Tekstslide
ICTApplicatie- en mediaontwikkelaarMBOStudiejaar 1

In deze les zitten 18 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 30 min

Onderdelen in deze les

We maken gebruik van Lessonup.
Quizes kunnen gemaakt worden "online" met de telefoon
of door het antwoord op een papier op te schrijven.

Slide 1 - Tekstslide

Waarom heb je gekozen voor deze opleiding?

Slide 2 - Open vraag

Welkom
Wat jij net heb opgeschreven is jouw motivatie.

Over 8 weken lever je in: 
Een sitemap, wireframe met HTML en CSS details van jouw portfolio pagina's: 
Home, over mij (met motivatie), vaardigheden/ kennis, projecten, contactgegevens.

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Portfolio
Les 1: Functioneel Ontwerp

Software Developer
Cohort 2021

Slide 5 - Tekstslide

Wat gaan we doen?
- Functioneel ontwerp
    - User story's
    - Sitemap
    - Wireframe
- Ontwerpen
- Indeling van een website
- Huiswerk

Slide 6 - Tekstslide

Functioneel ontwerp
Eerst de klantvraag in kaart brengen: In behoefte analyse. 
 
Na de behoefteanalyse wordt een functioneel ontwerp gemaakt. 
Weergeven hoe de navigatie en de  lay-out van de applicatie eruit komt te zien, verzameld en geordend.

Slide 7 - Tekstslide

Userstory
Een klant stelt eisen aan een applicatie. Deze komen in een klantinterview naar voren.
Deze eisen worden in het functioneel ontwerp geschreven als Userstory.  

Userstory's zijn een korte en eenvoudige beschrijving van een behoefte van de eindgebruiker. 

Userstory wordt geformuleerd: Als <gebruiker> wil ik <actie> , zodat ik <doel>
Als student wil ik in magister mijn studentnummer en wachtwoord kunnen invullen zodat ik mijn cijferlijst kan bekijken. 

Userstory's worden door de programmeur gebruikt in het scrumproces. 

Slide 8 - Tekstslide

Sitemap
Geeft de navigatiestructuur weer. 
Hoe de gebruiker navigeert door de applicatie. 


Een lijst van de pagina's die op 
de website te vinden zijn.

Slide 9 - Tekstslide

Wireframe
Een schematische weergave van een website. 
Het toont de layout van de webpagina zonder stijl, kleur en afbeelding. 
Door een wireframe wordt de structuur en navigatie van de website duidelijk.

Slide 10 - Tekstslide

Ontwerpen
Websites hebben dezelfde 4 doelen. 

Ontwerprichtlijnen
1. Alles richten op 1 doel. 
2. Informatie in het middelpunt
3. Plaatjes zijn beter dan woorden 
4. Maak belangrijke dingen duidelijker dan minder belangrijke dingen. 
5. Zorg voor orde en rust 
6. Wijk niet af van dingen die overal hetzelfde zijn. 
Wetten en regels: Tekst en afbeeldingen mag je niet zomaar kopiëren (plagiaat). Gebruik rechtenvrije sites.

Slide 11 - Tekstslide

Indeling van een website
Eén van de meest gebruikte indelingen :

1. Header: De header is een blikvanger van de webpagina. 
Zorg voor een pakkende Header. Laat zien waar de website over gaat.
2. Navigatiemenu: Geef aan waar de bezoeker naar toe kan navigeren. 
De belangrijkste pagina's staan in het navigatiemenu.
3. Content: Hier zet je de afbeeldingen en tekst. 
Bedenk voor elke pagina een doel. 
4. Sidebar: Afhankelijk van het onderwerp veranderd de sidebar mee.
5. Footer: Onderaan de pagina. Wat kan erin: 
Herhaling van de belangrijkste pagina's
Contactgegevens 
Social Media. 


Slide 12 - Tekstslide

Dit is een?
A
Wireframe
B
Sitemap
C
Userstory

Slide 13 - Quizvraag

Dit is een?
A
Wireframe
B
Sitemap
C
Userstory

Slide 14 - Quizvraag

Dit is een?
A
header
B
navigatiemenu
C
sidebar
D
footer

Slide 15 - Quizvraag

Dit is een?
A
header
B
navigatiemenu
C
sidebar
D
footer

Slide 16 - Quizvraag

Huiswerk
Lees: Hoofdstuk 7 van het HTML boek 
Maak: 
Opdracht 1: Uit boek: Opdracht 7.8.1. Opdracht 1: Ontwerprichtlijnen. 
  • In deze opdracht mag je zelf 3 websites kiezen, wij kiezen er 2 voor jou:   
1. https://www.simpel.nl/
2. https://www.toyota.nl/
Opdracht 2: Maak de sitemap van de 3 websites
Opdracht 3: Schets van de 3 websites een wireframe van de homepagina. 
Zet de indeling erbij. (Header, Naviagatiemenu, Content, Sidebar, Footer).

Inleveren: Volgende week. Je kunt er volgende les ( van deze week) nog aan werken. 

Slide 17 - Tekstslide

Samenvatting
Functioneel ontwerp: Document hoe de navigatie en de lay-out van de applicatie eruit komt te zien

Userstory: Als <gebruiker> wil ik <actie> , zodat ik <doel> 
Storymap: navigatiestructuur van een applicatie
Wireframe: Schematisch ontwerp van een applicatie

Slide 18 - Tekstslide