Wie een website of app laat maken, ziet in offertes vaak de post “UX/UI design” staan. Wat je daarvoor krijgt, blijft meestal vaag. Toch is dit het deel van een project dat bepaalt of bezoekers vinden wat ze zoeken, en of je na de lancering dure aanpassingen moet laten bouwen.
Hieronder lees je wat UX design en UI design zijn, waar het verschil zit, wat een UX designer en een UI designer doen en hoe het ontwerpproces verloopt. We baseren ons op onderzoek van Nielsen Norman Group en op onze eigen werkwijze: bij Viralistic ontwerpen we websites in Figma en bouwen we ze in Astro, in fases die je stap voor stap goedkeurt.
Wat is UX design?
UX design is het ontwerpen van alles wat iemand ervaart in contact met je bedrijf, je dienst of je product. Op een website draait dat om drie vragen. Vind ik wat ik zoek? Begrijp ik wat dit bedrijf doet? Weet ik wat mijn volgende stap is?
Nielsen Norman Group, het onderzoeksbureau van Don Norman en Jakob Nielsen, definieert user experience als alle aspecten van de interactie van de eindgebruiker met het bedrijf, zijn diensten en zijn producten. Dat is breder dan een scherm. Hun voorbeeld is een website met filmrecensies. Ook als de zoekfunctie perfect is, blijft de ervaring slecht voor wie een kleine onafhankelijke film zoekt, als de database alleen films van grote studio’s bevat.
UX design is dus geen stijl en geen tool. Het is een manier van werken: eerst begrijpen wat mensen nodig hebben, pas daarna bepalen hoe iets eruitziet.
Wat is UI design?
UI design is het ontwerp van de laag die mensen zien en aanraken: typografie, kleur, knoppen, formulieren, iconen, witruimte en beweging. Een UI designer zorgt dat de interface helder leest, overal hetzelfde werkt en past bij je merk.
Goede UI maakt een goede structuur bruikbaar en geloofwaardig. Een mooie UI redt een onlogische structuur niet.
Wat is UX/UI design?
UX/UI design is de verzamelnaam voor beide disciplines samen. In kleinere teams en bij bureaus doet vaak één ontwerper of één team allebei. Dat werkt goed, zolang de structuur eerst komt en de vormgeving daarna.
Het verschil tussen UX en UI in één tabel
UX gaat over hoe iets werkt, UI over hoe het eruitziet en aanvoelt. De tabel zet de verschillen naast elkaar.
| UX design | UI design | |
|---|---|---|
| Kernvraag | Werkt het, en is het logisch? | Is het helder, verzorgd en herkenbaar? |
| Focus | Structuur, inhoud en de route door de site | Typografie, kleur, layout en interactie |
| Typische resultaten | Onderzoek, sitemap, user flows, wireframes | Stijlrichting, componenten, high-fidelity-schermen |
| Moment in het project | Begint vóór het visuele ontwerp | Bouwt voort op de goedgekeurde structuur |
| Wat je merkt als het ontbreekt | Bezoekers haken af of vinden de knop niet | Het merk oogt goedkoop of inconsistent |
Een vergelijking die vaak helpt: UX is de plattegrond van een huis, UI de materialen en de afwerking. Je kunt prachtig natuursteen leggen in een gang die nergens heen leidt. Het blijft een gang die nergens heen leidt.
Wat doet een UX designer en wat doet een UI designer?
Een UX designer onderzoekt wat gebruikers nodig hebben en vertaalt dat naar structuur. Een UI designer geeft die structuur een vorm die bij het merk past. Samen leveren ze een ontwerp dat klaar is om te bouwen.
Wat doet een UX designer?
- Gesprekken voeren met jou, je team en waar mogelijk je klanten, en bestaande data bekijken.
- De inhoud en de paginastructuur ordenen: welke pagina’s er zijn en hoe ze samenhangen.
- Routes uittekenen: hoe komt iemand van de eerste indruk bij een aanvraag of aankoop?
- Wireframes en prototypes maken.
- Testen met echte mensen en de uitkomsten verwerken.
Wat doet een UI designer?
- Je huisstijl vertalen naar schermen: typografie, kleur en beeld.
- Componenten ontwerpen, zoals knoppen, formulieren, kaarten en navigatie, die overal hetzelfde werken.
- Toestanden uitwerken: wat zie je bij een fout, tijdens het laden of als een lijst leeg is?
- Bewaken dat tekst leesbaar is en het contrast klopt.
- Het ontwerp overdraagbaar maken voor de bouw, bijvoorbeeld in Figma.
Eén designer of twee?
Wat is een UX designer in de praktijk? In grote productteams is het vaak een aparte rol, naast UI designers en onderzoekers. Voor de website van een gevestigd bedrijf werkt één ontwerpteam dat beide beheerst meestal beter: minder overdrachten, minder ruis. Belangrijker dan de functietitel is de volgorde. Eerst structuur, dan vorm.
Het UX-designproces in zes stappen
Een goed UX-proces gaat van begrijpen naar maken naar toetsen. Deze stappen komen in vrijwel elk serieus project terug, al verschilt de diepgang per budget.
1. Onderzoek
Je begint met begrijpen. Wie zijn je bezoekers, wat willen ze bereiken en waar haken ze nu af? Goede bronnen zijn gesprekken, je analytics, zoekdata en de vragen die je team elke week krijgt.
2. Informatiearchitectuur
Informatiearchitectuur is de ordening van je inhoud: welke pagina’s er zijn, hoe ze heten en hoe ze met elkaar samenhangen. Volgens Nielsen Norman Group is informatiearchitectuur geen onderdeel van de zichtbare interface, maar de basis waarop die interface rust. Ze hoeft niet definitief te zijn voordat je gaat wireframen, maar een eerste versie moet er liggen.
3. Wireframes
Een wireframe is een schets van een pagina zonder kleur of beeld. Je ziet wat waar staat en in welke volgorde iemand het leest. Juist doordat de vormgeving ontbreekt, gaat het gesprek over inhoud en route, niet over smaak.
4. Prototype
Een prototype is een klikbare versie van het ontwerp. Je ziet hoe schermen op elkaar volgen voordat er een regel code is geschreven. In Figma maak je dat prototype in hetzelfde bestand als het ontwerp.
5. Visueel ontwerp
Nu komt de UI: typografie, kleur, beeld en componenten, gebaseerd op je huisstijl. Is die nog niet scherp, dan loont het om eerst je huisstijl te laten maken. Anders ontwerp je een interface zonder fundament.
6. Testen
Testen hoeft niet groot te zijn. Jakob Nielsen liet zien dat een test met vijf gebruikers ongeveer 85 procent van de bruikbaarheidsproblemen blootlegt, en dat drie kleine tests met elk vijf mensen meer opleveren dan één grote studie (Nielsen Norman Group). Dat geldt voor vergelijkbare gebruikers. Heb je duidelijk verschillende doelgroepen, dan test je per groep. Na de lancering gaat het toetsen verder met echte data. Daarover lees je meer in ons artikel over conversie-optimalisatie.
Zo ziet dat er bij ons uit
Onze webdesignfases volgen dezelfde logica. In het fundament maken we een brandscript en een sitemap: welke pagina’s je site nodig heeft en hoe ze samenhangen. Daarna voegen we die samen tot een wireframe, bewust nog zonder ontwerp. Pas als de structuur klopt, werken we de stylescape uit tot een brandguide en een high-fidelity-ontwerp in Figma. Dat ontwerp bouwen we in Astro. Elke fase sluit af met een feedbackmoment, en de volgende fase bouwt voort op jouw akkoord.
Voor Gre-Go, een boekings- en samenwerkingsplatform voor vervoer in Noord-Nederland, schreven we merkverhalen voor reizigers, voor chauffeurs en voor hotels en zakelijke partners. Daarnaast maakten we de sitemap en de wireframes. Je leest het in de case van Gre-Go.
Waarom goede UX ontwikkelkosten bespaart
Goede UX bespaart ontwikkelkosten, omdat je fouten vindt terwijl ze nog op papier staan. Een wireframe aanpassen is een middag werk. Dezelfde wijziging in een gebouwde site raakt templates, content, tests en soms je CMS.
Het bekendste onderzoek hiernaar komt uit de software engineering. Barry Boehm en Victor Basili schreven in 2001 in IEEE Computer dat het vinden en oplossen van een softwareprobleem na oplevering vaak 100 keer duurder is dan in de fase van eisen en ontwerp (Boehm en Basili, 2001). Ze gaven er zelf een nuance bij: bij kleine, minder kritische systemen ligt die verhouding eerder rond 5 op 1. Een bedrijfswebsite valt meestal in die tweede groep. Ook dan is vijf keer zo duur reden genoeg om de structuur eerst goed te krijgen.
Nielsen Norman Group beschrijft hoe dat in webprojecten misgaat. Een team kiest een navigatie met een balk bovenin en een kolom links, omdat die er goed uitziet. Zo’n navigatie kan inhoud tot vier niveaus diep aan. Later blijkt dat veel onderdelen van de site dieper gaan. Dan moet het team de navigatie opnieuw ontwerpen of de inhoud in vier niveaus proppen. Een sitemap en een wireframe voorkomen precies dat soort meerwerk.
Wat levert een betere UX-structuur je concreet op?
- Minder herbouw, omdat beslissingen over pagina’s en routes vóór de bouw vallen.
- Kortere discussies, omdat een wireframe zonder kleur het gesprek bij de inhoud houdt.
- Minder losse wensen achteraf, omdat iedereen de structuur al heeft goedgekeurd.
- Een site die kan groeien, omdat een heldere structuur nieuwe pagina’s opvangt zonder dat de navigatie breekt.
Daarom beginnen we nooit met code. Van gedachten veranderen mag altijd, maar een wijziging op een eerder akkoord kost extra tijd en budget. Hoe later in het project, hoe meer werk eraan vastzit. Laat je maatwerksoftware bouwen, dan speelt dit nog sterker. Lees daarover ons artikel over software laten maken.
UX en UI voor premium merken
Voor premium merken is UX geen technische bijzaak. Het is de manier waarop je kwaliteit online voelbaar wordt, of juist verdwijnt.
De eerste indruk staat snel. Gitte Lindgaard en collega’s toonden proefpersonen webpagina’s gedurende 50 milliseconden. Ook in die korte tijd gaven mensen een consistent oordeel over de visuele aantrekkingskracht (Lindgaard e.a., 2006). Dat zegt nog niets over of een site goed werkt. Wel dat je UI het eerste is waarop je merk wordt beoordeeld.
Premium vraagt daarbij om ingetogenheid, en dat is net zo goed een UX-keuze. Minder opties per scherm. Rust in de typografie. Eén duidelijke volgende stap. Op onze designpagina noemen we dat bruikbaar minimalisme: structuur, typografie, het tempo van de interface, de prestaties van de technologie en het ritme van de content moeten dezelfde kwaliteitsbeleving dragen die je klanten offline ervaren.
Drie dingen maken het verschil:
- Eén systeem. De UI volgt je brandguide, zodat elke pagina en elk component hetzelfde gewicht draagt.
- Snelheid. Een trage site voelt als een rommelige winkel, hoe mooi het ontwerp ook is.
- Relevantie. Wie verder wil, laat de ervaring meebewegen met de bezoeker. Lees daarover meer in ons artikel over website-personalisatie.
In luxe websites die converteren gaan we dieper in op hoe premium merken online vertrouwen opbouwen.
Hoe kies je een UX/UI-partner?
Kies een UX/UI-partner op proces en denkwerk, niet alleen op een mooi portfolio. Een portfolio laat het eindresultaat zien. Het proces bepaalt of jouw project ook zo eindigt.
Deze vragen helpen je kiezen:
- Hoe beginnen jullie? Begint het met onderzoek, structuur en een sitemap, of meteen met schermen?
- Zit er een wireframefase in het voorstel? Zonder wireframes wordt de structuur pas zichtbaar als het ontwerp al af is.
- Sluiten ontwerp en bouw op elkaar aan? Bij een overdracht tussen twee partijen gaan vaak details verloren.
- Wat krijg ik zelf in handen? Denk aan de ontwerpbestanden, een brandguide en toegang tot de site.
- Hoe werken feedback en wijzigingen? Vraag wat een wijziging kost nadat je ergens akkoord op hebt gegeven.
- Hoe meten jullie na de lancering? Een ontwerp is een hypothese tot je ziet hoe mensen het gebruiken.
Let ook op de prijs, maar vergelijk wat je per fase krijgt. Bij Viralistic beginnen webdesignprojecten rond EUR 4.000. Grotere platforms met een CMS kunnen oplopen tot EUR 20.000 of meer. De belangrijkste factor is of we alleen de homepage en een of twee zware pagina’s in Figma ontwerpen, of elke pagina tot in detail. Een eerlijk overzicht van prijsniveaus in de markt lees je in website laten maken.
Hoe wij helpen
Bij Viralistic horen UX en UI bij één traject, onder één strategische regie. We beginnen met strategie en structuur, ontwerpen in Figma en bouwen in Astro. Op onze design-aanpak lees je hoe we je merk vertalen naar interfaces en content die ook op grote schaal één geheel blijven. Op onze webdesignpagina staan alle zes fases, met een feedbackmoment na elke fase. In een strategisch gesprek vertellen we je eerlijk of je merk klaar is voor ontwerp en ontwikkeling, of wat er eerst moet gebeuren.
Veelgestelde vragen
Waar staat de afkorting UX voor?
UX staat voor user experience, in het Nederlands gebruikerservaring. UI staat voor user interface, de gebruikersinterface. UX design gaat over de hele ervaring van iemand met je website, app of dienst: vinden, begrijpen en handelen. UI design is het zichtbare deel daarvan, zoals typografie, kleur, knoppen en layout. In vacatures en offertes zie je ze vaak samen als UX/UI design.
Wat doe je als UX designer?
Een UX designer zorgt dat een website of app logisch werkt voor de mensen die hem gebruiken. Dat begint met onderzoek naar wat gebruikers willen en waar ze nu vastlopen. Daarna ordent de UX designer de inhoud, tekent routes en wireframes uit, maakt een prototype en test dat met echte mensen. De UI designer werkt die structuur vervolgens visueel uit.
Wat kost een UX designer per uur?
Uurtarieven verschillen sterk per ervaring en type partij, dus een vergelijking op uurprijs zegt weinig. Vergelijk liever wat je per fase krijgt: onderzoek, sitemap, wireframes, ontwerp en testen. Bij Viralistic is UX onderdeel van het webdesigntraject. Projecten beginnen rond EUR 4.000, grotere platforms met een CMS kunnen oplopen tot EUR 20.000 of meer.
Kun je kosten besparen op development door een betere UX-structuur?
Ja. Een wijziging in een sitemap of wireframe kost veel minder dan dezelfde wijziging in een gebouwde site. Boehm en Basili schreven in 2001 dat het oplossen van een softwareprobleem na oplevering vaak 100 keer duurder is dan tijdens het ontwerp, en bij kleine systemen ongeveer 5 keer. Leg daarom pagina’s, routes en inhoud vast voordat er gebouwd wordt.
Heb je een aparte UX designer en UI designer nodig?
Voor de meeste websites niet. Grote productteams splitsen de rollen vaak op, maar voor een bedrijfswebsite werkt één ontwerpteam dat beide beheerst meestal beter: minder overdrachten en minder ruis. Let vooral op de volgorde. Wie meteen met kleur en beeld begint, slaat de structuur over, en die rekening komt later alsnog.
Met hoeveel gebruikers test je een ontwerp?
Met minder dan je denkt. Jakob Nielsen van Nielsen Norman Group laat zien dat vijf gebruikers ongeveer 85 procent van de bruikbaarheidsproblemen vinden. Hij raadt aan om liever drie kleine tests te doen dan één grote, zodat je tussendoor kunt verbeteren. Heb je duidelijk verschillende doelgroepen, test dan met drie tot vier mensen per groep.
Geschreven door
Oprichter van Viralistic en officieel n8n Ambassador
Marrallisa leidt vanuit Amsterdam strategie, design, vindbaarheid en automatisering voor premium merken. Ze trainde teams bij Volkswagen en spreekt op events van n8n en Anthropic. Wil je jouw situatie doorspreken? Plan direct een gesprek met haar.