Webdesign

• Wat is webdesign?
• Uitleg
• Oefeningen
• Doelgroep en gebruikerservaring (UX)
• Uitleg
• Oefeningen
• Structuur en wireframing
• Uitleg
• Oefeningen
• Visueel ontwerp en ontwerpprincipes
• Uitleg
• Oefeningen
• Toegankelijkheid en responsive design
• Uitleg
• Oefeningen
• Analyse van bestaande websites
• Uitleg
• Oefeningen

Wat is webdesign?

Uitleg

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:

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:

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

Typen websites en hun doelen

Websites kunnen allerlei doelen hebben, zoals:

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

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:

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:

Deze structuur helpt gebruikers verwachtingen herkennen – ze weten instinctief waar ze dingen kunnen vinden.

Wat is een wireframe?

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, Balsamiq, Whimsical, Canva

Werken met grids en kolommen

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.

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:

Door deze principes toe te passen, ontstaat visuele samenhang en duidelijkheid.

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 of Adobe Color helpen bij het kiezen van kleurenschema’s.

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 of Flaticon 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

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:

💡 Websites zoals webaim.org of 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:

• wave.webaim.org – toegankelijkheidsanalyse

• Chrome DevTools > “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

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:

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

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:

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