Wat

is

app

design?

Waarom bepaalt het ontwerp of je app gebruikt wordt?

In de praktijk lopen de twee in elkaar over. Een knop die er goed uitziet maar op de verkeerde plek staat, is een UX-probleem dat je niet oplost met een mooier UI-ontwerp. Lees meer over hoe Cube UX design aanpakt en over UI design bij Cube. Het ontwerp bepaalt of iemand zijn taak in een paar tikken afrondt of halverwege afhaakt. Een app die mensen downloaden maar niet snappen, openen ze één keer.

Bij zakelijke apps weegt dat extra zwaar. Een monteur met werkhandschoenen aan, of een supporter in een vol stadion, heeft geen geduld voor een knop die te klein is of een menu waarin hij moet zoeken. Goed app design begint daarom bij de situatie waarin de app gebruikt wordt, niet bij het mooiste scherm. Daarom is een goed app-ontwerp klaar voordat de bouw begint. Een scherm aanpassen in Figma is snel gedaan. Hetzelfde scherm aanpassen in gebouwde code raakt ook de logica, de koppelingen en de tests.

Hoe verloopt het ontwerpproces van een app?

Het ontwerpproces van een app loopt in vijf stappen: requirements bepalen, gebruikersflows en wireframes maken, de user interface ontwerpen, een klikbaar prototype bouwen en dat testen. Elke stap bouwt voort op de vorige.

1. Requirements bepalen. Samen leggen we vast wat de app moet kunnen: welke functies, welke koppelingen en op welke platformen. Android en iOS hebben elk eigen richtlijnen, dus die keuze hoort aan het begin.

2. Gebruikersflows en wireframes. We brengen de routes door de app in kaart en maken de schermstructuur en navigatie zichtbaar in eenvoudige schetsen, nog zonder kleur of beeld.

3. UI design. Na goedkeuring van de wireframes ontwerpen we de user interface. Elk nieuw project start bij Cube vanuit een vaste Figma-boilerplate met kleuren, typografie, spacing en grid; daarna passen de designers kleur, lettertype en logo aan op het merk.

4. Klikbaar prototype. Van het ontwerp maken we een klikbaar prototype: een model van de app waarin je door de schermen tikt alsof hij al bestaat.

5. Testen en bijstellen. Met het prototype zie je hoe gebruikers op het ontwerp reageren. Wat niet werkt, passen we aan voordat er gebouwd wordt.

Wat levert de design fase op?

De design fase levert een gevalideerd ontwerp op en een technisch ontwerp waarmee de bouw kan starten. Het is het eerste deel van de fase Design & Build en vertaalt de scope uit de Kickoff naar schermen en techniek. Bij Cube bestaat de designstap uit drie gezamenlijke sessies: van user flows en eerste visuele ontwerpen, via een designreview met het technisch ontwerp, naar een definitief ontwerp voor fase 1. Wat je overhoudt:

• user stories in de vorm wie, wat, waarom;

• user flows en een interactief ontwerp dat je kunt doorklikken;

• de belangrijkste schermen van de beheeromgeving;

• een technisch ontwerp met datamodel, architectuur en de benodigde koppelingen;

• een aangescherpte business case.

De laatste sessie eindigt met een go/no-go: je beslist pas over de bouw als je weet wat je krijgt. Designers en developers werken in deze stap samen, zodat een ontwerp ook te bouwen is. Zo begon ook de LeaseApp van Wevi: eerst user stories, dan wireframes en een visueel ontwerp, en pas daarna de bouw. Hoe ontwerp en bouw op elkaar aansluiten, lees je bij Design & Build.

Wat is een design system?

Een design system is de bibliotheek met alle bouwstenen van je app: kleuren, typografie, spacing en componenten zoals knoppen, invoervelden, lijsten en kaarten, elk met hun varianten en states. Bij Cube staat het design system in Figma als componenten en variables, en gebruiken de developers dezelfde waarden in de code. Een nieuw scherm stel je dan samen uit bestaande onderdelen. Dat houdt de app consistent en maakt uitbreiden later sneller, ook als er een nieuwe designer of developer instapt.

Welke states horen in een app-ontwerp?

Een app-ontwerp is pas compleet als elk scherm ook laat zien wat er gebeurt als het niet ideaal loopt. Ontwerpen worden meestal gemaakt met nette voorbeelddata, waardoor de lastige situaties makkelijk buiten beeld blijven.

Bij Cube gaat een ontwerp pas naar development als deze situaties zijn uitgewerkt:

• Interactiestates: standaard, focus, actief, uitgeschakeld, fout en laden.

• Lege data: wat ziet een nieuwe gebruiker als er nog niets is?

• Lange teksten en veel items: blijft de layout heel bij een lange naam of honderd regels?

• Foutmeldingen: definitieve teksten, geen placeholders.

Hoe ontwerp je een toegankelijke app?

Een toegankelijke app is bruikbaar voor iedereen, ook voor mensen die slecht zien, een schermlezer gebruiken of hun handen beperkt kunnen bewegen. Cube ontwerpt volgens WCAG 2.1 op niveau AA. Concreet betekent dat:

• Contrast. Kleine tekst heeft minimaal een contrastverhouding van 4,5:1, grote tekst en elementen als iconen en knoppen minimaal 3:1.

• Aanraakvlakken. Alles wat je kunt aanraken is op mobiel minimaal 44 bij 44 pixels.

• Focus. Elk interactief element heeft een zichtbare focus, zodat je ook zonder aanraken door de app kunt navigeren.

• Niet alleen kleur. Informatie staat nooit alleen in kleur, maar ook in tekst of een icoon.

Sinds 28 juni 2025 geldt bovendien de European Accessibility Act voor een aantal digitale producten en diensten, zoals e-commerce en bankdiensten. Valt jouw app daaronder, dan is toegankelijkheid geen keuze maar een verplichting.

Bronnen: WCAG 2.1, W3C, 2018 en Richtlijn (EU) 2019/882, European Accessibility Act.

Hoe gaat een ontwerp over naar development?

Een ontwerp gaat pas naar development als het aan een vaste checklist voldoet: alle states aanwezig, definitieve teksten, gekoppelde variables, uitgewerkte uitzonderingen en gecontroleerde toegankelijkheid. Daarna volgt de overdracht in drie stappen.

1. Design review, vóór de bouw. De developer bekijkt het ontwerp op haalbaarheid, uitzonderingen en componenten die al bestaan. Zo komen verrassingen boven tafel voordat er code is.

2. Bouwen. Is iets onduidelijk, dan overlegt de developer direct met de designer in plaats van het zelf in te vullen. Kleuren, spacing en typografie haalt hij rechtstreeks uit Figma.

3. Design QA, na de bouw. De designer controleert of de gebouwde app klopt met het ontwerp: visueel, in de interactie, op verschillende schermformaten en op toegankelijkheid.

Hoe de bouw zelf verloopt, van frameworkkeuze tot publicatie in de stores, lees je in hoe je een app laat ontwikkelen.