La versión corta
- Los logotipos con degradado se generalizaron a mediados de la década de 2010, cuando grandes apps sustituyeron los iconos detallados o planos por glifos sencillos sobre degradados de colores.
- El rediseño de Instagram de 2016 cambió un icono de cámara detallado por un simple contorno de cámara sobre un degradado de cálido a violeta, con lo que el color pasó a ser la principal señal de reconocimiento.
- Messenger pasó de un azul liso a un degradado de azul, morado y rosa en 2020, al mismo tiempo que introdujo la mensajería entre Instagram y Messenger.
- El sistema de marca de Mozilla de 2019 dio a Firefox y a sus productos relacionados una familia común de degradados vivos, mostrando cómo un degradado puede unir varias marcas.
- Las lecciones para cualquier logotipo con degradado: mantén la forma sencilla, conserva un color reconocible, fija el degradado con exactitud y ten siempre una versión plana.
En esta página
Los logotipos con degradado famosos pasaron de ser raros a estar en todas partes a mediados de la década de 2010, cuando algunas de las apps más usadas del mundo pasaron a glifos sencillos sobre degradados de colores. El cambio dio a los diseñadores una lección que sigue vigente: cuando un logotipo aparece como un pequeño cuadrado entre decenas de otros, el color hace más trabajo de reconocimiento que la forma. Las mejores identidades con degradado combinan una marca muy sencilla con un degradado fijo, distintivo y usado en todas partes.
Este artículo repasa tres rediseños muy documentados y extrae de ellos lecciones generales. Describe lo que cambió públicamente, no cómo ni por qué lo decidieron las empresas. Para el oficio de hacer uno, mira logotipos con degradado: cuándo funcionan.
Por qué los logotipos con degradado se apoderaron de los iconos de apps
Las pantallas de inicio de los móviles cambiaron lo que tiene que hacer un logotipo. Cada app recibe el mismo cuadrado redondeado, más o menos del mismo tamaño, rodeado de otros. Las ilustraciones detalladas se emborronan a ese tamaño, y un único color liso lo comparten decenas de otras apps. Un degradado ofrece algo intermedio: una firma de color con más combinaciones de las que permite el color liso, legible incluso cuando el glifo de encima es demasiado pequeño para verse con claridad.
Instagram, 2016: el degradado se convierte en la marca
En mayo de 2016 Instagram sustituyó su icono de cámara retro y detallado por un simple contorno de cámara en blanco sobre un degradado que iba del amarillo cálido y el naranja abajo a la izquierda, pasando por el rosa y el magenta, hasta el morado arriba a la derecha. En el lanzamiento, la empresa presentó los colores como una evolución de la franja arcoíris del icono antiguo. El rediseño provocó reacciones fuertes al principio, y el degradado ha permanecido en el centro de la marca desde entonces, renovado en 2022 junto con una nueva tipografía.
linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%)- El glifo se simplificó a medida que el color se enriquecía. Una cámara en contorno deja espacio para que el degradado sea la parte reconocible.
- Se conservó el valor ya acumulado. Los colores del icono antiguo se reinterpretaron en lugar de tirarse.
- Un recorrido diagonal de cálido a frío da al degradado una dirección que la gente recuerda, no solo un conjunto de colores.
Messenger, 2020: un cambio de color que anunció un cambio de producto
En 2020 Messenger sustituyó su logotipo de azul liso por un degradado de azul, morado y rosa. El cambio llegó a la vez que la mensajería entre Instagram y Messenger. La forma, un globo de diálogo con un rayo, se mantuvo, de modo que la gente podía seguir encontrándolo; solo se movió el color.
La lección: un degradado puede decir «esto ha cambiado» sin perder reconocimiento, siempre que se mantenga la forma que la gente conoce. Es un patrón útil para cualquier rediseño de marca: cambia una señal fuerte cada vez.
Firefox, 2019: una familia de degradados para muchos productos
En 2019 Mozilla presentó un nuevo sistema de marca en el que Firefox pasó a ser el nombre de una familia de varios productos. El logotipo del navegador conservó su zorro, simplificado, y la familia compartió degradados vivos de amarillo, naranja, rojo, rosa y morado en los iconos de los productos. Cada icono tenía su propia forma, pero los degradados compartidos hacían que se leyeran como parientes.
Qué tienen en común estas identidades con degradado
| Identidad | Año | Qué cambió | Lección |
|---|---|---|---|
| 2016 | De una cámara detallada a un glifo en contorno sobre un degradado de cálido a violeta | Simplifica la forma y deja que el color lleve el reconocimiento | |
| Messenger | 2020 | De azul liso a un degradado de azul, morado y rosa | Mantén la forma y cambia el color para señalar una novedad |
| Firefox | 2019 | De un único logotipo de navegador a una familia con degradados compartidos | Una rampa de degradado puede unir muchas marcas |
Cinco lecciones para tu propio logotipo con degradado
- 1
Mantén la forma muy sencilla
El degradado es lo que habla, así que la marca de encima debe leerse al tamaño de un icono de app o de un avatar.
- 2
Conserva un color reconocible
Si ya tienes un color conocido, construye el degradado a partir de él. El reconocimiento que ya te has ganado merece conservarse.
- 3
Fija el degradado con exactitud
Anota cada parada, posición y ángulo. Un degradado reconstruido a ojo se desvía, y el reconocimiento se desvía con él. Coherencia de marca explica por qué.
- 4
Ten siempre una versión plana
Los favicons, el bordado, la impresión a un color y algunas interfaces no pueden mostrar un degradado. Elige un color liso y una versión del glifo en blanco o negro.
- 5
Usa el degradado más allá del logotipo
Los ejemplos más fuertes repiten su degradado en fondos, realces y movimiento, de modo que se convierte por sí mismo en un activo de marca distintivo.
.logo-tile {
/* Flat fallback: the one colour chosen for small or limited uses */
background-color: #d62976;
/* The exact gradient, with every stop recorded */
background-image: linear-gradient(45deg, #feda75 0%, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5 100%);
border-radius: 22%;
aspect-ratio: 1;
}Un degradado también puede salir mal detrás de un logotipo en lugar de dentro de él. Si tu logotipo va sobre tu propio degradado, lee poner un logotipo sobre un degradado, y para construir toda una identidad en torno a uno, branding con degradados.
Preguntas frecuentes
¿Cuándo cambió Instagram a un logotipo con degradado?
En mayo de 2016, cuando sustituyó su icono de cámara detallado por un simple contorno de cámara sobre un degradado que iba del amarillo y el naranja, pasando por el rosa, hasta el morado.
¿Por qué tantas apps usan logotipos con degradado?
Los iconos de las apps comparten todos el mismo pequeño cuadrado redondeado, así que el color hace la mayor parte del trabajo de reconocimiento. Un degradado específico es más distintivo que un único color liso.
¿Funcionan los logotipos con degradado en impresión?
A menudo, con cuidado. Los degradados pueden formar bandas o cambiar de color en impresión, así que todo logotipo con degradado debe tener también una versión en color liso y versiones en blanco y negro a un solo color.
¿Cómo hago un logotipo con degradado que siga siendo reconocible?
Usa una forma sencilla, fija las paradas y el ángulo exactos, repite el degradado por toda tu marca y ten un color liso de reserva para usos pequeños o limitados.
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
