Deze site is nog in voorbereiding. Bestellingen worden nog niet verwerkt en er wordt niets in rekening gebracht.
← Terug naar overzicht
Module 1 · Waarom het niet goed voelt

Werkend is niet hetzelfde als af

🕑 5 min lezen
Doel van deze les: Je herkent aan echte voorbeelden waarom iets amateuristisch oogt, zonder dat je kunt tekenen.

Je hebt iets gebouwd. Het werkt: je kunt inloggen, er komt data binnen, de knop doet wat hij moet doen. En toch laat je het niet graag zien. Er is iets mee, maar als iemand vraagt wát, kom je niet verder dan 'het ziet er een beetje zelfgemaakt uit'.

Dat gevoel klopt bijna altijd, en het is bijna nooit vaag. Wat je ziet zijn concrete, benoembare dingen — je hebt er alleen de woorden nog niet voor. Die woorden zijn het onderwerp van deze cursus.

Twee keer dezelfde inhoud

Hieronder staat twee keer hetzelfde blok: dezelfde kop, dezelfde tekst, dezelfde knoppen, dezelfde functionaliteit. De inhoud is niet aangepast, er is geen woord bij geschreven en er is geen illustratie toegevoegd. Kijk even naar allebei voordat je verder leest.

Een scherm waarin alles tot tegen de randen loopt: een navigatiebalk met een roze logo, menu-items in vier kleuren en op vier hoogtes, een te laag zoekveld en een vierkante profielfoto tegen de rand. Daaronder een felroze kop, een lichtblauwe ondertitel, tekst tot aan de zijkant, een geel label dat over die tekst valt, een kaart met een uitgerekte afbeelding, drie even opvallende knoppen in roze, blauw en groen, en een paarse voettekst.

Voor

Hetzelfde scherm met ruimte eromheen: een rustige navigatiebalk met één merkteken, drie even zware menu-items waarvan het actieve onderstreept is, een zoekveld met lucht eromheen en een ronde profielfoto. Daaronder een donkere kop met een grijze ondertitel, tekstregels op gelijke afstand, één kaart met een afbeelding en een pijltje, en één oranje knop met daarnaast een gewone tekstlink.

Na

Zelfde inhoud, zelfde functies. Alleen ruimte, hiërarchie, typografie en kleur zijn veranderd.

Wat er precies anders is

Links loopt de tekst tot tegen de randen. Er is geen marge, dus het blok voelt als een propvol koffertje. Rechts staat er lucht omheen, en die lucht doet niets anders dan het oog rust geven — precies waarom hij vaak als eerste sneuvelt: hij lijkt verspilling.

Links zijn er drie knoppen die alle drie even hard roepen. Je moet dus zelf uitzoeken wat de bedoeling is. Rechts is er één knop met kleur, en de tweede keuze is een gewone link. In één oogopslag weet je wat er van je verwacht wordt.

Links zit er in elk onderdeel een andere kleur: roze, blauw, geel, groen, paars. Elke kleur op zich is niet fout, maar samen leest het als een gereedschapskist die is omgevallen. Rechts is er één accentkleur, en die komt precies één keer voor: op de knop die je moet indrukken.

Belangrijk: Aan de rechterkant is niets getekend en niets ontworpen in de klassieke zin. Er zijn alleen dingen weggelaten, uitgelijnd en herhaald. Dat is het goede nieuws: het gaat om keuzes, niet om talent.

Waarom dit ertoe doet

Het gaat niet om mooi. Het gaat om vertrouwen. Iemand die op je scherm belandt beslist binnen enkele seconden of dit een serieuze plek is om zijn e-mailadres, zijn tijd of zijn geld achter te laten. Die beslissing valt vóórdat hij één woord van je tekst gelezen heeft.

En het gaat om moeite. Een scherm zonder duidelijke volgorde dwingt elke bezoeker om zelf uit te zoeken waar hij moet kijken. Dat kost hem energie die hij liever aan je product besteedt.

Sinds je met AI bouwt is werkende code goedkoop geworden. Iets dat werkt én vertrouwen wekt, is dat niet — en dat is precies het verschil dat je hier leert maken.

Drie dingen die je gaat leren

Je wordt geen ontwerper, en dat hoeft ook niet: je tekent niets meer, je beschrijft. Daarvoor heb je drie vaardigheden nodig, en die trainen we alle drie.

  • Zien — het verschil tussen 'het voelt raar' en 'de kop staat even ver van de tekst eronder als van het blok erboven, dus ik weet niet waar hij bij hoort'.
  • Benoemen — in woorden die een AI kan uitvoeren. Vaag gevraagd is generiek geleverd; het verschil zit in je vocabulaire.
  • Beoordelen — wat je terugkrijgt echt bekijken, in plaats van het aannemen omdat het er nette code uitziet.
Doe het zelf
  1. Kijk nog een keer naar de twee afbeeldingen hierboven, maar nu alleen naar de knoppen. Schrijf in één zin op wat er links gebeurt als je moet kiezen.
  2. Open een scherm dat je zelf hebt gemaakt — een pagina, een formulier, een dashboard. Kijk er tien seconden naar en schrijf op wat je als eerste ziet.
  3. Kijk daarna waar je als eerste zóú moeten kijken. Zijn dat dezelfde dingen? Zo niet: dat is geen kleinigheid, dat is het onderwerp van module 2.
  4. Zoek nu een scherm van een bedrijf dat je vertrouwt. Tel hoeveel verschillende kleuren erop staan. Meestal blijft de teller onder de vier.
Vastgelopen?
  • Ik zie het verschil wel, maar ik kan het niet benoemen. Dat is precies de startsituatie waar deze cursus voor bedoeld is — je hoeft het nu nog niet te kunnen. In les 1.2 krijg je vier woorden waarmee je vrijwel alles kunt aanwijzen.
  • Ik vind de linkerkant eigenlijk best meevallen. Kijk dan eens hoe lang je erover doet om te bepalen welke knop de belangrijkste is. Die halve seconde twijfel is precies wat je bezoeker ook heeft, elke keer opnieuw.
  • Ik heb geen eigen scherm om naar te kijken. Gebruik dan een formulier dat je onlangs hebt ingevuld bij een instantie of webshop. Wat je oefent is kijken, niet bouwen.
  • Mijn scherm is gemaakt door een AI, dus ik heb er zelf niets aan gekozen. Klopt — en dat is de reden dat het er generiek uitziet. Vanaf module 6 draai je dat om en geef je de AI je eigen kader mee.
Check jezelf
  • Wat is er tussen de twee afbeeldingen veranderd aan de inhoud?
  • Waarom is één opvallende knop beter dan drie even opvallende?
  • Welke drie vaardigheden traint deze cursus, en waarom is 'tekenen' er geen van?