# 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?