Webdesign - Les 4 (23/24): Ontwerp

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

Webdesign: Ontwerp

Antje Roestenburg

[e-mail]

Vorige les: 

Fundament: HTML & CSS (A2)

* t/m hoofdstuk 5 (Werken met blokken)

* vraag 1 van hoofdstuk 5.12

W3Schools

* CSS Grid Layout Module (w3schools.com/css/css_grid.asp)

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. Schwermontwerp: Wireframes

• 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

Evaluatie en afronding

Evalueer je functioneel ontwerp op usability richtlijnen.

(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)