Wat is UI-design?
UI-design, kort voor user interface design, is het ontwerpen van de onderdelen waaruit een scherm is opgebouwd: knoppen, invoervelden, menu’s, kaarten, tabellen, meldingen. Het gaat niet alleen om hoe die er in rust uitzien, maar ook om hoe ze veranderen tijdens gebruik: wat er gebeurt als je een knop aanwijst, hoe een veld laat zien dat er iets fout is ingevuld, en hoe een lijst eruitziet wanneer er niets in staat.
Waar webdesign de vormgeving van de site als geheel bepaalt, werkt UI-design op het niveau van de losse bouwstenen. Dat verschil klinkt klein maar is in de praktijk aanzienlijk: het merendeel van het werk zit niet in de opvallende pagina’s maar in de tientallen kleine beslissingen over afstand, uitlijning, contrast en gedrag die samen bepalen of een site verzorgd aanvoelt of net niet klopt.
Een goed UI-ontwerp is vooral voorspelbaar. Dezelfde soort actie ziet er overal hetzelfde uit, afstanden volgen een vast ritme, en de belangrijkste knop op een scherm is altijd op dezelfde manier herkenbaar. Die consistentie is niet louter esthetiek: ze vermindert de hoeveelheid aandacht die een bezoeker aan de interface zelf moet besteden, waardoor er meer aandacht overblijft voor waar hij eigenlijk voor kwam.
Wat valt er precies onder?
UI-design bestaat uit het vastleggen van de visuele bouwstenen en van hun gedrag in alle situaties die zich kunnen voordoen.
- Raster en afstanden: een vast stelsel van kolommen en tussenruimtes, zodat elementen overal op dezelfde manier zijn uitgelijnd.
- Typografische schaal: de vaste reeks tekstgroottes en regelafstanden waarmee hiërarchie op elke pagina op dezelfde manier wordt aangebracht.
- Kleurtoepassing: welke kleur waarvoor staat, inclusief kleuren voor waarschuwingen, fouten en succes, met voldoende contrast.
- Componenten: het ontwerp van knoppen, velden, keuzelijsten, kaarten, tabellen en meldingen als herbruikbare onderdelen.
- Toestanden: per component de weergave bij rust, aanwijzen, focus, actief, uitgeschakeld, laden en fout.
- Lege en extreme situaties: hoe een scherm eruitziet zonder gegevens, met heel veel gegevens of bij een mislukte laadpoging.
- Iconen en beeldgebruik: een samenhangende set pictogrammen en afspraken over beeldformaten en bijsnijden.
- Responsief gedrag: hoe onderdelen zich gedragen op verschillende schermbreedtes, van telefoon tot breed beeldscherm.
Hoe verloopt een UI-traject?
UI-design werkt van fundament naar detail: eerst de regels, dan de onderdelen, dan de schermen die daaruit worden samengesteld.
- Uitgangspunten vaststellen. Huisstijl, bestaande richtlijnen en technische randvoorwaarden worden verzameld, zodat het ontwerp daarbinnen blijft.
- Fundament leggen. Raster, typografische schaal, kleurgebruik en afstandsmaten worden vastgelegd. Alles wat daarna komt, bouwt hierop voort.
- Sleutelschermen ontwerpen. Een paar representatieve pagina’s worden volledig uitgewerkt om de richting te toetsen en goedkeuring te krijgen.
- Componenten uitwerken. De losse onderdelen worden ontworpen in al hun toestanden, zodat ze op elk scherm herbruikbaar zijn.
- Resterende schermen samenstellen. De overige paginatypes worden opgebouwd uit de vastgelegde componenten, wat aanzienlijk sneller gaat.
- Overdracht aan development. De ontwerpen worden overgedragen met specificaties over maten, gedrag en uitzonderingen, meestal in een gezamenlijke sessie.
Wanneer heb je dit nodig?
De vanzelfsprekende aanleiding is een nieuwe website of applicatie, waarbij de interface van de grond af wordt opgebouwd. Hoe meer schermen en hoe meer interactie, hoe zwaarder dit onderdeel weegt: bij een informatieve site met tien pagina’s is het beperkt, bij een portaal of webshop is het het grootste deel van het ontwerpwerk.
Een tweede aanleiding is een site die inconsistent is geworden. Als er in de loop van de tijd door verschillende mensen aan is gewerkt, ontstaan er varianten: drie soorten knoppen, vier tinten blauw, formulieren die elk net anders werken. Dat is zelden per pagina een probleem, maar over het geheel voelt het rommelig en onbetrouwbaar.
Ook gebruiksproblemen die zich op detailniveau afspelen vragen erom: formulieren waarin mensen fouten maken, knoppen die niet als knop worden herkend, meldingen die niemand opmerkt. En bij een uitbreiding van een bestaande interface is het nodig om te voorkomen dat het nieuwe deel visueel losstaat van wat er al was.
Wat levert het op?
Zorgvuldig UI-design levert een interface op die voorspelbaar en verzorgd aanvoelt, waardoor bezoekers minder aandacht kwijt zijn aan het bedienen van de site zelf. Voor de organisatie zit de winst ook in de bouw: als componenten en hun toestanden vooraf zijn vastgelegd, hoeft de developer minder gaten zelf in te vullen en ontstaan er minder verschillen die achteraf hersteld moeten worden. Dat scheelt vragen tijdens de bouw en herstelwerk erna.
Wat het niet doet, is op zichzelf zorgen voor meer aanvragen of verkopen. Een verzorgde interface draagt bij aan vertrouwen en gemak, maar het resultaat hangt evenzeer af van de inhoud, het aanbod, de snelheid van de site en hoe mensen er terechtkomen. Bureaus die een visueel oordeel presenteren als voorspeller van commercieel resultaat, beloven meer dan aantoonbaar is. Wat wel geldt, is het omgekeerde: een rommelige of onvoorspelbare interface kost aantoonbaar bezoekers, vooral op formulieren en bestelprocessen.
Waar let je op als je dit uitbesteedt?
Vraag welke schermen worden uitgewerkt en welke toestanden daarbij horen. Ontwerpen die alleen de ideale situatie tonen, laten precies de onderdelen open waar tijdens de bouw de meeste vragen over ontstaan: foutmeldingen, lege lijsten, lange teksten die niet passen. Vraag ook of er zowel voor mobiel als voor desktop wordt ontworpen, of dat één formaat wordt uitgewerkt met een beschrijving van het aanpassingsgedrag.
Let daarnaast op toegankelijkheid, want die wordt in deze fase gemaakt of gebroken. Contrastverhoudingen, zichtbare focus bij toetsenbordbediening en voldoende grote aanraakvlakken zijn ontwerpkeuzes, geen technische details die later toegevoegd kunnen worden. Vraag ten slotte wie eigenaar wordt van de ontwerpbestanden en of je er zelf toegang toe houdt, zodat een andere partij er later mee verder kan zonder alles opnieuw op te bouwen.
Veelgemaakte fouten
De problemen ontstaan zelden in de opvallende schermen, maar in wat er niet is ontworpen.
- Alleen de ideale situatie tekenen. Schermen met korte teksten en volle lijsten ogen mooi, maar zeggen niets over hoe de interface eruitziet bij lange namen, ontbrekende gegevens of een fout.
- Toegankelijkheid als sluitpost behandelen. Te licht contrast en onzichtbare focus zijn ontwerpkeuzes die achteraf alleen met visuele concessies zijn recht te trekken.
- Componenten zonder systeem ontwerpen. Als elk scherm zijn eigen knop krijgt, groeit het aantal varianten ongemerkt en wordt de site duurder in onderhoud.
- Geen overdracht naar development. Ontwerpbestanden zonder specificaties over maten, afstanden en gedrag laten te veel over aan interpretatie tijdens de bouw.
Wat bepaalt de prijs?
De prijs volgt vooral uit het aantal unieke paginatypes en het aantal componenten, niet uit het totale aantal pagina’s. Twintig pagina’s van hetzelfde type kosten weinig meer dan één.
| Wat de prijs opdrijft | Waarom het meetelt |
|---|---|
| Aantal unieke paginatypes | Elk type vraagt een eigen indeling; herhaling van hetzelfde type kost nauwelijks extra tijd. |
| Aantal componenten en toestanden | Elke component moet in vijf tot acht situaties worden uitgewerkt, wat het werk vermenigvuldigt. |
| Aantal schermformaten | Apart ontwerpen voor telefoon, tablet en desktop kost meer dan één formaat met aanpassingsregels. |
| Bestaand designsysteem of niet | Voortbouwen op een bestaand systeem scheelt aanzienlijk ten opzichte van alles opnieuw opzetten. |
UI-design wordt doorgaans op projectbasis aangeboden als onderdeel van een ontwerptraject, met een vast bedrag voor een afgesproken set schermen en componenten. Bij doorlopende doorontwikkeling komt een maandelijkse vorm voor, waarbij een ontwerper een vast aantal uren per week beschikbaar is. Vraag expliciet of de overdracht aan development is inbegrepen, want die sessie plus de bijbehorende specificaties zijn een aparte inspanning die regelmatig buiten de offerte valt.
UI-design en aanverwante diensten
UI-design ligt midden in het ontwerpproces en grenst daardoor aan bijna alle andere diensten. Webdesign is de bredere vormgevingsopdracht waar UI-design het detailniveau van invult. Designsystemen zijn de logische volgende stap: als componenten toch worden vastgelegd, loont het om ze als herbruikbaar systeem te documenteren. Interactie en motion bepaalt hoe die componenten bewegen tussen hun toestanden. Digitale toegankelijkheid is geen losse laag maar een reeks eisen die in het UI-ontwerp zelf moeten landen, van contrast tot focusvolgorde. En frontend-development is de directe afnemer, die de ontworpen componenten omzet in werkende code. Vrijwel elk bureau dat webdesign aanbiedt, levert UI-design als onderdeel daarvan, al verschilt het sterk hoe volledig toestanden en uitzonderingen worden uitgewerkt.