Richard Slakhorst

---

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 sitemapvan een website of app?
7. Opdracht: Studievragen
8. Opdracht: sitemap
9. Voorbeelden van een sitemap

---

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.

Waarom is een functioneel ontwerp zo belangrijk?

Een functioneel ontwerp is om een gedetailleerde beschrijving te geven van hoe een website of app zou moeten functioneren vanuit het oogpunt van de gebruiker. Het bevat informatie over de 1 functionaliteiten, 2 interacties en 3 gebruikerservaringen. Het is daarom belangrijk voor de ontwerper dat men alle functionele ontwerp stappen doorloopt tijdens een ontwerpproces omdat men op die manier zichzelf kan borgen om een optimale User experience te ontwerpen voor zijn klanten. Een optimale User experience design betekend blije klanten en blije klanten betekend terugkerende klanten en is een goede reclame voor toekomstige nieuwe opdrachtgevers.

---

2. Waaruit bestaat een functioneel ontwerp? Terugblik

Wel bestaat een functioneel ontwerp (FO) meestal tenminste uit de volgende elementen:
1. Persona. Doelgroep onderzoek
2. User story’s. Doelen van de website voor gebruikers en de onderneming 
3. Sitemap en Flowchart. Structuur van website 
4. Wireframes. Uitwerking functionaliteiten per pagina gedetailleerd 
5. Styletile/Styleboard. Input voor design en techniek Interface design( UI) elementen Zoals knoppen, menu’s, en andere visuele componenten het zijn interactieve bouwstenen van een gebruikersinterface.
6. Prototype. Ideeën voor interactie (interaction design / interactive mock-ups) (Figma)

---

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?

De plattegrond van je website.
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 sitemap 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 sitemap 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 sitemap 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 sitemap heel groot zijn.

---

7 Opdracht: Studievragen

1. Waarom is een functioneel ontwerp maken belangrijk voor een ontwerper
2. Wat is een sitemapt
3. Waarom maak je een sitemap als ontwerper
4. Wat bedoelen we met een designer is ook een architect
5. Waarom maak je een sitemap specifiek voor jou als ontwerper
6. Uit welke niveaus en sub niveaus bestaat minimaal een sitemap

---

8. Opdracht: sitemap

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 website, webshop, App of een ander mediaproduct.

1. Lees en bestudeer de theorie.
   
2. Maak een sitemapt van de website van de door jouw gekozen museum-website of een Groene energieleveranciers, die je ook gaat gebruiken voor je user story. Je maakt een sitemap om te onderzoeken hoeveel pagina’s en links jouw museum-website heeft. Zorg dat je compleet bent. Alle pagina’s moeten worden weergegeven in een grafische, overzichtelijk uitgewerkte sitemap. Je visualiseert dus alle klikbare pagina’s en links in de flowchart.

RESULTAAT
Stap 1: Maak eerst een schetsje op papier ( Besprek die met je docent)
Stap 2: Een complete grafische sitemap gemaakt in Illustrator of in Draw Op A3-formaat.

Stap 1

• Maak eerst een schetsje op papier of met post-its en maak daarna pas de digitale flowchart.
  
  
  
  
  Deze onderdelen moeten worden verwerkt in de sitemap >>
  
• 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 site (Elk rechthoekje is een pagina)?
  2. Hoeveel links bevatten de pagina’s? (-Link: www…./nl)
• 3. Elk niveau heeft een eigen kleur.
• Ga in duo’s bij elkaar kijken of je alle pagina’s hebt gevonden. Je kunt
  elkaar helpen met het aanvullen en aanpassen van het complete aantal
  pagina’s. Doe dat samen ook online.
• 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

2

3

4

---