La versión corta
- Las variantes de logo son distintas disposiciones y coloraciones del mismo logo, creadas para que encaje en cada espacio donde aparece.
- Un conjunto típico incluye un logo principal, una versión horizontal, una apilada, un icono o submarca y versiones a una tinta en blanco y negro.
- Todas las variantes deberían compartir las mismas letras, el mismo símbolo y los mismos colores, para que se lean como un solo logo y no como varios.
- El icono o submarca es la versión que se usa en fotos de perfil, favicons y otros espacios cuadrados pequeños.
- Deja por escrito qué variante va en cada sitio, para que nadie tenga que adivinar ni estirar el logo principal para que quepa.
En esta página
Las variantes de logo son las distintas versiones de un mismo logo, dispuestas y coloreadas para adaptarse a espacios diferentes. La mayoría de marcas necesitan cinco: un logo principal, una composición horizontal para espacios anchos, una versión apilada para los cuadrados, un icono o submarca para espacios diminutos y versiones a una tinta en blanco y negro. Construidas a partir de las mismas piezas, permiten que el logo se vea bien en un banner, en una foto de perfil y en un sello a una tinta sin estirarlo ni aplastarlo nunca.
Por qué un solo logo no basta
Un logo diseñado para el rótulo de una tienda suele ser demasiado ancho para una foto de perfil y demasiado detallado para un favicon. Cuando solo hay un archivo, la gente improvisa: lo reduce hasta que no se lee, lo aplasta para que quepa o lo pone sobre un fondo donde desaparece. Las variantes lo resuelven de antemano. Decides una vez cómo se adapta el logo y todo el mundo sigue la misma respuesta.
Las cinco variantes de logo que necesitan casi todas las marcas
Qué es
Úsala para
Qué es
Úsala para
Úsala para
Qué es
Úsala para
Qué es
Úsala para
Algunas marcas añaden una versión solo logotipo, el nombre sin el símbolo, para sitios donde el símbolo quedaría demasiado pequeño para leerse. Y una versión de insignia o emblema puede ser útil para pegatinas y precintos de envase. Ninguna es imprescindible desde el primer día.
Cómo asignar cada variante a su espacio
La forma del espacio decide la variante. Los espacios anchos llevan la composición horizontal, los cuadrados la versión apilada o el icono, y todo lo que sea más pequeño que una miniatura lleva solo el icono.
Cabecera de email 1200×600: horizontal
1200 × 600
Instagram cuadrado 1080×1080: apilada
1080 × 1080
Story 1080×1920: apilada o icono
1080 × 1920
Banner de LinkedIn 1584×396: horizontal
1584 × 396
En una cabecera de email ancha, el nombre va en una línea y el espacio se lee con naturalidad.
En un cuadrado, la disposición apilada llena el marco y se mantiene lo bastante grande para leerse.
Variantes de color: a todo color, invertida y monocolor
Cada disposición necesita también versiones de color. No te hacen falta todas las combinaciones, pero sí estas cuatro, para que el logo tenga respuesta en fondos claros, fondos oscuros e impresión a una tinta.
Sobre degradados y fotos, la versión a una tinta en blanco o negro suele ser la acertada, porque un logo a dos colores puede chocar con lo que tiene detrás. Logo sobre fondo degradado muestra cómo elegir entre ellas, e ideas de fondo para logos tiene fondos que le sientan bien a un logo sencillo.
Cómo crear un conjunto de variantes de logo
- 1
Parte del logo principal en vectorial
Cada variante se reorganiza a partir de las mismas piezas maestras. Nunca redibujes el símbolo ni vuelvas a componer el nombre con otro peso.
- 2
Crea las composiciones horizontal y apilada
Mueve el símbolo al lado o encima del nombre. Fija la separación entre ambos como una medida, por ejemplo la altura de las mayúsculas del nombre.
- 3
Simplifica el icono
Toma el símbolo o las iniciales solos, quita el detalle fino y engrosa las líneas finas. Tiene que leerse a tamaños muy pequeños, así que pruébalo como favicon.
- 4
Crea las versiones de color
A todo color, invertida, negra y blanca para cada disposición. Revisa la versión invertida sobre tu color de marca más oscuro.
- 5
Define el espacio de respeto y los tamaños mínimos
Establece el margen vacío alrededor de cada versión y el tamaño mínimo al que puede usarse, en píxeles para pantalla y en milímetros para imprenta.
- 6
Exporta y nombra bien los archivos
SVG, PDF y PNG transparente para cada una, con nombres como
fern-stacked-reversed.svgpara que la gente elija el correcto sin abrirlo.
Reglas para que las variantes parezcan un solo logo
Evita
- Estirar o aplastar una versión para que quepa en un espacio
- Redibujar el icono de forma distinta para cada plataforma
- Colores nuevos que solo aparecen en una variante
- Añadir el eslogan a algunas versiones y a otras no, al azar
- Usar el logo principal donde corresponde el icono
Haz
- Elige la variante cuya forma coincide con el espacio
- Un único icono, usado en todos los sitios que piden un cuadrado pequeño
- La misma paleta en todo el conjunto
- Trata la composición con eslogan como una variante documentada propia
- Respeta el espacio de respeto y los tamaños mínimos
Documenta el conjunto en una sola página de tu guía de estilo de marca: cada variante, sus versiones de color, el espacio de respeto, el tamaño mínimo y dónde se usa. Luego pon los archivos donde la gente diseña de verdad. En Gradiently el kit de marca guarda varios logos uno junto a otro, así que la versión apilada, el icono y el archivo invertido están a un clic en el Studio, y el Designer puede aplicar el kit al maquetar un diseño. Kit de marca cubre todo lo demás que debería ir con ellos.
Preguntas frecuentes
¿Qué son las variantes de logo?
Son versiones alternativas de un mismo logo, como la horizontal, la apilada, el icono y la versión a una tinta, creadas para que el logo encaje en cualquier espacio sin deformarse.
¿Cuántas variantes de logo necesito?
La mayoría de marcas necesitan unas cinco: principal, horizontal, apilada, un icono o submarca y versiones en blanco y negro. Añade más solo cuando un uso real lo pida.
¿Qué es una submarca de logo?
Una submarca es una versión simplificada y normalmente compacta del logo, a menudo las iniciales o el símbolo solo, que se usa en espacios pequeños como fotos de perfil, favicons y pegatinas.
¿Qué es un logo responsive?
Un logo responsive es un conjunto de variantes que se simplifican a medida que el espacio se reduce, desde la composición completa en pantallas grandes hasta solo el icono en los tamaños más pequeños.
¿Qué variante de logo debo usar para una foto de perfil?
Usa el icono o submarca, o la versión apilada si es corta, sobre un fondo cuadrado. Los logos horizontales anchos se vuelven ilegibles en un círculo pequeño.
Escrito por Gradiently
El equipo detrás de Gradiently, una herramienta de diseño creada en torno a los Marks: degradados vivos que hacen que todo lo que diseñas parezca tuyo.
Ver nuestro perfil