Inhoud
1. Wat is een functioneel ontwerp (FO)? Terugblik
2. Waaruit bestaat een functioneel ontwerp? Terugblik
3. Een designer is ook een architect.
4. Wat is een sitemap?
5. Waarom een sitemap?
6. Hoe maak je een sitemap van een website of app?
7. Opdracht: sitemap festival app
8. Voorbeelden van een sitemap

Richard Slakhorst

---

---

1. Wat is een functioneel ontwerp (FO)? Terugblik

Zoals je een bouwtekening nodig hebt voor het bouwen van een huis, zo heb je een functioneel ontwerp (FO) nodig voor het maken van een website, webshop of een App of ander mediaproduct Een functioneel ontwerp is de ‘blauwdruk’ of ‘bouwtekening’ van je website, webshop, App of ander mediaproduct.

Er staat precies in beschreven hoe de website, webshop, App of ander mediaproduct moet werken, welke functionaliteiten erin zitten en hoe de pagina’s eruit gaan zien.

---

2. Waaruit bestaat een functioneel ontwerp? Terugblik

A. Het is een methode om een aankoopproces of een dienst vanuit het perspectief van de klant te visualiseren.
B. Het beschrijft de ervaringen van een klant gedurende de reis die een klant maakt om zich te oriënteren, of een product of dienst aan te schaffen en beschrijft voor de rest alle functionaliteiten van de webapp-webshop.
C. Het ene functioneel ontwerp (FO) is uitgebreider dan het andere. Het verschilt namelijk per type opdracht wat er in het functioneel ontwerp moet komen, vandaar dat er niet maar één juist format voor een functioneel ontwerp bestaat.

Wel bestaat een functioneel ontwerp (FO) meestal tenminste uit de volgende elementen:
1. Doelgroeponderzoek
2. Doelen van de website voor gebruikers en de onderneming (user story’s)
3. Structuur van de website (sitemap)
4. Uitwerking functionaliteiten per pagina gedetailleerd (wireframes)
5. Input voor design en techniek (basis styletile)
6. Interaction-ideeën (interaction design) (interactive mockups?) (prototype)

---

3. Een designer is ook een architect

De designer bepaalt ook de structuur van de website, app of een ander mediaproduct.
Het is belangrijk voor de gebruikers dat de informatie op de juiste plek staat, dat het navigatiemenu overzichtelijk is, dat de website werkt zoals je verwacht. Het uitwerken van die structuur begint vaak bij een sitemap. Dit is een schema van de reis die de gebruiker maakt bij het bezoeken van je web-appsite of een ander mediaproduct.

---

4 Wat is een sitemap?

Een sitemap is een grafische representatie van alle activiteiten / stappen in een proces.
In de sitemap maak je een overzicht van de stappen die een gebruiker op je website of app maakt. Je gaat daarbij uit van een probleem of vraag van de gebruiker.

Het dwingt je goed na te denken over hoe de website / app gebruikt zal worden,
1. welke informatie het belangrijkst is en 2. hoeveel moeite de gebruiker moet doen om te vinden wat hij zoekt. Een groot voordeel van een sitemap is dat het voor iedereen inzichtelijk wordt welke stappen de (verschillende) users zullen maken binnen je website of app. Daarnaast weet de developer hoe hij de stappen in de back-end van de website moet verwerken.

Sitemap worden ook veel gebruikt bij het analyseren, ontwerpen, documenteren of beheren van processen in diverse vakgebieden. De flowchart van een website wordt ook wel een stroomdiagram genoemd. Doordat een flowchart helpt bij het visualiseren van een proces, kan het proces beter worden begrepen en wordt het makkelijker om eventuele knelpunten te vinden.

---

5 Waarom maak je een sitemap?

Breng het proces in kaart voordat je begint. Het is verleidelijk om ergens direct in te duiken, maar het is cruciaal om de processtroom eerst in kaart brengen. 1. Om hoeveel taken gaat het? 2. Hoe zijn deze met elkaar verbonden? 3. Op welke manier moeten ze op de pagina verschijnen? Voordat je elementen toevoegt en ze met elkaar verbindt, moet je al deze vragen hebben beantwoord. Als je eenmaal een globaal idee hebt van hoe alles eruit moet zien, kan de pret beginnen.

Je maakt een sitemap in algemene zin
1. Documentatie van een proces, en de relatie tussen de stappen in een proces.
2. Identificatie van het werkelijke en het ideale proces.
3. Het berijpen van problemen en mogelijke verbeteringen.

Je maakt een sitemap specifiek voor jou als ontwerper
1. Je bent aan het ontwerpen en wilt graag iets bouwen wat logisch klopt.
2. Je bent al aan het bouwen, maar je loopt vast in de complexe structuur.
3. Je wilt een ander de structuur van jouw ontwerp uitleggen.

---

6.Hoe maak je een sitemap van een website of app?

Een flowchart is dus een schematisch overzicht van alle mogelijke stapjes in een proces. De flowchart van de website-structuur is een goed overlegdocument. Vaak komt deze tot stand samen met de opdrachtgever, in een proces van voortschrijdend inzicht. Je kunt de flowchart laten groeien tijdens zo’n samenwerkingsproject en de veranderingen later aanpassen in het document.
– Welke pagina’s zijn er?
– Welke doorklikpaden hebben deze pagina’s?

De niveaus en subniveaus
a. Root : Bovenaan wordt de index-pagina geplaatst met de hele menustructuur. >>DIE WERK JE HELEMAAL UIT<<
b. Level 1: Hieronder worden de pagina’s geplaatst die vanuit de index te bereiken zijn. >3X<
c. Level 2: Hieronder plaats je weer de sub-pagina’s. >3X<
d. Level 3: Sub-sub-pagina’s. >3X>
e. Externe link; Links: www…./nl. > ALLE OP DE PAGANA<

Een sitemap
1. Hoeveel pagina’s bevat de site (elk rechthoekje is een pagina).
2. Hoeveel links bevatten de pagina’s? (-Link: www…./nl)
3. Elk niveau heeft weer een eigen kleur.
4. Hoe vaak moet iemand klikken om bij de voor hem belangrijke pagina te komen?

Bij grote sites kunnen de flowcharts heel groot zijn.

---

---

7. Opdracht: sitemap festival app

De opdracht
Een sitemap is een schematisch overzicht van alle mogelijke stapjes in een
proces van een website of app. Het is een grafische weergave van hoe je door een proces kan lopen.
Je gebruikt een sitemap voor het tekenen van de ‘flow’ van je, webshop, App.

1. Lees en bestudeer de theorie.
   
2. Maak een sitemap van de festival app, Alle pagina’s en onderdelen moeten worden weergegeven dus ook de sub-pagina’s in een grafische, overzichtelijk uitgewerkte sitemap
   Verwerk daar minimaal de volgden pagina’s in
   1. Landing pagina home
   2. Nieuws op het festival Nieuws van de dag: Er zijn minimaal 3 nieuwsitems ontworpen. Minimaal één item is clickable
   2B nieuwsitems ontworpen. Minimaal één item is clickable
   3. Programma pagina artiesten Artiesten: Laat minimaal 3 verschillende artiesten zien. Één artiest is clickable
   3Bminimaal 3 verschillende artiesten zien. Één artiest is clickable
   4. Blokkenschema podia laat het blokkenschema van minimaal één dag uitgewwrkt Het blokkenschema bevat een timetable en podia. Je kunt in de timetable op minimaal één artiest klikken voor meer informatie 
   4B minimaal één artiest klikken voor meer informatie 
   5. Plattegrond waar&wat Neem de originele plattegrond over voor de locatie van podia, eetgelegenheden etc
   6. Bestel tickets/ Muntjes/Merchandise pagina
   7. Contact
   8.Jou eigen idee pagina? 
   
   Stap. 1 Maak eerste een schetsje ( Begin in de les)
   Stap. 2 Ga je schets uitwerken in Illustrator op A3-formaat maak een complete grafische sitemap
   Stap. 3 Maak er een PDF van.

RESULTAAT

Stap 1

• Maak eerst een schetsje op papier of met post-its en maak daarna pas de digitale sitemap
  
  
  
  
  Deze onderdelen moeten worden verwerkt in de flowchart >>
  
• Maak een sitemap met minimaal deze niveaus (dus 4 subniveaus):
  a. Root : Bovenaan wordt de index-pagina geplaatst met de hele menustructuur. >>DIE WERK JE HELEMAAL UIT<<
  b. Level 1: Hieronder worden de pagina’s geplaatst die vanuit de index te bereiken zijn. >3X<
  c. Level 2: Hieronder plaats je weer de sub-pagina’s. >3X<
  d. Level 3: Sub-sub-pagina’s. >3X>
  e. Externe link; Links: www…./nl. > ALLE OP DE PAGANA<

• 1. Hoeveel pagina’s bevat de app (Elk rechthoekje is een pagina)?
  2. Hoeveel links bevatten de pagina’s? (-Link: www…./nl) (bijvoorbeeld social media)
• 3. Elk niveau heeft een eigen kleur.
• Ga in duo’s bij elkaar kijken of je alle pagina’s hebt Ben je compleet ?.
  Je kunt elkaar helpen of adviseren met het aanvullen en aanpassen van het complete aantal
  pagina’s.
• Maak de digitale grafische weergave in Illustrator op, of met https://www.draw.io
  Werk uit op A3-formaat.

8. Voorbeelden van een sitemap

1

---