Home / Blog / Ontwerp

Vier illustratiestijlen, en de stijl die het haalt

29 augustus 2026 · 8 min leestijd · Dimesum Engineering

Dimesum tekende alle vier de kandidaatstijlen voordat het er één koos, en de doorslaggevende eigenschap was niet schoonheid: het was of elke kleur in de tekening een token kon zijn.

Vier illustratiestijlen. Eén ervan liet zich van een thema voorzien. Dimesum koos zijn merk-artdirection op één mechanische test: kan elke kleur in de tekening worden vervangen door een token? Drie kandidaten faalden, en de mooiste faalde het hardst.

De vier archetypen staan in docs/design/brand/ART-STYLES.md, één per referentie die de oprichter verzamelde. We tekenden alle vier in plaats van erover te discussiëren: de drie onderwerpen die Dimesum bezit, één keer weergegeven in de eigen hand en palet van elk archetype. make ui-art-styles schrijft het 4x3 contactblad.

Voor productillustraties wint genereerbaarheid het van schoonheid

Productillustraties worden opnieuw gegenereerd; marketingillustraties worden één keer getekend. Dimesum levert 18 kleurpaletten, en dezelfde dumpling moet standhouden op 24px in een lijstregel en op 200px op een onboardingscherm. Een stijl die voor elk nieuw palet een illustrator nodig heeft, kan geen van beide taken vervullen.

De poort is dus genereerbaarheid. Een uniforme lijn met ronde uiteinden over een vlakke vulling heeft precies twee kleuren per vorm, en beide worden benoemd door een token. Verander de tokenwaarden en elke tekening in het product krijgt in één keer een nieuw thema, zonder hertekenen en zonder een tweede asset.

Drie van de vier archetypen breken, elk om een andere reden

De Cast is warm schilderachtig: een gevlochten stoommandje met echte textuur, een amberkleurige achtergrond, en dumplings met armen en benen die in de eetstokjespot klimmen. Het heeft de meeste charme van de vier. Toch kan het niet naar productie. Een geschilderd hooglicht is een verloop met twee stops en een middenpositie, geen hex die je kunt verwisselen, en de schaduwwerking wordt pap bij 24px.

De Poster is vlak geometrisch, olijf en goud op een gevlochten mat. Het heeft helemaal geen contouren: vormen worden alleen door kleur gescheiden. Mooi, en structureel fataal, want een themawijziging verschuift de vullingen en neemt de grenzen mee. De gezichten zitten op ongeveer 8% van de lichaamsbreedte, dus op de formaten van 24px tot 48px die Dimesum gebruikt, lezen ze als leeg.

De Spread is modern redactioneel en het dichtst bij onze eigen hand: een dunne uniforme donkere contour over vlakke vulling, met detail gedragen door kleine herhaalde tekens in plaats van door schaduw. Het verschil zit in het onderwerp, niet in de lijn. Het tekent een hele tafel van bovenaf, en een tafel heeft geen eenheid die je in een lijstregel kunt plaatsen. Dimesum heeft een personagestijl nodig, geen scènestijl.

De Sticker is strak kawaii vector, en dit is de stijl die we uitleveren. Uniforme dunne contour, vlakke vullingen, stipogen, grote koraalkleurige blos, geen schaduw. Elke kleur erin is een token, dus alle 18 paletten geven het gratis een thema, het houdt stand op 24px en op 200px, en het is dezelfde hand als onze Lucide-iconen op 24px met 2px ronde lijnen.

De doorslaggevende vraag: kan een kleur een token zijn?

Vlakke vulling is wat een kleur benoembaar maakt, en benoemen is wat 18 paletten gratis maakt. De dumpling van De Sticker is één vullingstoken plus één lijntoken. De blos is rust-600 op 0.42 dekking in plaats van een vlak pastel, dus hij leent welke warme tint het schema ook draagt in plaats van een eigen kleur te benoemen. Het bamboestoommandje is één tonale ladder gemengd vanuit de gold-600 van elk thema, dus de verlichte rand is dat goud plus 22% papier en de bodem plus 38% inkt, in elk schema.

Geen van beide afgewezen stijlen overleeft die bewerking. Het hooglicht van De Cast is ingebakken in een verloopstop, dus als je het lichaam een nieuw thema geeft, blijft er een crèmekleurige vlek bovenop liggen. De Poster heeft geen lijn die de tekening bijeenhoudt, dus zodra twee vullingen naar elkaar toe bewegen, houdt de rand ertussen op te bestaan.

Drie correcties die alleen een vergelijking naast elkaar aan het licht bracht

Een tekening ziet er op zichzelf altijd prima uit. Elke correctie hieronder werd op dezelfde manier gevonden: render de kandidaat naar PNG, snijd de referentie bij tot hetzelfde pixelformaat, en plak beide in één afbeelding.

De mond was 20u breed getekend en las als een smiley zodra hij naast de referentie stond. Hij ging terug naar 10u, een derde van de 28u oogafstand, en het personage werd weer een dumpling. De oogschijven werden tegelijk kleiner, van r5 naar 3.4u ovalen die hoger zijn dan breed.

Een contour die met IoU op het referentiemasker werd gepast scoorde 0.880, tegen 0.781 voor de beste handgetekende poging. De gepaste leek op een stekelige kroon. Oppervlakte-overlap kan gladheid niet zien, dus de betere score was de slechtere tekening. Wat wordt uitgeleverd is gemeten verhoudingen met met de hand gemaakte curves: aspect 1.041 tegen de 1.039 van de referentie, elk segment een cubic, nergens een hoek.

De samengeknepen knoop moet de contour doorbreken. Onze eerste dumpling was een gladde koepel met drie dunne lijnen op de bovenkant geschilderd, en de review kwam terug in één woord: haar. Lijnen getekend op een ononderbroken curve kunnen alleen als haar lezen, omdat niets in de vorm zegt dat het wikkel werd samengeknepen. De lobben scheiden alleen in de bovenste 8% van de hoogte; snijd dieper en je krijgt konijnenoren, die twee keer werden uitgeleverd voordat het werd opgemerkt.

Wat we hielden van de drie die we afwezen

Een stijl afwijzen is hem niet verwijderen. De Cast behoudt zijn instinct voor enscenering: rekwisieten, gemors, personages die met objecten omgaan, gebruikt waar een illustrator in de lus zit en niets een nieuw thema krijgt. De Spread behoudt het zelfvertrouwen van de rode achtergrond voor de site en de vrijheid om een niet-personageobject een gezicht te geven. De Poster behoudt de discipline van vier kleuren per compositie.

De studies zelf worden nooit uitgeleverd. ui/dumplings/styles/ heeft dezelfde status als refs/: citaat, geen bron, en de productlaag mag het niet importeren. De generator leest de lijst met archetypen uit de eigen koppen van het document, dus een vijfde archetype dat aan ART-STYLES.md wordt toegevoegd verschijnt bij de volgende build in het blad, en een kop die het niet kan tekenen laat de build falen.