Functioneel ontwerp

• Informatica
• Middelbare school
• havo, vwo
• Leerjaar 4,5

Kick-off Groepsproject

Functioneel ontwerp

Functioneel ontwerp

Een functioneel ontwerp is de "blauwdruk” of “bouwtekening” van je website.

 

Er staat precies in beschreven hoe de website moet werken, welke functionaliteiten erin zitten en hoe de pagina’s er – globaal – uit gaan zien.

Laat de leerlingen nadenken over deze vraag en proberen tot een antwoord te komen a.d.h.v dit plaatje.

Functioneel ontwerp is een ontwerp met jouw ideeën en afspraken met jouw opdrachtgever over de te ontwerpen website. Belangrijk is wel dat je alles vraag aan je opdrachtgever. Van lettertype tot kleur gebruik

Functioneel ontwerp

1. Opdrachtgever
2. Gebruikers
3. Structuur
4. Schermontwerp
5. Basiselementen
6. Evaluatie en afronding

1. Opdrachtgever: Doel

Ga in gesprek met je opdrachtgever:

• Wat wilt u bereiken met het product?
  
• Wie moeten het product gaan gebruiken?
  
• Welke informatie moet het product verschaffen?
  
• Aan welke eisen moet het product voldoen?
  
• Heeft u nog overige wensen?

Story Telling

Voor wie maak je de website?

Wat is jouw verhaal?
Hoe betrek je je doelgroep?
Waar kun je  kleuren, plaatjes,  video inzetten?

Ga in gesprek met gebruikers.

* Hoe oud zijn ze?

    => Slechte ogen of motoriek?
* Hebben ze allemaal een ipad?
    => Schermgrootte?
* Zijn het docenten?
    => Website mag niet te druk zijn!

* ...

2. Gebruikers: Doelgroep

Schrijf per soort gebruiker een user story

Denk na over een logische structuur:

• Niet teveel lagen
  
• Maar ook niet teveel in de breedte
  
• Herbruik pagina-types

Begin bij je user stories; als je een pagina bedenkt die niet tussen je user stories zit is deze dus niet nodig.

3. Structuur: Sitemap

Hiërarchisch overzicht van alle pagina’s op je Website

• Schematische weergave van alle elementen op de pagina.
• Wat is belangrijk?
  Staat dat duidelijk in beeld?

• Gebruik herkenbare patronen

• Ontwerp alleen voor wat je nodig hebt (KISS)

4. Schermontwerp: Wireframes

Doel

• Uitwerking van eigen gedachten
  
• Voor overleg met opdrachtgever
  

Praktische tips

• Gebruik papier of een programma, zoals PowerPoint of Canva.com. Gebruik YouTube-filmpjes voor uitleg.
• Het gaat om het ontwerp, teksten hoeven nog niet af; gebruik Lorem Ipsum tekst
  

4. Schermontwerp Tips

• Welke kleuren waarvoor?
• Afgesteld op het doel van je website
• Niet te veel verschillende kleuren.
• Kies kleuren die bij elkaar passen. 

5. Basiselementen: Kleurenstaal

• Bedenk wat je logo moet uitstralen.
• Zorg dat de vorm erbij past.
• Zoek naar inspiratie online.
• Houd het simpel!
• Let op kleurgebruik.
• Zorg dat het bij de rest van je site past.

5. Basiselementen: Logo

Maak een ontwerp document voor je website met:

• een goede voorkant
• een inhoudsopgave
• doelen & doelgroep
  
• sitemap
• wireframes
  
• kleurenstaal & logo

Gebruik hierbij de volgende indeling:

• Voorkant
• Inhoudsopgave
  
• Hoofdstuk 1: doelen en doelgroep
  
• Hoofdstuk 2: eisen en wensen
  
• Hoofdstuk 3: user stories
  
• Hoofdstuk 4: structuur
  
• Hoofdstuk 5: basiselementen
  
• Hoofdstuk 6: schermontwerp
  

Evaluatie en afronding

Evalueer je functioneel ontwerp op usability richtlijnen (later meer). 

Laat voor een frisse blik iemand anders kijken.

Lever het functioneel ontwerp in bij je opdrachtgever.

Aan de slag

Fundament: Usability (F2)

• hoofdstuk 8 (Functioneel ontwerp maken)

• Hoofdstuk 1 - 5 (Usability richtlijnen)

Werken volgens scrum. Hoe werkt een stand-up in de praktijk?

Inleveren deelproduct 1 (functioneel ontwerp + logboek)

Voor vrijdag 18 oktober 23:59 (zie Google Classroom)

Google Doc of PDF - Teamleider levert in - Deadline = deadline!

Wat kan dit team
verbeteren?

Samenvattend

Stand-up aan het begin van de les

• 5 minuten, 3 vragen, staand

Zorg ervoor dat je Trello-bord en logboek aan het einde van elke les zijn bijgewerkt (en in ieder geval aan het einde van de week)

• De werkverdeling en huidige stand van zaken  moeten goed inzichtelijk zijn