Bewust ontwerpen

Laat je een AI een scherm bouwen zonder verdere aanwijzingen, dan krijg je bijna altijd hetzelfde: een wit vlak, een standaardlettertype, blauwe of paarse knoppen en een voorspelbare indeling. Dat is geen toeval. Zonder duidelijke richting kiest het model de meest voorkomende oplossing uit alles waarop het is getraind — en die is per definitie generiek.

Een eigen gezicht krijg je niet met een verbodslijst ('niet saai, niet standaard'), maar door zelf te kiezen. De snelste ingreep is typografie: je kiest een koplettertype en een tekstlettertype en geeft die op bij naam, niet met een vage omschrijving als 'iets moderns'. Een type-schaal — een klein aantal vaste lettergroottes — geeft direct rust in het scherm.

Daarna kleur. Je kiest één hoofdkleur en geeft die op als kleurcode, zodat er niets te raden valt. Die kleur gebruik je overal voor accenten, naast neutrale grijstinten en aparte betekeniskleuren voor bijvoorbeeld succes en fouten. Let daarbij op contrast: tekst moet goed afsteken tegen de achtergrond, anders wordt je tool onleesbaar.

Een verzorgde indeling komt vervolgens vooral van ruimte en uitlijning: een vaste afstandsmaat, elementen die uitlijnen op een raster en een maximale breedte. Houd afronding en schaduw overal gelijk — die consistentie is het verschil tussen verzorgd en rommelig. Wil je een bepaalde uitstraling, geef dan een concrete referentie in plaats van bijvoeglijke naamwoorden. En een licht- en donkerstand bouw je er tegenwoordig standaard bij.

In deze module geef je eerst een bewust generiek oefenscherm een eigen gezicht, en daarna je eigen project. Je stijlkeuzes leg je vast in een stijlblok in je spec-document, zodat elk volgend scherm dezelfde stijl volgt.

Na afloop kun je elk van deze leerdoelen aantonen — elk behaald doel komt op je certificaat te staan.

• Je geeft aan waar je in deze module vooral grip op wilt krijgen.
• Je begrijpt waarom AI zonder duidelijke richting een generiek standaarduiterlijk kiest.
• Je weet dat een eigen uiterlijk geen verbodslijst vraagt, maar eigen keuzes.
• Je weet dat het lettertype het meest bepaalt hoe je product oogt, en kiest een kop- en een tekstlettertype.
• Je geeft een lettertype op bij naam in plaats van met een vage omschrijving.
• Je weet wat een type-schaal is en waarom een paar vaste lettergroottes rust geven.
• Je kiest één hoofdkleur als kleurcode en laat die overal voor accenten gebruiken.
• Je gebruikt naast je hoofdkleur neutrale grijstinten en betekeniskleuren, met genoeg contrast om leesbaar te blijven.
• Je stuurt de indeling met een vaste afstandsmaat, uitlijning op een raster en een maximale breedte.
• Je houdt afronding en schaduw consistent, zodat je scherm verzorgd oogt in plaats van rommelig.
• Je stuurt op uiterlijk met een concrete referentie in plaats van met bijvoeglijke naamwoorden.
• Je weet wat light mode en dark mode zijn en laat er een schakelaar voor bouwen.
• Je herkent waaraan je een generiek AI-scherm ziet.
• Je vervangt het lettertype door een kop- en een tekstlettertype die je bij naam opgeeft.
• Je kiest één hoofdkleur als kleurcode en past die toe op knoppen en accenten.
• Je stelt een vaste afstandsmaat in en stuurt de indeling bij met een concrete referentie.
• Je voegt een licht- en donkerschakelaar toe en bewaart een opslagpunt.
• Je geeft je eigen product een kop- en een tekstlettertype en één hoofdkleur als kleurcode.
• Je stelt afstand en maximale breedte in, voegt licht en donker toe en haalt het generieke uiterlijk van je scherm af.
• Je legt je stijl vast in een stijlblok in je spec-document en bewaart een opslagpunt van de nieuwe versie.

Ongeveer 60 minuten · 9 onderdelen

Deze module is onderdeel van Vibe coding: de complete lijn waarin je met AI je eigen tools bouwt, met twaalf maanden toegang en een certificaat per module. Bekijk Vibe coding.

Inclusief certificaat met behaalde leerdoelen en verificatienummer.

Voor iedereen die met AI bouwt en wil dat zijn tool er niet uitziet als elk ander AI-scherm. Je hebt geen ontwerpachtergrond nodig: deze module geeft je een klein aantal keuzes die het grootste verschil maken. De module hoort bij de leerlijn Vibe coding.

Je geeft elk scherm een eigen, verzorgd uiterlijk: je kiest lettertypes en een hoofdkleur bij naam, stuurt de indeling met een afstandsmaat en een concrete referentie, en legt je stijl vast zodat elk volgend scherm erbij past.

• Vragen om een 'mooi' of 'modern' ontwerp — Bijvoeglijke naamwoorden geven de AI geen richting. Geef een concrete referentie en benoem lettertype, kleurcode en afstandsmaat.
• Het standaard AI-uiterlijk laten staan — Kies zelf een koplettertype, een tekstlettertype en één hoofdkleur als kleurcode. Dat zijn de snelste ingrepen met het grootste effect.
• Elk scherm andere kleuren en groottes — Leg je keuzes vast in een stijlblok in je spec-document, zodat elk nieuw scherm dezelfde stijl volgt.
• Te weinig contrast, slecht leesbaar — Controleer of tekst genoeg afsteekt tegen de achtergrond — in de lichte én de donkere stand.