Quattro stili, uno solo va in produzione
Dimesum ha disegnato tutti e quattro gli stili candidati prima di sceglierne uno, e la proprietà decisiva non era la bellezza: era se ogni colore del disegno potesse diventare un token.
Quattro stili di illustrazione. Uno solo poteva essere tematizzato. Dimesum ha scelto la direzione artistica del marchio con un unico test meccanico: ogni colore del disegno può essere sostituito da un token? Tre candidati hanno fallito, e il più bello ha fallito nel modo peggiore.
I quattro archetipi vivono in docs/design/brand/ART-STYLES.md, uno per ogni riferimento raccolto dal fondatore. Li abbiamo disegnati tutti e quattro invece di discuterne: i tre soggetti che appartengono a Dimesum, resi una volta con la mano e la palette proprie di ogni archetipo. make ui-art-styles genera il provino 4x3.
make ui-art-styles in ui/dumplings/styles/: il raviolo di ogni archetipo sopra il suo cestello. Le palette sono campionate pixel per pixel dai riferimenti, tranne la colonna dell'Adesivo, che deriva dal tema.Per l'arte di prodotto, la generabilità conta più della bellezza
L'arte di prodotto viene rigenerata; l'arte di marketing viene disegnata una volta sola. Dimesum pubblica 18 palette di colori, e lo stesso raviolo deve reggere a 24px in una riga di elenco e a 200px in una schermata di onboarding. Uno stile che richiede un illustratore per ogni nuova palette non può svolgere nessuno dei due compiti.
Il criterio è quindi la generabilità. Un tratto uniforme con estremità arrotondate su un riempimento piatto ha esattamente due colori per forma, ed entrambi sono indicati da un token. Cambia i valori dei token e ogni disegno nel prodotto si ritematizza in un colpo solo, senza ridisegnare e senza una seconda risorsa.
Tre dei quattro archetipi cedono, ognuno per un motivo diverso
Il Cast è pittorico caldo: un cestello intrecciato con una texture reale, uno sfondo ambrato e ravioli con braccia e gambe che si arrampicano sul portabacchette. È il più affascinante dei quattro. Eppure non può andare in produzione. Una luce dipinta è un gradiente con due stop e una posizione centrale, non un esadecimale scambiabile, e l'ombreggiatura diventa poltiglia a 24px.
Il Manifesto è geometrico piatto, oliva e oro su una stuoia intrecciata. Non ha alcun contorno: le forme sono separate solo dal colore. Bello, e strutturalmente fatale, perché un cambio di tema sposta i riempimenti e si porta via i confini. I suoi volti stanno a circa l'8% della larghezza del corpo, quindi alle dimensioni da 24px a 48px che Dimesum usa appaiono vuoti.
La Tavola è editoriale moderno ed è la più vicina alla nostra mano: un contorno scuro sottile e uniforme su riempimento piatto, con il dettaglio affidato a piccoli segni ripetuti anziché all'ombreggiatura. La differenza è il soggetto, non il tratto. Disegna un'intera tavola dall'alto, e una tavola non ha un'unità da mettere in una riga di elenco. Dimesum ha bisogno di uno stile di personaggio, non di uno stile di scena.
L'Adesivo è vettoriale kawaii pulito, ed è quello che mandiamo in produzione. Contorno sottile e uniforme, riempimenti piatti, occhi a puntino, ampio rossore corallo, nessuna ombreggiatura. Ogni suo colore è un token, così tutte le 18 palette lo tematizzano gratis, regge a 24px e a 200px, ed è la stessa mano delle nostre icone Lucide a 24px con tratti arrotondati da 2px.
| Archetipo | Come si separano le forme | Dove vive il colore | Regge a 24px | Verdetto |
|---|---|---|---|---|
| Il Cast pittorico caldo | Contorno grigio caldo più ombreggiatura dipinta | Gradienti e luci | No, l'ombreggiatura diventa poltiglia | Solo marketing |
| Il Manifesto geometrico piatto | Solo contrasto di colore, nessun contorno | Quattro colori piatti più il nero | No, i volti all'8% diventano vuoti | Scartato |
| La Tavola editoriale moderno | Contorno sottile e uniforme su riempimento piatto | Riempimenti piatti, dettaglio con segni ripetuti | Stile di scena, nessuna piccola unità | Solo sito di marketing |
| L'Adesivo vettoriale kawaii pulito | Contorno sottile e uniforme su riempimento piatto | Riempimenti a token, un tratto a token | Sì, corpo, chiusura, due puntini per gli occhi | Va in produzione nel prodotto |
La domanda decisiva: un colore può diventare un token?
Il riempimento piatto è ciò che rende un colore nominabile, e la nominabilità è ciò che rende gratis 18 palette. Il raviolo dell'Adesivo è un token di riempimento più un token di contorno. Il rossore è rust-600 con opacità 0.42 anziché un pastello piatto, così prende in prestito la tinta calda dello schema invece di nominare un colore proprio. Il cestello di bambù è un'unica scala tonale ricavata dal gold-600 di ogni tema, così il suo bordo illuminato è quell'oro più 22% di carta e il suo fondo più 38% di inchiostro, in ogni schema.
Nessuno dei due stili scartati sopravvive a quella modifica. La luce del Cast è fissata in uno stop di gradiente, così ricolorare il corpo lascia una macchia color crema sopra di esso. Il Manifesto non ha alcuna linea che tenga insieme il disegno, così quando due riempimenti si avvicinano il bordo tra loro smette di esistere.
Tre correzioni emerse solo dal confronto affiancato
Un disegno da solo sembra sempre a posto. Ogni correzione qui sotto è stata trovata allo stesso modo: renderizza il candidato in PNG, ritaglia il riferimento alla stessa dimensione in pixel, poi incolla entrambi in un'unica immagine.
La bocca era disegnata larga 20u e sembrava uno smiley non appena affiancata al riferimento. È scesa a 10u, un terzo dei 28u di distanza tra gli occhi, e il personaggio è tornato a essere un raviolo. Anche i dischi degli occhi sono scesi nello stesso momento, da r5 a ovali da 3.4u più alti che larghi.
Un contorno adattato alla maschera di riferimento tramite IoU ha ottenuto 0.880, contro 0.781 del miglior tentativo disegnato a mano. Quello adattato sembrava una corona appuntita. La sovrapposizione di area non vede la morbidezza, così il punteggio migliore era il disegno peggiore. Ciò che va in produzione sono proporzioni misurate con curve disegnate a mano: rapporto 1.041 contro 1.039 del riferimento, ogni segmento una cubica, nessuno spigolo da nessuna parte.
Non ottimizzare una metrica che non vede ciò che ti interessa. Valuta il lavoro, e guardalo anche.
La chiusura raccolta deve rompere il contorno. Il nostro primo raviolo era una cupola liscia con tre sottili tratti dipinti in cima, e la revisione è tornata con una parola sola: capelli. Le linee tracciate su una curva ininterrotta possono leggersi solo come capelli, perché nulla nella forma dice che la sfoglia è stata raccolta. I lobi si separano solo nell'8% superiore dell'altezza; taglia più a fondo e ottieni orecchie da coniglio, cosa andata in produzione due volte prima che fosse notata.
Cosa abbiamo tenuto dei tre scartati
Scartare uno stile non significa cancellarlo. Il Cast conserva il suo istinto scenografico: oggetti di scena, cose che traboccano, personaggi che interagiscono con gli oggetti, usato dove un illustratore è nel processo e nulla si ritematizza. La Tavola conserva la sicurezza dello sfondo rosso per il sito e la licenza di dare un volto a un oggetto non personaggio. Il Manifesto conserva la disciplina dei quattro colori per composizione.
Gli studi in sé non vanno mai in produzione. ui/dumplings/styles/ ha lo stesso status di refs/: citazione, non sorgente, e lo strato di prodotto non può importarlo. Il generatore ricava l'elenco degli archetipi dalle intestazioni stesse del documento, così un quinto archetipo aggiunto ad ART-STYLES.md compare nel provino alla build successiva, e un'intestazione che non riesce a disegnare fa fallire la build.
La regola che ne deriva
Uno stile va in produzione; gli altri sono citazioni. Prendi il tuo candidato preferito e prova a ricolorarlo modificando solo i valori dei token: se uno stop di gradiente, una luce dipinta o un confine fatto di contrasto di colore sopravvive a quella modifica, lo stile richiede un illustratore per ogni tema che aggiungi. Il tuo passo successivo è un provino, non una mood board. Disegna ogni candidato a 24px e a 200px, in un'unica immagine, e scegli quello ancora leggibile a entrambe.
Domande frequenti
Come si sceglie lo stile di illustrazione di un prodotto?
La generabilità, non la bellezza. L'arte di prodotto viene ridisegnata da un generatore per ogni tema e ogni dimensione, quindi la domanda è se ogni colore del disegno sia indicato da un token che si possa scambiare. Dimesum pubblica 18 palette, perciò uno stile con un gradiente dipinto richiederebbe un illustratore 18 volte.
Perché Dimesum ha scartato lo stile pittorico caldo?
Una luce dipinta è un gradiente con due stop e una posizione centrale, non un esadecimale scambiabile. Ricolorare il corpo lascia la luce color crema sopra il nuovo colore, invariata. La stessa sfumatura diventa poltiglia a 24px, la dimensione con cui un raviolo appare in una riga di elenco.
Perché uno stile senza contorni non regge un cambio di tema?
In uno stile senza contorni le forme sono separate solo dal contrasto di colore, quindi il confine non è disegnato da nessuna parte. Avvicina i due riempimenti per uno schema scuro e il bordo tra loro smette di esistere. Un tratto uniforme mantiene la silhouette qualunque cosa facciano i riempimenti, ed è per questo che Dimesum lo richiede.
Come si verifica che un'illustrazione sia leggibile in piccolo?
Renderizza ogni candidato alle dimensioni che il prodotto usa davvero e mettili in un'unica immagine. Dimesum verifica 24px, 72px e 200px. I volti disegnati a circa l'8% della larghezza del corpo appaiono vuoti tra 24px e 48px, ed è ciò che ha escluso uno dei quattro archetipi su base visiva e non di opinione.
Un punteggio calcolato può sostituire l'occhio sul disegno?
No. Un contorno adattato alla maschera di riferimento tramite IoU ha ottenuto 0.880, contro 0.781 del miglior tentativo disegnato a mano, e quello con il punteggio più alto sembrava una corona appuntita. La sovrapposizione di area non vede la morbidezza né il carattere. Valuta il lavoro per cogliere gli errori di proporzione, poi confrontalo accanto al riferimento alla stessa dimensione in pixel.
Articoli più letti
- Il registro append-only per spese condivise esatte9 min di lettura
- Perché modificare una spesa ridefinisce la divisione9 min di lettura
- Sei bug di denaro nelle spese multivaluta9 min di lettura
- Saldare le spese di gruppo in pochi bonifici5 min di lettura
- Come dividere un conto con un piatto non condiviso9 min di lettura