Webdesign
In deze module duik je in de wereld van webdesign, met de focus op ontwerp, gebruikerservaring en visuele communicatie. Je leert hoe je websites ontwerpt die er niet alleen goed uitzien, maar ook logisch, gebruiksvriendelijk en toegankelijk zijn.
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 :
Webdesign
Webdevelopment
Gaat over uiterlijk en gebruikerservaring
Gaat over hoe het technisch werkt
Denk aan kleur, stijl, structuur
Denk aan HTML, CSS, JavaScript
Maakt wireframes, prototypes, mock-ups
Programmeert en integreert systemen
Richt zich op vorm en interactie
Richt zich op techniek en functionaliteit
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:
Slecht design
Goed design
Te veel tekst zonder indeling
Duidelijke koppen en witruimte
Onlogische of verborgen menu’s
Intuïtieve navigatie
Slecht contrast of te klein lettertype
Goede leesbaarheid
Te veel visuele chaos
Rustige, consistente opmaak
👁🗨 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:
Type website
Voorbeeld
Doel
Informatief
Wikipedia, schoolsite
Informatie geven
Commercieel
Webshop, merkpagina
Verkopen of overtuigen
Persoonlijk
Portfolio, CV-site
Jezelf presenteren
Educatief
Leeromgeving, blog
Uitleggen, leren
Communicatief
Forum, contactpagina
Interactie mogelijk maken
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
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)
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:
Principe
Betekenis
Voorbeeld
Duidelijke navigatie
Menu’s zijn herkenbaar en logisch
Home – Over ons – Diensten – Contact
Feedback geven
Laat zien dat iets werkt
“Bericht verzonden!” na een formulier
Consistentie
Knoppen en kleuren blijven gelijk
Rode knop = annuleer, altijd
Beperk keuze-overload
Niet te veel tegelijk laten zien
Gebruik tabbladen of dropdowns
Mobielvriendelijk
Werkt ook op kleine schermen
Grote knoppen, geen tiny links
Toegankelijkheid
Ook bruikbaar voor mensen met een beperking
Contrast, alt-teksten, duidelijke taal
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
Bedenk een doelgroep voor een fictieve website. Bijvoorbeeld:
Jongeren die een bijbaan zoeken
Ouderen die een reis willen boeken
Studenten die een studiegids gebruiken
Maak een persona : Naam, leeftijd, kort profiel
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
Bezoek 2 verschillende websites (bijv. een webshop en een informatiepagina)
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:
Onderdeel
Functie
Header
Bovenkant van de pagina met logo en menu
Navigatie
Menu of knoppen om tussen pagina’s te bewegen
Hero / intro
Eerste opvallende gedeelte, vaak een afbeelding + titel
Content / hoofdtekst
De kern: tekst, afbeeldingen, video’s, etc.
Sidebar (optioneel)
Extra menu, info, zoekbalk
Call to action (CTA)
Knop of oproep tot actie (“Meld je aan!”)
Footer
Onderaan: contact, social media, links, copyright
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
Bedenk een onderwerp voor een fictieve website (bijv. een portfolio, muziekevenement, schoolproject of vereniging).
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
Reflecteer: komt de belangrijkste boodschap duidelijk in beeld?
Opdracht B: Subpagina wireframe
Kies een subpagina: bijv. “Over ons”, “Contact” of “Galerij”
Maak een wireframe in dezelfde stijl als de homepage
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:
Principe
Wat betekent het?
Voorbeeld
C ontrast
Onderscheid maken zichtbaar
Donkere tekst op lichte achtergrond
R epeating
Herhaling van stijlen
Zelfde knopstijl op elke pagina
A lignment
Uitlijning zorgt voor rust en logica
Tekst en beelden netjes op een raster
P roximity
Dingen die bij elkaar horen, staan bij elkaar
Kop en alinea dichtbij, niet verspreid
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:
Welke kleuren worden gebruikt? Wat is de functie daarvan?
Welke lettertypes herken je?
Hoe is contrast toegepast?
Is er consistentie tussen pagina’s?
Waar wordt witruimte gebruikt?
⚠️ Let op: gebruik bij je analyse de ontwerptermen (contrast, alignment, proximity, enz.)
Opdracht B – Jouw stijlblad maken
Kies een onderwerp voor je eigen fictieve website (bijv. een portfolio, online winkel, evenement).
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:
Richtlijn
Waarom?
Voorbeelden
Goede contrasten
Mensen met slecht zicht kunnen alles goed lezen
Donkere tekst op lichte achtergrond
Grote, duidelijke letters
Beter leesbaar voor iedereen
Minimaal 16px voor normale tekst
Alternatieve tekst bij afbeeldingen
Gebruikers met screenreaders kunnen inhoud begrijpen
Toetsenbord-navigatie
Niet iedereen gebruikt een muis
Menus kunnen via Tab-toets bereikt worden
Duidelijke koppenstructuur
Screenreaders lezen koppen in logische volgorde
Gebruik