# Webdesign

# Wat is webdesign?



# Uitleg

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/eVNimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/eVNimage.png)

#### **Wat is webdesign?**

Webdesign is het **ontwerpen van websites** — niet alleen hoe ze eruitzien, maar ook hoe ze werken voor de gebruiker. Webdesigners maken keuzes over structuur, kleuren, lettertypes, afbeeldingen, knoppen, navigatie en de opbouw van pagina’s.

Goede webdesigners denken na over:

- **Wat wil de bezoeker hier doen?**
- **Hoe zorg ik dat dat makkelijk, logisch en prettig is?**

> Webdesign gaat dus over **vorm, inhoud én gebruikservaring.**

#### **Webdesign ≠ webdevelopment**

Een veelgemaakte fout is denken dat webdesign hetzelfde is als websites bouwen met code. In werkelijkheid zijn het **twee verschillende vakgebieden**:

<div class="_tableContainer_16hzy_1" id="bkmrk-webdesign-webdevelop"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="1676" data-start="1301"><thead data-end="1331" data-start="1301"><tr data-end="1331" data-start="1301"><th data-col-size="md" data-end="1313" data-start="1301">Webdesign</th><th data-col-size="md" data-end="1331" data-start="1313">Webdevelopment</th></tr></thead><tbody data-end="1676" data-start="1363"><tr data-end="1444" data-start="1363"><td data-col-size="md" data-end="1407" data-start="1363">Gaat over uiterlijk en gebruikerservaring</td><td data-col-size="md" data-end="1444" data-start="1407">Gaat over hoe het technisch werkt</td></tr><tr data-end="1514" data-start="1445"><td data-col-size="md" data-end="1480" data-start="1445">Denk aan kleur, stijl, structuur</td><td data-col-size="md" data-end="1514" data-start="1480">Denk aan HTML, CSS, JavaScript</td></tr><tr data-end="1595" data-start="1515"><td data-col-size="md" data-end="1556" data-start="1515">Maakt wireframes, prototypes, mock-ups</td><td data-col-size="md" data-end="1595" data-start="1556">Programmeert en integreert systemen</td></tr><tr data-end="1676" data-start="1596"><td data-col-size="md" data-end="1631" data-start="1596">Richt zich op vorm en interactie</td><td data-col-size="md" data-end="1676" data-start="1631">Richt zich op techniek en functionaliteit</td></tr></tbody></table>

</div></div>In deze module richten we ons vooral op het **ontwerpgedeelte**: jij bent hier de ontwerper, niet de programmeur.

#### **Waarom is webdesign belangrijk?**

Een website kan er prachtig uitzien maar compleet onbruikbaar zijn — of omgekeerd: functioneel, maar zo lelijk of chaotisch dat niemand blijft hangen. Een goed ontwerp zorgt ervoor dat de bezoeker:

- snapt waar hij is
- weet wat hij kan doen
- en dat ook graag **wil** doen

Voorbeelden van websites die op design falen of slagen:

<div class="_tableContainer_16hzy_1" id="bkmrk-slecht-design-goed-d"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="2478" data-start="2170"><thead data-end="2201" data-start="2170"><tr data-end="2201" data-start="2170"><th data-col-size="sm" data-end="2186" data-start="2170">Slecht design</th><th data-col-size="sm" data-end="2201" data-start="2186">Goed design</th></tr></thead><tbody data-end="2478" data-start="2234"><tr data-end="2300" data-start="2234"><td data-col-size="sm" data-end="2266" data-start="2234">Te veel tekst zonder indeling</td><td data-col-size="sm" data-end="2300" data-start="2266">Duidelijke koppen en witruimte</td></tr><tr data-end="2358" data-start="2301"><td data-col-size="sm" data-end="2334" data-start="2301">Onlogische of verborgen menu’s</td><td data-col-size="sm" data-end="2358" data-start="2334">Intuïtieve navigatie</td></tr><tr data-end="2422" data-start="2359"><td data-col-size="sm" data-end="2400" data-start="2359">Slecht contrast of te klein lettertype</td><td data-col-size="sm" data-end="2422" data-start="2400">Goede leesbaarheid</td></tr><tr data-end="2478" data-start="2423"><td data-col-size="sm" data-end="2447" data-start="2423">Te veel visuele chaos</td><td data-col-size="sm" data-end="2478" data-start="2447">Rustige, consistente opmaak</td></tr></tbody></table>

</div></div>> 👁‍🗨 Eerste indruk: bezoekers vormen hun oordeel over een website vaak **binnen 3 seconden**. Dan moet het ontwerp al duidelijk zijn.

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/Ft1image.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/Ft1image.png)

#### **Typen websites en hun doelen**

Websites kunnen allerlei doelen hebben, zoals:

<div class="_tableContainer_16hzy_1" id="bkmrk-type-website-voorbee"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="3082" data-start="2708"><thead data-end="2743" data-start="2708"><tr data-end="2743" data-start="2708"><th data-col-size="sm" data-end="2723" data-start="2708">Type website</th><th data-col-size="sm" data-end="2735" data-start="2723">Voorbeeld</th><th data-col-size="sm" data-end="2743" data-start="2735">Doel</th></tr></thead><tbody data-end="3082" data-start="2780"><tr data-end="2838" data-start="2780"><td data-col-size="sm" data-end="2794" data-start="2780">Informatief</td><td data-col-size="sm" data-end="2818" data-start="2794">Wikipedia, schoolsite</td><td data-col-size="sm" data-end="2838" data-start="2818">Informatie geven</td></tr><tr data-end="2901" data-start="2839"><td data-col-size="sm" data-end="2853" data-start="2839">Commercieel</td><td data-col-size="sm" data-end="2875" data-start="2853">Webshop, merkpagina</td><td data-col-size="sm" data-end="2901" data-start="2875">Verkopen of overtuigen</td></tr><tr data-end="2959" data-start="2902"><td data-col-size="sm" data-end="2916" data-start="2902">Persoonlijk</td><td data-col-size="sm" data-end="2937" data-start="2916">Portfolio, CV-site</td><td data-col-size="sm" data-end="2959" data-start="2937">Jezelf presenteren</td></tr><tr data-end="3013" data-start="2960"><td data-col-size="sm" data-end="2972" data-start="2960">Educatief</td><td data-col-size="sm" data-end="2993" data-start="2972">Leeromgeving, blog</td><td data-col-size="sm" data-end="3013" data-start="2993">Uitleggen, leren</td></tr><tr data-end="3082" data-start="3014"><td data-col-size="sm" data-end="3030" data-start="3014">Communicatief</td><td data-col-size="sm" data-end="3053" data-start="3030">Forum, contactpagina</td><td data-col-size="sm" data-end="3082" data-start="3053">Interactie mogelijk maken</td></tr></tbody></table>

</div></div>Een goed design sluit **visueel en functioneel** aan bij dat doel. Een webshop vraagt andere kleuren en knoppen dan een online museum of een politieke partij.

#### **Belangrijke begrippen**

##### **UI (User Interface)**

> De grafische kant van een website – alles wat je ziet en waarop je klikt.

Denk aan: knoppen, menu’s, velden, sliders, kleuren, layout.

##### **UX (User Experience)**

> De ervaring die een gebruiker heeft tijdens het gebruik van de site.

Denk aan: gemak, snelheid, plezier, frustratie, duidelijkheid.

#### **Visuele hiërarchie**

> De volgorde waarin je oog informatie oppikt. Dit wordt gestuurd door:

- Grootte
- Positie
- Kleur
- Witruimte
- Contrasten

Bijvoorbeeld: de titel is groot en vet → dan komt de afbeelding → dan een subtitel → dan pas de tekst.

#### **Responsive design**

> Een ontwerp dat zich automatisch aanpast aan het schermformaat (desktop, tablet, mobiel).

Een goede website ziet er op een telefoon dus **anders maar nog steeds goed** uit dan op een laptop.

# Oefeningen

#### **Oefening: Websites analyseren**

##### **Opdracht A – Eerste indruk**

1. Bezoek drie verschillende websites:
    
    
    - Een informatieve site (bijv. NOS, Rijksoverheid, schoolsite)
    - Een commerciële site (bijv. Coolblue, Nike, Bol.com)
    - Een persoonlijke of creatieve site (bijv. een portfolio of blog)
2. Beantwoord per site:
    
    
    - Wat is het doel van de website?
    - Wie is de doelgroep?
    - Welke eerste indruk krijg je?
    - Wat zie je het eerst?
    - Vind je het ontwerp aantrekkelijk? Waarom wel/niet?

##### **Opdracht B – Begrippen gebruiken**

Gebruik de begrippen **UI, UX, visuele hiërarchie en responsief ontwerp** om een korte review te schrijven van één van de websites (± 150 woorden). Let op:

- Waar let je oog op?
- Is alles logisch te vinden?
- Is de site goed leesbaar op mobiel?

# Doelgroep en gebruikerservaring (UX)



# Uitleg

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/LEYimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/LEYimage.png)

#### **Wat is UX?**

**UX staat voor User Experience** – oftewel: de ervaring die iemand heeft tijdens het gebruik van een website.

Dat gaat niet over de techniek, maar over hoe het voelt:

- Is het duidelijk wat ik moet doen?
- Kan ik vinden wat ik zoek?
- Krijg ik bevestiging als ik iets klik?
- Is het prettig om hier rond te kijken?

Een goede UX zorgt ervoor dat een gebruiker:

- **begrijpt** waar hij is
- **vertrouwen** voelt in de website
- **makkelijk** navigeert
- en een **positief gevoel** overhoudt aan het bezoek

Een slechte UX zorgt voor:

- Verwarring (“Waar ben ik?”)
- Frustratie (“Waarom werkt dit niet?”)
- Afhaken (“Ik ga wel ergens anders kijken”)

#### **Wie is je doelgroep?**

Een belangrijk uitgangspunt in webdesign is:  
🧠 **Je ontwerpt nooit voor jezelf – je ontwerpt voor een gebruiker.**

Daarom stel je jezelf bij elk ontwerp eerst de vraag:

> Wie gaat deze website gebruiken? Wat willen ze hier doen?

Denk aan:

- Leeftijdsgroep
- Ervaring met technologie
- Taalniveau
- Doel of verwachting
- Beperkingen (bijv. slechtziend, dyslexie)

Voorbeeld:

- Een website voor basisschoolkinderen ziet er totaal anders uit dan een site voor boekhouders.
- Een informatiepagina voor een huisarts moet helder, rustig en betrouwbaar ogen.
- Een webshop voor jongeren mag speelser en beeldrijker zijn.

#### **Gebruikersscenario’s**

Een **gebruikersscenario** beschrijft hoe een fictieve gebruiker jouw site gebruikt.

Bijvoorbeeld:

> *Lisa, 17 jaar, zoekt op haar mobiel naar een leuke tweedehands jas. Ze wil snel kunnen zoeken op maat en prijs. Ze raakt gefrustreerd als filters niet goed werken en haakt af als er te veel advertenties zijn.*

Een goed scenario bevat:

- Naam en leeftijd (persona)
- Doel of taak
- Verwachting van de site
- Apparaat waarop ze kijkt
- Obstakels/frustraties
- Gewenst resultaat

🧠 Met zo’n scenario denk je als ontwerper: “Hoe zorg ik dat Lisa vindt wat ze zoekt, zonder af te haken?”

#### **UX-principes in ontwerp**

Hieronder staan een aantal veelgebruikte UX-richtlijnen:

<div class="_tableContainer_16hzy_1" id="bkmrk-principe-betekenis-v"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="3414" data-start="2783"><thead data-end="2819" data-start="2783"><tr data-end="2819" data-start="2783"><th data-col-size="sm" data-end="2794" data-start="2783">Principe</th><th data-col-size="md" data-end="2806" data-start="2794">Betekenis</th><th data-col-size="sm" data-end="2819" data-start="2806">Voorbeeld</th></tr></thead><tbody data-end="3414" data-start="2857"><tr data-end="2956" data-start="2857"><td data-col-size="sm" data-end="2880" data-start="2857">Duidelijke navigatie</td><td data-col-size="md" data-end="2916" data-start="2880">Menu’s zijn herkenbaar en logisch</td><td data-col-size="sm" data-end="2956" data-start="2916">Home – Over ons – Diensten – Contact</td></tr><tr data-end="3042" data-start="2957"><td data-col-size="sm" data-end="2974" data-start="2957">Feedback geven</td><td data-col-size="md" data-end="3001" data-start="2974">Laat zien dat iets werkt</td><td data-col-size="sm" data-end="3042" data-start="3001">“Bericht verzonden!” na een formulier</td></tr><tr data-end="3126" data-start="3043"><td data-col-size="sm" data-end="3058" data-start="3043">Consistentie</td><td data-col-size="md" data-end="3094" data-start="3058">Knoppen en kleuren blijven gelijk</td><td data-col-size="sm" data-end="3126" data-start="3094">Rode knop = annuleer, altijd</td></tr><tr data-end="3220" data-start="3127"><td data-col-size="sm" data-end="3151" data-start="3127">Beperk keuze-overload</td><td data-col-size="md" data-end="3186" data-start="3151">Niet te veel tegelijk laten zien</td><td data-col-size="sm" data-end="3220" data-start="3186">Gebruik tabbladen of dropdowns</td></tr><tr data-end="3306" data-start="3221"><td data-col-size="sm" data-end="3241" data-start="3221">Mobielvriendelijk</td><td data-col-size="md" data-end="3272" data-start="3241">Werkt ook op kleine schermen</td><td data-col-size="sm" data-end="3306" data-start="3272">Grote knoppen, geen tiny links</td></tr><tr data-end="3414" data-start="3307"><td data-col-size="sm" data-end="3326" data-start="3307">Toegankelijkheid</td><td data-col-size="md" data-end="3372" data-start="3326">Ook bruikbaar voor mensen met een beperking</td><td data-col-size="sm" data-end="3414" data-start="3372">Contrast, alt-teksten, duidelijke taal</td></tr></tbody></table>

</div></div>#### **Valkuilen in gebruikerservaring**

❌ Veelgemaakte UX-fouten:

- Verstopte menu’s
- Knoppen zonder uitleg (zoals alleen een icoon)
- Geen bevestiging bij interactie (bijv. na verzenden)
- Te veel tegelijk (denk aan pop-ups, kleuren, banners)
- Lange laadtijd of niet-mobielvriendelijk

🔍 Je herkent slechte UX vaak aan hoe **snel je geïrriteerd raakt**.

# Oefeningen

#### **Opdracht A: Persona en scenario**

1. Bedenk een doelgroep voor een fictieve website. Bijvoorbeeld:
    
    
    - Jongeren die een bijbaan zoeken
    - Ouderen die een reis willen boeken
    - Studenten die een studiegids gebruiken
2. Maak een **persona**: Naam, leeftijd, kort profiel
3. Beschrijf een **gebruikersscenario** van 5–8 zinnen:
    
    
    - Wat wil deze gebruiker doen?
    - Wat verwacht hij/zij?
    - Welke frustraties kunnen ontstaan?
    - Wat maakt de ervaring goed?

✏️ Werk dit uit op papier of in een digitaal document.

#### **Opdracht B: UX-fouten zoeken**

1. Bezoek 2 verschillende websites (bijv. een webshop en een informatiepagina)
2. Noteer:
    
    
    - Wat werkt goed qua gebruikerservaring?
    - Wat stoort je?
    - Is er voldoende feedback en structuur?
    - Is de site mobielvriendelijk?

👥 Bespreek in duo’s wat jullie vonden. Wat zou je als UX-ontwerper verbeteren?

# Structuur en wireframing



# Uitleg

#### **Waarom is structuur belangrijk?**

Een website zonder structuur is als een boek zonder hoofdstukken of inhoudsopgave. De bezoeker weet niet waar hij is, wat belangrijk is of waar hij heen moet. Structuur zorgt voor:

- **Overzicht en rust**
- **Logische navigatie**
- **Efficiënt gebruik van ruimte**
- **Een duidelijke visuele hiërarchie**

> Een goed ontwerp begint niet met kleur of plaatjes, maar met **opbouw**.

#### **De basisstructuur van een webpagina**

De meeste websites zijn opgebouwd uit vaste onderdelen:

<div class="_tableContainer_16hzy_1" id="bkmrk-onderdeel-functie-he"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="1735" data-start="1211"><thead data-end="1234" data-start="1211"><tr data-end="1234" data-start="1211"><th data-col-size="sm" data-end="1223" data-start="1211">Onderdeel</th><th data-col-size="md" data-end="1234" data-start="1223">Functie</th></tr></thead><tbody data-end="1735" data-start="1259"><tr data-end="1316" data-start="1259"><td data-col-size="sm" data-end="1272" data-start="1259">**Header**</td><td data-col-size="md" data-end="1316" data-start="1272">Bovenkant van de pagina met logo en menu</td></tr><tr data-end="1382" data-start="1317"><td data-col-size="sm" data-end="1333" data-start="1317">**Navigatie**</td><td data-col-size="md" data-end="1382" data-start="1333">Menu of knoppen om tussen pagina’s te bewegen</td></tr><tr data-end="1461" data-start="1383"><td data-col-size="sm" data-end="1402" data-start="1383">**Hero / intro**</td><td data-col-size="md" data-end="1461" data-start="1402">Eerste opvallende gedeelte, vaak een afbeelding + titel</td></tr><tr data-end="1536" data-start="1462"><td data-col-size="sm" data-end="1489" data-start="1462">**Content / hoofdtekst**</td><td data-col-size="md" data-end="1536" data-start="1489">De kern: tekst, afbeeldingen, video’s, etc.</td></tr><tr data-end="1595" data-start="1537"><td data-col-size="sm" data-end="1565" data-start="1537">**Sidebar** *(optioneel)*</td><td data-col-size="md" data-end="1595" data-start="1565">Extra menu, info, zoekbalk</td></tr><tr data-end="1668" data-start="1596"><td data-col-size="sm" data-end="1623" data-start="1596">**Call to action (CTA)**</td><td data-col-size="md" data-end="1668" data-start="1623">Knop of oproep tot actie (“Meld je aan!”)</td></tr><tr data-end="1735" data-start="1669"><td data-col-size="sm" data-end="1682" data-start="1669">**Footer**</td><td data-col-size="md" data-end="1735" data-start="1682">Onderaan: contact, social media, links, copyright</td></tr></tbody></table>

</div></div>Deze structuur helpt gebruikers **verwachtingen herkennen** – ze weten instinctief waar ze dingen kunnen vinden.

#### **Wat is een wireframe?**

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/yocimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/yocimage.png)

Een **wireframe** is een schematische tekening van de indeling van een webpagina. Het is géén ontwerp met kleur of stijl, maar een soort bouwtekening.

Kenmerken van een wireframe:

- Geen opmaak, kleuren of lettertypes
- Alleen grijze vlakken, lijnen en tekstlabels
- Laat de positie zien van onderdelen (menu, titel, afbeeldingen, knoppen, etc.)
- Helpt keuzes maken over wat waar komt en waarom

Wireframes kun je maken:

- Op papier (snel, laagdrempelig)
- Digitaal met tools als [Figma](https://figma.com), [Balsamiq](https://balsamiq.com), [Whimsical](https://whimsical.com), [Canva](https://canva.com)

#### **Werken met grids en kolommen**

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/8Tlimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/8Tlimage.png)

Webdesigners werken vaak met een **grid**: een denkbeeldig raster met kolommen en rijen. Dit helpt om content:

- uit te lijnen
- evenwichtig te verdelen
- consistent te maken over meerdere pagina’s

Bijvoorbeeld: een 12-koloms grid laat toe dat je 1/2, 1/3 of 1/4 van een pagina gebruikt voor bepaalde elementen.

> 🎯 Goed gebruik van witruimte, marges en verdeling zorgt voor rust en overzicht.

#### **Tips voor wireframing**

- Begin met de **homepage**: wat moet daar sowieso op?
- Bepaal daarna wat op een **subpagina** komt (zoals 'Over ons' of 'Contact')
- Plaats elementen op volgorde van belang (visuele hiërarchie)
- Gebruik duidelijke labels: “Afbeelding”, “Titel”, “Tekstblok”, “Button”
- Denk aan verschillende apparaten: hoe werkt dit mobiel?

> 💡 Vraag jezelf steeds af: *wat ziet de bezoeker eerst? Wat moet opvallen?*

# Oefeningen

#### **Opdracht A: Homepage wireframe**

1. Bedenk een onderwerp voor een fictieve website (bijv. een portfolio, muziekevenement, schoolproject of vereniging).
2. Teken (op papier of digitaal) een wireframe voor de homepage.
    
    
    - Gebruik vlakken en tekstlabels (geen kleur)
    - Zorg voor: header, hero, menu, tekstvakken, afbeelding(en), knop(pen), footer
3. Reflecteer: komt de belangrijkste boodschap duidelijk in beeld?

#### **Opdracht B: Subpagina wireframe**

1. Kies een subpagina: bijv. “Over ons”, “Contact” of “Galerij”
2. Maak een wireframe in dezelfde stijl als de homepage
3. Zorg voor structuur: waar komt de inhoud, waar navigeer je terug?

# Visueel ontwerp en ontwerpprincipes



# Uitleg

#### **Wat is visueel ontwerp?**

**Visueel ontwerp** gaat over hoe je website eruitziet: de stijl, sfeer en vormgeving van de elementen op de pagina.

Het bepaalt:

- De **eerste indruk** van je site
- De **emotie** die het oproept (vertrouwen, energie, rust)
- De **duidelijkheid** van informatie
- De **branding** of uitstraling van de organisatie

> Een goed visueel ontwerp is niet alleen mooi, maar **ondersteunt de inhoud en helpt de gebruiker**.

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/gubimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/gubimage.png)

#### **De 4 basisprincipes van ontwerp (CRAP)**

Een bekende set ontwerpprincipes komt uit het boek *Design for Non-Designers* van Robin Williams. De vier hoofdprincipes zijn:

<div class="_tableContainer_16hzy_1" id="bkmrk-principe-wat-beteken"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="1861" data-start="1406"><thead data-end="1450" data-start="1406"><tr data-end="1450" data-start="1406"><th data-col-size="sm" data-end="1417" data-start="1406">Principe</th><th data-col-size="md" data-end="1437" data-start="1417">Wat betekent het?</th><th data-col-size="sm" data-end="1450" data-start="1437">Voorbeeld</th></tr></thead><tbody data-end="1861" data-start="1497"><tr data-end="1581" data-start="1497"><td data-col-size="sm" data-end="1512" data-start="1497">**C**ontrast</td><td data-col-size="md" data-end="1542" data-start="1512">Onderscheid maken zichtbaar</td><td data-col-size="sm" data-end="1581" data-start="1542">Donkere tekst op lichte achtergrond</td></tr><tr data-end="1657" data-start="1582"><td data-col-size="sm" data-end="1598" data-start="1582">**R**epeating</td><td data-col-size="md" data-end="1622" data-start="1598">Herhaling van stijlen</td><td data-col-size="sm" data-end="1657" data-start="1622">Zelfde knopstijl op elke pagina</td></tr><tr data-end="1754" data-start="1658"><td data-col-size="sm" data-end="1674" data-start="1658">**A**lignment</td><td data-col-size="md" data-end="1713" data-start="1674">Uitlijning zorgt voor rust en logica</td><td data-col-size="sm" data-end="1754" data-start="1713">Tekst en beelden netjes op een raster</td></tr><tr data-end="1861" data-start="1755"><td data-col-size="sm" data-end="1771" data-start="1755">**P**roximity</td><td data-col-size="md" data-end="1819" data-start="1771">Dingen die bij elkaar horen, staan bij elkaar</td><td data-col-size="sm" data-end="1861" data-start="1819">Kop en alinea dichtbij, niet verspreid</td></tr></tbody></table>

</div></div>Door deze principes toe te passen, ontstaat visuele samenhang en duidelijkheid.

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/1Mbimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/1Mbimage.png)

#### **Kleurgebruik**

Kleur roept emoties op en helpt gebruikers navigeren. Goede kleuren ondersteunen het doel van de site.

##### **Enkele vuistregels:**

- Gebruik maximaal **2–3 hoofdkleuren**
- Zorg voor **voldoende contrast** (denk aan leesbaarheid!)
- Gebruik kleur **functioneel** (bijv. blauw voor links, rood voor waarschuwingen)
- Denk aan kleurenblindheid: vermijd combinaties als rood-groen zonder extra verschil

🎨 Websites als [coolors.co](https://coolors.co) of [Adobe Color](https://color.adobe.com) helpen bij het kiezen van kleurenschema’s.

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/J3fimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/J3fimage.png)

#### **Typografie**

De keuze van lettertypes (fonts) is belangrijk voor **leesbaarheid** én sfeer.

##### **Belangrijke aandachtspunten:**

- Gebruik niet te veel verschillende lettertypes (maximaal 2)
- Kies een goed leesbaar font voor lopende tekst (bijv. *Roboto*, *Open Sans*)
- Gebruik grotere lettertypes voor koppen
- Zorg voor voldoende regelafstand (line spacing)

🧠 Let ook op uitlijning: links uitgelijnde tekst leest prettiger dan gecentreerd of uitgevuld.

#### **Witruimte en rust**

Witruimte (of *negative space*) is de lege ruimte tussen elementen. Het lijkt misschien "verspilde ruimte", maar het is essentieel voor een professioneel ontwerp.

Witruimte zorgt voor:

- Rust
- Aandacht voor belangrijke elementen
- Betere scanbaarheid van content

💡 *Tip:* Less is more. Een drukke pagina schrikt af.

#### **Beeldgebruik en iconen**

Afbeeldingen en iconen versterken het ontwerp, mits:

- ze relevant en van hoge kwaliteit zijn
- ze goed aansluiten bij de stijl
- ze niet storend of te druk zijn

Gebruik geen overload aan stockfoto's. Kies liever één stijl en blijf daarbij.

Websites zoals [Unsplash](https://unsplash.com) of [Flaticon](https://flaticon.com) bieden rechtenvrije beelden en iconen.

# Oefeningen

#### **Opdracht A – Analyse van ontwerpkeuzes**

Kies een bestaande website en beantwoord:

1. Welke kleuren worden gebruikt? Wat is de functie daarvan?
2. Welke lettertypes herken je?
3. Hoe is contrast toegepast?
4. Is er consistentie tussen pagina’s?
5. Waar wordt witruimte gebruikt?

⚠️ Let op: gebruik bij je analyse de ontwerptermen (contrast, alignment, proximity, enz.)

#### **Opdracht B – Jouw stijlblad maken**

1. Kies een onderwerp voor je eigen fictieve website (bijv. een portfolio, online winkel, evenement).
2. Bepaal een **visuele stijl** en werk het uit in een stijlblad:
    
    
    - Kleurenpalet (hoofd-, accent- en achtergrondkleur)
    - 1 of 2 lettertypes
    - Stijl van knoppen, links, koppen
    - Beeldstijl: fotografie, illustraties of iconen?

Je kunt dit doen in Canva, Figma, PowerPoint of met de hand.

# Toegankelijkheid en responsive design



# Uitleg

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/vCMimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/vCMimage.png)

#### **Wat is toegankelijk webdesign?**

**Toegankelijkheid** in webdesign betekent dat iedereen je website goed kan gebruiken — ook mensen met:

- een visuele beperking (bijv. kleurenblindheid, slechtziendheid)
- motorische beperking (moeite met muisgebruik)
- auditieve beperking (bijv. doven of slechthorenden)
- cognitieve of leerproblemen (bijv. dyslexie)
- een trage internetverbinding of ouder apparaat

> 📣 “Als je ontwerp alleen werkt voor de ideale gebruiker, dan werkt het niet goed.”

Toegankelijkheid gaat dus over **inclusie**: niemand wordt buitengesloten vanwege technologie, beperking of situatie.

#### **Waarom is dit belangrijk?**

- 1 op de 5 mensen heeft een tijdelijke of permanente beperking
- Toegankelijke websites zijn gebruiksvriendelijker voor *iedereen*
- In veel landen zijn overheden en onderwijsinstellingen wettelijk verplicht om toegankelijk te ontwerpen (WCAG)

Een site die toegankelijk is:

- vergroot je bereik
- laat zien dat je rekening houdt met anderen
- is vaak beter gestructureerd en duidelijker

#### **Basisprincipes van toegankelijkheid**

Hieronder staan enkele richtlijnen die bijdragen aan toegankelijkheid:

<div class="_tableContainer_16hzy_1" id="bkmrk-richtlijn-waarom%3F-vo"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="2763" data-start="1965"><thead data-end="2002" data-start="1965"><tr data-end="2002" data-start="1965"><th data-col-size="sm" data-end="1977" data-start="1965">Richtlijn</th><th data-col-size="md" data-end="1987" data-start="1977">Waarom?</th><th data-col-size="md" data-end="2002" data-start="1987">Voorbeelden</th></tr></thead><tbody data-end="2763" data-start="2040"><tr data-end="2152" data-start="2040"><td data-col-size="sm" data-end="2063" data-start="2040">**Goede contrasten**</td><td data-col-size="md" data-end="2113" data-start="2063">Mensen met slecht zicht kunnen alles goed lezen</td><td data-col-size="md" data-end="2152" data-start="2113">Donkere tekst op lichte achtergrond</td></tr><tr data-end="2252" data-start="2153"><td data-col-size="sm" data-end="2185" data-start="2153">**Grote, duidelijke letters**</td><td data-col-size="md" data-end="2216" data-start="2185">Beter leesbaar voor iedereen</td><td data-col-size="md" data-end="2252" data-start="2216">Minimaal 16px voor normale tekst</td></tr><tr data-end="2380" data-start="2253"><td data-col-size="sm" data-end="2295" data-start="2253">**Alternatieve tekst bij afbeeldingen**</td><td data-col-size="md" data-end="2350" data-start="2295">Gebruikers met screenreaders kunnen inhoud begrijpen</td><td data-col-size="md" data-end="2380" data-start="2350">`<img alt="Man met hond">`</td></tr><tr data-end="2488" data-start="2381"><td data-col-size="sm" data-end="2409" data-start="2381">**Toetsenbord-navigatie**</td><td data-col-size="md" data-end="2443" data-start="2409">Niet iedereen gebruikt een muis</td><td data-col-size="md" data-end="2488" data-start="2443">Menus kunnen via Tab-toets bereikt worden</td></tr><tr data-end="2612" data-start="2489"><td data-col-size="sm" data-end="2522" data-start="2489">**Duidelijke koppenstructuur**</td><td data-col-size="md" data-end="2572" data-start="2522">Screenreaders lezen koppen in logische volgorde</td><td data-col-size="md" data-end="2612" data-start="2572">Gebruik `<h1>`, `<h2>`, enz. correct</td></tr><tr data-end="2763" data-start="2613"><td data-col-size="sm" data-end="2652" data-start="2613">**Geen informatie alleen via kleur**</td><td data-col-size="md" data-end="2704" data-start="2652">Kleurenblinde gebruikers missen anders informatie</td><td data-col-size="md" data-end="2763" data-start="2704">Niet alleen rood = fout; gebruik ook een icoon of tekst</td></tr></tbody></table>

</div></div>💡 Websites zoals [webaim.org](https://webaim.org/) of [accessibility-developer-guide.com](https://accessibility-developer-guide.com/) geven goede richtlijnen en voorbeelden.

#### **Wat is responsive design?**

**Responsive design** betekent dat een website zich automatisch aanpast aan het schermformaat van het apparaat.

Dat kan zijn:

- 🖥️ desktop
- 📱 mobiel
- 💻 tablet

##### **Waarom is dat belangrijk?**

- Meer dan 60% van het internetgebruik gebeurt via mobiele apparaten
- Als je site niet goed schaalt, haken gebruikers af
- Een goed mobiel ontwerp betekent: eenvoudig, groot genoeg, overzichtelijk

##### **Wat verandert er meestal bij kleinere schermen?**

- Het menu wordt een hamburgermenu
- Elementen worden onder elkaar gezet i.p.v. naast elkaar
- Tekst en knoppen worden groter en beter klikbaar
- Onnodige of grote elementen worden verborgen

> 🧠 Ontwerp dus *mobile-first* of test altijd hoe je ontwerp eruitziet op mobiel.

#### **Test jezelf: is jouw ontwerp toegankelijk?**

Hieronder een checklist:

✅ Is je tekst goed leesbaar (kleur, grootte)?  
✅ Heb je geen informatie die alleen via kleur wordt overgebracht?  
✅ Werken knoppen en links ook met toetsenbord?  
✅ Heb je afbeeldingen voorzien van tekst of beschrijving?  
✅ Is je ontwerp goed te gebruiken op mobiel én desktop?

Gebruik ook gratis tools zoals:

- <a class="cursor-pointer" data-end="4155" data-start="4113" rel="noopener" target="_new">wave.webaim.org</a> – toegankelijkheidsanalyse
- Chrome DevTools &gt; “Toestellen” – test je ontwerp op mobielformaat

# Oefeningen

#### **Opdracht A – Ontwerpanalyse: toegankelijk of niet?**

Kies een bestaande website. Analyseer de volgende punten:

1. Zijn de lettertypes goed leesbaar?
2. Is er genoeg contrast tussen tekst en achtergrond?
3. Kan je de site met alleen het toetsenbord bedienen?
4. Worden afbeeldingen beschreven of genegeerd?
5. Hoe ziet de site eruit op mobiel?

Werk je bevindingen uit in ±150 woorden.

#### **Opdracht B – Je eigen ontwerp verbeteren**

Neem je eigen wireframe of ontwerpstijl (van hoofdstuk 3 of 4) en:

1. Controleer de toegankelijkheid (kleur, tekst, structuur)
2. Teken een mobiele versie van je ontwerp (layout herschikken!)
3. Schrijf kort op wat je hebt aangepast en waarom

# Analyse van bestaande websites



# Uitleg

[![image.png](https://digitaallab.nl/uploads/images/gallery/2025-06/scaled-1680-/ulaimage.png)](https://digitaallab.nl/uploads/images/gallery/2025-06/ulaimage.png)

#### **Waarom websites analyseren?**

Een goede ontwerper leert niet alleen door zelf te maken, maar vooral door te **kijken, vergelijken en onderbouwen**.

Door websites te analyseren, leer je:

- Welke keuzes effectief zijn (en waarom)
- Hoe doelgroep, stijl en inhoud op elkaar afgestemd kunnen zijn
- Welke fouten of valkuilen je zelf kunt vermijden
- Bewuster naar je eigen ontwerp te kijken

> 🎯 Analyse is dus meer dan "mooi" of "lelijk" – het gaat om **wat werkt** en **voor wie**.

#### **Waar let je op bij een analyse?**

Gebruik de onderwerpen uit eerdere hoofdstukken om systematisch naar websites te kijken. Dit kun je doen aan de hand van vijf hoofdvragen:

##### 1. **Wat is het doel van de website?**

- Informeren, verkopen, overtuigen, helpen, entertainen?
- Is het doel duidelijk zichtbaar op de homepage?

##### 2. **Wie is de doelgroep?**

- Leeftijd, interesse, kennisniveau?
- Past het ontwerp bij hun verwachtingen en voorkeuren?

##### 3. **Hoe is de gebruikerservaring (UX)?**

- Is de site logisch opgebouwd?
- Kan je makkelijk navigeren?
- Zijn er frustraties of obstakels?

##### 4. **Hoe is het visueel ontwerp?**

- Welke kleuren, lettertypes en stijlen zijn gebruikt?
- Is er balans en hiërarchie?
- Hoe wordt beeld ingezet?

##### 5. **Is de site toegankelijk en mobielvriendelijk?**

- Genoeg contrast?
- Werkt het op mobiel?
- Kan je navigeren met toetsenbord?
- Zijn er alternatieve teksten bij afbeeldingen?

#### **Analysemethoden**

Er zijn meerdere manieren om een website te analyseren:

<div class="_tableContainer_16hzy_1" id="bkmrk-methode-vorm-wanneer"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="2747" data-start="2295"><thead data-end="2334" data-start="2295"><tr data-end="2334" data-start="2295"><th data-col-size="sm" data-end="2305" data-start="2295">Methode</th><th data-col-size="sm" data-end="2312" data-start="2305">Vorm</th><th data-col-size="md" data-end="2334" data-start="2312">Wanneer gebruiken?</th></tr></thead><tbody data-end="2747" data-start="2375"><tr data-end="2451" data-start="2375"><td data-col-size="sm" data-end="2389" data-start="2375">✅ Checklist</td><td data-col-size="sm" data-end="2417" data-start="2389">Objectief, gestructureerd</td><td data-col-size="md" data-end="2451" data-start="2417">Voor systematische beoordeling</td></tr><tr data-end="2539" data-start="2452"><td data-col-size="sm" data-end="2481" data-start="2452">🧠 Review in eigen woorden</td><td data-col-size="sm" data-end="2506" data-start="2481">Subjectiever, creatief</td><td data-col-size="md" data-end="2539" data-start="2506">Voor reflectie en presentatie</td></tr><tr data-end="2636" data-start="2540"><td data-col-size="sm" data-end="2560" data-start="2540">🧪 Gebruikerstest</td><td data-col-size="sm" data-end="2601" data-start="2560">Je laat iemand anders de site proberen</td><td data-col-size="md" data-end="2636" data-start="2601">Om echte UX-problemen te vinden</td></tr><tr data-end="2747" data-start="2637"><td data-col-size="sm" data-end="2666" data-start="2637">🧰 Tool-gebaseerde analyse</td><td data-col-size="sm" data-end="2700" data-start="2666">Met tools als WAVE of PageSpeed</td><td data-col-size="md" data-end="2747" data-start="2700">Voor technische en toegankelijkheidsanalyse</td></tr></tbody></table>

</div></div>Voor deze module gebruiken we vooral **checklists en reviews**.

#### **Voorbeeldanalyse (samengevat)**

**Website**: bol.com  
**Doel**: producten verkopen (e-commerce)  
**Doelgroep**: breed publiek, vooral volwassenen en ouders

<div class="_tableContainer_16hzy_1" id="bkmrk-aspect-analyse-ux-du"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="3466" data-start="2984"><thead data-end="3004" data-start="2984"><tr data-end="3004" data-start="2984"><th data-col-size="sm" data-end="2993" data-start="2984">Aspect</th><th data-col-size="md" data-end="3004" data-start="2993">Analyse</th></tr></thead><tbody data-end="3466" data-start="3026"><tr data-end="3116" data-start="3026"><td data-col-size="sm" data-end="3031" data-start="3026">UX</td><td data-col-size="md" data-end="3116" data-start="3031">Duidelijke zoekfunctie, veel aanbevelingen, snel scrollen, maar soms veel reclame</td></tr><tr data-end="3219" data-start="3117"><td data-col-size="sm" data-end="3127" data-start="3117">Visueel</td><td data-col-size="md" data-end="3219" data-start="3127">Rustige blauwe kleur, witruimte, duidelijke knoppen, consistent gebruik van pictogrammen</td></tr><tr data-end="3294" data-start="3220"><td data-col-size="sm" data-end="3232" data-start="3220">Structuur</td><td data-col-size="md" data-end="3294" data-start="3232">Heldere header, vaste navigatie, veel herhaling en filters</td></tr><tr data-end="3377" data-start="3295"><td data-col-size="sm" data-end="3314" data-start="3295">Toegankelijkheid</td><td data-col-size="md" data-end="3377" data-start="3314">Goede lettergrootte, werkt op mobiel, contrast meestal goed</td></tr><tr data-end="3466" data-start="3378"><td data-col-size="sm" data-end="3393" data-start="3378">Verbeterpunt</td><td data-col-size="md" data-end="3466" data-start="3393">Sommige knoppen te klein op mobiel, veel afleiding op productpagina’s</td></tr></tbody></table>

</div></div>

# Oefeningen

#### **Opdracht A – Analyse met checklist**

1. Kies een website (of gebruik een lijst van de docent). Bijvoorbeeld:
    
    
    - Een schoolsite
    - Een webshop
    - Een museumsite
    - Een persoonlijk portfolio
2. Vul de volgende checklist in:

<div class="_tableContainer_16hzy_1" id="bkmrk-vragen-antwoord-%2F-to"><div class="_tableWrapper_16hzy_14 group flex w-fit flex-col-reverse" tabindex="-1"><table class="w-fit min-w-(--thread-content-width)" data-end="4159" data-start="3734"><thead data-end="3769" data-start="3734"><tr data-end="3769" data-start="3734"><th data-col-size="md" data-end="3743" data-start="3734">Vragen</th><th data-col-size="sm" data-end="3769" data-start="3743">Antwoord / Toelichting</th></tr></thead><tbody data-end="4159" data-start="3807"><tr data-end="3841" data-start="3807"><td data-col-size="md" data-end="3838" data-start="3807">Wat is het doel van de site?</td><td data-col-size="sm" data-end="3841" data-start="3838"> </td></tr><tr data-end="3868" data-start="3842"><td data-col-size="md" data-end="3865" data-start="3842">Wie is de doelgroep?</td><td data-col-size="sm" data-end="3868" data-start="3865"> </td></tr><tr data-end="3899" data-start="3869"><td data-col-size="md" data-end="3896" data-start="3869">Is de navigatie logisch?</td><td data-col-size="sm" data-end="3899" data-start="3896"> </td></tr><tr data-end="3935" data-start="3900"><td data-col-size="md" data-end="3932" data-start="3900">Wat valt direct op (visueel)?</td><td data-col-size="sm" data-end="3935" data-start="3932"> </td></tr><tr data-end="3974" data-start="3936"><td data-col-size="md" data-end="3971" data-start="3936">Hoe is de kleur- en letterkeuze?</td><td data-col-size="sm" data-end="3974" data-start="3971"> </td></tr><tr data-end="4025" data-start="3975"><td data-col-size="md" data-end="4022" data-start="3975">Zijn er UX-fouten of verwarrende onderdelen?</td><td data-col-size="sm" data-end="4025" data-start="4022"> </td></tr><tr data-end="4060" data-start="4026"><td data-col-size="md" data-end="4057" data-start="4026">Is de site mobiel bruikbaar?</td><td data-col-size="sm" data-end="4060" data-start="4057"> </td></tr><tr data-end="4108" data-start="4061"><td data-col-size="md" data-end="4105" data-start="4061">Is de content toegankelijk voor iedereen?</td><td data-col-size="sm" data-end="4108" data-start="4105"> </td></tr><tr data-end="4130" data-start="4109"><td data-col-size="md" data-end="4127" data-start="4109">Wat werkt goed?</td><td data-col-size="sm" data-end="4130" data-start="4127"> </td></tr><tr data-end="4159" data-start="4131"><td data-col-size="md" data-end="4156" data-start="4131">Wat zou je verbeteren?</td><td data-col-size="sm" data-end="4159" data-start="4156"> </td></tr></tbody></table>

</div></div>💡 Je kunt deze opdracht individueel of in tweetallen uitvoeren.

#### **Opdracht B – Mini-presentatie**

1. Maak een korte presentatie (±3 minuten) over je analyse:
    
    
    - Toon screenshots
    - Vertel wat goed werkt en waarom
    - Benoem 1–2 verbeterpunten
    - Geef een eindbeoordeling (bijv. score uit 10)
2. Presenteer dit klassikaal of in kleine groepen.