Capítulo 01 Fundamento
Motion de marca não é motion de interface
Partilham a física e quase nada mais. Um serve a usabilidade; o outro serve o reconhecimento — e confundi-los produz identidades que se mexem sem dizer nada.
1.1 A distinção
| Motion de interface | Motion de marca | |
|---|---|---|
| Serve | A tarefa: orientar, dar retorno, explicar estado. | O reconhecimento: dizer quem é, antes de dizer o quê. |
| Sucesso | Passar despercebido. Se você reparou, provavelmente falhou. | Ser lembrado. Se ninguém reparou, falhou. |
| Frequência | Centenas de vezes por sessão. | Uma ou duas vezes por sessão, ou por vídeo. |
| Duração típica | 150–300 ms | 800 ms a 3 s |
| Repetição | Tem de aguentar mil repetições sem irritar. | Tem de aguentar mil repetições e continuar a ser reconhecível — exigência mais difícil. |
| Onde está no catálogo | Motion de Interface | Esta apostila |
1.2 Porque isto passou a importar
Durante décadas, uma identidade era um conjunto de coisas paradas — papel, fachada, embalagem — e o movimento aparecia só em publicidade televisiva, produzido por outra equipa. Hoje a maior parte dos encontros com uma marca acontece em ecrãs que se mexem: abertura de aplicação, vídeo curto, transmissão, ecrã de carregamento, assinatura de vídeo.
A consequência é simples e ignorada: se você não definir como a marca se move, ela vai mover-se na mesma — mal, e de forma diferente cada vez, porque cada pessoa que precisar de a animar vai improvisar.
1.3 A tese
Ninguém aceitaria que cada material usasse um azul diferente. A mesma exigência aplica-se ao movimento: a forma como as coisas aceleram, a maneira como o símbolo se constrói, o ritmo — são reconhecíveis e devem ser consistentes. Uma marca cujo movimento é sempre o mesmo torna-se identificável antes de o logótipo aparecer.
Procure três materiais em movimento da marca com que trabalha. O logótipo comporta-se da mesma maneira nos três? Se não, alguém improvisou — e a resposta é quase sempre que sim.
Capítulo 02 Núcleo
Os quatro momentos
Todo o movimento de marca cabe em quatro momentos com funções diferentes. Confundi-los é a origem da maior parte das animações que irritam.
Build-in — como a marca se forma
A peça central. O símbolo constrói-se a partir de nada, e a maneira como se constrói conta a história: peças que encaixam, traço que se desenha, formas que convergem, algo que se revela. Dura entre 800 ms e 2 s. É o que se vê na abertura de um vídeo.
Idle — o estado vivo
Movimento contínuo e subtil, para ecrãs de espera e carregamento. A regra é a discrição: o que se vê durante trinta segundos tem de poder ser ignorado. Aqui erra-se sempre por excesso.
Transição — a marca sai de cena
Como o logótipo se transforma noutra coisa: no ícone da aplicação, no conteúdo, no primeiro ecrã. É o momento mais difícil e o que mais distingue trabalho profissional — porque exige que a marca ceda o palco com elegância.
Assinatura — o fecho
O fim de um vídeo: o logótipo assenta, muitas vezes com som. É onde a memória se fixa, e o único momento em que se pode ser um pouco mais longo.
2.1 O erro de aplicar o momento errado
Um build-in dramático de dois segundos é excelente na abertura de um vídeo institucional e insuportável no arranque de uma aplicação que se abre quarenta vezes por dia. A pergunta que decide não é "fica bonito?" — é "quantas vezes é que esta pessoa vai ver isto?"
| Vezes que se vê | Duração aceitável | Momento adequado |
|---|---|---|
| Uma vez (campanha, evento) | 2–3 s | Build-in completo, com narrativa |
| Ocasional (vídeo, apresentação) | 1–2 s | Build-in reduzido + assinatura |
| Frequente (abrir a aplicação) | 300–600 ms | Transição, quase sem build-in |
| Contínuo (carregamento) | Loop discreto | Idle, e só |
Escreva em uma frase o que deveria acontecer em cada um dos quatro momentos. Se não conseguir descrever, ainda não há sistema — há animações avulsas.
Capítulo 03 Núcleo
O movimento como significado, não como decoração
A pergunta certa não é "que animação fica bem?", é "o que é que esta marca faz, e como é que o movimento diz isso?".
3.1 Do atributo ao movimento
O movimento comunica antes de se perceber o que se está a ver, porque o sistema visual humano reage a movimento mais depressa do que reconhece formas. Isso torna-o um veículo eficaz de atributo — e um risco, porque comunica mesmo que você não tenha decidido o quê.
| Atributo da marca | Como se traduz em movimento |
|---|---|
| Precisão, engenharia | Curvas de aceleração simétricas, tempos exatos, sem oscilação no fim, elementos que encaixam. |
| Proximidade, humanidade | Ligeira oscilação, sobreposição de tempos entre elementos, imperfeição controlada. |
| Rapidez, eficiência | Entradas curtas, aceleração agressiva no início, sem preâmbulo. |
| Solidez, confiança | Movimento lento e contínuo, sem saltos, peso aparente. |
| Artesanal, feito à mão | Traço que se desenha, ritmo irregular, sensação de gesto. |
| Rigor institucional | Movimento mínimo: revelação sóbria, sem elasticidade. |
3.2 A curva como assinatura
A curva de aceleração — como algo ganha e perde velocidade — é o que dá personalidade ao movimento, muito mais que a duração. Um movimento que arranca devagar e trava suavemente lê-se como calmo; o mesmo percurso com arranque abrupto lê-se como urgente.
Defina duas ou três curvas e use-as em tudo. É o equivalente exato de definir uma paleta: ninguém repara conscientemente, e o conjunto passa a parecer da mesma família. É também o que torna o sistema utilizável por quem não é você.
3.3 O teste do sentido
Para cada movimento, responda: porque é que esta parte se move assim, e não de outra maneira? Se a resposta for "porque ficou bem", é decoração — e decoração não sobrevive à primeira revisão do cliente, como explica Apresentar e Defender Design, cap. 3. Se a resposta for "porque a marca é sobre encaixe e precisão, e as peças encaixam", tem um argumento.
Escolha os três atributos centrais da marca. Para cada um, descreva em uma frase como se traduziria em movimento. Depois verifique: os três são compatíveis entre si, ou pedem coisas contrárias?
Capítulo 04 Núcleo
Som: a metade que quase todos esquecem
Um logótipo sonoro de dois segundos pode ser mais reconhecível que o símbolo — e custa uma fração do que custa a identidade visual.
4.1 Porque o som é desproporcionadamente eficaz
O som tem três vantagens sobre a imagem que raramente são exploradas: funciona sem se olhar (rádio, podcast, ecrã de bolso no bolso), fixa-se com muito poucas repetições, e não compete por espaço — não ocupa área nenhuma no ecrã.
Uma marca sonora bem feita é frequentemente o ativo de identidade com melhor relação entre memorização e custo. E é também o mais fácil de fazer mal.
4.2 As regras práticas
- Curto: uma a três notas, entre meio segundo e dois. Mais que isso deixa de ser assinatura e passa a ser música.
- Reconhecível num telefone barato e em ambiente ruidoso — o que exclui gamas de frequência muito graves.
- Coerente com o movimento: o som deve marcar o mesmo momento que o visual resolve. Som e imagem a resolverem em instantes diferentes lê-se como erro técnico.
- Tolerável na décima vez. Aplique o teste da repetição antes de aprovar.
- Nunca autónomo por omissão: som que arranca sozinho num navegador é hostil, e frequentemente bloqueado.
Som tem direitos como imagem tem. Uma faixa de biblioteca com licença limitada usada como assinatura de marca é um problema à espera de acontecer, porque a assinatura é justamente o uso mais permanente e mais visível. Encomende original, ou verifique a licença para uso como marca — que é diferente de uso em vídeo.
Ouça dez vezes seguidas o som candidato. Continua tolerável? A maioria não passa neste teste, e é melhor descobrir antes.
Capítulo 05 Avançado
Formatos e entrega: onde a boa animação morre
Uma animação aprovada que chega ao programador em MP4 de 12 MB vai ser substituída por um GIF feio. A entrega é parte do design.
5.1 Os formatos, e para que servem
| Formato | Serve para | Cuidado |
|---|---|---|
| Lottie (JSON) | Interface e web: vetorial, leve, escala sem perda, permite controlo por código. | Nem todos os efeitos são suportados. Teste no destino, não no editor. |
| SVG animado (SMIL/CSS) | Animações simples de logótipo na web, sem biblioteca. | Suporte desigual entre navegadores para certas técnicas. |
| Vídeo (MP4/WebM) | Vídeo, transmissão, redes sociais. | Não escala, não é transparente por omissão, pesado. |
| GIF | Compatibilidade extrema e pouco mais. | Paleta limitada, pesado, sem controlo. Use só quando não houver alternativa. |
| Sequência de imagens | Produção de vídeo e cinema. | Muito pesado. Não é entregável para web. |
5.2 A entrega completa
- O ficheiro-fonte editável — sem ele, a próxima alteração é uma reconstrução.
- Cada momento em cada formato relevante, com nomes que dizem o que são.
- Versões por duração: a de 2 s, a de 1 s e a de 400 ms. Se não as der, alguém vai cortar a sua a meio.
- Fundo claro e fundo escuro.
- Uma imagem estática de recurso, para onde a animação não pode ir.
- As curvas e as durações documentadas, em números — não em adjetivos.
5.3 A acessibilidade não é opcional
Movimento amplo, paralaxe e rotação podem provocar náusea e desorientação em pessoas com sensibilidade vestibular — não é uma questão de preferência. Os sistemas operativos expõem essa preferência, e a web permite lê-la com prefers-reduced-motion.
Toda a animação de marca deve ter uma alternativa reduzida: um aparecimento suave em vez do build-in completo. E há um limite absoluto — nada que pisque mais de três vezes por segundo, pelo risco de convulsão. Ver Acessibilidade Digital & WCAG.
Liste o que entregou da última animação de marca. Falta algum dos seis itens de 5.2? O mais esquecido é a versão de 400 ms — e é por isso que alguém acaba por cortar a sua.
Capítulo 06 Avançado
Documentar movimento nas guidelines
Movimento descrito com adjetivos não é documentação. Ou está em números, ou cada pessoa vai fazer diferente.
6.1 O que uma guideline de movimento tem de ter
| Item | Como se escreve |
|---|---|
| Durações | Em milissegundos, por momento. "Build-in: 1200 ms. Transição: 400 ms." |
| Curvas | Em valores utilizáveis — cubic-bezier(.2,.8,.2,1) — e não "suave". |
| Ordem e desfasamento | "Os três elementos entram com 80 ms de intervalo, de fora para dentro." |
| O que nunca acontece | A lista de proibições. Costuma ser a parte mais útil do documento. |
| Alternativa reduzida | O que acontece com prefers-reduced-motion. |
| Exemplos gravados | Certo e errado, lado a lado. Vale mais que a descrição. |
6.2 A lista de proibições
Numa guideline de movimento, dizer o que não se faz é mais eficaz do que descrever o ideal — porque as pessoas improvisam por analogia com o que viram noutro sítio. Uma lista típica: o símbolo não roda; não há elasticidade no fecho; o logótipo não se deforma; nada pisca; a assinatura não dura mais de 2 s; o som não toca sem ação do utilizador.
Entregue a guideline a alguém que não participou no projeto e peça que anime o logótipo só a partir dela. Se o resultado não se parecer com o seu, o documento está incompleto — e é melhor descobrir agora do que quando a agência de vídeo do cliente o fizer.
Pegue numa descrição de movimento que tenha escrito. Substitua cada adjetivo por um número ou por uma curva. Quantos sobraram sem tradução?
Capítulo 07 Demo · Método aplicado
Construir um build-in a partir do significado
Role devagar. Uma marca de logística com o atributo "encaixe" percorre o caminho do conceito à especificação.
Comece pelo que a marca diz, não pelo repertório
Uma empresa de logística regional, com o atributo central "tudo encaixa, nada se perde", e um símbolo feito de três formas que juntas compõem uma seta. A pergunta que produz trabalho decorativo é "que animação fica bem?". A que produz identidade é "como é que o movimento diz encaixe?".
Deixe a metáfora eliminar opções
Encaixar implica peças que chegam separadas, de direções diferentes, e assentam com precisão. Implica sobretudo uma coisa pela negativa: nada oscila no fim — porque oscilação lê-se como folga, e folga é o contrário de encaixe. Uma metáfora bem escolhida corta metade das opções técnicas antes de se abrir o programa, e é isso que a torna útil.
Traduza a metáfora em números
"Assentar com precisão" significa acelerar depressa, desacelerar longamente e parar exatamente — uma curva como cubic-bezier(.2,.8,.2,1). E significa excluir explicitamente as curvas com ressalto e os efeitos elásticos, por muito satisfatórios que sejam noutro contexto. Esta curva é agora um ativo de marca, e vai reaparecer nos botões, nas transições e no idle.
Desfasar para se ler sequência
As três peças entram com 80 ms de intervalo, 500 ms cada, num total de 660 ms. O desfasamento é o que faz ler "uma a uma a encaixar" em vez de "três coisas a aparecer". E o som — um clique seco — marca o instante em que a última peça assenta, não antes: som e imagem a resolverem em instantes diferentes lê-se como avaria técnica, mesmo quando ninguém sabe explicar porquê.
De uma peça a quatro momentos
A mesma decisão gera o sistema todo: o build-in completo de 660 ms, a versão curta de 400 ms com só a última peça, a transição de 300 ms da seta para o ícone, e um idle em que as peças respiram 2% em ciclos de 4 s. Mais a alternativa reduzida para quem a pediu, e a lista de proibições. Tudo isto sai de uma frase do briefing — e é por isso que se começa por ela.
Faça o mesmo para uma marca com que trabalhe. Atenção ao passo 2: o que é que a metáfora exclui? A lista do que não fazer costuma ser mais reveladora que a do que fazer.
Capítulo 08 Avançado
Onde a marca se move — e onde não deve
Nem todo o sítio quer animação. Saber onde não pôr é tão parte do sistema como saber onde pôr.
| Contexto | Movimento | Porquê |
|---|---|---|
| Abertura de vídeo institucional | Build-in completo | Vê-se uma vez, há tempo e atenção. |
| Fecho de vídeo | Assinatura + som | É onde a memória fixa. |
| Arranque de aplicação | Transição curta | Vê-se dezenas de vezes por dia. Cada 100 ms extra é atrito. |
| Ecrã de carregamento | Idle discreto | Ver 30 s do mesmo ciclo exige que seja ignorável. |
| Cabeçalho de site | Nenhum, ou uma vez à entrada | Um logótipo que se mexe enquanto se lê é hostil. |
| Assinatura de email, documentos | Nenhum | Estático. Não há contexto para movimento. |
| Ecrãs em espaço público | Loop longo e lento | Vê-se de longe, de relance e repetidamente. |
| Redes sociais, vídeo curto | Assinatura de 400 ms | A atenção é curtíssima; o formato pune preâmbulos. |
| Publicidade paga em vídeo | Marca cedo, não só no fim | Muitos anúncios são saltados antes do fecho. |
Movimento consome atenção que estava a ser usada noutra coisa. Num vídeo, essa atenção estava disponível. Num formulário, estava a ser usada — e tirá-la não é apresentar a marca, é atrapalhar. Quanto mais frequente o contexto, mais curto e mais discreto o movimento, até ao ponto em que a resposta certa é não haver nenhum.
Liste os dez sítios onde a marca aparece. Para cada um, decida qual dos quatro momentos se aplica — ou nenhum. Os "nenhum" são metade do valor do documento.
Capítulo 09 Muito avançado
O que não muda
As ferramentas de animação mudam. Estas restrições vêm da perceção humana e da atenção, e não mudam.
| Constante | Porquê |
|---|---|
| O movimento é notado antes da forma | O sistema visual deteta movimento mais depressa do que reconhece objetos. Por isso comunica mesmo quando não foi decidido. |
| A repetição transforma encanto em irritação | O que impressiona à primeira incomoda à quinquagésima. É por isso que a frequência decide a duração. |
| Consistência é o que produz reconhecimento | Uma marca é lembrada por ser sempre igual. Vale para o movimento como vale para a cor. |
| A curva importa mais que a duração | É onde está a personalidade. Duas animações do mesmo tempo com curvas diferentes lêem-se como marcas diferentes. |
| Som fixa-se mais depressa que imagem | E funciona sem se olhar. É o ativo mais subaproveitado. |
| Movimento pode adoecer pessoas | Sensibilidade vestibular e fotossensibilidade são físicas. A alternativa reduzida não é cortesia. |
| O estático continua a ser a maioria | Papel, fachada, bordado, gravação. Um logótipo que só funciona a mexer não é um logótipo. |
O movimento é a última camada, nunca a primeira. Se o símbolo parado não funciona, animá-lo não resolve — distrai de um problema que continua lá. Ver Logótipos & Lettering: a forma primeiro, a cor depois, o movimento por último.
Capítulo 10 Estudo
Oito casos
Os oito problemas típicos. Repare que quase nenhum é de execução — quase todos são de sistema ou de contexto.
O build-in que se vê quarenta vezes por dia
Frequência · Muito comumUma animação de dois segundos, aprovada num vídeo, foi reaproveitada no arranque da aplicação.
Cada agência anima de maneira diferente
Sistema · CorrosivoTrês fornecedores produziram três movimentos distintos para o mesmo logótipo. Nenhum está errado; juntos destroem o reconhecimento.
O logótipo que se mexe enquanto se lê
Atenção · HostilAnimação em loop no cabeçalho de um site, ao lado do conteúdo.
A animação que não sobrevive à entrega
Técnico · FrequenteAprovada em vídeo pesado, o programador precisa dela na web e substitui por um GIF de má qualidade.
Ninguém pensou em quem não pode ver movimento
Acessibilidade · SérioO sistema não tem alternativa reduzida, e há paralaxe amplo na abertura.
O som que toca sozinho
Contexto · IrritanteA assinatura sonora dispara ao carregar a página.
A elasticidade que contradiz a marca
Significado · SubtilUm banco adotou um movimento com ressalto elástico, porque estava na moda.
O logótipo que só funciona a mexer
Fundamento · GraveA identidade foi concebida a partir da animação, e a versão parada é fraca.
Marque os que já viu. Para cada um, identifique em que capítulo estava a prevenção.
Capítulo 11 Prática
Como produzir, na prática
O caminho de produção, sem depender de uma ferramenta específica — porque essas mudam.
11.1 O percurso
- Atributo → metáfora. Uma frase. É o passo que decide tudo (cap. 7).
- Storyboard em três quadros: início, meio, fim. Em papel chega, e poupa horas.
- Bloqueio de tempo — decidir durações e desfasamentos antes de refinar. Números primeiro.
- Refinamento das curvas. É aqui que a personalidade aparece; deixe tempo para isto.
- Som, sincronizado com o instante de resolução.
- Teste de repetição: veja dez vezes seguidas. Depois mostre a alguém que não participou.
- Versões por duração e contexto (cap. 8).
- Exportação e alternativa reduzida.
- Documentação em números e o teste do terceiro (cap. 6.2).
11.2 Ferramentas, sem religião
Animação vetorial em ferramenta de motion com exportação para Lottie cobre a maior parte dos casos de interface e web; ferramentas de vídeo cobrem produção audiovisual; para animações simples, CSS e SVG dispensam qualquer biblioteca — ver CSS Avançado: Animações & SVG. A escolha importa muito menos que a especificação: uma animação bem especificada refaz-se em qualquer ferramenta; uma mal especificada não se reproduz nem na mesma.
Desenhe em papel o início, o meio e o fim do build-in da sua marca. Se não conseguir desenhar os três, ainda não há ideia — há vontade de animar.
Capítulo 12 Prática · Plano
Plano de 30 dias
Um sistema de movimento não é um vídeo bonito: é um conjunto de números que outra pessoa consegue seguir.
12.1 Plano de treino — 30 dias
| Semana | Foco | Entregável |
|---|---|---|
| 1 — Conceito | Caps. 1–3: escrever os quatro momentos da marca; traduzir três atributos em movimento; escolher duas curvas. | 1 página de conceito + 2 curvas definidas |
| 2 — Construir | Caps. 7, 11: percorrer os cinco passos; storyboard em três quadros; produzir o build-in. | 1 build-in completo |
| 3 — Sistema e som | Caps. 4, 8: derivar as versões por duração e contexto; testar som com o teste da décima vez. | 4 momentos + mapa de contextos |
| 4 — Entregar | Caps. 5–6: pacote completo, alternativa reduzida, guidelines em números; fazer o teste do terceiro. | Pacote + guideline validada por outra pessoa |
12.2 O essencial em seis linhas
- O movimento vem do significado, não do repertório de efeitos.
- A frequência decide a duração. Quanto mais se vê, mais curto.
- A curva é a assinatura. Defina duas ou três e use-as em tudo.
- O som resolve no mesmo instante que a imagem.
- Documente em números e valide com o teste do terceiro.
- Alternativa reduzida sempre, e nada pisca mais de três vezes por segundo.
12.3 Onde continuar
- Fundamento: "The Illusion of Life: Disney Animation" (Frank Thomas & Ollie Johnston), de onde vêm os princípios de temporização e antecipação que ainda organizam o campo · "Designing Interface Animation" (Val Head), sobre movimento com função
- Nesta casa: Motion de Interface (o movimento ao serviço da tarefa) · Logótipos & Lettering (o ativo que se vai animar) · Branding · CSS Avançado: Animações & SVG · Acessibilidade Digital & WCAG · IA de Voz e Áudio (produção sonora) · Apresentar e Defender Design
Entregue a sua guideline de movimento a alguém que não trabalhou no projeto e peça que anime o logótipo só a partir dela. Compare com o seu. A distância entre os dois é exatamente o que falta ao documento — e é a única forma honesta de o avaliar.