- YouTube, que comenzó en 2005 con la idea de ser un sitio de citas por video, hoy se ha convertido en una plataforma de medios que miles de millones de personas en todo el mundo visitan a diario para ver todo tipo de contenido.
- El icónico logo rojo de YouTube ha representado durante mucho tiempo la identidad de la marca, pero recientemente se introdujeron un rojo más suave y un inesperado degradado magenta.
- Es un cambio pequeño pero significativo, y muestra cómo YouTube, al cumplir 20 años, mantiene renovada su marca.
Razones del cambio
- El equipo interno de dirección de arte y diseño de YouTube buscó evolucionar el rojo que se ha usado durante 20 años.
- Tras estudiar qué elementos existentes ya no encajaban con la época, concluyeron que el color estaba entre las principales prioridades de mejora.
- El nuevo color se ajustó para mantener la identidad de la marca, pero con un enfoque más moderno y accesible.
Problemas del rojo anterior
- El rojo anterior (rojo puro RGB) destacaba demasiado en la UI y presentaba problemas de consistencia de color, ya que en algunas pantallas incluso se veía anaranjado.
- En algunas pantallas, como los televisores, podía provocar burn-in, dejando marcas permanentes en la pantalla.
- También se señaló que, por ser un rojo tan intenso, un mal uso podía generar fatiga en la experiencia de usuario.
Introducción del nuevo rojo y el degradado
- Se ajustó hacia un rojo con una sensación ligeramente más fría para aliviar problemas técnicos como el burn-in de pantalla y la distorsión del color.
- Respetando el legado de YouTube, se definió un tono suave y vibrante que también tomara en cuenta la accesibilidad y una sensibilidad más moderna.
- Se estableció la estrategia de usar el rojo solo en momentos clave que expresan la identidad central de YouTube, para maximizar el impacto visual.
- Ahí se añadió el degradado, aportando un elemento visual más dinámico al combinar rojo y magenta.
- Se aplicó de forma renovada al logo, los íconos de producto, la barra de progreso (
progress bar), los botones de Like/Subscribe, la insignia Premium y los anillos de transmisión en vivo.
Estrategia de diseño y casos de aplicación
- Se buscó usar un rojo intenso solo cuando fuera necesario para mantener la identidad de marca sin causar fatiga al usuario.
- En colaboración con varios equipos, exploraron hasta dónde podía aplicarse el nuevo color y el degradado, asegurando consistencia en toda la interfaz real del producto.
- Mediante conversaciones detalladas con diseñadores, directores e ingenieros, revisaron cómo se veía el degradado en pantallas grandes y si cumplía con los criterios de accesibilidad.
- Asignaron el color de marca a acciones importantes como el botón de suscripción o de Me gusta, mientras que en los estados predeterminados mantuvieron tonos monocromáticos para comunicar mejor la información.
Diseño de movimiento e identidad de marca
- Como YouTube es una plataforma de video, era importante usar el movimiento para atraer la atención y ofrecer orientación funcional.
- Junto con la actualización del color, se añadió en la animación de inicio (
startup animation) un efecto que resalta el degradado mientras el logo se expande y contrae.
- La barra de progreso (
progress bar) se mostró un poco más delgada y más rápida para transmitir una sensación más actual y visualmente entretenida.
- También se introdujo una pequeña animación en los íconos de canales temáticos con degradado magenta para reforzar la unidad de marca y sumar un toque lúdico.
- Con un color sólido solo es posible cambiar la forma, pero al usar degradado existe la ventaja de poder ajustar la atmósfera incluso con movimientos sutiles.
- Se buscó una “cantidad adecuada de azúcar” para que el movimiento resultara divertido sin volverse excesivo ni agobiar al usuario.
Consideraciones de accesibilidad
- Para asegurar el contraste del texto, se dividieron el brillo y el tono del rojo y del magenta en varias variantes, aplicando el valor óptimo según el tamaño del elemento UI y cada situación.
- Se tuvo cuidado de no transmitir información usando solo un color; los botones importantes usan el color de marca, pero el estado predeterminado se dejó en tonos monocromos.
- Para dispositivos de bajos recursos, se introdujo un framework adaptativo que limita el movimiento o ajusta su intensidad según el tamaño de la pantalla.
- Siempre que fue posible, se redujo el alcance visual del movimiento para evitar sobrecarga, y se diseñó el sistema para permitir desactivar animaciones cuando fuera necesario.
Conclusión
- El nuevo rojo y el degradado son elementos clave en la evolución de la marca de YouTube con motivo de su 20.º aniversario.
- El resultado mantiene la fuerza característica del rojo, al tiempo que mejora problemas técnicos, de diseño y de accesibilidad.
- Al aprovechar adecuadamente el movimiento y el degradado, contribuye a que YouTube se convierta en una plataforma más entretenida y humana.
- Es un ejemplo de cómo YouTube sigue cambiando y ayuda a que los usuarios perciban de forma intuitiva la evolución de la marca.
2 comentarios
Cuando al final del artículo toda la pantalla se pone magenta, de verdad me arden muchísimo los ojos..
Personalmente, sentí que el gradiente magenta en la barra de progreso hacía que pareciera que había algo mal con la pantalla. Lo curioso es que el dispositivo en el que sentí eso fue un Pixel de Google.