R

ESO
LVAO
D
ESI
GN
D
S
E
MO
O
U
T
Se
I
mq
O
N
u
er
erp
ul
arp
el
aja
nel
a

7P
ASS
OS
DOR E SOFRIMENTO
No Latim: Fazer layout para cenas de motion”
Em grego: Design mal feito e mal pensado
Em Tupi: Animador virando a noite

Se tem uma coisa que mudou a minha

vida como motion design foi a habilidade
de resolver problemas. O mais recorrente
dos problemas que eu encontrei ao longo
dessa minha jornada foi o motion
designer que não conseguia criar
um bom layout design.

Um layout ruim é mais ou menos

como um keyframe ruim. Por mais bem
animado que seu projeto esteja, ainda
não vai car aquela coca-cola toda.

Por isso eu criei aqui esse pequeno pdf

que vai te ajudar a dar um tapa no seu
design e te tirar do sufoco que é não saber
como resolver o seu layout.

Bom apetite,
Daniel Felipe.

3
fi





 Cardápio
I. Introdução 6

II. Teórico e maneiro 13

Contraste 19
Contraste entre Formas 20
Contraste entre Cores 21
Temperatura 22
Luminosidade 23
Saturação 24

Peso Visual 26
Cultura Visual 26
Peso Grá co 28

III. Mão na massa 31

1. Parta do simples 32
2. Unidade 33
3. Deixe respiro 34
4. Peso Visual 36
5. Hierarquia 38
6. Contraste 40
7. Alinhamento 44
Bonus 46

4
fi
 Esse pdf é dividido em

Duas partes
1
Uma teoria de leve,
um feijão com arroz beeeem
temperadinho, que dá até
vontade de comer de novo.

2 Hora dos macetes:

Veja como resolver o seu
problema, ou pelo menos te
colocar na direção certa pra
resolver seu layout.

Tá compreguiça ou sem tempo,

pula direto pro 2.



I. Introduçãozinha

O design
do seu design

O motion designer geralmente

vem um mix de áreas distintas,
e pode não ter um conhecimento
consolidado sobre design.

Na verdade raramente tem,

a menos que tenha vindo de uma outra
área, tipo design grá co. Na verdade isso
não é ruim, na verdade eu considero isso
como muito bom.

Existem pontos fortes de conseguir trazer

suas essências e sabores para a área do
motion. E aí o que acontece é que no geral
a galera aprende a fazer animação antes de
aprender design, ou foi aprendendo a fazer
design ao longo do percurso.

I. INTRODUÇÃOZINHA 7

fi

 Costuma resolver o problema

se baseando em referências, o que vai
alimentando a chamada cultura visual,
o que tende a solucionar esse pavor
de fazer layout no longo prazo.

Mas pra aquele job ali mais imediato,

ca muito complicado, porque o deadline
corda vai apertando no pescoço.

Não sabe as teorias por trás daquela

composição e o motivo daquilo estar bom
ou estar ruim, então raramente consegue
gerar outra composição baseada em uma
composição já feita.  Até consegue sentir
que aquela composição ali funcionou,
mas não faz a menor ideia do porque
nem como funcionou.

I. INTRODUÇÃOZINHA 8


fi

Não é incomum que o motion designer

repasse para outro designer essas etapas
de criação de layout, principalmente
quando se fala em composição.

Composição em geral é um dos terrores

do motion design. Isso no geral torna o
processo mais caro ou menos rentável.
Não é regra, mas é uma questão
matemática. Se você não consegue
resolver aquela etapa do processo,
você vai precisar fragmentar a grana
do projeto para mais destinos, então quase
que inevitavelmente ou a gente tem que
cobrar a mais ou recebe menos. 

I. INTRODUÇÃOZINHA 9

Além de bonito, por mais óbvio que seja

dizer isso, o design para animação precisa
ser animável. A animação também tem
seus princípios, suas particularidades,
seus desa os, e como lhe dar
com esse eterno BO.

Nada pior do que aquela alteração que

NÃO FAZ O MENOOOOOR SENTIDO,
e poderia ter sido evitada facilmente
se o design tivesse sido pensado
para a animação.

Verdade seja dita: Nem todo mundo sabe

fazer um design para ser animado.
Fazer uma animação de um design
que não foi feito para ser animado trás
frustração, porque você não vai conseguir
fazer a animação que deseja, e isso nem é
um problema técnico seu, é uma limitação
do design da peça em si.
É preciso um conhecimento especí co,
e geralmente o animador já tem esse
conhecimento.

I. INTRODUÇÃOZINHA 10
fi

fi

Tá ai uma grande di culdade: fazer um

design seja bonito o animável, como se
fosse juntar o macarrão e o queijo ralado. 

Uma das principais dores do público,

leia-se "quem te contratou", é que motion
design é caro. Não dá pra encher um
estádio de futebol com bons animadores.
Nós somos raros, raríssimos, apesar de
sermos os peões do canteiro de obras.

Então o mercado busca generalistas,

e o motion designer é contratado, a priori,
para resolver as duas funções: o motion
e o designer. Se você, caro companheiro,
não consegue resolver as duas coisas,
então eu tenho algo triste pra te dizer:
Ou você é animador ou é designer. 

É mais ou menos a relação entre

o entregador, a caixa e a pizza:

Não dá pra entregar a pizza sem a caixa

e não dá pra entregar a caixa sem a pizza.

I. INTRODUÇÃOZINHA 11
fi

Com outras palavras, o motion designer

é uma junção de dois pro ssionais,
o animador e o designer.
Claro que cada pro ssional
individualmente vai aderindo
ao que mais gosta, mas existe
um campo básico de design
e de animação que é de muito
bom tom que você domine.
Digo mais: isso dá dinheiro. 

O design precisa funcionar para

animação. Precisa ser legal de animar. 

A animação tem os seus conceitos

próprios e uma peça quando é
desenvolvida precisa ser pensada
levando em conta as características da
animação. O design precisa casar com o
conceito de animação. Tudo faz parte de
uma dança, um conjunto, uma conversa,
um jantar, um ritmo gostoso. 

Pensa em comida: design tem que ter

cheiro, textura e sabor.

I. INTRODUÇÃOZINHA 12
fi


fi

II. Teórico e maneiro

Design é design
o que muda é o
substrato.
Pedro Filho, UX designer
que também faz uns motion

13

Tanto no design grá co quanto no motion,

na culinária, moda, arquitetura, fotogra a,
e todos os outros campos criatívos, todos
eles estão interligados por princípios.
Os princípios são se fosse uma cola invisível
que faz a coisa ter uma consistência,
um sabor.

MALUMA
TAQUETE
Se palavras aleatórias "maluma" e "taquete"
fossem comida, qual seria o sabor e a forma?
Das pessoas que eu perguntei, 90% disseram
que maluma é doce e redondo. Taquete é
salgado e mais pontudo, tipo um risolhe.
Mas pourquoi? De onde veio isso?

(Pesquisa por taquete no Google.

Pra mim imagem de coisa pontuda.)

II. TEÓRICO E MANEIRO 14

fi





fi



O que faz o mundo ser mundo são
as diferentes combinações de elementos
que se contrastam o tempo todo.

Nosso cérebro percebe isso desde sempre.

Sempre, sempre, sempre.

O Sol é uma bola, o mar faz uma reta.

Um corta o outro.

A fruta é redonda, mas o galho é reto.

A árvore é reta e a copa é redonda. 
Nós vemos design o tempo todo.

Contraste o tempo todo em todosos lugares.

O doce e o salgado, preto e branco, azul e
vermelho, gordo e magro, tudo misturado.  
O nosso cérebro interpreta isso e acha
agradável porque já está acostumado
com padrões. 

II. Teórico
TEÓRICO eE maneiro
MANEIRO 15

Aqui está uma das chaves: A maioria

dos padrões está ligada à sobrevivência
da espécie. 

A placa de “pare" é vermelha.

A sirene é vermelha, o alerta é vermelho.
Portanto a cor do som do alerta é vermelha
O sangue vermelho. O fogo é vermelho.
O vermelho é a onda de cor mais rápid
e geralmente é mais fácil de enxergar
Vermelho é presença.

Consegue sentir?
Pensar o design a partir da vida, da
sobrevivência, e nesse caminho vamos
encontrando os motivos e os porquês
do design funcionar ou não.

II. TEÓRICO E MANEIRO 16

E eu acho que é disso que se trata:

trazer sabor para um vídeo, cheiro para
uma música, som para um prato de
comida, cor para um perfume.

Confundiu mais ainda?

Calma que a gente vai chegar lá.

O que faz um bolo car bom?

Uma combinação de elementos
diferentes na medida certa.

O que faz uma musica car boa?

Mesma coisa, mas com o espaço certo
entre sons e silêncio. Silêncio faz parte.

Matou a charada?Não?!
É simples. Contraste é tudo.
Claro que tem mil coisas e detalhes
a se pensar, mas pra resolver nosso
problema de layout vamos car
com essa: Contraste é tudo.

II. TEÓRICO E MANEIRO 17

fi
fi

fi

 Esses princípios que fazem os campos

criativos terem uma conexão estão
agrupados em um negócio muito legal
chamado Gestalt.

Gestalt é basicamente como o nosso

cérebro tende a reconhecer esses padrões
que eu mencionei. Tipo: Num parece que o
carro tem um rosto? Num parece que a
nuvem parece um monte de coisa? É isso.

A gente enxerga padrões. Dá pra falar

sobre Gestalt durante meses, mas não
tempo pra isso. Pra resolver nosso
problema, vamos falar aqui sobre
só 2 elementos da Gestalt:

Contraste
e Peso Visual
Cabou, simples assim :)

II. TEÓRICO E MANEIRO 18




 II. Teórico e maneiro

Contraste
Coisas que se diferenciam.
Doce e salgado. Reta e curva,
quadrado e redondo, muito e pouco. 

Utilizar contraste é FUNDAMENTAL

para que o seu design que bom.

Dentro de contraste, nós vamos encontrar

o contraste entre formas e cores. 

II. TEÓRICO E MANEIRO | CONTRASTE 19



fi

Contraste entre formas

Contraste entre formas é replicar

o que a natureza costuma fazer.

Combinar uma reta contra curva.

Muita informação aqui e pouca ali.

Simples

Complex

Curva Reta

Pouca
informação

Muita
Informação

Pensa num jacaré:

O jacaré tem pontas nas costas e a barriga lisa.
A natureza sabe o que tá fazendo. Se a gente
copiar dela ca mais fácil de acertar. 

II. TEÓRICO E MANEIRO | CONTRASTE 20

fi





 Contraste entre Cores

Para as cores, o assunto é necessariamente

um pouquinho mais fundo.

A cor é uma questão física.

Cores são ondas de luz que percorrem
o espaço em velocidades diferentes,
batem nos objetos e re etem nos nossos
olhos uma frequência de onda que faz
a gente enxergar uma cor especí ca.
Sem luz não há cor.
Essa frase é importante. Guarda isso.

Vamos dividir em 3 partes

pra car didático:

Temperatura

Luminosidade

Saturação

II. TEÓRICO E MANEIRO | CONTRASTE 21

fi

fl



fi

 Contraste entre Cores

Temperatura

Contraste de temperatura
( ou da cor em si, aquele HUE
lá do photoshop) é entender
que as cores se atraem e se
repelem. Uma combina com
a outra, e a quantidade das
cores faz diferença.

É como comer macarrão:

Não dá comer um prato de macarrão com
1kg de queijo ralado. Não faz sentido.

Nesse momento não vamos focar nas cores.

Mas saiba que elas são importantes para
equilibrar o seu layout. 
 

II. TEÓRICO E MANEIRO | CONTRASTE 22

Contraste entre Cores

Luminosidade

Luminosidade (ou value)

é a quantidade de luz que
aquela cor possui.

Se a gente coloca o preto na frente de um

amarelo, o preto vai ser bem legível porque
o contraste de luminosidade entre os dois
vai fazer nosso cérebro reconhecera
diferença entre as cores. 

Já se você coloca um amarelo escrito sobre

um fundo branco, não vai ser fácil de ver. 
A luminosidade do amarelo está muito
perto da luminosidade do branco
(que é a luz máxima), e essa falta de
contraste faz com que o nosso cérebro não
consiga reconhecer essa diferença tão fácil.

Amarelo Amarelo

II. TEÓRICO E MANEIRO | CONTRASTE 23

Contraste entre Cores

Luminosidade
Inclusive nos podemos ter duas cores
com o HUE distinto, mas que são cores
que tem a mesma luminosidade.
Também podemos dizer que essas
cores correspondem ao mesmo cinza.

A cor é diferente,
mas a saturação e
a luminosidade é
a mesma.

Esse contraste garante que os elementos

da sua composição não vão desaparecer,
e foi assim que eu z a capa.

II. TEÓRICO E MANEIRO | CONTRASTE 24

fi

Contraste entre Cores

Saturação

Já viu quando um vermelho está morto,

meio sem vida. Então, É que falta vermelho
no vermelho.

Explico: Saturação é a força da cor.

Entre um cinza completo e um vermelho
fortão, existem várias possibilidades de
tons de vermelho. É isso.
Mesmo sendo tudo só vermelho, se você
coloca um vermelho com baixa saturação
e um vermelho com alta saturação,
esse contraste já vai fazer você achar essa
composição mais agradável .

Mesmo value, mesmo HUE,

Com saturação diferente

II. TEÓRICO E MANEIRO | CONTRASTE 25

II. Teórico e maneiro

Peso Visual
Cultura visual

Cultura visual todo mundo tem. Uns tem

mais outros menos, mas todo mundo tem.
Cultura visual é a quantidade de temperos
e cheiros que você vai conhecendo dentro
do design. Ai você começa a misturar esses
vários sabores que você encontrou ao
longo da vida e vai dando origem a novos
sabores.

Por exemplo, a repetição é um tempero

para criar uma unidade forte. Unidade e
repetição não são a mesma coisa e não é
copiar e colar. É saber adaptar e explorar
uma base, de modo que o todo faça parte
de uma mesma família. E isso vai funcionar
para qualquer formato: Seja no vídeo ou na
lasanha. 

II. TEÓRICO E MANEIRO | PESO VISUAL 26

 O conteúdo pode pedir algo mais estável e

tradicional. Já outro pode pedir um design
mais agressivo, mais desconstruído.
Depende do que o seu público quer
consumir. É doce ou é salgado? É um vídeo
para um hospital onde tudo é calmo ou é
um lyric vídeo de um pop?

O cultivo da tua cultura visual vai te levar a

desfrutar de novas experiências.
Saber discernir o que é mais adequado para
cada momento vai facilitar tua vida,
te garanto.

II. TEÓRICO E MANEIRO | PESO VISUAL 27









Peso Grá co
O que pesa mais, 1kg de algodão ou 1kg de
ferro? Obviamente o peso é o mesmo, 1kg,
mas o volume é diferente.  É preciso muito
mais volume de algodão d que de ferro para
chegar à 1kg. Com design é a mesma coisa.

Nós fomos programados para sobreviver.

A nossa tendência é car no plano, no reto,
no calmo, no previsível.

A nossa cama é plana. Lugar de conforto é

plano. No plano, as coisas tendem a estar
equilibradas, mesmo que em volumes
diferentes.

II. TEÓRICO E MANEIRO | PESO VISUAL 28

fi
fi

Na verdade, O ideal é que o volume dos

elementos dentro do nosso layout seja
diferente, seja contrastante (olha o tal do
contraste aqui de novo).

A parte mais importante do peso

visual é a hierarquia. 
Quem é que manda em quem? Não sabe?
Então provavelmente teu layout tá ruim.
Deixe nítido quem é o mais importante. Isso
faz direcionar o olhar de quem está vendo
teu vídeo. Hierarquia também é contraste.

Veja só como mesmo um

conjuntivo de blocos, já
temos a nítida impressão de
"quem manda em quem”.

II. TEÓRICO E MANEIRO | PESO VISUAL 29

Vou dizer aqui uma coisa óbvia:

Se tudo é grande, nada é grande.

Se tudo é pequeno, nada é pequeno,
se tudo tem destaque, nada tem destaque.
Se tudo é importante, nada é importante. 

Não é um poema, é questão de lógica.

Pensa em comida: Pizza de chocolate,
Cobertura de chocolate com brigadeiro
e chocolate como bebida e uma barra
de chocolate como tira gosto.
Resumindo, você só comeu chocolate.

Contraste e peso são essenciais.

Se o layout está ruim, provavelmente teu
contraste não está funcionando
ou teus pesos estão nas proporções erradas. 

Tá, mas e na prática, como eu faço?

Vamos lá resolver esse problema. 

II. TEÓRICO E MANEIRO | PESO VISUAL 30

III. Prática

Mão
na massa!
Veja na prática
como resolver o
layout do seu design

31

 1 Parta do simples!
Simpli que tudo. Absolutamente tudo. 
O logo é redondo? ele vira uma bolinha.
A frase é retangular? Vira um retângulo. 

Faca seus blocos e veja como não pensar

em detalhes nessa fase torna tudo mais fácil.

Tudo preto e branco. Nada de cores,

não queremos perder tempo aqui. É pá-pum.
Se possível, nem use software: vai no post-it
que torna a vida mais fácil. 

III. MÃO NA MASSA 32

fi

 2 Unidade
Teus layout são como pratos que fazem
parte de um mesmo cardápio. Eles precisam
combinar e parecer compor um único todo. 

Um macete é depois que você pensar

o teu layout é ver se só com os blocos
os elementos estão fazendo sentido,
se tudo parece ser da mesma família.  

III. MÃO NA MASSA 33

 3 Deixe respiro
Se você chega numa loja e tem mil pares de
sapatos numa vitrine, provavelmente
aqueles sapatos não são de luxo. Não tem
importância su ciente para estar sozinhos. 

Agora se tem 1 sapato apenas, numa vitrine

exclusiva só para aquele sapato, signi ca
que aquele sapato, ou aquela informação
visual, aquela peça de design, é importante
o su ciente para ter uma vitrine só pra ela. 

Veja aqui o respiro Pesos Visuais*

Ainda vai ser explicado

III. MÃO NA MASSA 34

fi

fi
fi

Já reparou como geralmente quanto mais

chique o restaurante mais espaço vazio vem
no prato que você pede?
Não é a quantidade, é a importância.

Com design é a mesma coisa. 

Veja essas páginas. 

Essa aqui tá todo preenchida.

Parece aqueles power points
institucionais chatos e sem graça. 
Tanta informação que dá preguiça
de ler. Aliás, nem deve ser tão
importante assim. 
Só de olhar me dá nervoso.

Agora olha essa pagina:

Em teoria essa página foi muito mais
cara para produzir. Um monte espaço
em branco, e só essa frase no centro.
Essa página é cara, e essa frase
ai vale a pena ser lida.
Design de luxo.

III. MÃO NA MASSA 35











 4 Peso Visual
Seu design precisa ser agradável,
independentemente da temática.
E é importante por os seus pesos bem
distribuídos, pois geralmente o olhar vai
para onde o peso está. Equilíbrio
assimétrico é um bom termo para se
aprender.  Geralmente blocar uma coisa
grande de um lado e um conjunto de coisas
pequenas do outro lado funciona. 
É como ter de um lado 10 kg e do outro
cinco pesos de 2kg.

III. MÃO NA MASSA 36

O teu layout é o teu keyframe visual.

Uma boa animação é composta de bons
keyframes em bons timmeings.

Reequilibre sempre.
Adicionou elementos? Reequilibre.
Tirou elemento? Reequilibre.

III. MÃO NA MASSA 37

 5 Hierarquia
O seu design deve passar clareza na hora
de se comunicar. De na pra onde o olhar
do seu público vai ser direcionado primeiro.

Funciona exatamente
como no rigging.
Quem controla quem.

Sem a coxa não,

há joelho, sem joelho não
tem tornozelo, e por ai vai.

Pensa teu layout assim

que vai facilitar a tua vida.

Geralmente coisas grandes mandam

em coisas menores. Assim que
funciona na árvore, no corpo humano,
na gravidade, e por ai vai.

III. MÃO NA MASSA 38

fi



 Quando se fala de motion, quem guia
o olhar é a animação. Mas o layout pode
e deve contribuir para um bom uxo
do entendimento do keyframe.

Direção
do olhar

A
B B2

C C2

Nesse exemplo, a ideia era que

esse layout casse agradável de ler.
O olhar vem lá do canto e o layout vai
fazendo o olho se movimentar levemente,
seguindo o uxo da hierarquia.

III. MÃO NA MASSA 39

fi
fl


fl







 6 Contraste
A grande chave que abre
as portas do castelo. 
O contraste vai fazer o seu design car mais
interessante.

Procure usar contraste entre a quantidade

de informações de um lado e de outro. 
Se de um lado o elemento é grande e
simples, do outro pode ter um elemento
pequeno e complexo que reequilibre o teu
layout. Não tem muito mistério. Pensa em
comida que dá certo. 

III. MÃO NA MASSA 40

fi

Como você pode ter pulado a parte

teórica, eu vou colocar aqui novamente
os exemplos que eu usei lá em cima.

Simples

Complex

Curva Reta

Pouca
informação

Muita
Informação

Você pode dar uma olhadinha

na parte teórica clicando aqui.

III. MÃO NA MASSA 41

Faz o possível pra se lembra de sempre

conferir o value do seu layout
Isso vai garantir que tudo esteva visível
mesmo em escala de cinzas. Faz muita
diferença no resultado nal do seu motion.

Para conferir o value, basta adicionar uma

camada branca/preta acima da sua comp
e mudar o blend para color.

III. MÃO NA MASSA 42

fi

Cores mais quentes geralmente

tem mais peso visual que cores mais frias.
Veja como mesmo menor, o vermelho tem
tanta presença quanto o bloco azul grande.

Tá na dúvida? Busca umas boas imaegns

de sapos exóticos. Veja como as cores são
distribuídas em insetos. Puxa a paleta
de cores da natureza.

Procure usar 80% de cor principal e 20% de

cor complementar. Não é regra, mas eu acho
um bom valor. Detalhe grande deixa de ser
detalhe.

Faça o possível pra ir desenvolvendo

o "feeling do layout maneiro".

III. MÃO NA MASSA 43

 7 Alinhamento
Coisas alinhadas e arrumadas
tem a ver com preço e valor. 

Eu duvido que uma loja que as roupas estão

todas jogadas custa o mesmo preço que
uma loja em que as roupas estão todas
dobradas e certinhas. Dá prazer entrar nesse
tipo de loja. 

Se você vai entregar um trabalho que está

torto, você vai passar a impressão que foi
feito sem cuidado. Vai parecer que  que foi
mal feito, sabe.

Não signi ca que você não possa fazer

algo torto de propósito.
Se faz parte da estética do teu vídeo,
ai é válido. Mesmo assim, o equilíbrio
visual precisa estar compatível com o teu
alinhamento.

III. MÃO NA MASSA 44

fi






Procure alinhar os elementos sempre

pensando em quem está lendo teu vídeo,
mesmo que seja só imagem sem textos. Se
algo é para car torto, deixe claro que é
proposital, que foi pensado para ser torto. 

Há uma coisa chamada zona fria e nova

quente da imagem. Ponha o que você quer
que tenha destaque na zona quente.

III. MÃO NA MASSA 45

fi

 BÔNUS
8
Roube muito,

Pega um vídeos bem feitos,

escolhe um frame massa e faz uns blocos
por cima. Tenta entender por que aqueles
elementos estão posicionados onde estão.

Replica isso no seu vídeo.

Ao longo do tempo isso vai te dar paladar
visual pra encontrar e replicar essas
descobertas na hora de solucionar
seus projetos. 

III. MÃO NA MASSA 46

Dava pra falar muuuuuito mais coisa,

mas acho que esse conteúdo já vai
diminuir a tua dor na hora de fazer o
design do teu motion. Lembrando que
estou falando de design, não de arte.
Arte é outro bicho.

Espero que tenha te ajudado.

Se não entendeu alguma coisa,
Me segue lá no Insta e me manda
um DM que a gente troca ideia.

danielfelipeolive
Daniel Felipe | animador

@DANIELFELIPEOLIVE

Bom render pra vc!

Valeu :)

47

 Agradecimentos
Um salve mais que especial a essa galera
que me ajudou com as pesquisas
e com aquele apoio moral massa.

@arianepereirao cial

@barcelossamuel

@celso.ricardo.designer

@Ivsonivsonaguiar86

@pedrodesigner

@Italoboquimpani

48
fi