Quatro estilos de ilustração, e o que vai pro produto
A Dimesum desenhou os quatro estilos candidatos antes de escolher um, e a propriedade decisiva não foi a beleza: foi se cada cor do desenho podia ser um token.
Quatro estilos de ilustração. Um deles podia ser tematizado. A Dimesum escolheu a direção de arte da marca por um único teste mecânico: cada cor do desenho pode ser substituída por um token? Três candidatos falharam, e o mais bonito falhou mais que todos.
Os quatro arquétipos ficam em docs/design/brand/ART-STYLES.md, um por referência que o fundador reuniu. Desenhamos os quatro em vez de discutir sobre eles: os três temas que a Dimesum possui, renderizados uma vez com a mão e a paleta de cada arquétipo. make ui-art-styles gera a folha de contato 4x3.
make ui-art-styles em ui/dumplings/styles/: o dumpling de cada arquétipo acima de sua vaporeira. As paletas são amostradas pixel a pixel das referências, exceto a coluna do Adesivo, que deriva do tema.Para arte de produto, a gerabilidade vence a beleza
Arte de produto é regerada; arte de marketing é desenhada uma vez. A Dimesum entrega 18 paletas de cores, e o mesmo dumpling precisa se sustentar a 24px numa linha de lista e a 200px numa tela de onboarding. Um estilo que precisa de um ilustrador para cada nova paleta não serve para nenhum dos dois trabalhos.
Então o critério é a gerabilidade. Um traço uniforme de ponta arredondada sobre um preenchimento chapado tem exatamente duas cores por forma, e ambas são nomeadas por um token. Mude os valores dos tokens e todo desenho do produto se retematiza de uma vez, sem redesenho e sem um segundo recurso.
Três dos quatro arquétipos quebram, cada um por um motivo diferente
O Elenco é pictórico acolhedor: uma vaporeira trançada com textura de verdade, um fundo âmbar e dumplings com braços e pernas escalando o pote de hashi. Tem o maior charme dos quatro. Ainda assim não pode ir pro produto. Um brilho pintado é um degradê com duas paradas e uma posição central, não um hex que dá pra trocar, e o sombreamento vira borrão a 24px.
O Cartaz é geométrico chapado, oliva e dourado sobre uma esteira trançada. Não tem contorno nenhum: as formas se separam só pela cor. Bonito, e estruturalmente fatal, porque uma troca de tema move os preenchimentos e leva as fronteiras junto. Seus rostos ficam com cerca de 8% da largura do corpo, então nos tamanhos de 24px a 48px que a Dimesum usa, aparecem em branco.
A Página Dupla é editorial moderno e a mais próxima da nossa própria mão: um contorno escuro fino e uniforme sobre preenchimento chapado, com o detalhe conduzido por pequenas marcas repetidas em vez de sombreamento. A diferença é o tema, não o traço. Ela desenha uma mesa inteira vista de cima, e uma mesa não tem unidade que caiba numa linha de lista. A Dimesum precisa de um estilo de personagem, não de um estilo de cena.
O Adesivo é vetor kawaii limpo, e é o que vai pro produto. Contorno fino uniforme, preenchimentos chapados, olhos de ponto, um grande rubor coral, sem sombreamento. Toda cor nele é um token, então as 18 paletas o tematizam de graça, ele se sustenta a 24px e a 200px, e é a mesma mão dos nossos ícones Lucide a 24px com traços arredondados de 2px.
| Arquétipo | Como as formas se separam | Onde a cor vive | Se sustenta a 24px | Veredito |
|---|---|---|---|---|
| O Elenco pictórico acolhedor | Contorno cinza-quente mais sombreamento pintado | Degradês e brilhos | Não, o sombreamento vira borrão | Só marketing |
| O Cartaz geométrico chapado | Só contraste de cor, sem contorno | Quatro cores chapadas mais preto | Não, rostos a 8% ficam em branco | Descartado |
| A Página Dupla editorial moderno | Contorno fino uniforme sobre preenchimento chapado | Preenchimentos chapados, detalhe por marcas repetidas | Estilo de cena, sem unidade pequena | Só no site de marketing |
| O Adesivo vetor kawaii limpo | Contorno fino uniforme sobre preenchimento chapado | Preenchimentos em token, um traço em token | Sim, corpo, coroa, dois pontos de olho | Vai pro produto |
A pergunta decisiva: uma cor pode ser um token?
O preenchimento chapado é o que torna uma cor nomeável, e nomear é o que deixa as 18 paletas de graça. O dumpling do Adesivo é um token de preenchimento mais um token de traço. O rubor é rust-600 a 0.42 de opacidade em vez de um pastel chapado, então ele pega emprestado o tom quente que o esquema carrega em vez de nomear uma cor própria. A vaporeira de bambu é uma escada tonal misturada a partir do gold-600 de cada tema, então sua borda iluminada é esse dourado mais 22% de papel e seu fundo mais 38% de tinta, em todo esquema.
Nenhum dos estilos descartados sobrevive a essa edição. O brilho do Elenco está incorporado numa parada de degradê, então retematizar o corpo deixa uma mancha creme por cima. O Cartaz não tem linha segurando o desenho, então quando dois preenchimentos se aproximam a borda entre eles deixa de existir.
Três correções que só a comparação lado a lado pegou
Um desenho sempre parece bom sozinho. Toda correção abaixo foi encontrada do mesmo jeito: renderize o candidato em PNG, recorte a referência no mesmo tamanho em pixels, depois cole os dois numa mesma imagem.
A boca foi desenhada com 20u de largura e virava uma carinha sorridente no momento em que ficava ao lado da referência. Ela caiu para 10u, um terço do vão de 28u entre os olhos, e o personagem voltou a ser um dumpling. Os discos dos olhos diminuíram ao mesmo tempo, de r5 para ovais de 3.4u mais altos do que largos.
Um contorno ajustado à máscara de referência por IoU marcou 0.880, contra 0.781 da melhor tentativa feita à mão. O ajustado parecia uma coroa espetada. A sobreposição de área não enxerga suavidade, então a nota melhor era o desenho pior. O que vai pro produto são proporções medidas com curvas criadas à mão: proporção 1.041 contra 1.039 da referência, cada segmento uma cúbica, nenhum canto em lugar nenhum.
Não otimize uma métrica que não consegue ver a coisa com que você se importa. Pontue o trabalho, e olhe para ele também.
O nó franzido precisa quebrar o contorno. Nosso primeiro dumpling era uma cúpula lisa com três traços finos pintados no topo, e a avaliação voltou em uma palavra: cabelo. Linhas desenhadas sobre uma curva sem quebra só podem parecer cabelo, porque nada na forma diz que a massa foi franzida. Os lóbulos se separam só nos 8% superiores da altura; corte mais fundo e você tem orelhas de coelho, que foram pro produto duas vezes antes de ser pego.
O que mantivemos dos três que descartamos
Descartar um estilo não é apagá-lo. O Elenco mantém seu instinto de encenação: adereços, transbordamento, personagens interagindo com objetos, usados onde há um ilustrador no processo e nada se retematiza. A Página Dupla mantém a confiança do fundo vermelho para o site e a licença de dar um rosto a um objeto que não é personagem. O Cartaz mantém a disciplina de quatro cores por composição.
Os estudos em si nunca vão pro produto. ui/dumplings/styles/ tem o mesmo status de refs/: citação, não fonte, e a camada de produto não pode importá-lo. O gerador lê a lista de arquétipos a partir dos próprios títulos do documento, então um quinto arquétipo adicionado a ART-STYLES.md aparece na folha no próximo build, e um título que ele não consegue desenhar quebra o build.
A regra que isto resolve
Um estilo vai pro produto; os outros são citações. Pegue seu candidato favorito e tente recolori-lo editando só os valores dos tokens: se uma parada de degradê, um brilho pintado ou uma fronteira feita de contraste de cor sobreviver a essa edição, o estilo precisa de um ilustrador para cada tema que você adicionar. Seu próximo passo é uma folha de contato, não um painel de referências. Desenhe cada candidato a 24px e a 200px, numa mesma imagem, e escolha o que continua legível nos dois.
Perguntas frequentes
O que define o estilo de ilustração de um produto?
A gerabilidade define, não a beleza. A arte de produto é redesenhada por um gerador para cada tema e cada tamanho, então a questão é se cada cor do desenho é nomeada por um token que pode ser trocado. A Dimesum entrega 18 paletas, então um estilo que dependa de um degradê pintado exigiria um ilustrador 18 vezes.
Por que a Dimesum descartou o estilo de pintura acolhedora?
Um brilho pintado é um degradê com duas paradas e uma posição central, não um hex que dá pra trocar. Ao retematizar o corpo, o brilho creme continua por cima da nova cor, sem mudar. O mesmo sombreamento também vira borrão a 24px, que é o tamanho em que um dumpling aparece numa linha de lista.
Por que um estilo sem contornos não sobrevive à troca de tema?
Num estilo sem contorno, as formas se separam só pelo contraste de cor, então a fronteira não está desenhada em lugar nenhum. Aproxime os dois preenchimentos para um esquema escuro e a borda entre eles deixa de existir. Um traço uniforme mantém a silhueta independente do que os preenchimentos façam, e por isso a Dimesum exige um.
Como saber se uma ilustração funciona em tamanhos pequenos?
Renderize cada candidato nos tamanhos que o produto realmente usa e coloque todos numa mesma imagem. A Dimesum verifica 24px, 72px e 200px. Rostos desenhados com cerca de 8% da largura do corpo aparecem em branco entre 24px e 48px, e foi isso que descartou um dos quatro arquétipos por evidência visual, não por opinião.
Uma métrica de ajuste substitui olhar o desenho?
Não. Um contorno ajustado à máscara de referência por IoU marcou 0.880, contra 0.781 da melhor tentativa feita à mão, e o de nota mais alta parecia uma coroa espetada. A sobreposição de área não enxerga suavidade nem personalidade. Pontue o trabalho para pegar erros de proporção, depois compare ao lado da referência no mesmo tamanho em pixels.
Posts populares
- O livro-razão append-only que mantém saldos exatos9 min de leitura
- Por que editar uma despesa deve refazer a divisão9 min de leitura
- Seis bugs de dinheiro em despesas multimoeda9 min de leitura
- Acerto de contas: menos transferências no grupo5 min de leitura
- Como dividir uma conta detalhada de restaurante10 min de leitura