dimesum

Forsiden / Blogg / Design

Design

Fire illustrasjonsstiler, og den som leveres

· 8 min lesing ·

Dimesum tegnet alle fire kandidatstilene før den valgte én, og det avgjørende var om hver farge i tegningen kunne være et token.

Fire illustrasjonsstiler. Én av dem kunne temasettes. Dimesum valgte sin visuelle retning ut fra én mekanisk test: kan hver farge i tegningen erstattes av et token? Tre kandidater strøk, og den peneste strøk hardest.

De fire arketypene ligger i docs/design/brand/ART-STYLES.md, én per referanse grunnleggeren samlet. Vi tegnet alle fire i stedet for å diskutere dem: de tre motivene Dimesum eier, gjengitt én gang i hver arketypes egen strek og palett. make ui-art-styles skriver kontaktarket på 4x3.

Ensemblet
Ensemblet: dumplingen, tegnet i denne arketypens egen strek og palettEnsemblet: bambusdamperen, tegnet i denne arketypens egen strek og palett
varmt malerisk
Plakaten
Plakaten: dumplingen, tegnet i denne arketypens egen strek og palettPlakaten: bambusdamperen, tegnet i denne arketypens egen strek og palett
flat geometrisk
Oppslaget
Oppslaget: dumplingen, tegnet i denne arketypens egen strek og palettOppslaget: bambusdamperen, tegnet i denne arketypens egen strek og palett
moderne redaksjonell
Klistremerket
Klistremerket: dumplingen, tegnet i denne arketypens egen strek og palettKlistremerket: bambusdamperen, tegnet i denne arketypens egen strek og palett
ren kawaii-vektor
De fire studiene, skrevet av make ui-art-styles til ui/dumplings/styles/: hver arketypes dumpling over sin damper. Palettene er pikselhentet fra referansene, bortsett fra Klistremerke-kolonnen, som er avledet fra temaet.

For produktillustrasjon slår genererbarhet skjønnhet

Produktillustrasjon blir regenerert, mens markedsføringsillustrasjon tegnes én gang. Dimesum leverer 18 fargepaletter, og den samme dumplingen må holde på 24px i en listerad og på 200px på en velkomstskjerm. En stil som trenger en illustratør for hver ny palett, kan ikke gjøre noen av jobbene.

Så porten er genererbarhet. En jevn strek med runde ender over et flatt fyll har nøyaktig to farger per form, og begge er navngitt av et token. Endre token-verdiene, og hver tegning i produktet temasettes på nytt samtidig, uten ny tegning og uten en ekstra ressurs.

Tre av de fire arketypene bryter sammen, hver av en ulik grunn

Ensemblet er varmt malerisk: en flettet damper med ekte tekstur, en ravgul bunn, og dumplinger med armer og ben som klatrer på spisepinneglasset. Den har mest sjarm av de fire. Den kan likevel ikke leveres. Et malt høylys er en gradient med to stopp og en senterposisjon, ikke en hex du kan bytte, og skyggeleggingen går i grøt på 24px.

Plakaten er flat geometrisk, oliven og gull på en flettet matte. Den har ingen konturer i det hele tatt: former skilles av farge alene. Vakker, og strukturelt fatal, fordi en temaendring flytter fyllene og tar grensene med seg. Ansiktene ligger på omtrent 8% av kroppsbredden, så på de 24px til 48px-størrelsene Dimesum bruker, leses de som tomme.

Oppslaget er moderne redaksjonell og nærmest vår egen strek: en tynn, jevn mørk kontur over flatt fyll, med detaljer båret av små gjentatte merker heller enn av skyggelegging. Forskjellen er motiv, ikke strek. Den tegner et helt bord ovenfra, og et bord har ingen enhet du kan sette i en listerad. Dimesum trenger en karakterstil, ikke en scenestil.

Klistremerket er ren kawaii-vektor, og det er den vi leverer. Jevn tynn kontur, flate fyll, prikkøyne, stor korallrødme, ingen skyggelegging. Hver farge i den er et token, så alle 18 palettene temasetter den gratis, den holder på 24px og på 200px, og den er samme strek som våre Lucide-ikoner på 24px med 2px runde strøk.

De fire arketypene mot egenskapene som avgjør produktillustrasjon, fra docs/design/brand/ART-STYLES.md
ArketypeHvordan former skillesHvor fargen borHolder på 24pxDom
Ensemblet
varmt malerisk
Varmgrå kontur pluss malt skyggeleggingGradienter og høylysNei, skyggelegging går i grøtKun markedsføring
Plakaten
flat geometrisk
Kun fargekontrast, ingen konturFire flate farger pluss svartNei, ansikter på 8% blir tommeAvvist
Oppslaget
moderne redaksjonell
Tynn jevn kontur over flatt fyllFlate fyll, detaljer ved gjentatte merkerScenestil, ingen liten enhetKun markedsføringsnettsted
Klistremerket
ren kawaii-vektor
Jevn tynn kontur over flatt fyllToken-fyll, ett token-strøkJa, kropp, krone, to øyeprikkerLeveres i produktet

Det avgjørende spørsmålet: kan en farge være et token?

Flatt fyll er det som gjør en farge navngivbar, og navngivning er det som gjør 18 paletter gratis. Klistremerkets dumpling er ett fyll-token pluss ett strøk-token. Rødmen er rust-600 ved 0.42 opasitet heller enn en flat pastell, så den låner den varme fargetonen temaet bærer i stedet for å navngi sin egen farge. Bambusdamperen er én tonal stige blandet ut fra hvert temas gold-600, så dens opplyste kant er den gullfargen pluss 22% papir og dens bunn pluss 38% blekk, i hvert tema.

Ingen av de avviste stilene overlever den redigeringen. Ensemblets høylys er bakt inn i et gradientstopp, så temasetting av kroppen etterlater en kremfarget klatt oppå. Plakaten har ingen linje som holder tegningen sammen, så når to fyll beveger seg mot hverandre, slutter kanten mellom dem å eksistere.

De samme tre tegningene slik de ble laget og etter et token-bytte: bare Klistremerket temasettes riktigKlistremerketEnsembletPlakatenSliklagetEtter ettoken-bytteto token: fyll og strøket bakt høylys, ingen tokeningen linje, kanten er kontrasttemasatt på nytt, fortsatt riktighøylyset kan ikke følge medkanten er borte
Den samme tegningen slik den ble laget, deretter omfarget ved kun å endre token-verdier. Ensemblet beholder et kremfarget høylys som ingen token styrer, og Plakaten mister grensen, fordi grensen aldri var en linje.

Tre rettelser bare sammenligning side ved side fanget

En tegning ser alltid grei ut for seg selv. Hver rettelse nedenfor ble funnet på samme måte: gjengi kandidaten til PNG, beskjær referansen til samme pikselstørrelse, og lim så begge inn i ett bilde.

Munnen ble tegnet 20u bred og leste som et smilefjes i det øyeblikket den sto ved siden av referansen. Den ble redusert til 10u, en tredjedel av øyeavstanden på 28u, og figuren ble en dumpling igjen. Øyeskivene ble redusert samtidig, fra r5 til 3.4u ovaler som er høyere enn de er brede.

En kontur tilpasset referansemasken via IoU fikk 0.880, mot 0.781 for det beste håndtegnede forsøket. Den tilpassede så ut som en piggete krone. Arealoverlapp kan ikke se glatthet, så den bedre poengsummen var den dårligere tegningen. Det som leveres, er målte proporsjoner med bevisst tegnede kurver: forholdstall 1.041 mot referansens 1.039, hvert segment en kubisk kurve, ingen hjørner noe sted.

Lærdommen vi holder fast ved

Ikke optimaliser et mål som ikke kan se det du bryr deg om. Gi arbeidet en poengsum, og se på det også.

Den samlede knuten må bryte konturen. Vår første dumpling var en glatt kuppel med tre tynne strøk malt på toppen, og tilbakemeldingen kom i ett ord: hår. Linjer tegnet på en ubrutt kurve kan bare leses som hår, fordi ingenting i formen sier at innpakningen ble samlet. Lappene skiller seg bare i de øverste 8% av høyden, kutt dypere og du får kaninører, som ble levert to ganger før det ble fanget.

Venstre, en glatt kuppel med folder malt på og en munn på 20u. Høyre, formen som leveres, hvis samling bryter konturen, med en munn på 10uFørEtter, og leveresmunn på 20u, folder malt på en kuppelmunn på 10u, samlingen bryter konturen
De to rettelsene som bare dukket opp ved siden av referansen. Venstre leses som et smilefjes med hår, høyre er konstruksjonen som leveres, med lapper som stiger ut av konturen.

Hva vi beholdt fra de tre vi avviste

Å avvise en stil er ikke å slette den. Ensemblet beholder sin sans for iscenesettelse: rekvisitter, søl, figurer som samhandler med gjenstander, brukt der en illustratør er med i løkka og ingenting temasettes på nytt. Oppslaget beholder tryggheten i den røde bunnen for nettstedet og retten til å gi et ansikt til en gjenstand som ikke er en figur. Plakaten beholder disiplinen med fire farger per komposisjon.

Studiene selv leveres aldri. ui/dumplings/styles/ har samme status som refs/: sitat, ikke kilde, og produktlaget kan ikke importere det. Generatoren leser arketypelisten ut av dokumentets egne overskrifter, så en femte arketype lagt til i ART-STYLES.md dukker opp i arket ved neste bygg, og en overskrift den ikke kan tegne, får bygget til å feile.

Regelen dette avgjør

Én stil leveres, de andre er sitater. Ta din favorittkandidat og prøv å omfarge den ved kun å endre token-verdier: hvis et gradientstopp, et malt høylys, eller en grense laget av fargekontrast overlever den redigeringen, trenger stilen en illustratør for hvert tema du legger til. Ditt neste steg er et kontaktark, ikke et stemningsbrett. Tegn hver kandidat på 24px og på 200px, i ett bilde, og velg den som fortsatt er lesbar på begge.

Vanlige spørsmål

Hva avgjør valg av illustrasjonsstil for produkt?

Genererbarhet avgjør det, ikke skjønnhet. Produktillustrasjon tegnes på nytt av en generator for hvert tema og hver størrelse, så spørsmålet er om hver farge i tegningen er navngitt av et token som kan byttes. Dimesum leverer 18 paletter, så en stil som holder på en malt gradient, ville trengt en illustratør 18 ganger.

Hvorfor valgte Dimesum bort den varmt maleriske stilen?

Et malt høylys er en gradient med to stopp og en senterposisjon, ikke en hex du kan bytte. Temasetting av kroppen etterlater det kremfargede høylyset oppå den nye fargen, uendret. Den samme skyggeleggingen går også i grøt på 24px, som er størrelsen en dumpling vises i i en listerad.

Hvorfor tåler en stil uten konturer ikke en temaendring?

Former i en konturløs stil skilles kun av fargekontrast, så grensen er ikke tegnet noe sted. Flytt de to fyllene mot hverandre for et mørkt tema, og kanten mellom dem slutter å eksistere. Et jevnt strøk beholder silhuetten uansett hva fyllene gjør, og derfor krever Dimesum ett.

Hvordan sjekker jeg at en illustrasjon fungerer i liten størrelse?

Gjengi hver kandidat i størrelsene produktet faktisk bruker, og sett dem i ett bilde. Dimesum sjekker 24px, 72px og 200px. Ansikter tegnet på omtrent 8% av kroppsbredden leses som tomme mellom 24px og 48px, og det er det som utelukket en av de fire arketypene på visuelt bevis heller enn mening.

Kan en poengsum erstatte det å se på selve tegningen?

Nei. En kontur tilpasset referansemasken via IoU fikk 0.880, mot 0.781 for det beste håndtegnede forsøket, og den med høyest poengsum så ut som en piggete krone. Arealoverlapp kan ikke se glatthet eller karakter. Gi arbeidet en poengsum for å fange proporsjonsfeil, og sammenlign det så ved siden av referansen i samme pikselstørrelse.