Cuatro estilos de ilustración, uno para producto
Dimesum dibujó los cuatro estilos candidatos antes de elegir uno, y la propiedad decisiva no fue la belleza sino si cada color del dibujo podía ser un token.
Cuatro estilos de ilustración. Solo uno admitía temas. Dimesum eligió la dirección artística de su marca con una única prueba mecánica: ¿puede cada color del dibujo sustituirse por un token? Tres candidatos no la pasaron, y el más bonito fue el que peor cayó.
Los cuatro arquetipos viven en docs/design/brand/ART-STYLES.md, uno por cada referencia que reunió el fundador. Dibujamos los cuatro en lugar de discutir sobre ellos: los tres motivos que Dimesum tiene como propios, representados una vez con el trazo y la paleta propios de cada arquetipo. make ui-art-styles genera la hoja de contactos 4x3.
make ui-art-styles en ui/dumplings/styles/: el dumpling de cada arquetipo sobre su vaporera. Las paletas se muestrean píxel a píxel de las referencias, salvo la columna de La Pegatina, que se deriva del tema.En el arte de producto, la generabilidad gana a la belleza
El arte de producto se regenera; el arte de marketing se dibuja una vez. Dimesum ofrece 18 paletas de color, y el mismo dumpling tiene que aguantar a 24px en una fila de lista y a 200px en una pantalla de bienvenida. Un estilo que necesita un ilustrador para cada paleta nueva no sirve para ninguna de las dos tareas.
Así que el filtro es la generabilidad. Un trazo uniforme de extremos redondeados sobre un relleno plano tiene exactamente dos colores por forma, y ambos los nombra un token. Cambia los valores de los tokens y todos los dibujos del producto cambian de tema a la vez, sin redibujar y sin un segundo recurso.
Tres de los cuatro arquetipos fallan, cada uno por un motivo distinto
El Reparto es pictórico cálido: una vaporera tejida con textura real, un fondo ámbar y dumplings con brazos y piernas trepando por el bote de palillos. Es el de más encanto de los cuatro. Aun así no puede ir a producto. Un brillo pintado es un degradado con dos paradas y una posición central, no un valor hex que puedas intercambiar, y el sombreado se emborrona a 24px.
El Cartel es geométrico plano, oliva y dorado sobre una estera tejida. No lleva ningún contorno: las formas se separan solo por el color. Bonito y estructuralmente fatal, porque un cambio de tema mueve los rellenos y se lleva los bordes con ellos. Sus caras ocupan cerca del 8% del ancho del cuerpo, así que a los tamaños de 24px a 48px que usa Dimesum se leen en blanco.
El Despliegue es editorial moderno y el más cercano a nuestro propio trazo: un contorno oscuro fino y uniforme sobre relleno plano, con el detalle a base de pequeñas marcas repetidas en lugar de sombreado. La diferencia es el motivo, no el trazo. Dibuja una mesa entera desde arriba, y una mesa no tiene ninguna unidad que puedas poner en una fila de lista. Dimesum necesita un estilo de personaje, no un estilo de escena.
La Pegatina es vector kawaii limpio, y es la que llevamos a producto. Contorno fino uniforme, rellenos planos, ojos de punto, un gran rubor coral, sin sombreado. Cada color en ella es un token, así que las 18 paletas la tematizan gratis, aguanta a 24px y a 200px, y es el mismo trazo que nuestros iconos Lucide a 24px con trazos redondeados de 2px.
| Arquetipo | Cómo se separan las formas | Dónde vive el color | Aguanta a 24px | Veredicto |
|---|---|---|---|---|
| El Reparto pictórico cálido | Contorno gris cálido más sombreado pintado | Degradados y brillos | No, el sombreado se emborrona | Solo marketing |
| El Cartel geométrico plano | Solo contraste de color, sin contorno | Cuatro colores planos más negro | No, las caras al 8% quedan en blanco | Descartado |
| El Despliegue editorial moderno | Contorno fino uniforme sobre relleno plano | Rellenos planos, detalle por marcas repetidas | Estilo de escena, sin unidad pequeña | Solo sitio de marketing |
| La Pegatina vector kawaii limpio | Contorno fino uniforme sobre relleno plano | Rellenos con token, un trazo con token | Sí, cuerpo, remate y dos puntos de ojos | Va en el producto |
La pregunta decisiva: ¿puede un color ser un token?
El relleno plano es lo que hace que un color se pueda nombrar, y nombrar es lo que hace que las 18 paletas salgan gratis. El dumpling de La Pegatina es un token de relleno más un token de trazo. El rubor es rust-600 al 0.42 de opacidad en lugar de un pastel plano, así que toma prestado el tono cálido que lleve el esquema en vez de nombrar un color propio. La vaporera de bambú es una única escala tonal mezclada a partir del gold-600 de cada tema, de modo que su borde iluminado es ese dorado más 22% de papel y su base más 38% de tinta, en todos los esquemas.
Ninguno de los estilos descartados sobrevive a esa edición. El brillo de El Reparto está fijado en una parada de degradado, así que recolorear el cuerpo deja una mancha crema encima. El Cartel no tiene ninguna línea que sostenga el dibujo, así que en cuanto dos rellenos se acercan el borde entre ellos deja de existir.
Tres correcciones que solo detectó la comparación lado a lado
Un dibujo siempre parece correcto por sí solo. Cada corrección de abajo se encontró de la misma manera: renderizar el candidato a PNG, recortar la referencia al mismo tamaño en píxeles y luego pegar ambos en una sola imagen.
La boca se dibujó de 20u de ancho y se leía como una sonrisa en cuanto se ponía junto a la referencia. Bajó a 10u, un tercio de la separación de 28u entre ojos, y el personaje volvió a ser un dumpling. Los discos de los ojos bajaron al mismo tiempo, de r5 a óvalos de 3.4u más altos que anchos.
Un contorno ajustado a la máscara de referencia por IoU obtuvo 0.880, frente a 0.781 del mejor intento dibujado a mano. El ajustado parecía una corona con púas. El solapamiento de área no ve la suavidad, así que la mejor puntuación era el peor dibujo. Lo que va a producto son proporciones medidas con curvas creadas a mano: relación de aspecto 1.041 frente al 1.039 de la referencia, cada segmento una cúbica, sin ninguna esquina.
No optimices una métrica que no puede ver lo que te importa. Puntúa el trabajo y míralo también.
El nudo fruncido tiene que romper el contorno. Nuestro primer dumpling era una cúpula lisa con tres trazos finos pintados arriba, y la revisión volvió en una sola palabra: pelo. Las líneas dibujadas sobre una curva sin romper solo pueden leerse como pelo, porque nada en la forma dice que la masa se frunció. Los lóbulos se separan solo en el 8% superior de la altura; corta más hondo y salen orejas de conejo, que llegaron a producto dos veces antes de detectarse.
Lo que conservamos de los tres que descartamos
Descartar un estilo no es borrarlo. El Reparto conserva su instinto de puesta en escena: atrezo, derrames, personajes que interactúan con objetos, usado donde hay un ilustrador en el proceso y nada cambia de tema. El Despliegue conserva la confianza del fondo rojo para el sitio y la licencia de dar cara a un objeto que no es personaje. El Cartel conserva la disciplina de cuatro colores por composición.
Los estudios en sí nunca van a producto. ui/dumplings/styles/ tiene el mismo estatus que refs/: cita, no fuente, y la capa de producto no puede importarlo. El generador extrae la lista de arquetipos de los propios encabezados del documento, así que un quinto arquetipo añadido a ART-STYLES.md aparece en la hoja en la siguiente compilación, y un encabezado que no puede dibujar hace fallar la compilación.
La regla que esto zanja
Un solo estilo va a producto; los demás son citas. Toma tu candidato favorito e intenta recolorearlo editando solo los valores de los tokens: si una parada de degradado, un brillo pintado o un borde hecho de contraste de color sobrevive a esa edición, el estilo necesita un ilustrador para cada tema que añadas. Tu siguiente paso es una hoja de contactos, no un panel de inspiración. Dibuja cada candidato a 24px y a 200px, en una sola imagen, y elige el que siga siendo legible en ambos.
Preguntas frecuentes
¿Qué determina el estilo de ilustración de un producto?
La generabilidad, no la belleza. El arte de producto lo redibuja un generador para cada tema y cada tamaño, así que la pregunta es si cada color del dibujo tiene un token que se pueda intercambiar. Dimesum ofrece 18 paletas, de modo que un estilo con un degradado pintado necesitaría un ilustrador 18 veces.
¿Por qué Dimesum descartó el estilo pictórico cálido?
Un brillo pintado es un degradado con dos paradas y una posición central, no un valor hex que puedas intercambiar. Al recolorear el cuerpo, el brillo crema queda encima del nuevo color, sin cambiar. Ese mismo sombreado también se emborrona a 24px, que es el tamaño al que aparece un dumpling en una fila de lista.
¿Por qué un estilo sin contornos no aguanta un cambio de tema?
En un estilo sin contornos las formas se separan solo por contraste de color, así que el borde no está dibujado en ninguna parte. Acerca los dos rellenos para un esquema oscuro y el borde entre ellos deja de existir. Un trazo uniforme mantiene la silueta pase lo que pase con los rellenos, por eso Dimesum lo exige.
¿Cómo comprobar que una ilustración se lee en tamaños pequeños?
Renderiza cada candidato en los tamaños que el producto usa de verdad y ponlos en una sola imagen. Dimesum comprueba 24px, 72px y 200px. Las caras dibujadas a cerca del 8% del ancho del cuerpo se leen en blanco entre 24px y 48px, que es lo que descartó uno de los cuatro arquetipos por evidencia visual y no por opinión.
¿Puede una puntuación automática sustituir a mirar el dibujo?
No. Un contorno ajustado a la máscara de referencia por IoU obtuvo 0.880, frente a 0.781 del mejor intento dibujado a mano, y el de mayor puntuación parecía una corona con púas. El solapamiento de área no ve la suavidad ni el carácter. Puntúa el trabajo para detectar errores de proporción y luego compáralo junto a la referencia al mismo tamaño en píxeles.
Artículos populares
- Libro mayor de solo anexión para saldos exactos9 min de lectura
- Por qué editar un gasto debe redefinir el reparto9 min de lectura
- Seis errores de dinero en gastos multidivisa10 min de lectura
- Cómo saldar cuentas de grupo en pocas transferencias5 min de lectura
- Dividir la cuenta cuando un plato no se compartió10 min de lectura