# Website Ontwerp Plan voor Andzelika's Opleidingskeuze

## Algemene Structuur
1. **Homepage**
   - Welkomstboodschap en uitleg over het doel van de website
   - Korte introductie over Andzelika's situatie
   - Navigatiemenu naar verschillende secties
   - Call-to-action knop voor de vragenlijst

2. **Profiel Pagina**
   - Informatie over Andzelika's persoonlijkheid, interesses en voorkeuren
   - Visuele representatie van haar profiel (infographic)
   - Uitleg over hoe dit profiel de opleidingskeuze beïnvloedt

3. **Opleidingsrichtingen Pagina**
   - Overzicht van alle mogelijke opleidingsrichtingen
   - Filtermogelijkheden (duur, type, locatie)
   - Gedetailleerde informatie per richting (uitklapbaar)

4. **Vragenlijst Pagina**
   - Interactieve vragenlijst om persoonlijke voorkeuren te bepalen
   - Voortgangsindicator
   - Resultaten die direct gekoppeld worden aan opleidingsrichtingen

5. **Resultaten Pagina**
   - Gepersonaliseerde aanbevelingen op basis van vragenlijst
   - Vergelijkingstool voor verschillende opleidingen
   - Mogelijkheid om resultaten op te slaan of te delen

6. **Bronnen Pagina**
   - Links naar onderwijsinstellingen in Zuid-Holland
   - Aanvullende informatie over opleidingen
   - Contactgegevens voor studieadviseurs

## Visueel Ontwerp
- **Kleurenschema**: 
  - Hoofdkleur: Verschillende tinten blauw (#1E88E5, #64B5F6, #BBDEFB)
  - Accentkleur: Zacht oranje (#FFB74D) voor call-to-action elementen
  - Neutrale kleuren: Wit (#FFFFFF) en lichtgrijs (#F5F5F5) voor achtergronden

- **Typografie**:
  - Hoofdtitels: Montserrat Bold
  - Subtitels: Montserrat Medium
  - Bodytekst: Open Sans Regular
  - Accenttekst: Open Sans Semibold

- **Visuele Elementen**:
  - Moderne, minimalistische iconen
  - Afgeronde hoeken voor kaders en knoppen
  - Subtiele schaduwen voor diepte
  - Responsief ontwerp voor alle schermformaten

## Interactieve Elementen
1. **Vragenlijst Tool**:
   - Stapsgewijze vragen over interesses, persoonlijkheid en voorkeuren
   - Dynamische voortgangsbalk
   - Visuele feedback bij het beantwoorden van vragen
   - Mogelijkheid om terug te gaan en antwoorden aan te passen

2. **Opleidingsfilter**:
   - Interactieve filters voor opleidingsduur, type, locatie
   - Real-time bijwerken van resultaten
   - Sorteermogelijkheden (bijv. op duur, baankansen)

3. **Vergelijkingstool**:
   - Mogelijkheid om maximaal 3 opleidingen naast elkaar te vergelijken
   - Visuele weergave van overeenkomsten en verschillen
   - Opslaan van favoriete vergelijkingen

4. **Interactieve Kaart**:
   - Kaart van Zuid-Holland met onderwijsinstellingen
   - Filtermogelijkheden op type opleiding
   - Informatie over reistijd en bereikbaarheid

## Technische Specificaties
- **Frontend**: HTML5, CSS3, JavaScript
- **Frameworks**: Bootstrap voor responsiviteit, jQuery voor interactiviteit
- **Dataopslag**: JSON-bestanden voor opleidingsinformatie
- **Responsiviteit**: Volledig responsief ontwerp voor mobiel, tablet en desktop
- **Toegankelijkheid**: WCAG 2.1 richtlijnen voor toegankelijkheid

## Gebruikerservaring
- Intuïtieve navigatie met duidelijke instructies
- Stapsgewijze begeleiding door het keuzeproces
- Visuele feedback bij interacties
- Laadtijden minimaliseren voor snelle gebruikerservaring
- Duidelijke call-to-actions op elke pagina