UX/UI design voor websites, webshops en apps

We onderzoeken hoe mensen uw product echt gebruiken, ordenen de informatie, maken prototypes en testen die voordat er wordt geprogrammeerd, en leveren een designsysteem op waarmee uw team verder kan. Toegankelijk volgens WCAG 2.2 AA vanaf de eerste schets, en gebouwd door hetzelfde team dat het ontwierp.

Vertel ons over uw product Bekijk onze werkwijze

2-3 klikken Tot de aankoop van een kaartje bij het TNC
WCAG 2.2 AA Toegankelijkheid in het ontwerp
Sinds 2009 Ontwerp en ontwikkeling, één team

01 · Onderzoek Merk, publiek en concurrentie
02 · Concept Eén idee dat ordent
03 · Systeem Typografie, kleur en componenten
04 · Prototype Klikbaar en getest
05 · Tests Met echte gebruikers
06 · Overdracht Uw team gebruikt het vanaf dag één
Elke test scherpt het systeem aan

Scroll

Definitie

Wat is UX/UI design?

UX/UI design is het werk om vast te leggen hoe een digitaal product werkt (UX, user experience) en hoe elk scherm eruitziet en zich gedraagt (UI, user interface). UX bepaalt flows, structuur en inhoud op basis van wat mensen nodig hebben; UI vertaalt die naar componenten, typografie, kleur en toestanden die meteen duidelijk zijn.

In de praktijk omvat het gebruikersonderzoek, informatiearchitectuur, wireframes en klikbare prototypes, visueel ontwerp, een designsysteem met zijn componenten en usabilitytests. Het geldt voor websites, webshops, mobiele apps en SaaS-platformen en zorgt, goed gedaan, voor minder fouten, minder supportvragen en minder dubbel ontwikkelwerk.

Samenvatting

Managementsamenvatting

Wat u koopt met UX/UI design, en wat het u bespaart.

De kosten van een slechte gebruikerservaring staan op geen enkele factuur: ze zitten in verlaten winkelwagens, formulieren die niemand afmaakt, telefoontjes naar support voor iets dat vanzelf zou moeten spreken en weken ontwikkelwerk die verloren gaan als een scherm na het bouwen opnieuw wordt ontworpen. UX/UI design haalt die beslissingen naar voren, waar een wijziging een prototype kost en geen sprint.

We werken vanuit onderzoek en echte data (interviews, analytics, heatmaps, gebruikerstests), niet vanuit meningen. Daaruit volgt de structuur, dan prototypes die we testen en tot slot een designsysteem met componenten, toestanden en regels, zodat uw product kan groeien zonder zijn samenhang te verliezen. Toegankelijkheid volgens WCAG 2.2 AA zit er vanaf de eerste schets in: contrast, focus, aanraakvlakken en leesvolgorde worden ontworpen, niet achteraf opgelapt.

Wat ons onderscheidt: ontwerp en ontwikkeling zijn hetzelfde team. Het goedgekeurde ontwerp is wat er gebouwd wordt, en wie het ontwierp controleert of het wordt gerespecteerd. Zo werkten we voor het Teatre Nacional de Catalunya, waar het UX-herontwerp de aankoop van kaartjes terugbracht tot 2-3 klikken en de mobiele LCP met 37% verlaagde.

-37% Mobiele LCP na het herontwerp van het TNC
+35% Directe boekingen bij Tamarit Beach Resort
+200% Online donaties bij Ampans

Wat is inbegrepen

Wat UX/UI design omvat

Elke fase levert iets op wat u kunt gebruiken, ook als een andere partij de ontwikkeling doet.

Gebruikersonderzoek: interviews, analyse van analytics en heatmaps, en een blik op concurrenten
Informatiearchitectuur: contentmap, navigatie, taxonomieën en flows van de belangrijkste taken
Wireframes en klikbare prototypes in Figma om flows te valideren voordat u in visueel ontwerp investeert
Usabilitytests met echte mensen op het prototype, met geprioriteerde bevindingen
Interfaceontwerp op basis van uw merk: typografie, kleur, iconen, toestanden en micro-interacties
Designsysteem: componenten, tokens en gebruiksregels zodat uw team consistente nieuwe schermen maakt
Toegankelijkheid volgens WCAG 2.2 AA in het ontwerp: contrast, zichtbare focus, aanraakvlakken en leesvolgorde
Responsive, mobile-first ontwerp: elk scherm doordacht voor mobiel, tablet en desktop
Begeleiding van de ontwikkeling: specificaties, controle van wat gebouwd is en bijsturing op basis van data na livegang

Waarom

UX/UI design, webdesign en branding: wat is wat

Drie diensten die elkaar raken, met verschillende doelen.

Branding bepaalt wie u bent: merkstrategie, logo, visuele identiteit en tone of voice. Webdesign is het project van een bedrijfswebsite die dat merk uitdraagt en bezoeken omzet in aanvragen. UX/UI design gaat een laag dieper: hoe een product werkt bij echte taken, zoals kopen, boeken, registreren, een account beheren of dagelijks werken in een platform. U heeft het nodig als niet het uiterlijk het probleem is, maar het feit dat mensen niet gedaan krijgen waarvoor ze komen. Als de conversie van een website die al werkt tegenvalt, begin dan met CRO.

designsysteem/knop.json

// Eén component, al zijn regels

"knop-primair": {

"toestanden": ["normaal", "hover", "focus", "uitgeschakeld", "laden"],

"min_contrast": "4.5:1",

"aanraakvlak": "minimaal 24x24 px",

"focus": "zichtbaar, 3:1 op de achtergrond"

}

Met toestanden Componenten
WCAG 2.2 AA Toegankelijkheid
Getest Prototype

Kernpunten

Wat we ontwerpen

Producten waarbij de ervaring bepaalt of ze gebruikt worden.

01
Websites met complexe taken

Agenda’s, zoekfuncties, afgeschermde omgevingen, boekingen of kaartverkoop. Voor het TNC ontwierpen we de navigatie door de agenda met filters opnieuw, en de voorstellingspagina’s met een duidelijke hiërarchie (data, cast, prijzen en koopknop).
02
Webshops en boekingsflows

Productpagina’s, collecties, winkelwagen en checkout. Bij Tamarit Beach Resort leidt de mobiele UX de boeking in 3 stappen, met galerij en vergelijker van accommodaties.
03
Mobiele apps

Flows, navigatie en componenten voor iOS en Android, volgens de conventies van elk platform en met aanraakvlakken en toestanden die zijn ontworpen voor de duim. We bouwen ze binnen onze app-ontwikkeling.
04
Digitale producten en SaaS

Dashboards, lange formulieren, rechten en intensief dagelijks gebruik. Dat doen we ook voor onszelf: Nexo, ons eigen platform voor CRM, projecten, facturatie en urenregistratie, hebben we zelf ontworpen en gebruiken we elke dag.
05
Designsystemen

Componentenbibliotheek, tokens en documentatie zodat meerdere teams of leveranciers met dezelfde bouwstenen ontwerpen en ontwikkelen, zonder elk scherm opnieuw uit te vinden.
06
UX- en toegankelijkheidsaudits

Heuristische review, data-analyse en gebruikerstests op wat u al heeft, met een geprioriteerde lijst van wijzigingen. Moet u aan wettelijke eisen voldoen, dan neemt onze dienst webtoegankelijkheid het over.

Zo werken wij

Zo verloopt een UX/UI-project

Van wat we over uw gebruikers weten naar een getest ontwerp dat klaar is om te bouwen.

01
Discovery en onderzoek

Interviews met uw team en met gebruikers, en analyse van analytics, heatmaps en supportvragen. Daaruit volgen de doelen, de belangrijkste taken en de problemen die opgelost moeten worden.
Afhankelijk van de scope
02
Architectuur en flows

Contentmap, navigatie en de flow van elke belangrijke taak. We bepalen wat op elk scherm komt, en in welke volgorde, voordat we het tekenen.
Afhankelijk van de scope
03
Prototype en tests

Wireframes en een klikbaar prototype dat we met echte mensen testen. Wat onduidelijk is, passen we hier aan, nu het nog weinig kost.
Iteratief
04
Interfaceontwerp en designsysteem

Visueel ontwerp op basis van uw merk, met alle toestanden van elk component en de toegankelijkheidsregels volgens WCAG 2.2 AA vastgelegd.
Afhankelijk van de scope
05
Bouwen en meten

We begeleiden de ontwikkeling (die van ons of die van u), controleren of wat gebouwd is het ontwerp volgt en meten na livegang met data wat werkt.
Doorlopend

Voor wie

Is dit iets voor u?

UX/UI design loont als mensen taken moeten afronden en er data is om te meten of dat lukt.

Voor wie

Bedrijven met een website of webshop waar mensen verdwalen, afhaken of bellen om iets te doen wat eenvoudig zou moeten zijn.
Teams die een app of SaaS-product gaan bouwen en de flows willen valideren voordat er geprogrammeerd wordt.
Producten die met lapwerk zijn gegroeid en een designsysteem nodig hebben om weer samenhangend te worden.
Organisaties die aan toegankelijkheidseisen moeten voldoen (WCAG 2.2 AA, European Accessibility Act) en die liever vanaf het begin ontwerpen.
Interne product- of ontwikkelteams die ontwerpers met technisch inzicht nodig hebben.

Voor wie niet

Als u alleen een eenvoudige bedrijfswebsite nodig heeft die uw merk uitdraagt: dan volstaat een klassiek webdesignproject.
Als de merkidentiteit zelf ontbreekt (logo, kleuren, toon): begin met branding.
Als u mooie schermen zoekt zonder tijd voor onderzoek of gebruikerstests: dan zouden we u niet leveren wat we verkopen.

Opleveringen

Wat erbij zit en wat niet

Wat u ontvangt aan het eind van een UX/UI-designproject.

Inbegrepen

Onderzoeksrapport met de belangrijkste taken, de gevonden problemen en hun prioriteit
Informatiearchitectuur en flows van de belangrijkste taken
Klikbaar Figma-prototype en resultaten van de usabilitytests
Ontwerp van alle afgesproken schermen voor mobiel, tablet en desktop
Designsysteem: componenten met hun toestanden, tokens en toegankelijkheidsregels
Bewerkbare ontwerpbestanden en eigendom van alles wat is opgeleverd

Niet inbegrepen

Ontwikkeling en programmering (apart geoffreerd, met ons team of het uwe)
Een merk en visuele identiteit vanaf nul (dat is een brandingproject)

Het bewijs

Ontwerp dat u in resultaten meet

Voor het Teatre Nacional de Catalunya voerden we een UX-herontwerp door rond taken: een kaartje kopen kost 2-3 klikken, de mobiele LCP daalde met 37% (van 3,8 naar 2,4 s), het aantal pagina’s per sessie steeg met 18% en de site voldoet aan WCAG AA. Voor Tamarit Beach Resort ontwierpen we een mobiele boeking in 3 stappen op de eigen boekingsmotor, en de directe boekingen stegen met 35%. Bij Fundació Ampans ging inclusief ontwerp volgens WCAG 2.1 AA samen met een stijging van 200% in online donaties. En bij TwoPoles bracht het herontwerp van productpagina’s en collecties, gemeten met CRO, de conversie van 2,1% naar 2,5%.

2-3 Klikken tot de aankoop van een kaartje (TNC)
3 Stappen in de mobiele boeking (Tamarit)
+35% Directe boekingen (Tamarit)
5,0 Beoordeling op Clutch

Voor de CTO

Samenvatting voor de CTO

Hoe ontwerp en engineering op elkaar aansluiten.

We ontwerpen in componenten met al hun toestanden (normaal, focus, fout, leeg, laden, uitgeschakeld) en met tokens voor kleur, typografie en witruimte die ongewijzigd naar de code gaan. Zo spreken het designsysteem en de componentenbibliotheek dezelfde taal, en hoeft u bij een merkwijziging niet elk scherm apart na te lopen.

Toegankelijkheid wordt in het ontwerp gespecificeerd: contrast van 4,5:1 voor tekst en 3:1 voor bedieningselementen en focus, minimale aanraakvlakken, focusvolgorde en semantiek van elk component. Daarna wordt het gemeten met axe-core en schermlezers, niet op het oog. Ook performance wordt ontworpen: beeldgewicht, lettertypen en animaties die de Core Web Vitals niet in gevaar brengen, zoals bij het TNC.

Technologieën

Figma
Design tokens
Tailwind CSS
axe-core
Lighthouse
VoiceOver
TalkBack
GA4
Hotjar
Microsoft Clarity

Componenten met al hun toestanden, niet alleen het ideale pad
Design tokens die zonder herinterpretatie naar de code gaan
Toegankelijkheid volgens WCAG 2.2 AA gespecificeerd en gemeten met axe-core
Performance meegenomen vanaf het ontwerp (beelden, lettertypen, animatie)
Ontwerpreview van wat gebouwd is vóór livegang

Risico's en hoe wij ze afdekken

De risico’s die we vermijden

Wat er in een ontwerpproject vaak misgaat.

01
Ontwerpen naar de mening van wie in de vergadering het hoogst in rang is

Oplossing
Elke belangrijke beslissing steunt op onderzoek, gebruiksdata of gebruikerstests en wordt vastgelegd.
02
Een mooi ontwerp dat niet te bouwen is, of anders gebouwd wordt

Oplossing
Ontwerp en ontwikkeling zijn hetzelfde team: het ontwerp wordt technisch getoetst en we controleren wat gebouwd is vóór livegang.
03
Toegankelijkheid die aan het eind wordt opgelapt

Oplossing
Contrast, focus, aanraakvlakken en leesvolgorde worden in het designsysteem vastgelegd en met axe-core gemeten.
04
Een product dat bij elk nieuw scherm samenhang verliest

Oplossing
Een designsysteem met componenten, tokens en gebruiksregels waarmee uw team ook zonder ons verder kan.

Technologieën

Tools

Waarmee we onderzoeken, ontwerpen en meten.

Figma
Maze
Hotjar
Microsoft Clarity
GA4
Looker Studio
axe-core
Lighthouse
VoiceOver
TalkBack
NVDA
WCAG 2.2
Tailwind CSS
Design tokens

Veelgestelde vragen

Veelgestelde vragen over UX/UI design

Wat ons het vaakst wordt gevraagd voordat we beginnen.

Wat is het verschil tussen UX en UI?

UX (user experience) bepaalt hoe het product werkt: welke taken het oplost, in welke volgorde, met welke structuur en inhoud. UI (user interface) bepaalt hoe elk scherm eruitziet en werkt: componenten, typografie, kleur, toestanden. Een goede UI op een slechte UX blijft lastig te gebruiken; daarom werken we aan beide tegelijk.

Wat doet een UX/UI-designbureau?

Het onderzoekt hoe mensen uw product gebruiken, ordent de informatie, ontwerpt en test prototypes, maakt de interface en een designsysteem, en begeleidt de ontwikkeling zodat wat gebouwd wordt het ontwerp volgt. Bij ons kan hetzelfde team het bovendien bouwen.

Wat is het verschil met webdesign?

Webdesign is het project van een bedrijfswebsite die uw merk uitdraagt en aanvragen oplevert. UX/UI design richt zich op producten met taken: webshops, boekingen, afgeschermde omgevingen, apps of SaaS-platformen, met onderzoek en gebruikerstests. Veel webdesignprojecten bevatten UX; het verschil zit in de diepgang.

Wat kost een UX/UI-designproject?

Dat hangt af van het aantal flows en schermen, hoeveel onderzoek en hoeveel testrondes nodig zijn, en of u een volledig designsysteem nodig heeft. We publiceren geen vast tarief: na een eerste discoverysessie krijgt u een vaste offerte per fase. Een bedrijfswebsite begint bij ons vanaf € 4.500.

Hoe lang duurt het?

Dat hangt af van de scope: een UX-audit van één flow is iets anders dan het ontwerp van een volledig SaaS-product. Als echte referentie: het volledige herontwerp van het TNC, met ontwerp en ontwikkeling, duurde 8 maanden. Na de discovery krijgt u een planning met mijlpalen.

Testen jullie met echte gebruikers?

Ja. We testen de prototypes met mensen die op uw gebruikers lijken voordat er geprogrammeerd wordt, en na livegang meten we met analytics en heatmaps. Wat onduidelijk is, passen we aan in het prototype, waar een wijziging het minst kost.

Wat is een designsysteem en heb ik er een nodig?

Het is de bibliotheek van componenten (knoppen, formulieren, kaarten, tabellen) met hun toestanden, tokens en gebruiksregels. U heeft er een nodig als uw product veel schermen heeft, als meerdere mensen of leveranciers eraan ontwerpen en bouwen, of als het gaat groeien. Voor een kleine website volstaat een stijlgids.

Voldoet het ontwerp aan WCAG 2.2 AA?

Ja, standaard. Voldoende contrast, zichtbare focus, aanraakvlakken, leesvolgorde en alternatieve teksten worden in het ontwerp vastgelegd en daarna gemeten met axe-core en schermlezers. Heeft u een formele audit nodig of moet u voldoen aan de European Accessibility Act, dan doen we dat via onze dienst webtoegankelijkheid.

Kunnen jullie ontwerpen en mijn team laten bouwen?

Ja. We leveren bewerkbare bestanden, het designsysteem en specificaties op en begeleiden uw team tijdens de ontwikkeling. Wilt u dat wij het bouwen, dan zitten ontwerp en ontwikkeling in hetzelfde team, zonder overdrachten.

Ontwerpen jullie mobiele apps?

Ja: flows, navigatie en componenten voor iOS en Android, volgens de conventies van elk platform. Moet de app ook gebouwd worden, kijk dan bij onze app-ontwikkeling.

Volgende stap

Vertel ons wat uw gebruikers gedaan moeten krijgen

Een videogesprek van 30 minuten om uw product te begrijpen en te zien waar mensen vastlopen. We vertellen u hoe we het zouden aanpakken en welke scope dat zou hebben.

Over mijn product praten