WordPress webdesign

WordPress-webdesign is geen Avada-theme met je logo erop. Echt webdesign begint bij het design-systeem — tokens voor kleur, typografie, spacing, ritme — en eindigt bij gecompileerde SCSS die de hele site consistent aanstuurt. Wij ontwerpen WordPress-sites in Figma met design-tokens, bouwen ze in een custom theme zonder page-builder-overhead, en houden ons aan WCAG AA-accessibility en een hard performance-budget (Lighthouse 90+, LCP <2s). Reken op €3.000–€10.000 design-only, of €10.000–€25.000 design + development integraal.

Klanten beoordelen ons met 5/5

Webdesign door design-getrainde developers. Design-tokens, WCAG AA als baseline, performance-budget als bouwconstraint.

Websites die werken, niet tegenstrijden.

Wat we maken

WordPress websites

WooCommerce webshops

Custom web applicaties

Waarom ons webdesign anders is

Design-tokens, niet schermschoten

De meeste WP-webdesigners leveren een Figma-bestand met losse screens. Wij leveren een design-systeem: tokens voor kleuren, typografie, spacing, radius en shadow. In code zijn die tokens letterlijk SCSS-variabelen.

WCAG AA als baseline

Accessibility is geen post-launch checklist — het is een ontwerpconstraint. Contrast-ratio’s voldoen aan WCAG AA (4.5:1 body, 3:1 heading), focus-states zichtbaar, klikgebieden ≥44px, semantische HTML.

Performance is een design-keuze

Een 8MB hero-image is een design-keuze. Een page met 12 webfonts is een design-keuze. Wij ontwerpen mét een performance-budget: max 4 typografische varianten, hero-image <200kb.

Hoe wij webdesign aanpakken — het proces

Discovery & visuele richting (week 1). We brengen huisstijl, doelgroep, referenties en concurrentie in kaart. Vaak met een visuele moodboard-sessie: jij wijst aan wat je goed/slecht vindt aan 20-30 sites.
Design-tokens (week 1-2). Voordat we naar pages gaan: tokens vaststellen. Kleuren (met semantische namen), typografie-schaal (vaak 1.250 of 1.333 ratio), spacing-schaal, radius, shadows, breakpoints.
Component-library (week 2-3). Buttons, inputs, kaarten, navigatie, footers — herhaalbare componenten. Voor elke: standaard, hover, active, disabled, focus-state.
Page-design (week 3-5). Pages zijn samenstellingen van componenten + content. Homepage, dienstenpages, contact, blog-template, footer.
Responsive & states (week 4-5). Per page: desktop (1440px), tablet (768px), mobile (375px). Plus states: empty, error, loading, success.
Handover (week 5-6). SCSS-tokens gecompileerd uit Figma-tokens. Component-documentatie. Geen “dev zoekt zelf maar uit hoe het werkt”.

Wat een webdesign-traject kost

Range	Wat erin zit	Doorlooptijd
€2.500 – €5.000	Design-only, 5-8 page-designs op een licht component-library, desktop + mobile, geen design-system	3-4 weken
€5.000 – €10.000	Volledig design-systeem (tokens + components), 8-15 page-designs, desktop + tablet + mobile, dev-handover-docs	5-7 weken
€10.000 – €18.000	Bovenstaand + maatwerk-componenten (configurators, kalenders, filters), animation-spec, gedetailleerde dev-spec	7-10 weken
€18.000+	Volwaardig design-system voor brands met multiple producten/sites, design-ops setup, governance, library-onderhoud	10+ weken

Integrated traject (design + WordPress-dev): €10.000–€25.000 voor design + custom WordPress-theme als één traject. Vrijwel altijd voordeliger en sneller dan apart aanbesteden.

WCAG / accessibility — wat het écht inhoudt

Per European Accessibility Act (van kracht sinds 28 juni 2025) zijn veel commerciële websites en webshops verplicht aan toegankelijkheidseisen te voldoen. Dat betekent WCAG 2.1 niveau AA:

Tekst-contrast minimaal 4.5:1 voor body, 3:1 voor headings
Alle interactie toetsenbord-bereikbaar — geen “hover-only” navigatie
Zichtbare focus-states op alle interactieve elementen
Alt-tekst op informatieve images, lege alts op decoratieve
Semantische HTML — <button> niet <div onclick>
Form-labels aan inputs gekoppeld, error-messages aria-live
Skip-links naar main-content
Klikgebieden minimaal 44×44px (mobile)
Video-content met captions of transcripts

Performance-budget — hoe wij het hanteren

Metriek	Doel	Methode
Lighthouse Performance	≥90 mobile	Test elke milestone
LCP (Largest Contentful Paint)	<2.0s	Hero-image <200kb, preload
CLS (Cumulative Layout Shift)	<0.05	Aspect-ratio op images, font swap
INP (Interaction to Next Paint)	<200ms	Minimaal JS
Total page weight	<1.5MB	WebP-images
HTTP-requests	<50	Bundle CSS/JS
Webfonts	≤4 varianten	Variable fonts

Design-tools die wij gebruiken

Figma — primair design-tool. Componenten, variants, auto-layout, tokens.
Tokens Studio — voor het exporteren van design-tokens naar JSON en SCSS
Style Dictionary — voor multi-platform token-output
Lottie — voor lichte vector-animaties
GSAP — voor complexe scroll- en hover-animaties (alleen als design het rechtvaardigt)
Storybook — voor component-documentatie bij grote design-systems

Voorbeelden uit ons werk

Klant	Design-uitdaging
Strandpaviljoen De Staat	Awwwards-niveau design met scroll-animaties op WordPress, brand-tokens uitgewerkt vanuit print-identity
Frenky Lewis (premium hondaccessoires)	Drie productlijn-kleurpaletten (rose, sage, sky), eigen icoonbibliotheek, configurator-UX
Renzo van Engelen (antieke schouwen)	Editorial design-aanpak voor schouwen-presentaties, typografie-eerst, geen “premium” template-look
SHOUT Media (eigen agency-site)	Volledig design-system, gradient-tekst-pattern, custom Elementor-overrides

Veelgestelde vragen — WordPress webdesign

Wat kost professioneel webdesign?

Design-only: €2.500–€10.000. Integraal traject (design + WordPress-dev): €10.000–€25.000.

Webdesign vs Avada/Elementor-template kiezen?

Een template kiezen is selectie; webdesign is creatie. Een template is per definitie het werk van iemand anders. Voor merken die opvallen of conversion willen optimaliseren: custom design vrijwel altijd het verschil.

Hoe lang duurt een webdesign-traject?

3-6 weken voor design-only, 8-12 weken voor design + WordPress-development.

Werken jullie met bestaande huisstijl of brand book?

Ja. Een brand-system in Figma of een brand-guide-PDF scheelt 30-50% in de design-fase.

Doen jullie ook logo-design of branding?

Wij doen webdesign, niet brand-identity-systems vanaf scratch. Voor branding werken we samen met design-bureaus en zelfstandige brand-designers.

Is mobile-first echt nodig?

Ja. 60-80% van het verkeer op de meeste Nederlandse zakelijke sites is mobile. We ontwerpen vrijwel altijd mobile-first.

Bouwen jullie het design zelf ook?

Ja, in WordPress, integraal. Design en development werken niet in silo’s, maar als één team. Voor klanten die met een externe dev werken: complete handover-package.

Wat is een design-system?

Een herbruikbare bibliotheek van tokens (kleur/type/spacing) + components (buttons/cards/forms) + patterns + documentatie. Voor sites die jaren meegaan: de investering waard.

Wat moet ik aanleveren voor het design-traject?

Idealiter: logo (vector), huisstijl-document, content (teksten + foto’s), referentie-sites, en duidelijke business-doelen.