Live1

Fundamentos essenciais
para um design atrativo

@nicholasbarcelos
Live1 1. Princípios do Design
2. Cores
3. Tipografia

@nicholasbarcelos
 • Alinhamento
Princípios • Contraste
• Proximidade
do Design • Repetição

@nicholasbarcelos
 Alinhamento

5 DICAS DE COMO
5 DICAS DE CUIDAR DO SEU PET
COMO CUIDAR 5 DICAS DE
Melhores dicas para cuidar do
COMO CUIDAR
DO SEU PET seu melhor amigo!
DO SEU PET

Melhores dicas Melhores dicas

para cuidar do seu para cuidar do seu
melhor amigo!
melhor amigo!

Arrasta pro lado

Arrasta pro lado
Arrasta pro lado

À esquerda Central À direita

@nicholasbarcelos
 DE CORES

Con 5 DICAS DE 5 DICAS DE

traste COMO CUIDAR COMO CUIDAR
DO SEU PET DO SEU PET

Melhores dicas Melhores dicas

• De cores
• De tamanho para cuidar do seu para cuidar do seu
• De texto melhor amigo! melhor amigo!

Arrasta pro lado Arrasta pro lado

@nicholasbarcelos
 DE TAMANHO

Con 5 DICAS DE 5 DICAS DE

traste COMO CUIDAR COMO CUIDAR
DO SEU PET DO SEU PET

Melhores dicas Melhores dicas

• De cores
• De tamanho para cuidar do seu para cuidar do seu
• De texto melhor amigo! melhor amigo!

Arrasta pro lado Arrasta pro lado

@nicholasbarcelos
 DE TEXTO

Con 5 DICAS DE
traste 5 dicas de como
cuidar do seu pet
COMO CUIDAR
DO SEU PET

melhores dicas Melhores dicas

• De cores
para cuidar do seu para cuidar do seu
• De tamanho
• De texto melhor amigo! melhor amigo!

arrasta pro lado Arrasta pro lado

@nicholasbarcelos
 Proximidade

1. Cuidados
1. Cuidados com os pelos
com os pelos Algumas dicas de como cuidar
da pelagem dos seus pets
Algumas dicas de como cuidar
da pelagem dos seus pets

Dê banhos semanais
Dê banhos semanais
Proteja do sol, mar, cloro
Proteja do sol, mar, cloro
Escove bem os pelos

Arrasta pro lado Escove bem os pelos

Arrasta pro lado

@nicholasbarcelos
Repe 1. Cuidados 1. Cuidados
com os pelos com os pelos
tição Algumas dicas de como cuidar Algumas dicas de como cuidar da
da pelagem dos seus pets pelagem dos seus pets

Escove bem os pelos

Proteja do sol, mar, cloro Proteja do sol, mar, cloro

Dê banhos semanais Dê banhos semanais

Arrasta pro lado Arrasta pro lado

@nicholasbarcelos
 • Psicologia das Cores
CORES • Harmonia cromática
• HSB
• 60–30–10

@nicholasbarcelos
CORES:

Psicologia
das cores

@nicholasbarcelos
CORES:

Psicologia das cores

Cada cor gera sensações

diferente nas pessoas.

Isso ocorre pois o nosso cérebro identifica

e entende as cores de diferentes Eu te amo
maneiras, influenciando em nossas
emoções, sentimentos e desejos. Por isso
a importância de saber como usá-las. Eu te odeio

As emoções podem ser positivas ou negativas,

dependendo do contexto que é inserida.

@nicholasbarcelos
Vermelho
Essa é a cor mais quente e mais paixão • calor • excitação • desejo
dinâmica, ligada a vontade de agir energia • velocidade • força • poder
e se movimentar.

sangue • guerra • raiva • perigo

Ela tem a capacidade de aumentar
a pressão sanguínea e o número de
batimentos cardíacos.

Nichos: Alimentação - Transporte/automóveis - Esporte - Academia/fitness

@nicholasbarcelos
Amarelo
Sabedoria • alegria • otimismo
É considerada a cor do otimismo e da relaxamento • imaginação • esperança
energia, segundo a psicologia das cores. claridade

É feliz, acolhedor e estimulante e tem a desonestidade • covardia • traição

capacidade de estimular a concentração
e o intelecto das pessoas. inveja • cobiça • engano • doença

Nichos: Eletricidade - Imobiliárias - Alimentação - Lazer - Infantil - Creches

@nicholasbarcelos
Laranja
Humor • energia • calor • extravagância
Ela também transmite a ideia de
movimento, excitação e ação. Mas, não entusiasmo • amigabilidade • equilíbrio
tanto quanto o vermelho. vibração • expansão

Traz a sensação de alegria e animação,

mas também é amigável e convidativa.
dominação • tentação • ofensa • agressão

Nichos: Aventura - Esporte - Alimentação - Alimentação saudável - Jovens

@nicholasbarcelos
Roxo/violeta
Criatividade • Sucesso • nobreza • riqueza •
Essa cor estimula a área do cérebro erotismo • mistério • sabedoria • sensibilidade
responsável pela criatividade, e intimidade • espiritualidade • sabedoria
resolução de problemas.
transformação

sentimentos de calmaria são associadas

a essa cor, e por esse motivo é muito Crueldade • arrogância • engano • miséria
relacionada à espiritualidade. violência • vaidade • imoralidade

Nichos: Tecnologia - Finanças - Vestuário - Moda

@nicholasbarcelos
Azul
Representa a ideia de calma, Lealdade • tranquilidade • harmonia
serenidade e confiança. confiança • limpeza • tecnologia
serenidade • estabilidade • sinceridade
Por esse motivo muito associado
para representar profissionalismo,
estabilidade e segurança.
Frio • frieza • depressão

Nichos: Companhias aéreas - Saúde - Advocacia - Finanças - Seguradoras - Tecnologia

@nicholasbarcelos
Verde
Perseverança • orgulho • boa sorte
Essa cor possui a capacidade de
juventude • generosidade • natureza • cura
acalmar e aliviar o stress. Além de
trazer equilíbrio e estabilidade. fertilidade • saudável

Muito associada com a saúde, a

vitalidade, a natureza e fertilidade. ciúme • inexperiência • inveja • imaturidade

Nichos: Natureza - Finanças - Investimentos - Alimentação Saudável - Imobiliárias

@nicholasbarcelos
Rosa
Psicologicamente rosa está Encanto • amabilidade • inocência • feminino
associada com a compaixão, suavidade • maciez • delicadeza • infância
carinho, amor e romance. charme • cortesia • doçura • doce

Acalma e tranquiliza as nossas Impulsividade • inibição • fraqueza física

energias emocionais, aliviando
sentimentos de raiva, agressividade.

Nichos: Produtos/serviços femininos - Infantil - Confeitaria/doces

@nicholasbarcelos
Branco
Ordem • simplicidade • pureza • verdade
É denominado como “cor pura”, sendo
capaz de transmitir a sensação de honestidade • perfeição • limpeza • otimismo
tranquilidade, limpeza e organização. inocência • paz • dignidade • harmonia • leveza

O branco é calmante, pois cria Vazio • ingenuidade

simplicidade, organização e eficiência
a partir do caos.

Nichos: Tecnologia - Saúde - Medicina - Odonto - Casamento

@nicholasbarcelos
Preto
Magia • mistério • noite • elegância,
O preto é a cor mais poderosa e neutra.
Tende a ser associada à elegância e força. credibilidade • objetividade • sofisticação

Fácil combinação com outras cores,

transmitindo ideias diversas, como Luto • azar • sujeira • egoísmo • culpa
modernidade, inovação, sofisticação, etc..

Nichos: Tecnologia - Moda - Joias - Luxo

@nicholasbarcelos
CORES:

Harmonia
Cromática

@nicholasbarcelos
CORES:

Harmonia Cromática

E o círculo cromático é uma

ferramenta que auxilia a visualizar
as melhores possibilidades de
combinações entre as cores.

@nicholasbarcelos
CORES:

Harmonia Cromática

Cores primárias:
amarelo, vermelho e azul.

@nicholasbarcelos
CORES:

Harmonia Cromática

Cores primárias:
amarelo, vermelho e azul.

Cores secundárias:
a mistura de duas cores primárias.

@nicholasbarcelos
CORES:

Harmonia Cromática

Cores primárias:
amarelo, vermelho e azul.

Cores secundárias:
a mistura de duas cores primárias.

Cores terciárias:
a mistura das cores primárias
com cores secundárias.

@nicholasbarcelos
CORES:

Harmonia Cromática

complementares São cores que estão em lados opostos uns aos

outros no círculo cromático.

E com essa combinação você tem os

contrastes mais vibrante do círculo cromático.

5 DICAS DE
COMO CUIDAR
DO SEU PET
Melhores dicas para cuidar
do seu melhor amigo!

@nicholasbarcelos
CORES:

Harmonia Cromática

Complementares Essa harmonia é a variação da complementar.

divididas Ela utiliza as análogas da cor complementar em
vez da complementar em si. Possui contraste
com suavidade.

5 DICAS DE
COMO CUIDAR
DO SEU PET
Melhores dicas para cuidar
do seu melhor amigo!

@nicholasbarcelos
CORES:

Harmonia Cromática

Complementares Essa harmonia é a variação da complementar.

divididas Ela utiliza as análogas da cor complementar em

vez da complementar em si. Possui contraste
com suavidade.

5 DICAS DE
COMO CUIDAR
DO SEU PET
Melhores dicas para cuidar
do seu melhor amigo!

@nicholasbarcelos
CORES:

Harmonia Cromática

Monocromia Harmonia que utiliza somente uma cor,

mudando apenas a saturação e o brilho da cor.

Combinação com pouco contraste, mas que

pode criar um efeito visual agradável.

5 DICAS DE
COMO CUIDAR
DO SEU PET
Melhores dicas para cuidar
do seu melhor amigo!

@nicholasbarcelos
CORES:
HSB

O que é?
HSB é a abreviatura para o

(S) SATURAÇÃO
sistema de cores formadas
pelas componentes hue

(B) BRILHO
(matiz), saturation (saturação)

(H) MATIZ
e brightness (Brilho).

@nicholasbarcelos
CORES:

60 - 30 - 10

O que é?
É uma regrinha da arquitetura
e design de interiores, que é
muito utilizada por designers 60%
de todas as áreas:

Conhecida como 60–30–10

onde 60% é a cor dominante,
30% é a cor secundária e 10% é 30%
para a cor de destaque.
10%

@nicholasbarcelos
 • Categorias de fontes
• Famílias de fontes
TIPOGRAFIA • Hierarquia
• Leading e Kerning
• Combinações de texto

@nicholasbarcelos
 Aa
TIPOGRAFIA:

CATEGORIAS
DE FONTES Aa
Aa @nicholasbarcelos
TIPOGRAFIA:

Categorias de Fontes

Fontes COM serifa

Tem um visual elegante, clássico e sofisticado.
Elas comunicam tradição, respeito e confiança.
NOVAS

Serif
Recomendadas pra títulos
LINHA DE
TERNOS
Arrasta pro lado
pra conhecer

não indicadas pra textos longos na web

@nicholasbarcelos
TIPOGRAFIA:

Categorias de Fontes

Fontes SEM serifa

Tem um visual simples, direto e objetivo.
Comunicam modernidade e clareza.

Sans Serif
MELHORES
GAMES
DO ANO
Recomendadas pra qualquer projeto digital.

@nicholasbarcelos
TIPOGRAFIA:

Categorias de Fontes

Fontes Manuscritas
Visual elegante, gracioso e criativo
Comunicam afeto, aconchego e conforto.

Script brinquedos
Recomendadas pra títulos e citações na web.

Atenção à legibilidade em textos longos.

@nicholasbarcelos
TIPOGRAFIA:

Famílias de Fontes

A grande maioria das fontes tem

estilos diferentes inseridos no
conjunto daquela fonte.
Montserrat
Chamados de famílias, essas Montserrat light
variações mudam principalmente
a espessura e a inclinação da fonte. Montserrat light
Como no exemplo ao lado, todas as
Montserrat italic
versões: light, regular, italic e bold. Montserrat bold
Fazem parte da família de estilos
da fonte Montserrat

@nicholasbarcelos
TIPOGRAFIA:

Hierarquia

A hierarquia consiste em
estruturar os textos de maneira
que o olhar do leitor siga um
caminho predeterminado.
TÍTULO
Subtítulo
Assim, os olhos são guiados Texto longo Texto longo Texto longo
primeiro para informações de Texto longo Texto longo Texto longo
destaque, e mais importantes, Texto longo Texto longo Texto longo
Texto longo Texto longo
seguindo para informações
secundárias e menos importantes.

@nicholasbarcelos
TIPOGRAFIA:

Leading e Kerning
LEADING
Lorem Ipsum is simply Lorem Ipsum is simply dummy text of
dummy text of the printing
and typesetting industry. the printing and typesetting industry.

Leading nada mais é do que o Lorem Ipsum has been the

industry's standard dummy Lorem Ipsum has been the industry's
espaço entre as linhas no texto text ever since the 1500s,
when an unknown printer standard dummy text ever since the
took a galley of type and
scrambled it to make a type 1500s, when an unknown printer took
specimen book.
a galley of type and scrambled it to
Já o Kerning, é o espaço entre as
make a type specimen book.
letras no texto.

KERNING KERNING

@nicholasbarcelos
TIPOGRAFIA:

Combinações de texto
TRABALHE O

Dicas para combinar os

Contraste
textos:

• Trabalhe com os contrastes espaço

nas fontes (espessura, estilo)

• Utilize o espaço em branco

que é criado nos textos

• Criar distorção no texto

pode ser interessante

• Teste mudar o kerning de

Texto
algum dos textos MUDE O
KERNING

@nicholasbarcelos