Elk scherm dat u gebruikt, is door iemand ontworpen: het startscherm van een bankapp, een zoekvak, een instellingenpagina. UI-ontwerp is de discipline die bepaalt hoe die schermen zijn gerangschikt, hoe elke bediening eruit ziet en hoe deze reageert als je hem aanraakt.
Een UI-ontwerper werkt met een paar bouwstenen. Indeling en spatiëring groeperen gerelateerde zaken bij elkaar. Visuele hiërarchie zorgt ervoor dat de belangrijkste actie opvalt. Typografie en kleur dragen betekenis en merk over. Componenten zoals knoppen, ingangen, kaarten en menu's worden eenmalig ontworpen en hergebruikt, waardoor het product consistent aanvoelt.
Elk onderdeel heeft ook statussen. Een knop heeft standaard-, zweef-, ingedrukte, gefocuste, uitgeschakelde en laadstatussen, en elke knop heeft een ontwerp nodig. Het weglaten van staten is een van de meest voorkomende redenen waarom een ontwerp er in een mockup afgewerkt uitziet, maar in het echte product kapot aanvoelt.
Interactie en beweging maken ook deel uit van de gebruikersinterface. Kleine reacties, vaak micro-interacties genoemd, bevestigen dat een tik heeft gewerkt, laten de voortgang zien of leggen uit waar iets naartoe is gegaan. Ze moeten snel en doelgericht zijn en de systeeminstelling voor verminderde beweging respecteren.
Het meeste UI-ontwerp gebeurt tegenwoordig in Figma, met Penpot, Sketch en Lunacy als gebruikelijke alternatieven. Voor interfaces die moeten reageren op echte gegevens en invoer in de voltooide app, gebruiken ontwerpers ook interactieve tools. ExodeUI, dat wij maken, is er één: het slaat toestanden, lentefysica en gebeurtenissen op in één open bestand dat draait in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI en Flutter.