Een goed ogende app maken met AI

Om van AI een goed ogende app te krijgen, stop je met vragen om “maak het mooi” en geef je wat een designer ook nodig heeft: twee of drie referenties die je mooi vindt, een benoemde designrichting en concrete regels voor type, kleur en witruimte. Bouw daarna één scherm, werk het bij tot het klopt, en laat de AI hetzelfde systeem op de rest toepassen. Het meeste “AI-look” komt van vage prompts die gemiddelde antwoorden geven; specifieke input levert specifiek design op.

Waarom AI-designs generiek zijn

Vraag een AI om “een moderne, strakke SaaS-dashboard” en je krijgt het statistische midden van elk dashboard dat het ooit heeft gezien: dezelfde sans-serif, een verloop van paars naar blauw, afgeronde kaarten met zachte schaduwen, iconen in cirkels en een gecentreerde hero met “Jouw workflow, vereenvoudigd”. Geen van die keuzes is op zich fout. Het probleem is dat geen ervan is gekozen voor jouw product.

Goed design bestaat vooral uit beslissingen. Jouw taak is om de handvol beslissingen te nemen die de app karakter geven, en de AI de duizenden kleine beslissingen consistent te laten uitvoeren.

Stap 1: verzamel referenties voordat je prompt

Besteed twintig minuten aan twee tot vier referenties: apps of websites waarvan de look bij jouw product past. Goede bronnen zijn producten die je doelgroep al gebruikt, designgalerijen en de sites van bedrijven in verwante sectoren.

Schrijf bij elke referentie in gewone woorden op wat je mooi vindt:

• “Veel witruimte, inhoud in een smalle kolom, kleine grijze labels boven grote cijfers.”
• “Compacte tabellen met dunne scheidingslijnen, geen kaartschaduwen, één accentkleur voor acties.”
• “Grote serif-koppen, warme off-white achtergrond, fotografie in plaats van illustraties.”

Geef die beschrijvingen aan de AI, en voeg screenshots toe als je tool afbeeldingen accepteert. Laat je inspireren door de kwaliteiten, niet door het product: de lay-out, branding of teksten van een ander bedrijf letterlijk overnemen is zowel een juridisch als een geloofwaardigheidsrisico.

Stap 2: kies een designrichting en geef die een naam

Een richting is een korte beschrijving van het gevoel. Ze geeft de AI een filter voor elke beslissing. Enkele die goed werken:

Zet dat in de eerste prompt, samen met voor wie de app is:

Bouw een boekingsapp voor een onafhankelijke yogastudio. Designrichting: rustig en minimaal, zoals een gedrukt studiorooster. Warme off-white achtergrond, bijna-zwarte tekst, één gedempte saliegroene accentkleur voor knoppen en geselecteerde statussen. Een serif voor koppen, een strakke sans-serif voor lopende tekst. Royale witruimte, geen verlopen, geen schaduwen, geen emoji. Mobile-first.

Stap 3: stel de regels in: type, kleur en witruimte

Deze drie bepalen het grootste deel van de visuele kwaliteit. Expliciet zijn hierover is de grootste verbetering die je kunt doorvoeren.

Typografie

• Eén of twee lettertypes. Een voor koppen en een voor lopende tekst, of één familie in meerdere gewichten.
• Een typeschaal. Een handvol maten die consequent worden gebruikt, bijvoorbeeld 14, 16, 20, 28 en 40 px, in plaats van wat elk onderdeel zelf kiest.
• Leesbare lopende tekst. Rond 16 px op het web, een regelhoogte van ongeveer 1,5 en een regellengte van 60 tot 75 tekens bij langere teksten.
• Hiërarchie via gewicht en grootte, niet via kleur. Koppen vetter en groter; secundaire tekst kleiner en zachter grijs.

Kleur

• Vooral neutrale tinten. Achtergronden, oppervlakken, randen en grijstinten doen het meeste werk.
• Eén accentkleur voor acties en geselecteerde statussen. Een tweede alleen als die een duidelijke functie heeft.
• Semantische kleuren voor succes, waarschuwing en fout, en alleen daarvoor.
• Contrast. WCAG 2 vraagt om een contrastverhouding van minstens 4,5:1 voor normale lopende tekst en 3:1 voor grote tekst. Lichtgrijze tekst op wit faalt vaak; vraag de AI om het te controleren.
• Donkere modus, als je die wilt, bewust ontworpen in plaats van simpelweg omgekeerd.

Witruimte en lay-out

• Een witruimteschaal zoals 4, 8, 12, 16, 24, 32, 48, 64 px. Alles past zich daarop aan.
• Uitlijning. Randen lijnen uit; inhoud zit op een raster of in een consistente maximale breedte.
• Nabijheid. Verwante dingen dicht bij elkaar, niet-verwante verder uit elkaar. Deze ene regel lost de meeste rommelige schermen op.
• Minder containers. Niet alles heeft een kaart nodig. Randen, scheidingslijnen en witruimte groeperen inhoud vaak rustiger.

Een prompt die het systeem eenmalig opzet:

Stel, voordat je meer schermen bouwt, een klein designsysteem op en gebruik het overal: een typeschaal van 14/16/20/28/40 px, een regelhoogte van 1,5 voor lopende tekst, een witruimteschaal van 4/8/12/16/24/32/48 px, neutrale tinten van bijna-wit tot bijna-zwart, één accentkleur (#3F6B5A) alleen voor primaire acties, en rood alleen voor fouten. Knoppen, invoervelden en kaarten delen één randradius. Controleer of alle tekst voldoet aan WCAG AA-contrast.

Als je in een code-bewuste bouwer werkt, worden dit meestal design tokens, zoals CSS-variabelen of een Tailwind-thema. Dan gebeuren latere wijzigingen op één plek.

Stap 4: bouw eerst één scherm goed

Genereer niet twaalf schermen om ze daarna allemaal te repareren. Kies het scherm dat gebruikers het vaakst zien, vaak het dashboard of de hoofdlijst, en werk het bij tot het klopt. Daarna:

Gebruik het dashboard als referentie voor alle andere pagina’s: dezelfde header, witruimte, lettergroottes, knopstijlen en tabelstijl. Pas de pagina’s Instellingen en Boekingen daarop aan.

Een af referentiescherm laat je smaak veel beter zien dan welk bijvoeglijk naamwoord ook.

Stap 5: itereer met kleine, specifieke verzoeken

Feedback aan een AI werkt als feedback aan een junior designer: specifiek, één gebied tegelijk, en duidelijk over wat je wilt behouden.

Voeg altijd toe wat je wilt behouden, bijvoorbeeld “houd alle routes, teksten en functies gelijk”, zodat een visuele ronde niet ongemerkt functionaliteit verwijdert. Controleer elke wijziging op telefoonformaat voordat je om de volgende vraagt. Zie hoe je een mobiel-vriendelijke webapp bouwt voor wat goed werkt op kleine schermen.

Stap 6: de details die goed van generiek onderscheiden

Zodra de structuur klopt, maken deze kleine dingen een app af:

• Lege staten. Wat een nieuwe gebruiker ziet zonder gegevens: een korte uitleg en één duidelijke actie, niet een lege tabel.
• Laadstaten. Skeletten in de vorm van de inhoud, niet overal spinners.
• Foutstaten. Duidelijke berichten naast het veld dat de fout veroorzaakte.
• Hover-, focus- en ingedrukt-staten op elk interactief element. Focusranden zijn belangrijk voor toetsenbordgebruikers.
• Echte inhoud. Vervang “Lorem ipsum” en “Jan Jansen” door realistische tekst en data; plaatsvulinhoud verbergt lay-outproblemen.
• Iconen uit één set, in één of twee maten, met een consistente lijndikte.
• Beeld met een doel. Echte foto’s van je product, locatie of mensen verslaan generieke stockbeelden. Gebruik je stock- of gegenereerde beelden, houd er dan één stijl in.
• Tekst. Korte, specifieke labels (“Les boeken”, niet “Verzenden”) dragen net zoveel bij aan de waargenomen kwaliteit als een kleurkeuze.

Veelgemaakte fouten

• Alles in één prompt opnieuw ontwerpen. Grote herschrijvingen introduceren regressies. Ga pagina voor pagina.
• Te veel accentkleuren. Als alles is gemarkeerd, valt niets meer op.
• Alles centreren. Gecentreerde tekst is lastig te scannen buiten een kop; lijn de meeste inhoud links uit.
• Kleine tekst met weinig contrast die elegant oogt op een groot scherm en onleesbaar is op een telefoon in de zon.
• Decoratie boven hiërarchie. Verlopen en schaduwen kunnen een scherm niet redden waarin de belangrijkste actie niet duidelijk is.
• De landingspagina negeren. Voor veel producten is die de eerste indruk; zie hoe je een landingspagina bouwt die converteert.

Voor meer promptpatronen buiten design, lees hoe je prompts schrijft voor AI-appbouwers. Als jouw werk het product zelf is, zoals een design- of fotografieportfolio, gaat hoe je een portfoliowebsite bouwt dieper in op presentatie.

Design met Mythex

In Mythex beschrijf je het design in de chat, zie je het in de live preview en controleer je het telefoonformaat voordat je de volgende wijziging doet. De documentatie heeft korte patronen hiervoor: design- en UI-prompts over benoemen wat je wijzigt en wat je behoudt, en je UI opnieuw ontwerpen om één pagina per keer te vernieuwen zonder functies te verliezen. Mythex kan ook stockfoto’s zoeken of een afbeelding genereren in de chat, zoals een heldenbeeld, een achtergrond of een deelafbeelding, en die in de app plaatsen als je erom vraagt. Gaat een ronde mis, ga dan terug naar het checkpoint van vóór die ronde. Bekijk de templates als je liever start met een bestaand design en dat aanpast.

Veelgestelde vragen