- O YouTube, que começou em 2005 com a ideia de ser um site de namoro por vídeo, cresceu e se tornou uma plataforma de mídia visitada diariamente por bilhões de pessoas no mundo todo para assistir aos mais diversos conteúdos
- O icônico logotipo vermelho do YouTube representa a identidade da marca há muito tempo, mas recentemente foi adotado um vermelho mais suave junto com um inesperado gradiente magenta
- Trata-se de uma mudança pequena, mas significativa, que mostra como o YouTube, agora em seu 20º aniversário, mantém sua marca renovada
Motivos da mudança
- As equipes internas de direção de arte e design do YouTube queriam evoluir o vermelho usado ao longo de 20 anos
- Após estudar quais elementos existentes já não acompanhavam mais o momento atual, concluíram que a cor estava entre as prioridades de melhoria
- A nova cor foi ajustada para preservar a identidade da marca, mas de forma mais moderna e acessível
Problemas do vermelho anterior
- O vermelho anterior (RGB vermelho puro) chamava atenção demais na UI e apresentava problemas de consistência de cor, chegando a parecer laranja em algumas telas
- Em alguns displays, como TVs, ele podia causar burn-in, deixando marcas permanentes na tela
- Como o vermelho é muito intenso, houve críticas de que seu uso inadequado poderia causar fadiga na experiência do usuário
Introdução do novo vermelho e do gradiente
- O tom foi ajustado para um vermelho com sensação levemente mais fria, reduzindo problemas técnicos como burn-in de tela e distorção de cor
- Respeitando o legado do YouTube, a nova definição buscou um tom suave e vibrante, levando em conta acessibilidade e uma estética mais moderna
- Foi definida uma estratégia de usar o vermelho apenas em momentos-chave que expressem a identidade central do YouTube, maximizando o impacto visual
- A isso foi adicionado um gradiente, trazendo um elemento visual mais divertido com a combinação entre vermelho e magenta
- A novidade foi aplicada ao logo, ícones de produto, barra de progresso (
progress bar), botões de Like/Subscribe, selo Premium e anéis de live
Estratégia de design e casos de aplicação
- O uso de vermelho intenso apenas quando necessário buscou preservar a identidade da marca e, ao mesmo tempo, evitar fadiga no usuário
- Em colaboração com diversas equipes, foi explorado até onde o novo esquema de cor e gradiente poderia ser aplicado, garantindo consistência em toda a interface dos produtos
- Discussões detalhadas com designers, diretores e engenheiros avaliaram como o gradiente apareceria em telas grandes e se atenderia aos critérios de acessibilidade
- Cores de marca foram atribuídas a ações importantes, como o botão de inscrição ou de curtir, enquanto os estados padrão permaneceram em tons monocromáticos para deixar a informação mais clara
Motion design e identidade da marca
- Como o YouTube é uma plataforma de vídeo, era importante usar motion para chamar a atenção e oferecer orientação funcional
- Junto com a atualização das cores, foi adicionado à startup animation um efeito em que o logo amplia e reduz enquanto o gradiente é enfatizado
- A barra de progresso (
progress bar) ficou um pouco mais fina e mais rápida, reforçando uma sensação mais atual e prazer visual
- Pequenas animações também foram introduzidas nos ícones de canais de tópicos com gradiente magenta, acrescentando unidade à marca e um toque de diversão
- Com uma cor sólida, só seria possível variar a forma, mas com gradiente há a vantagem de ajustar a atmosfera apenas com movimentos sutis
- Para que os usuários não se sentissem sobrecarregados pelo motion, buscou-se a “quantidade certa de açúcar” — divertida, mas sem exageros
Considerações de acessibilidade
- Para garantir contraste de texto, foram criadas variações de brilho e tom entre vermelho e magenta, aplicando os valores ideais conforme o tamanho dos elementos da UI e o contexto
- Houve cuidado para que a informação não fosse transmitida apenas por uma única cor, e botões importantes usassem a cor da marca enquanto os estados padrão permaneciam em monotons
- Para dispositivos de baixo desempenho, foi introduzido um framework adaptativo que limita o motion ou ajusta sua intensidade conforme o tamanho da tela
- Sempre que possível, o alcance do motion foi reduzido para evitar carga visual excessiva, e o sistema foi projetado para permitir desativar animações quando necessário
Conclusão
- O novo vermelho e o gradiente são elementos centrais da evolução da marca do YouTube em seu 20º aniversário
- O resultado preserva a força característica do vermelho, ao mesmo tempo em que melhora questões técnicas, de design e de acessibilidade
- Ao usar motion e gradiente de forma adequada, o YouTube contribui para se tornar uma plataforma mais divertida e humana
- Este é um exemplo de como o YouTube continua mudando e ajuda os usuários a perceber intuitivamente a evolução da marca
2 comentários
Quando no final do artigo a tela inteira ficou magenta, meus olhos ficaram ardendo demais..
Pessoalmente, a barra de progresso com um gradiente magenta me dava a sensação de que havia algo errado na tela. O mais curioso é que o dispositivo em que tive essa sensação era um Pixel do Google.