Primeiramente, vamos juntos decifrar a nova Splash Screen do YouTube? Um dos momentos que não devemos negligenciar na jornada do usuário é, sem dúvidas, a splash screen. Por isso, a primeira impressão é a que fica, e a splash screen é a primeiríssima impressão do usuário ao abrir um aplicativo.
Vemos várias boas práticas na indústria, mas uma das que mais me chamou atenção foi a do YouTube.
De início, podemos ver apenas uma animação bonitinha. Mas, ao analisar cada detalhe, percebemos diversos elementos carregados de propósito. Se todos eles foram criados intencionalmente ou não, nunca saberemos, mas vou desmembrar cada detalhe que percebi ser de grande importância para motion designers centrados no usuário.
Além disso, caso você queira aprender tecnicamente como criar esta animação do zero no After Effects, gravamos um tutorial exclusivo e gratuito para você.
1. O Crescimento da Linha Horizontal
A animação começa com uma linha horizontal crescendo do centro. Esta simples animação pode simbolizar descoberta e expansão, além de criar a sensação de antecipação (um dos princípios da animação).
2. O Ícone Universal de Play
Enquanto a linha horizontal se expande e retrai, o ícone de play, acompanhando a extremidade esquerda, traz rapidamente a mensagem de que se trata de reprodução de vídeos. Uma comunicação visual clara que não aconteceria se a linha estivesse animando sozinha.
3. As Cores do Google
Uma das coisas que sempre repetimos no UXMD é que devemos aproveitar pequenos momentos da jornada para reforçar o branding da empresa. É uma prática inteligentíssima porque você mata duas coisas de uma só vez: experiência e branding.
Nesta animação, em coisa de milissegundos, temos mudanças rápidas entre as cores principais do Google, empresa mãe do YouTube. É um detalhe crucial para o branding, dando mais força à identidade visual da empresa e criando consistência entre o Google e seus produtos.
4. Preenchimento do Stroke
Não poderia faltar a metáfora visual clássica da linha sendo preenchida progressivamente da esquerda para a direita, comunicando diretamente a funcionalidade da plataforma. É um detalhe que rapidamente cria uma conexão imediata entre o usuário e a sua atividade principal na plataforma.
5. Transição para o Logo
Finalmente, temos a transição para o logo do YouTube. Foi utilizado um match-cut, que é uma técnica bastante comum no mundo do motion design. Para deixar essa transição ainda melhor, o ícone de play permanece antes e depois do corte. Com isso, cria-se continuidade entre tudo o que foi comunicado e o próprio logo do YouTube.
A splash screen do Youtube
A animação de splash screen do YouTube vai além de ser apenas um elemento estético; ela constitui uma narrativa da própria experiência do usuário e da identidade da marca. Aqui, temos um exemplo claro de um bom UX Motion Design, que demonstra o movimento e o visual empregados para comunicar os valores e as funções de uma marca.
Essa análise destaca o poder do motion design na experiência do usuário. Convidamos você a manter-se sempre atento às animações dos aplicativos que utiliza diariamente. Isso é um ótimo exercício para aprimorar sua mentalidade de UX motion designer.
Caso queira receber nossos artigos e atualizações por e-mail, preencha o formulário abaixo!
