Les 1 - Portfolio functioneel ontwerp KOPIE

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

Portfolio

Les 1: Functioneel Ontwerp

Software Developer

Cohort 2022

Wat gaan we doen vandaag?

• Leerdoelen doornemen
• Functioneel ontwerp
• User story's
• Onderzoek doen
• Laat je inspireren
• De opdracht
• Feedback

Leerdoelen

• Je onderzoekt verschillende websites om inspiratie op te doen voor je eigen portfolio.
• Je knipt uit verschillende websites onderdelen die je wilt verwerken in je eigen portfolio en onderbouwt waarom je deze onderdelen wilt gebruiken.
• Je verwerkt de genipte onderdelen met onderbouwing in een word document en gebruikt deze als bijlage voor je eigen functioneel ontwerp document.

Functioneel ontwerp

Je gaat een functioneel ontwerp maken.

In het functioneel ontwerp document ga je documenteren welke informatie op de website gaat komen te staan, wat de lay-out is van de website en welke kleuren en lettertypes je wilt gaan gebruiken. 

We zetten dit in een functioneel ontwerp zodat het programmeren van website sneller gaat verlopen. 

Userstory

Een klant stelt eisen aan een applicatie. 

Deze eisen worden 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. 

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.

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.

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.

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. 

Dit is een?

1. Wireframe
2. Sitemap
3. Userstory

Dit is een?

1. Wireframe
2. Sitemap
3. Userstory

Dit is een?

1. header
2. navigatiemenu
3. sidebar
4. footer

Dit is een?

1. header
2. navigatiemenu
3. sidebar
4. footer

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. 

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