UI-mockup: het ontwerp vóór de bouw
Stel je voor dat een aannemer een huis zou bouwen zonder ooit een bouwtekening te hebben gezien. Muren op de verkeerde plek, een trap die nergens heen leidt, een deur die tegen een raam opent: dat wordt een duur en pijnlijk avontuur. Om die reden maakt niemand een huis zonder eerst een plattegrond te tekenen. Bij software en apps werkt het net zo, en daar heet die plattegrond een UI-mockup.
Een UI-mockup is een ontwerp van een scherm of app dat er precies zo uitziet als het straks moet worden, maar dat nog niet werkt. Knoppen zijn getekend, maar drukken doet nog niets. Het is dus geen bouwwerk, maar een gedetailleerde schets ervan: een statisch plaatje dat toont hoe de uiteindelijke digitale ruimte eruit gaat zien, nog voordat een programmeur ook maar één regel code heeft geschreven.
Wat is het precies?
De afkorting UI staat voor user interface, oftewel gebruikersinterface: alles op een scherm waarmee iemand een programma bedient, van knoppen en menu's tot tekstvelden en iconen. Een mockup (letterlijk: nepmodel) is een ontwerp dat er echt uitziet, maar niet functioneert. Het is een tussenstap in een proces dat meestal uit drie niveaus bestaat.
Het begint vaak met een wireframe, een zeer sobere schets in grijstinten met simpele blokken en lijnen. Hierin gaat het alleen om de indeling: waar komt de zoekbalk, waar het menu, waar de knop om iets te bestellen. Kleur, lettertype en beeldmateriaal doen er op dit punt nog niet toe.
Daarna volgt de UI-mockup zelf, ook wel een 'high-fidelity' (hoog-getrouw) ontwerp genoemd. Hier krijgt het scherm zijn echte kleuren, lettertypes, iconen en teksten, zodat het al bijna niet meer van het eindproduct te onderscheiden is. Alleen: klik je erop, dan gebeurt er niets, want het is een plaatje, geen werkende software.
De derde stap is het klikbare prototype: dezelfde schermen, maar nu aan elkaar gekoppeld, zodat een testgebruiker door de app heen kan klikken alsof die al werkt. Voor dit hele proces gebruiken ontwerpers programma's als Figma, Sketch en Adobe XD. Grotere teams werken daarbij vaak met een design system: een vaste verzameling knoppen, kleuren en lettertypes die overal in de app hetzelfde ogen, zodat een ontwerp er consistent uitziet.
Wat wil men ermee bereiken?
De belangrijkste reden om mockups te maken is simpel: een ontwerp aanpassen kost een paar minuten, een stuk werkende software aanpassen kost dagen of weken. Door eerst op papier of in een ontwerpprogramma te experimenteren, worden dure fouten voorkomen voordat er ook maar één regel code is geschreven.
Mockups worden ook gebruikt om vroeg te testen bij echte gebruikers, wat usability testing heet: mensen krijgen een niet-werkend ontwerp te zien of een klikbaar prototype, en ontwerpers kijken waar ze vastlopen of in de war raken. Zo'n test kan al in een vroeg stadium laten zien dat een knop onvindbaar is, nog voordat er geld in de bouw is gestoken.
Daarnaast dient een mockup als gemeenschappelijke taal. Een ontwikkelaar, een marketeer en een investeerder hebben vaak een heel ander beeld bij een idee totdat ze allemaal naar hetzelfde scherm kijken. Een mockup zorgt dat een team het eens wordt over hoe iets eruit moet zien, en helpt om financiers of opdrachtgevers te overtuigen nog vóór er een werkend product bestaat.
Voorbeelden uit de praktijk
Het ontwerpprogramma Figma, opgericht in 2012 door Dylan Field en Evan Wallace, groeide na de publieke lancering in 2016 uit tot de standaardtool voor UI-mockups wereldwijd, mede doordat meerdere mensen tegelijk in hetzelfde ontwerp kunnen werken, net als in een gedeeld Google-document. In 2022 kondigde Adobe aan Figma voor ongeveer twintig miljard dollar te willen overnemen, maar dat plan werd in 2023 afgeblazen nadat Europese en Britse toezichthouders vreesden voor te weinig concurrentie op de ontwerpmarkt.
Apple ontwikkelde de eerste iPhone tussen 2005 en 2007 met talloze interne mockups en prototypes, voordat het toestel in januari 2007 werd aangekondigd. Uit dat traject ontstonden ook de Human Interface Guidelines, een document waarin Apple beschrijft hoe knoppen, iconen en schermen zich horen te gedragen, en dat sindsdien geldt als richtlijn voor ontwerpers binnen het hele Apple-ecosysteem.
De Humane AI Pin, een draagbare spraakcomputer zonder scherm, werd in 2023 aangekondigd en begon als een reeks ontwerpconcepten en mockups die een compleet nieuwe manier van interactie moesten tonen, zonder traditioneel beeldscherm. Toen het product in 2024 daadwerkelijk op de markt kwam, bleek de praktijk weerbarstiger dan de mockups hadden beloofd: recensies waren kritisch over traagheid en beperkte functionaliteit.
Ook de Apple Vision Pro, een 'mixed reality'-headset die in juni 2023 werd aangekondigd en in februari 2024 uitkwam, ging vergezeld van uitgebreide UI-mockups waarin Apple liet zien hoe vensters, knoppen en iconen in de driedimensionale ruimte om een gebruiker heen zouden zweven, ruim voordat het apparaat daadwerkelijk in winkels lag.
Hoe ver is de techniek?
Als vakgebied is het maken van UI-mockups allesbehalve nieuw: ontwerpers werken al decennia met schetsen en modellen, eerst op papier, later digitaal. De methode zelf is dus volwassen en breed geaccepteerd binnen softwareontwikkeling.
Wat wel snel verandert, is de rol van kunstmatige intelligentie in dat proces. Sinds ongeveer 2022 en 2023 zijn er tools opgekomen zoals Galileo AI, Uizard en Vercel's v0, die op basis van een korte tekstomschrijving automatisch een eerste opzet van een scherm genereren. In plaats van zelf elk vakje te tekenen, typt een ontwerper bijvoorbeeld 'inlogscherm voor een bankapp' en krijgt daar een startpunt voor terug.
Die AI-gegenereerde ontwerpen zijn echter nog verre van perfect. Ze ogen vaak generiek, lijken op elkaar en missen de fijne afstemming op een specifiek merk of specifieke gebruikersgroep. Ontwerpers moeten het resultaat bijna altijd handmatig verfijnen. Ook toegankelijkheid, oftewel accessibility, blijft grotendeels mensenwerk: zorgen dat een app ook goed te gebruiken is voor mensen met een visuele of motorische beperking vraagt om zorgvuldige, doelgerichte keuzes die een taalmodel niet automatisch goed maakt.
Wie werken eraan?
Figma, gevestigd in San Francisco, is momenteel het meest gebruikte platform voor UI-mockups. Adobe blijft met programma's als Adobe XD en Illustrator een grote speler in dezelfde markt. Sketch, gemaakt door het bedrijf Bohemian Coding en opgericht door de Nederlander Pieter Omvlee, was jarenlang toonaangevend voor het maken van UI-mockups op de Mac.
Ook Framer heeft Nederlandse wortels: het werd in Amsterdam opgericht door Koen Bok en Jorn van Dijk, aanvankelijk als tool voor interactieve prototypes, en is inmiddels uitgegroeid tot een breder platform voor ontwerp en websitebouw.
Grote technologiebedrijven zetten daarnaast eigen standaarden neer: Google onderhoudt met Material Design een uitgebreide stijlgids voor Android-apps en websites, terwijl Apple dat doet via de eerdergenoemde Human Interface Guidelines. Nieuwe AI-startups als Uizard en Galileo AI proberen het ontwerpproces te versnellen met automatisch gegenereerde mockups. Ook academische onderzoeksgroepen op het gebied van human-computer interaction, de wetenschap van de interactie tussen mens en computer, dragen bij aan dit veld, onder meer aan Nederlandse technische universiteiten zoals TU Delft en TU Eindhoven, waar onderzoek wordt gedaan naar hoe mensen digitale interfaces begrijpen en gebruiken.