50
RENATO MELO – 2015 IDENTIDADE VISUAL INDO ALÉM DO LOGO

Identidade visual indo alem do logo

Embed Size (px)

Citation preview

Page 1: Identidade visual indo alem do logo

RENATO MELO – 2015

IDENTIDADE VISUALINDO ALÉM DO LOGO

Page 2: Identidade visual indo alem do logo

Após criação do logo e aplicação de materiais, o primeiro passo é construir a comunicação visual de maneira harmônica com os objetivos do branding.

Page 3: Identidade visual indo alem do logo

#PARTE 1TIPOLOGIA

Page 4: Identidade visual indo alem do logo

1 – Fuja das fontes com cara de comum;2 – Escolha uma fonte de personalidade!3 – Zele pelo entendimento.

Page 5: Identidade visual indo alem do logo

Agência: Fischer, JustusCliente: Santa Casa de Misericórdia

Page 6: Identidade visual indo alem do logo

Não há restrição do estilo! Há bom senso e conhecimento dos objetivos e posicionamento da marca. Não precisa usar serifa para banco só para “forçar” uma seriedade.

Page 7: Identidade visual indo alem do logo
Page 8: Identidade visual indo alem do logo
Page 9: Identidade visual indo alem do logo

#PARTE 2KERNING E TRACKING

Page 10: Identidade visual indo alem do logo

O Kerning é uma técnica para você ajustar dois caracteres de uma fonte escolhida.Basicamente, se trata de ajustar os espaços entre os caracteres de maneira que a leitura seja mais funcional e agradável ou visualmente simétrico.

Page 11: Identidade visual indo alem do logo

Não utilize sempre a matemática!

O visual (óptico) se sobrepõe à matemática e a simetria.

Page 12: Identidade visual indo alem do logo

Observe este exemplo!

Page 13: Identidade visual indo alem do logo

Está tudo alinhado, mas... O que há de errado com o triângulo e o círculo?

Page 14: Identidade visual indo alem do logo

E agora? Alguma mudança?

Page 15: Identidade visual indo alem do logo

O círculo e o triângulo foram levemente ampliados, saindo do alinhamento sem causar distorção.

Page 16: Identidade visual indo alem do logo

Ao contrário do Kerning (irregular), o Tracking vai alterar o espaçamento por palavras ou blocos, deixando o mesmo espaço entre os caracteres.

TRACKING

Page 17: Identidade visual indo alem do logo

Qual dos exemplos possui maior espaçamento?

Page 18: Identidade visual indo alem do logo

Nenhum! O tracking organiza os blocos a fim de evitar ilusões de ótica.

Page 19: Identidade visual indo alem do logo
Page 20: Identidade visual indo alem do logo

Eu tenho DNA ESAMC (normal)

Eu tenho DNA ESAMC

Eu tenho DNA ESAMC

Eu tenho DNA ESAMC

Eu tenho DNA ESAMC

Page 21: Identidade visual indo alem do logo

#NA PRÁTICANIVEA X KERNING

Page 22: Identidade visual indo alem do logo

A Nivea é uma empresa centenária. No seu primeiro ano, em 1911, seu produto Nivea Creme foi um sucesso mundial.

Page 23: Identidade visual indo alem do logo

Cenário Nivea 2011:•€5 bilhões de faturamento;•€3,5 bilhões de valor de marca;•Mais de 20 mil funcionários;•Presença em mais de 170 países;

E como qualquer empresa desse tamanho, o crescimento traz a famosa síndrome do “não temos identidade”.

Page 24: Identidade visual indo alem do logo

Cenário Nivea 2011:As tentativas de ajustes não funcionou bem, causando o que eles chamaram de “esquizofrenia visual”.

Chamaram então o designer Yves Béhar para resolver a situação.

Page 25: Identidade visual indo alem do logo

Ele se basea então no primeiro produto da marca e na sua evolução. Desde 1925 a cor e estilo são bem similares.

Page 26: Identidade visual indo alem do logo

O conceito de minimalismo foi trazido até mesmo para as tampas

Page 27: Identidade visual indo alem do logo

Só uma coisa não mudou... O Kerning “NI”

Page 28: Identidade visual indo alem do logo

Os outros pares de letra compensam a distância de maneira óptica, criando um espaçamento maior entre o N e o I

Page 29: Identidade visual indo alem do logo

#PARTE 3SÍMBOLOS E ÍCONES

Page 30: Identidade visual indo alem do logo

Para as últimas Olimpíadas em Londres, o logo possui integração de elementos: Anéis Olímpicos e o Ano (2012). Além disso, o 2012 pode ser lido como LR, sigla de Londres

Page 31: Identidade visual indo alem do logo

Também foram criados os Pictogramas para cada modalidade

Page 32: Identidade visual indo alem do logo

Já no Brasil... Polêmica

Page 33: Identidade visual indo alem do logo

Na Rússia, Copa 2018, os elementos não ficaram tão claros.Briefing: Utilizar a silhueta do troféu, além de refletir a essência russa, que foi transmitida a partir da rica tradição artística e a história de inovação do país, especialmente em relação à corrida espacial

Page 34: Identidade visual indo alem do logo

A opção aprovada mistura uma série de ícones do país: os ovos Fabergé, a praça vermelha e a Catedral de Saint Basil, por exemplo.

Page 35: Identidade visual indo alem do logo

Mas...Não ficou tão claro e virou piada, igual ao da Copa no Brasil

Page 36: Identidade visual indo alem do logo

#PARTE 4MORFOLOGIA

Page 37: Identidade visual indo alem do logo

Esta é uma tabela da percepção humana:A – ProteçãoB – ArmadilhaC - Frescor

MORFOLOGIA DOS SINAIS

A B C

Page 38: Identidade visual indo alem do logo

Esta é uma tabela da percepção humana:D – PendurarE – CrescimentoF – Suporte/Balança

MORFOLOGIA DOS SINAIS

D E F

Page 39: Identidade visual indo alem do logo

Esta é uma tabela da percepção humana:G – Ponto de PartidaH – Ponto de Chegada

MORFOLOGIA DOS SINAIS

G H

Page 40: Identidade visual indo alem do logo

Tabela Morfologia 1Sinais e Símbolos – Adrian Frutiger

MORFOLOGIA DOS SINAIS

Page 41: Identidade visual indo alem do logo

#PARTE 5CÓDIGO CROMÁTICO

Page 42: Identidade visual indo alem do logo

CÓDIGO CROMÁTICO

PRIMÁRIAS

O disco de cores é composto por 12 cores

SECUNDÁRIAS

TERCEÁRIAS

Page 43: Identidade visual indo alem do logo

O disco de cores é composto por 12 corese 96 nuances

Page 44: Identidade visual indo alem do logo

frio

quente

Uma cor pode parecer fria ou quente, dependendo também da relação estabelecida entre ela e as demais cores.

Page 45: Identidade visual indo alem do logo

Quente e Frio = imãOs opostos se atraem.Cor quente + Cor quente se esfriamCor fria + Cor quente se exaltam

Page 46: Identidade visual indo alem do logo

Cores Análogas•Analogia significa semelhança; •As cores análogas são semelhantes em sua composição;•É um degradê formado entre uma cor primária e uma secundária.

Page 47: Identidade visual indo alem do logo

Cores Complementares•É a cor "negativa" de qualquer cor, como os negativos de fotografia.•No Photoshop, basta dar um Ctrl+I

Page 48: Identidade visual indo alem do logo

Você pode também observar no Círculo Cromático

Page 49: Identidade visual indo alem do logo

Para: 10.11 até às 18h30 via e-mailNossa Prévia é um jogo! Jogo do Kerning.1)Acesse: http://type.method.ac/2)No Word, cole um print de cada uma das 10 etapas3)No final, coloque o print da sua nota final

Page 50: Identidade visual indo alem do logo

ESTA AULA ESTÁDISPONÍVEL EM:renatomelo.com.br/slides

ou no grupo do Facebook:bit.ly/gruporenato