A
Above the Fold
Above the fold is het gedeelte van een webpagina dat zichtbaar is zonder te scrollen. De term komt uit de krantenwereld, waar het belangrijkste nieuws boven de vouw stond. In webdesign bepaalt above the fold de eerste indruk: je headline, hero section en primaire call-to-action moeten hier staan. Onderzoek toont aan dat 57% van de paginaweergavetijd wordt besteed aan content boven de fold. Zorg dat je kernboodschap direct zichtbaar is op je landingspagina.
Accessibility (Toegankelijkheid)
Accessibility (a11y) is het ontwerpen van websites en apps zodat ze bruikbaar zijn voor iedereen, inclusief mensen met visuele, auditieve, motorische of cognitieve beperkingen. Dit omvat alt-teksten voor afbeeldingen, voldoende kleurcontrast, toetsenbordnavigatie en correcte HTML-structuur voor screenreaders. De WCAG 2.1-richtlijnen (Web Content Accessibility Guidelines) vormen de internationale standaard. In Nederland is digitale toegankelijkheid wettelijk verplicht voor overheidssites en steeds relevanter voor commerciele websites.
Adaptive Design
Adaptive design is een ontwerpmethodiek waarbij meerdere vaste lay-outs worden gemaakt voor specifieke schermbreedtes, in tegenstelling tot responsive design dat vloeiend schaalt. Bij adaptive design detecteert de server het apparaat en serveert de bijbehorende versie. Het voordeel is volledige controle per apparaat, het nadeel is meer onderhoud. Tegenwoordig is responsive design de standaard, maar adaptive design wordt nog ingezet bij complexe applicaties waar de mobiele ervaring fundamenteel anders moet zijn dan desktop.
Affordance
Een affordance is een visueel kenmerk dat de gebruiker suggereert hoe een element gebruikt kan worden. Een knop met schaduw en afgeronde hoeken nodigt uit tot klikken, een schuifbalk suggereert slepen, een onderstreepte tekst impliceert een link. Donald Norman introduceerde het concept in "The Design of Everyday Things." In UX-design is het cruciaal dat affordances duidelijk zijn: als een element eruit ziet als een knop maar niet klikbaar is, creeer je verwarring en frustratie bij de gebruiker.
Animation (Animatie)
Animatie in webdesign verwijst naar bewegende elementen die de gebruikerservaring verrijken: fade-ins, slide-transitions, hover-effecten en micro-interactions. Goede animaties geven feedback (een knop die kort pulseert na klikken), begeleiden de aandacht en maken interfaces levendiger. Slechte animaties vertragen de pagina, leiden af of veroorzaken motion sickness. De vuistregel: animaties moeten functioneel zijn en niet langer duren dan 300-500 milliseconden. Gebruik CSS-animaties waar mogelijk voor de beste prestaties.
Atomic Design
Atomic design is een methodologie van Brad Frost waarbij je interfaces opbouwt vanuit de kleinste elementen naar het grotere geheel, vergelijkbaar met atomen die moleculen vormen. De vijf niveaus zijn: atoms (knoppen, labels, inputs), molecules (zoekbalk = input + knop), organisms (navigatiebalk), templates (paginastructuur) en pages (ingevulde templates). Atomic design zorgt voor consistentie, herbruikbaarheid en onderhoudbaarheid en vormt de basis van moderne design systems.
B
Backlog
Een backlog is een geprioriteerde lijst van taken, features en verbeteringen die nog moeten worden uitgevoerd in een webdesign- of ontwikkelproject. In Scrum wordt onderscheid gemaakt tussen de product backlog (alle gewenste functionaliteiten) en de sprint backlog (taken voor de huidige sprint). Een goed beheerde backlog helpt teams om gefocust te blijven en de belangrijkste UX-verbeteringen als eerste aan te pakken. Stakeholders dragen items aan, maar de product owner bepaalt de prioriteit.
Below the Fold
Below the fold is alle content op een webpagina die pas zichtbaar wordt na scrollen. Hoewel above the fold de eerste indruk bepaalt, is below the fold minstens zo belangrijk: hier plaats je verdiepende content, social proof, features en secundaire call-to-actions. Moderne gebruikers zijn gewend om te scrollen, zeker op mobiel. De kunst is om above the fold nieuwsgierig genoeg te maken dat bezoekers willen doorscrollen. Gebruik visuele cues zoals halve afbeeldingen of pijlen.
Bounce Rate
De bounce rate is het percentage bezoekers dat je website verlaat zonder verdere interactie. In Google Analytics 4 is een bounce een sessie korter dan 10 seconden, zonder conversie en met maximaal een paginaweergave. Een hoge bounce rate kan wijzen op trage laadtijden, slechte UI, een mismatch tussen zoekintentie en pagina-inhoud, of een verwarrende navigatie. Meer cijfers vind je in de conversie-optimalisatie statistieken 2026.
Breakpoint
Een breakpoint is een specifieke schermbreedte in CSS waarop de lay-out van een website verandert. Veelgebruikte breakpoints zijn 640px (mobiel), 768px (tablet), 1024px (laptop) en 1280px (desktop). Bij elk breakpoint kunnen kolommen herverdelen, navigatie inklapmenu, en lettergroottes aanpassen. Moderne frameworks zoals Tailwind CSS gebruiken mobile-first breakpoints: je ontwerpt eerst voor mobiel en voegt via media queries aanpassingen toe voor grotere schermen. Kies breakpoints op basis van je content, niet op basis van specifieke apparaten.
Breadcrumb (Kruimelpad)
Een breadcrumb is een navigatie-element dat de hierarchische positie van een pagina toont (bijvoorbeeld: Home > Diensten > Webdesign). Breadcrumbs verminderen frictie doordat gebruikers snel terug kunnen navigeren zonder de terugknop. Ze verbeteren ook de interne linkstructuur voor SEO — Google toont ze regelmatig in zoekresultaten. Voor websites met diepe hierarchieen zijn breadcrumbs onmisbaar. Plaats ze bovenaan de pagina, onder de navigatie, in een klein lettertype.
C
Card Design
Card design is een UI-patroon waarbij content wordt gepresenteerd in visueel afgebakende kaarten met een afbeelding, titel, beschrijving en eventueel een actieknop. Pinterest populariseerde het concept en sindsdien is het een standaardpatroon geworden. Cards werken uitstekend in responsive design omdat ze als losse blokken makkelijk herverdelen over kolommen. Ze bieden een consistent formaat voor wisselende content en nodigen uit tot interactie. Gebruik cards voor portfolios, blogposts, producten of teamleden.
CLS (Cumulative Layout Shift)
CLS meet hoeveel de lay-out van een pagina onverwacht verschuift tijdens het laden. Het is een van Google's Core Web Vitals en bevindt zich op het snijvlak van UX en SEO. Een slechte CLS-score (boven 0,25) betekent dat elementen verspringen terwijl de gebruiker leest of klikt — extreem frustrerend. Veelvoorkomende oorzaken zijn afbeeldingen zonder afmetingen, dynamisch geladen advertenties en webfonts die laat laden. Geef afbeeldingen altijd width en height attributen.
Color Theory (Kleurentheorie)
Kleurentheorie is het raamwerk voor het combineren en toepassen van kleuren in design. Het omvat het kleurenwiel (primaire, secundaire, tertiaire kleuren), kleurharmonieen (complementair, analoog, triadisch) en de psychologie van kleur: blauw wekt vertrouwen, rood urgentie, groen rust. In webdesign bepaal je een primaire kleur (merk), accentkleur (CTA's) en neutrale kleuren (tekst, achtergrond). Zorg altijd voor voldoende contrast conform WCAG-richtlijnen — minimaal 4,5:1 voor normale tekst.
Component
Een component is een herbruikbaar UI-element dat op meerdere plekken in een website of app wordt ingezet: knoppen, kaarten, formuliervelden, navigatiebalken en modals. In moderne front-end frameworks (React, Vue, Svelte) zijn components de bouwstenen van de interface. Elk component heeft zijn eigen HTML, CSS en logica. Component-denken bevordert consistentie, versnelt ontwikkeling en vereenvoudigt onderhoud. Een goed componentensysteem is de ruggengraat van een design system.
Content Hierarchy (Contenthierarchie)
Contenthierarchie is de visuele en structurele rangschikking van informatie op basis van belang. Door grootte, kleur, gewicht en positie te varieren, stuur je het oog van de bezoeker naar de belangrijkste elementen. De heading (H1) is het belangrijkst, gevolgd door subheadings (H2, H3), bodytekst en ondersteunende elementen. Een sterke hierarchie zorgt dat bezoekers in enkele seconden begrijpen wat een pagina biedt. Zonder hierarchie voelt een pagina chaotisch, wat leidt tot hogere bounce rates.
Core Web Vitals
Core Web Vitals zijn drie prestatiemetrieken die Google gebruikt om de gebruikerservaring van een pagina te beoordelen: LCP (laadsnelheid), CLS (visuele stabiliteit) en INP (interactiviteit). Goede scores zijn: LCP onder 2,5 seconden, CLS onder 0,1 en INP onder 200 milliseconden. Core Web Vitals zijn een rankingfactor voor SEO en direct meetbaar via Google Search Console, PageSpeed Insights en Chrome DevTools. Verbeter ze door afbeeldingen te optimaliseren, CSS te minificeren en JavaScript uit te stellen.
CSS (Cascading Style Sheets)
CSS is de stijltaal waarmee je het visuele uiterlijk van een webpagina bepaalt: kleuren, lettertypen, lay-out, spacing en animaties. Terwijl HTML de structuur definieert, geeft CSS het ontwerp. Moderne CSS biedt krachtige tools zoals Flexbox, Grid, custom properties (variabelen) en media queries voor responsive design. CSS-frameworks als Tailwind CSS en Bootstrap versnellen het ontwerpproces. Inline styles, interne stylesheets en externe CSS-bestanden bepalen hoe stijlen worden toegepast.
CTA (Call-to-Action)
Een CTA is een element dat de bezoeker aanspoort tot een specifieke actie: "Vraag offerte aan," "Start gratis proefperiode" of "Download de gids." Effectieve CTA's vallen visueel op door contrastkleur, witruimte eromheen en een activerende tekst die begint met een werkwoord. Plaats je primaire CTA above the fold en herhaal hem strategisch op de pagina. Een goed ontworpen landingspagina heeft een duidelijke CTA-hierarchie met een primaire en eventueel secundaire actie.
D
Dark Mode (Donkere modus)
Dark mode is een kleurschema waarbij de interface overwegend donkere achtergronden met lichte tekst gebruikt, in plaats van het traditionele licht-op-donker. Dark mode vermindert oogvermoeidheid bij weinig omgevingslicht, spaart batterij op OLED-schermen en is voor veel gebruikers esthetisch aantrekkelijk. CSS media query prefers-color-scheme: dark detecteert automatisch de systeemvoorkeur. Bij het ontwerpen van dark mode moet je kleuren aanpassen — niet simpelweg inverteren — en contrast zorgvuldig bewaken.
Design Sprint
Een design sprint is een vijfdaags proces (ontwikkeld bij Google Ventures) om snel een concept te valideren. Dag 1: probleem definiëren, dag 2: oplossingen schetsen, dag 3: beslissen, dag 4: prototype bouwen, dag 5: testen met echte gebruikers. Het doel is om in een week antwoord te krijgen op cruciale designvragen die anders maanden zouden kosten. Design sprints zijn ideaal voor nieuwe features, redesigns of het valideren van een compleet nieuw product voordat je gaat bouwen.
Design System
Een design system is een verzameling herbruikbare componenten, stijlrichtlijnen, patronen en principes die samen een consistente digitale merkervaring garanderen. Het omvat typografie, kleuren, spacing-regels, iconen, UI-componenten en hun gedragsregels. Bekende voorbeelden zijn Material Design (Google) en het Human Interface Guidelines (Apple). Een design system bespaart ontwikkeltijd, waarborgt consistentie over teams heen en versnelt het onboarden van nieuwe designers en developers.
Design Thinking
Design thinking is een mensgerichte probleemoplossingsmethodiek met vijf fasen: empathize (begrijp de gebruiker), define (formuleer het probleem), ideate (genereer oplossingen), prototype (maak een testbaar model) en test (valideer met gebruikers). Het is iteratief: na testen ga je terug naar eerdere fasen. Design thinking wordt breed toegepast in UX-design, productontwikkeling en bedrijfsinnovatie. De kracht zit in het loskomen van aannames door eerst echt te luisteren naar de eindgebruiker.
E
Eye Tracking
Eye tracking is een onderzoeksmethode die registreert waar een gebruiker op een scherm kijkt, hoe lang, en in welke volgorde. Speciale hardware of webcam-software volgt de oogbewegingen en genereert heatmaps en gaze plots. Eye tracking onthult of bezoekers je CTA daadwerkelijk zien, of je contenthierarchie werkt, en welke elementen worden genegeerd. Klassiek eye-tracking-onderzoek toonde het F-patroon aan: gebruikers scannen horizontaal bovenaan, dan lager, en scrollen vervolgens verticaal langs de linkerzijde.
Empty State (Lege staat)
Een empty state is het scherm dat een gebruiker ziet wanneer er nog geen content beschikbaar is — bijvoorbeeld een leeg dashboard, een lege inbox of zoekresultaten zonder resultaten. Een goed ontworpen empty state is niet leeg maar informatief en motiverend: het legt uit waarom het leeg is, hoe je content toevoegt, en bevat eventueel een CTA. "Nog geen projecten. Klik hier om je eerste project te starten." Empty states zijn onderschatte UX-momenten die de toon zetten voor de gebruikerservaring.
F
Favicon
Een favicon is het kleine icoon dat verschijnt in het browsertabblad, in bladwijzers en op het startscherm van mobiele apparaten. Standaardformaat is 32x32 pixels (ICO of PNG), maar moderne browsers ondersteunen ook SVG. Een herkenbaar favicon versterkt je merkidentiteit en helpt gebruikers je tabblad snel terug te vinden tussen tientallen open tabs. Gebruik bij voorkeur een vereenvoudigde versie van je logo of een herkenbaar lettertype. Vergeet niet om ook een apple-touch-icon (180x180px) toe te voegen voor iOS-apparaten.
Figma
Figma is een browsergebaseerde design- en prototypetool die de industriestandaard is geworden voor UI/UX-design. In tegenstelling tot Sketch (alleen macOS) draait Figma op elk besturingssysteem. Teams kunnen realtime samenwerken aan dezelfde bestanden, wat Figma ideaal maakt voor design systems en handoffs naar developers. Figma biedt vector-editing, prototyping, auto-layout, component libraries en developer mode. Het werd in 2022 overgenomen door Adobe, maar opereert nog steeds als zelfstandig product.
Fitts's Law (Wet van Fitts)
Fitts's Law stelt dat de tijd om een doelgebied te bereiken afhangt van de afstand tot het doel en de grootte ervan. In UX-design betekent dit: maak klikbare elementen groot genoeg en plaats ze dicht bij de verwachte cursorpositie. Knoppen op mobiel moeten minimaal 44x44 pixels zijn (Apple's richtlijn). Fitts's Law verklaart ook waarom navigatiemenu's aan de rand van het scherm sneller bereikbaar zijn — de schermrand fungeert als oneindig groot doelgebied.
Flexbox
Flexbox (Flexible Box Layout) is een CSS-lay-outmodel voor het verdelen van ruimte en uitlijnen van items in een container, zelfs wanneer hun grootte onbekend of dynamisch is. Flexbox werkt in een richting: horizontaal (row) of verticaal (column). Het maakt centreren, gelijke hoogtes en responsieve verdelingen eenvoudig zonder floats of positioning hacks. Flexbox is ideaal voor navigatiebalken, kaartreeksen en formulieren. Voor tweedimensionale lay-outs (rijen en kolommen tegelijk) gebruik je CSS Grid.
Fold
De fold is de denkbeeldige lijn op een webpagina die het zichtbare deel (zonder scrollen) scheidt van de rest. Alles erboven is above the fold, alles eronder below the fold. De exacte positie van de fold verschilt per apparaat, browser en schermresolutie. Op desktop ligt de fold doorgaans rond 600-800 pixels vanaf de bovenkant, op mobiel rond 500-700 pixels. De fold is geen harde grens maar een richtlijn voor het prioriteren van content.
Footer
De footer is het onderste gedeelte van een webpagina, doorgaans consistent op alle pagina's. Een goede footer bevat contactgegevens, navigatielinks, social media-iconen, juridische informatie (privacy, voorwaarden), en eventueel een secundaire CTA. De footer is ook belangrijk voor SEO: het biedt extra interne links en kan structured data bevatten. Ondanks de positie onderaan de pagina wordt de footer vaak bezocht — gebruikers scrollen er bewust naartoe voor contactinformatie of juridische pagina's.
G
Gestalt-principes
De Gestalt-principes zijn waarnemingsregels die beschrijven hoe het menselijk brein visuele elementen groepeert en interpreteert. De belangrijkste principes voor webdesign zijn: nabijheid (elementen dicht bij elkaar worden als groep gezien), gelijkenis (visueel gelijke elementen horen bij elkaar), afsluiting (het brein vult ontbrekende vormen aan), en continuïteit (het oog volgt lijnen en curves). UX-designers passen Gestalt-principes toe om intuuïtieve interfaces te creeren zonder expliciete visuele grenzen.
Golden Ratio (Gulden snede)
De gulden snede (1:1,618) is een wiskundige verhouding die in de natuur, kunst en architectuur als esthetisch harmonieus wordt ervaren. In webdesign wordt de golden ratio toegepast op lay-outverhoudingen, typografische schalen en het positioneren van focuspunten. Bijvoorbeeld: een contentkolom van 640px met een sidebar van 395px benadert de gulden snede. Hoewel de wetenschappelijke onderbouwing voor esthetische superioriteit beperkt is, biedt de ratio een nuttig startpunt voor proportionele ontwerpen.
Grid (CSS Grid)
CSS Grid is een tweedimensionaal lay-outsysteem waarmee je elementen in rijen en kolommen kunt plaatsen. In tegenstelling tot Flexbox (eendimensionaal) kan Grid rijen en kolommen tegelijk beheren. Met properties als grid-template-columns, gap en grid-area creeer je complexe lay-outs met minimale CSS. Grid is ideaal voor paginastructuren, fotogalerijen en dashboards. Combineer Grid voor de overall lay-out met Flexbox voor de uitlijning binnen individuele componenten.
H
Hamburger Menu
Het hamburger menu is een navigatie-icoon bestaande uit drie horizontale lijnen dat een verborgen menu onthult bij klikken. Het is de standaard voor mobiele navigatie, maar niet onomstreden: usability-onderzoek toont aan dat verborgen navigatie leidt tot minder interactie dan zichtbare navigatie. De oplossing is vaak een hybride aanpak — de belangrijkste links zichtbaar houden in een bottom navigation bar en secundaire items in het hamburgermenu plaatsen. Het icoon is vernoemd naar de visuele gelijkenis met een hamburger.
Header
De header is het bovenste gedeelte van een webpagina, doorgaans met het logo, hoofdnavigatie en eventueel een CTA-knop. Een sticky header (die meescrollt) zorgt dat navigatie altijd bereikbaar is, maar neemt wel schermruimte in. Beste practices: houd de header compact (60-80px hoog), maak het logo klikbaar naar de homepage, beperk navigatie-items tot 5-7, en voeg een duidelijke CTA toe. Op mobiel klapt de header doorgaans in tot een hamburger menu.
Hero Section
De hero section is het prominente bovenste gedeelte van een webpagina, direct onder de navigatie. Het bevat typisch een grote headline, subtext, een CTA-knop en een ondersteunend visueel element (afbeelding, video of illustratie). De hero section is het eerste wat bezoekers zien en bepaalt of ze blijven of vertrekken. Een effectieve hero communiceert je waardepropositie in maximaal vijf seconden. Op een landingspagina is de hero section het meest kritieke element voor conversie.
Heuristic Evaluation (Heuristische evaluatie)
Een heuristische evaluatie is een UX-beoordelingsmethode waarbij experts een interface toetsen aan een set van usability-principes (heuristieken). De bekendste set is Jakob Nielsen's 10 heuristieken, waaronder zichtbaarheid van systeemstatus, foutpreventie en herkenning boven herinnering. Het is een snelle, kosteneffectieve manier om usability-problemen te identificeren zonder gebruikerstests. Drie tot vijf evaluatoren vinden doorgaans 75% van de problemen. Het is geen vervanging van usability testing maar een waardevolle aanvulling.
Hover State
Een hover state is de visuele verandering die optreedt wanneer een gebruiker met de muis over een interactief element beweegt — een kleurverandering, schaduw, onderlining of schaalvergroting. Hover states bieden essentieel feedback: ze bevestigen dat een element klikbaar is. Let op: hover states werken niet op touchscreens. Ontwerp daarom altijd met een mobile-first benadering waarbij de interface ook zonder hover begrijpelijk is. Gebruik CSS :hover pseudo-class en houd transities subtiel (150-300ms).
HTML (HyperText Markup Language)
HTML is de opmaaktaal die de structuur en inhoud van webpagina's definieert. HTML-elementen (tags) zoals <h1>, <p>, <nav> en <section> geven betekenis aan content. Semantische HTML is cruciaal voor accessibility (screenreaders interpreteren de pagina op basis van HTML-structuur) en SEO (zoekmachines begrijpen de hierarchie). HTML5 introduceerde elementen als <header>, <main>, <article> en <footer> voor betere semantische structuur.
I
Iconografie
Iconografie is het gebruik van iconen in een interface om acties, objecten of concepten visueel te communiceren. Goede iconen zijn universeel herkenbaar (vergrootglas = zoeken, huis = home, envelop = e-mail), consistent in stijl en voldoende groot voor touchscreens (minimaal 24x24px visueel, 44x44px tapgebied). Vermijd ambigue iconen zonder label — onderzoek toont aan dat iconen met tekst 88% beter worden begrepen dan iconen alleen. Populaire iconsets zijn Lucide, Phosphor en Material Icons.
Information Architecture (Informatiearchitectuur)
Informatiearchitectuur (IA) is de structurering en organisatie van content op een website zodat gebruikers intuuïtief vinden wat ze zoeken. IA omvat de sitestructuur, navigatiesystemen, labeling en zoekfunctionaliteit. Methoden als card sorting en tree testing helpen bij het valideren van je IA. Een goede informatiearchitectuur volgt het mentale model van de gebruiker — niet de interne organisatiestructuur van het bedrijf. IA is de basis waarop navigatie, sitemaps en wireframes worden gebouwd.
Interaction Design (Interactieontwerp)
Interaction design (IxD) richt zich op het ontwerpen van interactieve elementen en de manier waarop gebruikers met een product communiceren. Het omvat het definiëren van gedrag: wat gebeurt er als je klikt, swipet, scrollt of typt? Goede interacties zijn voorspelbaar, consistent en geven directe feedback. IxD-principes omvatten zichtbaarheid (toon beschikbare acties), feedback (bevestig wat er is gebeurd), beperkingen (voorkom fouten) en consistentie (vergelijkbare acties werken vergelijkbaar). Interaction design vormt de brug tussen UI en UX.
J
JavaScript
JavaScript is de programmeertaal die webpagina's interactief maakt. Waar HTML de structuur en CSS het uiterlijk bepaalt, voegt JavaScript gedrag toe: formuliervalidatie, animaties, dynamische content, API-koppelingen en single-page applicaties. Moderne frameworks als React, Vue en Svelte bouwen voort op JavaScript. Overmatig JavaScript-gebruik kan de laadtijd en Core Web Vitals negatief beunvloeden. Progressive enhancement is het principe waarbij een pagina ook zonder JavaScript functioneert.
Journey Map (Klantreis)
Een journey map is een visuele weergave van alle stappen die een gebruiker doorloopt bij het interacteren met je product of dienst — van eerste bewustwording tot aankoop en nazorg. Per stap breng je de acties, emoties, pijnpunten en touchpoints in kaart. Journey maps helpen teams om de ervaring door de ogen van de klant te zien en verbeterkansen te identificeren. In webdesign gebruik je journey maps om te bepalen welke pagina's, content en functionaliteiten nodig zijn per fase.
K
Kerning
Kerning is de aanpassing van de ruimte tussen specifieke letterparen om een optisch gelijkmatige verdeling te creeren. Zonder kerning staan letters als AV, WA en To visueel te ver uit elkaar door hun diagonale vormen. In webdesign wordt kerning grotendeels automatisch afgehandeld door het lettertype, maar je kunt het fijnregelen met CSS letter-spacing (voor alle tekens) of font-kerning (voor paarsgewijze aanpassingen). Kerning is vooral belangrijk bij grote koppen en logo's waar onregelmatige spacing direct opvalt.
L
Landing Page (Landingspagina)
Een landingspagina is een op zichzelf staande pagina die specifiek is ontworpen voor een marketingcampagne of advertentie, met als doel een enkele conversie te realiseren. In tegenstelling tot een homepage bevat een landingspagina geen afleidende navigatie en focust op een CTA. Effectieve landingspagina's hebben een sterke hero section, social proof, een helder waardevoorstel en minimale frictie. De gemiddelde conversieratio varieert van 2% tot 12%, afhankelijk van de branche. Lees meer over het laten maken van een landingspagina.
Lazy Loading
Lazy loading is een techniek waarbij afbeeldingen, video's en andere zware content pas worden geladen wanneer ze in het viewport verschijnen — dus wanneer de gebruiker er naartoe scrollt. Dit versnelt de initiële laadtijd en bespaart bandbreedte. In HTML5 voeg je simpelweg loading="lazy" toe aan <img>-tags. Laad de eerste afbeeldingen (above the fold) altijd direct (eager loading) om LCP niet te verslechteren. Lazy loading is een van de eenvoudigste optimalisaties voor betere Core Web Vitals.
LCP (Largest Contentful Paint)
LCP meet hoe lang het duurt voordat het grootste zichtbare element op een pagina (doorgaans een hero-afbeelding of heading) volledig is geladen. Het is een van Google's Core Web Vitals en een directe indicator voor de waargenomen laadsnelheid. Een goede LCP-score is onder 2,5 seconden. Veelvoorkomende oorzaken van een slechte LCP: te grote afbeeldingen, trage server response, render-blocking CSS/JavaScript en ontbrekende preload-hints voor kritieke bronnen.
Line Height (Regelhoogte)
Line height (ook: leading) is de verticale ruimte tussen tekstregels. Een goede line height verbetert de leesbaarheid aanzienlijk. Voor bodytekst is 1,5 tot 1,8 de standaard; voor koppen is 1,1 tot 1,3 gebruikelijk. Te weinig line height maakt tekst benauwd en moeilijk leesbaar, te veel maakt het lastig om de volgende regel te vinden. In CSS stel je dit in met de line-height property. Gebruik bij voorkeur unitless waarden (1.6) in plaats van vaste pixels, zodat de regelhoogte mee schaalt met de lettergrootte.
M
Micro-interaction
Een micro-interaction is een subtiele, geanimeerde reactie op een gebruikersactie: een hartje dat opvult bij een like, een knop die kort van kleur verandert, een formulierveld dat groen kleurt bij correcte invoer, of een progress bar tijdens uploaden. Micro-interactions geven feedback, bevestigen acties en maken een interface menselijker. Ze bestaan uit vier fasen: trigger (gebruikersactie), rules (wat er gebeurt), feedback (visuele/auditieve reactie) en loops (herhaalt het zich?). Goed ontworpen micro-interactions zijn nauwelijks merkbaar maar worden gemist als ze er niet zijn.
Minimalisme
Minimalisme in webdesign is het principe van "less is more": verwijder alles wat niet direct bijdraagt aan het doel van de pagina. Minimalistisch design kenmerkt zich door veel whitespace, een beperkt kleurenpalet, grote typografie en weinig decoratieve elementen. Het resultaat is een cleane, overzichtelijke interface die de aandacht richt op de content en CTA. Apple en Google zijn bekende voorbeelden. De valkuil is doorslaan: te minimaal design kan koud, onduidelijk of oninteressant aanvoelen.
Mobile First
Mobile first is een ontwerpstrategie waarbij je eerst ontwerpt voor het kleinste scherm (smartphone) en vervolgens het ontwerp uitbreidt voor tablet en desktop. Dit dwingt je om te prioriteren: op een klein scherm is ruimte schaars, waardoor je alleen de essentiele content en functies behoudt. Mobile first is niet alleen een designprincipe maar ook een CSS-aanpak: je schrijft basis-CSS voor mobiel en voegt via media queries stijlen toe voor grotere schermen. Sinds Google mobile-first indexing hanteert, is het ook een SEO-must.
Modal (Pop-up venster)
Een modal is een overlay-venster dat bovenop de huidige pagina verschijnt en de achterliggende content tijdelijk blokkeert. Modals worden gebruikt voor formulieren, waarschuwingen, bevestigingen en lightbox-afbeeldingen. Goede modals hebben een duidelijke sluitknop, sluiten bij klikken buiten het venster of drukken op Escape, en zijn toegankelijk met toetsenbord en screenreaders. Slechte modals zijn agressieve pop-ups die de ervaring verstoren. Google penaliseert intrusieve interstitials op mobiel die de content verbergen.
Mockup
Een mockup is een high-fidelity visuele representatie van een ontwerp die laat zien hoe het eindproduct eruitziet, compleet met kleuren, typografie, afbeeldingen en branding. In tegenstelling tot een wireframe (structuur) en prototype (interactie) is een mockup statisch maar visueel volledig. Mockups worden gebruikt om stakeholders het eindresultaat te tonen en goedkeuring te krijgen voordat de development start. Tools als Figma en Adobe XD zijn standaard voor het maken van mockups.
N
Navigatie (Navigation)
Navigatie is het systeem van menu's, links en elementen waarmee gebruikers zich door een website bewegen. Goede navigatie is intuuïtief, consistent en vereist minimale cognitieve inspanning. Hoofdtypen zijn: horizontale topnavigatie, verticale sidebar, hamburger menu (mobiel), breadcrumbs en footer-navigatie. De 3-klikregel (elke pagina in maximaal 3 klikken bereikbaar) is een bekende vuistregel. Beperk je hoofdnavigatie tot 5-7 items — meer keuzes leiden tot keuzeparalyse (Hick's Law).
Negative Space (Negatieve ruimte)
Negative space is een synoniem voor whitespace — de lege ruimte rondom en tussen elementen in een ontwerp. De term benadrukt dat deze ruimte niet "leeg" is maar actief bijdraagt aan het ontwerp: het creëert ademruimte, stuurt de aandacht en verhoogt de leesbaarheid. Bekende voorbeelden van slim gebruik van negative space zijn het FedEx-logo (de pijl tussen E en x) en het Apple-productontwerp. In webdesign is voldoende negative space een teken van professioneel ontwerp.
O
Onboarding
Onboarding is het proces waarmee nieuwe gebruikers worden begeleid bij het eerste gebruik van een website of app. Effectieve onboarding reduceert churn, verkort de time-to-value en verhoogt de kans op langdurig gebruik. Veelgebruikte patronen zijn tooltips, guided tours, progressbars, checklists en welkomstschermen. De beste onboarding laat gebruikers al doende leren in plaats van ze te overspoelen met informatie. Houd het kort (3-5 stappen) en toon direct de kernwaarde van je product.
Overlap
Overlap in webdesign is het bewust laten overlappen van elementen — tekst over een afbeelding, een kaart die over een sectierand valt, of een cirkel achter een kop. Overlap creëert diepte, visuele interesse en een dynamische uitstraling. Het doorbreekt de monotonie van strikt gerasterde lay-outs. Technisch wordt overlap bereikt met CSS position: relative/absolute, negatieve margins of z-index. Gebruik overlap spaarzaam en zorg dat het de leesbaarheid en toegankelijkheid niet aantast.
P
Parallax (Parallax Scrolling)
Parallax scrolling is een visueel effect waarbij achtergrond- en voorgrondelementen met verschillende snelheden bewegen bij het scrollen, waardoor een illusie van diepte ontstaat. Het kan een website visueel aantrekkelijker maken, maar overmatig gebruik leidt tot motion sickness, trage laadtijden en toegankelijkheidsproblemen. Gebruik parallax subtiel — bijvoorbeeld alleen op de hero section — en bied altijd een optie om beweging te reduceren via CSS prefers-reduced-motion.
Persona
Een persona is een fictief profiel dat een typische gebruiker of klant representeert, gebaseerd op onderzoeksdata. Een persona bevat naam, foto, demografische gegevens, doelen, frustraties, gedrag en een citaat dat de persoon typeert. Persona's helpen designteams om empathie te ontwikkelen en ontwerpbeslissingen te toetsen aan echte gebruikersbehoeften in plaats van aannames. Maak 3-5 persona's die je belangrijkste gebruikerssegmenten vertegenwoordigen. Vermijd stereotype en baseer persona's op werkelijk onderzoek, niet op fantasie.
Progressive Disclosure
Progressive disclosure is het UX-principe waarbij je informatie geleidelijk onthult in plaats van alles tegelijk te tonen. Toon eerst de essentie en laat gebruikers desgewenst dieper graven. Voorbeelden: een "Meer lezen"-link, een uitklapbaar FAQ-item, of een formulier dat extra velden toont op basis van eerdere keuzes. Progressive disclosure vermindert cognitieve belasting, houdt interfaces overzichtelijk en helpt gebruikers gefocust te blijven. Het is een van de meest impactvolle UX-patronen voor complexe producten en content-rijke websites.
Prototype
Een prototype is een interactief model van een ontwerp waarmee je klikgedrag, navigatiestromen en micro-interactions kunt simuleren en testen voordat er code wordt geschreven. Prototypes variëren van low-fidelity (klikbare wireframes) tot high-fidelity (pixelperfecte interactieve mockups). Figma en InVision zijn populaire tools. Prototyping bespaart kosten: een designfout vroeg ontdekken kost een fractie van het herstellen na development. Test prototypes altijd met echte gebruikers, niet alleen met collega's.
R
Responsive Design (Responsive webdesign)
Responsive design is een ontwerpmethodiek waarbij een website zich automatisch aanpast aan het schermformaat — desktop, tablet of smartphone. Dit wordt bereikt met flexibele grids, schaelbare afbeeldingen en CSS media queries met breakpoints. Ethan Marcotte introduceerde het concept in 2010. Sinds Google mobile-first indexing hanteert, is responsive design niet alleen UX-essentieel maar ook een SEO-vereiste. Test je site altijd op meerdere apparaten en gebruik Chrome DevTools om verschillende viewports te simuleren.
Retina Display
Retina display is Apples term voor schermen met een pixeldichtheid zo hoog dat individuele pixels onzichtbaar zijn op normale kijkafstand (typisch 2x of 3x de standaard resolutie). Voor webdesign betekent dit dat afbeeldingen in 2x of 3x resolutie moeten worden aangeleverd om scherp te blijven. Een afbeelding die 400px breed wordt getoond, moet 800px of 1200px breed zijn als bronbestand. Gebruik het srcset attribuut in HTML om verschillende resoluties aan te bieden zonder de laadtijd voor standaard schermen te belasten.
S
Scroll Depth (Scrolldiepte)
Scroll depth meet hoe ver bezoekers naar beneden scrollen op een pagina, uitgedrukt als percentage (25%, 50%, 75%, 100%). Het is een waardevolle UX-metriek: als 80% van je bezoekers afhaakt voordat ze je CTA bereiken, moet je je paginalay-out herzien. Google Analytics 4 trackt scroll events standaard bij 90%. Voor gedetaildere inzichten gebruik je custom tracking of tools als Hotjar. Verbeter scroll depth met een logische contenthierarchie, visuele ankerpunten en content die belooft wat de hero aankondigde.
Semantic HTML
Semantic HTML is het gebruik van HTML-elementen die de betekenis van de content beschrijven in plaats van alleen de presentatie. <nav> voor navigatie, <article> voor artikelen, <aside> voor zijbalken en <main> voor de hoofdcontent. Semantic HTML is cruciaal voor accessibility (screenreaders navigeren op basis van semantiek) en SEO (zoekmachines begrijpen de paginastructuur beter). Vermijd het overmatig gebruik van generieke <div>-elementen wanneer een semantisch alternatief beschikbaar is.
Sitemap
Een sitemap is een overzicht van alle pagina's op een website. Er bestaan twee vormen: een visuele sitemap (een diagram van de paginastructuur, gebruikt in de ontwerpfase) en een XML-sitemap (een bestand voor zoekmachines dat aangeeft welke pagina's geindiceerd moeten worden). In UX-design is de visuele sitemap een essentieel planningsinstrument: het toont de informatiearchitectuur, pagina-hierarchie en de relaties tussen secties. Maak je sitemap voordat je begint met wireframing.
Skeleton Screen
Een skeleton screen is een laadpatroon waarbij een vereenvoudigde, grijze versie van de paginalay-out wordt getoond terwijl de echte content laadt. In plaats van een spinner of lege pagina ziet de gebruiker al de contouren van waar content komt — rechthoeken voor tekst, cirkels voor profielfoto's. Skeleton screens voelen sneller aan dan loading spinners omdat ze de illusie wekken van voortgang. Facebook, LinkedIn en YouTube gebruiken dit patroon. Implementeer ze voor pagina's waar content asynchroon wordt geladen.
Style Guide (Stijlgids)
Een style guide documenteert de visuele en communicatieve richtlijnen van een merk: kleuren (met hex-codes), typografie (lettertypen, groottes, gewichten), spacing-regels, icoonstijl, fotografie-stijl en tone of voice. Het is de voorloper van het design system en wordt nog steeds gebruikt voor merk-breed richtlijnen die verder gaan dan digitale producten. Een goede style guide voorkomt inconsistentie wanneer meerdere designers of bureaus aan hetzelfde merk werken. Bij Searchlab raden we elke ondernemer aan om minimaal een basis style guide te hebben.
T
Tab Navigation
Tab navigation is een UI-patroon waarbij content is verdeeld over meerdere tabbladen die de gebruiker kan wisselen zonder de pagina te verlaten. Tabs zijn ideaal wanneer je gerelateerde maar afzonderlijke contentblokken hebt — bijvoorbeeld specificaties, reviews en FAQ's op een productpagina. Beperk tabs tot 3-7 items, maak de actieve tab visueel duidelijk en zorg dat de content onder de tab niet verspringt bij wisselen. Op mobiel worden tabs vaak vervangen door een verticaal accordion-patroon.
Touch Target (Aanraakgebied)
Een touch target is het klikbare/tikbare gebied van een interactief element op een touchscreen. Apple's Human Interface Guidelines schrijven minimaal 44x44 punten voor, Google's Material Design 48x48dp. Te kleine touch targets leiden tot mistikken, frustratie en hogere bounce rates op mobiel. Vergroot touch targets met CSS padding zonder het visuele element te vergroten. Let ook op de afstand tussen touch targets — te dicht op elkaar vergroot de kans op het tikken van het verkeerde element.
Typography (Typografie)
Typografie is de kunst en techniek van het opmaken van tekst: lettertypekeuze, grootte, gewicht, regelhoogte, kerning en hierarchie. In webdesign is typografie het meest impactvolle ontwerpelement — 95% van een website is tekst. Een typografische schaal (bijv. 16px basis, 1.25 ratio) zorgt voor harmonieuze verhoudingen. Beperk je tot 2 lettertypen: een voor koppen en een voor bodytekst. Gebruik system fonts of geoptimaliseerde webfonts (WOFF2) om laadtijden te beperken. Minimale body font-size: 16px.
U
UI (User Interface)
UI design richt zich op het visuele ontwerp van de interface: kleuren, typografie, knoppen, iconen, formulieren en lay-out. Het doel is een esthetisch aantrekkelijke en functionele interface die de gebruiker intuuïtief door het product leidt. UI is de visuele laag bovenop UX: waar UX de structuur en flow bepaalt, geeft UI het uiterlijk. Een goede UI is consistent (dezelfde knopstijl overal), geeft visuele hierarchie (het belangrijkste valt het meest op) en voelt vertrouwd aan door bekende patronen te volgen.
Usability (Bruikbaarheid)
Usability is de mate waarin een product effectief, efficient en naar tevredenheid kan worden gebruikt door de beoogde gebruikers. ISO 9241 definieert het aan de hand van vijf componenten: leerbaarheid, efficiency, onthoudbaar, fouttolerantie en tevredenheid. Een website met hoge usability stelt gebruikers in staat om hun doel snel te bereiken zonder frustratie. Usability wordt gemeten via usability tests, heuristische evaluaties en kwantitatieve metrieken als taakvoltooing en foutpercentage.
Usability Testing (Gebruikerstest)
Usability testing is een onderzoeksmethode waarbij je echte gebruikers observeert terwijl ze taken uitvoeren op je website of prototype. Een moderator geeft opdrachten ("Vind het retourbeleid en start een retour") en noteert waar de gebruiker vast loopt, twijfelt of fouten maakt. Jakob Nielsen's onderzoek toont aan dat 5 testpersonen al 85% van de usability-problemen onthullen. Remote unmoderated testing via tools als UserTesting en Maze maakt het schaalbaar en betaalbaar.
User Flow (Gebruikersstroom)
Een user flow is een visueel diagram dat de stappen toont die een gebruiker doorloopt om een specifiek doel te bereiken — bijvoorbeeld van homepage naar aankoop, of van advertentie naar formulier-invulling. User flows helpen designers om de kortste, logischste route naar conversie te ontwerpen en frictie te identificeren. Elk beslispunt (keuze, formulier, bevestiging) is een kans op afhaken. Minimaliseer stappen, bied duidelijke voortgangsindicatoren en maak terugnavigeren mogelijk.
UX (User Experience)
UX design omvat alles wat de totale ervaring van een gebruiker met een product of dienst beunvloedt: bruikbaarheid, toegankelijkheid, prestaties, informatiearchitectuur, interactieontwerp en de emotionele respons. UX gaat verder dan de interface — het begint bij gebruikersonderzoek en eindigt bij evaluatie na lancering. Peter Morville's UX Honeycomb definieert zeven facetten: useful, usable, desirable, findable, accessible, credible en valuable. Goede UX is het resultaat van begrip voor de gebruiker, niet van persoonlijke designvoorkeuren.
V
Viewport
Het viewport is het zichtbare gedeelte van een webpagina in het browservenster. Op desktop is het viewport de grootte van het browservenster, op mobiel de schermbreedte. De metatag <meta name="viewport" content="width=device-width, initial-scale=1.0"> is essentieel voor responsive design — zonder deze tag toont mobiel de desktopversie verkleind. CSS viewport-eenheden (vw, vh, dvh) maken het mogelijk om elementen te schalen op basis van het viewport. Bijvoorbeeld: height: 100dvh maakt een element precies schermhoog.
Visual Design (Visueel ontwerp)
Visual design is de discipline die zich richt op de esthetiek en visuele communicatie van een digitaal product. Het omvat kleurgebruik, typografie, fotografie, illustratie, iconografie en lay-out. Visual design verschilt van UI design in de focus: visual design benadrukt merkuitstraling en emotionele impact, terwijl UI design focust op functionaliteit en interactie. Beide disciplines overlappen sterk. Een sterk visueel ontwerp versterkt de geloofwaardigheid — onderzoek toont dat 75% van de gebruikers de betrouwbaarheid van een bedrijf beoordeelt op basis van het websiteontwerp.
W
Web Font
Een web font is een lettertype dat via het internet wordt geladen in plaats van lokaal op het apparaat te staan. Google Fonts, Adobe Fonts en zelf-gehoste WOFF2-bestanden zijn de meest gebruikte bronnen. Web fonts geven je volledige controle over typografie, maar beunvloeden de laadsnelheid. Optimaliseer door alleen de benodigde gewichten en tekensets te laden, font-display: swap te gebruiken (toont systeemfont tijdens laden) en bestanden te preloaden. Overweeg variable fonts — een enkel bestand dat meerdere gewichten en stijlen combineert.
Whitespace (Witruimte)
Whitespace is de lege ruimte tussen en rondom elementen in een ontwerp. Het hoeft niet wit te zijn — het gaat om het ontbreken van content. Whitespace is een van de krachtigste tools in webdesign: het verbetert leesbaarheid, creëert visuele hierarchie, geeft elementen ademruimte en stuurt de aandacht. Apple is befaamd om het genereuze gebruik van whitespace. Beginnende designers vullen elke pixel; ervaren designers weten dat lege ruimte net zo belangrijk is als gevulde ruimte. Meer whitespace rondom een CTA vergroot de opvallendheid ervan.
Wireframe
Een wireframe is een schematische blauwdruk van een webpagina die de structuur en lay-out toont zonder visueel ontwerp — geen kleuren, afbeeldingen of definitieve typografie. Wireframes gebruiken grijstinten, placeholders en basisvormen om de positionering van elementen te bepalen: waar staat de navigatie, waar de content, waar de CTA? Ze worden gemaakt na de sitemap en voor het mockup. Low-fidelity wireframes zijn snelle schetsen, mid-fidelity wireframes tonen meer detail. Wireframes versnellen het ontwerpproces en voorkomen kostbare aanpassingen in latere fasen.
Z
Z-Index
Z-index is een CSS-eigenschap die de stapelvolgorde van overlappende elementen bepaalt — welk element "boven" welk ander element verschijnt. Een element met z-index: 10 verschijnt boven een element met z-index: 5. Z-index werkt alleen op gepositioneerde elementen (position: relative, absolute, fixed of sticky). In de praktijk worden z-index-waarden snel chaotisch. Gebruik een schaal (bijv. 1, 10, 100, 1000) voor respectievelijk content, dropdowns, modals en tooltips. Documenteer je z-index-schaal in je design system.
Z-Pattern (Z-patroon)
Het Z-pattern beschrijft het natuurlijke leespatroon op pagina's met weinig tekst: het oog beweegt van linksboven naar rechtsboven, diagonaal naar linksonder, en dan naar rechtsonder. Dit patroon is typisch voor landingspagina's, homepages en advertenties. Plaats je logo linksboven, een CTA rechtsboven, visuele content in het midden en je belangrijkste actieknop rechtsonder. Het F-pattern daarentegen wordt waargenomen op text-heavy pagina's: gebruikers scannen de eerste regels horizontaal en scrollen vervolgens langs de linkerrand.
Friction (Frictie)
Frictie is alles wat een gebruiker vertraagt, verwart of ontmoedigt bij het voltooien van een taak op je website. Voorbeelden: te veel formuliervelden, onduidelijke foutmeldingen, verplicht account aanmaken, trage laadtijden, verwarrende navigatie of afleiding door irrelevante content. In UX-design is het doel om frictie te minimaliseren op het pad naar conversie. Niet alle frictie is slecht — een bevestigingspagina voor een betaling is gewenste frictie die fouten voorkomt. Maar ongewenste frictie leidt direct tot hogere bounce rates en gemiste conversies.