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