¿Por qué las palabras influyen en el SVG?
Cada logo, icono, sticker e insignia que crea el estudio primero se dibuja y luego se traza en trazados vectoriales, una forma por cada zona de color plano. Un dibujo hecho de pocas formas planas y marcadas se traza en pocos trazados limpios. Las sombras, las texturas y los degradados se trazan en cientos de astillas. Así que lo más útil que puede hacer una descripción es pedir un diseño que ya sea plano. Las instrucciones del propio estudio piden eso, y tus palabras no deberían deshacerlo.
¿Qué debe decir la descripción de un logo?
Tres cosas, en una sola frase: qué muestra, para quién es y los colores.
una hoja de helecho que también es una flecha ascendente, para una app de ahorro llamada "Fernvault", azul marino oscuro y dorado cálido
- Una sola idea. «Una hoja que también es una flecha» es un logo. «Una hoja, una moneda, un gráfico, un escudo y una llave» es una multitud.
- Sustantivos concretos. «Confianza» y «crecimiento» no se pueden dibujar. «Dos manos», «un brote» y «una flecha ascendente», sí.
- El nombre entre comillas, o en el campo del nombre, solo si el logo debe escribirlo. Elige el estilo Logotipo de texto si el nombre es el logo (estilos de logo).
¿Cómo describo un set de iconos?
Escribe los iconos como etiquetas (cosas, no acciones): taza de café, cruasán, pin de mapa, tarjeta de fidelidad. Luego describe el estilo una sola vez, en el campo de estilo. Se aplica a cada icono, y eso es lo que mantiene la coherencia del set.
Los iconos de nuestras guías son un set creado así: doce etiquetas, Color plano, esquinas redondeadas, los colores #0061fc, #0a2d8f y #ef6e50, y las palabras de estilo «iconos limpios de ilustración de producto moderna, formas simples y marcadas, rellenos planos, sin contornos, sin degradados».
Las buenas palabras de estilo hablan del dibujo, no del ambiente: «extremos redondeados», «líneas gruesas y uniformes», «esquinas anguladas», «sin contornos», «formas robustas», «colores de póster retro de los 70». Evita las palabras que añaden detalles que el icono no puede sostener a 24 px: «realista», «intrincado», «3D», «sombreado detallado». Mantén un mismo nivel de detalle en toda la lista. Un «punto» junto a un «horizonte de ciudad» se ve desigual con cualquier estilo.
¿Cómo describo stickers e insignias?
- Stickers: para un personaje, describe quién es una sola vez y con precisión: especie u objeto, forma del cuerpo, dos o tres colores y un detalle («un gato naranja redondo y rechoncho con la barriga color crema y las mejillas sonrosadas»). Luego escribe las expresiones, con el texto entre comillas:
saludando "¡Hola!". Que los textos tengan dos o tres palabras. Se dibuja cada letra, así que revisa la ortografía antes de enviar. - Insignias: el nombre del logro va arriba; abajo, una regla corta o el mismo texto. Dos o tres palabras encajan en la curva del anillo de una insignia mucho mejor que una frase. Describe la imagen del centro como un solo objeto simple: «una zapatilla de correr», «una montaña con una bandera».
¿Qué debo dejar fuera?
| Evita | Por qué | Pide en su lugar |
|---|---|---|
| degradados, «brillante», «reluciente» | se convierten en rayas de color plano | dos tonos planos |
| luz fotográfica, sombras, «realista» | se trazan en muchas astillas | «plano», «formas sólidas» |
| texturas finas, «grunge», «acuarela» | se trazan en motas | un borde limpio, o una textura añadida después en el editor |
| texto diminuto, eslóganes dentro de la marca | ilegibles a tamaños pequeños | el nombre junto a la marca, con una fuente |
| más de tres colores | sets más turbios, más trazados | hasta tres colores, con su nombre o como valores hex |
¿Cómo corrijo lo que sale?
Cambia una cosa cada vez. Si un set está cerca, usa una ronda y rehaz iconos sueltos con una nota breve («más simple, una esterilla enrollada lisa») en lugar de empezar de cero. Si un logo está cerca, refínalo con palabras («haz la R más gruesa»). Si solo falla un color o una forma suelta, abre el SVG en el editor SVG, que es más rápido que otra ronda. Y cuando el SVG tiene muchos más trazados que formas tiene el dibujo, el dibujo no era lo bastante plano: pide «rellenos planos, sin sombras» y vuelve a dibujarlo.