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 Man met hond Toetsenbord-navigatie Niet iedereen gebruikt een muis Menus kunnen via Tab-toets bereikt worden Duidelijke koppenstructuur Screenreaders lezen koppen in logische volgorde Gebruik

,

, enz. correct Geen informatie alleen via kleur Kleurenblinde gebruikers missen anders informatie Niet alleen rood = fout; gebruik ook een icoon of tekst 💡 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: Zijn de lettertypes goed leesbaar? Is er genoeg contrast tussen tekst en achtergrond? Kan je de site met alleen het toetsenbord bedienen? Worden afbeeldingen beschreven of genegeerd? 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: Controleer de toegankelijkheid (kleur, tekst, structuur) Teken een mobiele versie van je ontwerp (layout herschikken!) 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: Methode Vorm Wanneer gebruiken? ✅ Checklist Objectief, gestructureerd Voor systematische beoordeling 🧠 Review in eigen woorden Subjectiever, creatief Voor reflectie en presentatie 🧪 Gebruikerstest Je laat iemand anders de site proberen Om echte UX-problemen te vinden 🧰 Tool-gebaseerde analyse Met tools als WAVE of PageSpeed Voor technische en toegankelijkheidsanalyse 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 Aspect Analyse UX Duidelijke zoekfunctie, veel aanbevelingen, snel scrollen, maar soms veel reclame Visueel Rustige blauwe kleur, witruimte, duidelijke knoppen, consistent gebruik van pictogrammen Structuur Heldere header, vaste navigatie, veel herhaling en filters Toegankelijkheid Goede lettergrootte, werkt op mobiel, contrast meestal goed Verbeterpunt Sommige knoppen te klein op mobiel, veel afleiding op productpagina’s Oefeningen Opdracht A – Analyse met checklist Kies een website (of gebruik een lijst van de docent). Bijvoorbeeld: Een schoolsite Een webshop Een museumsite Een persoonlijk portfolio Vul de volgende checklist in: Vragen Antwoord / Toelichting Wat is het doel van de site?   Wie is de doelgroep?   Is de navigatie logisch?   Wat valt direct op (visueel)?   Hoe is de kleur- en letterkeuze?   Zijn er UX-fouten of verwarrende onderdelen?   Is de site mobiel bruikbaar?   Is de content toegankelijk voor iedereen?   Wat werkt goed?   Wat zou je verbeteren?   💡 Je kunt deze opdracht individueel of in tweetallen uitvoeren. Opdracht B – Mini-presentatie 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) Presenteer dit klassikaal of in kleine groepen.