Manual de Identidade Visual v.1.0
Apresentação do Manual
2 • App Meu Dinheiro
A elaboração de uma Identidade Visual não consiste em apenas diferenciar serviços e produtos. Desempenha um importante papel na decodificação da filosofia da empresa, expressando o objetivo desta em fornecer uma série específica de atributos, benefícios e serviços à comunidade na qual está inserida. Por isso deve ser muito bem gerenciada para que seu valor patrimonial e cultural não se deprecie. A ideia deste Manual de Identidade Visual do App Meu Dinheiro surgiu pela necessidade de padronização da identidade visual da empresa nos diversos seguimentos da comunicação.
Com criatividade e rigor técnico que um trabalho deste porte necessita, trabalhamos todos os níveis de significado que uma marca incorpora: benefícios culturais e emocionais, valores e personalidade. A oportunidade de realização e implantação deste Programa em todos os níveis da empresa trará sem dúvida, uma sensível melhora na compreensão da Imagem Corporativa do App Meu Dinheiro, através da unificação dos seus códigos visuais.
O Manual
4 • App Meu Dinheiro
A comunicação visual é um fator básico para o relacionamento da empresa com seu público. Através das mensagens visuais que se dá o primeiro contato entre ambos e, nesse contexto, a identidade visual desempenha importante papel, tanto a nível empresarial quanto mercadológico. Este Manual de Identidade Visual do App Meu Dinheiro é constituído de padrões, normas técnicas e procedimentos a serem utilizados em benefício da consolidação da imagem corporativa da empresa, eliminando as soluções improvisadas que podem comprometer o projeto. Sem ele (o manual), a implantação de um programa de identidade corporativa torna-se muito difícil. A empresa que usa diferentes estilos de tipos, cores e formas e não mantém o controle da aplicação de sua identidade visual, está confundindo a sua imagem ou transmitindo uma imagem desorganizada para o seu público.
É importante salientar que o planejamento de uma identidade visual abrange não apenas a criação de seus elementos visuais básicos, mas também um gerenciamento estratégico de implantação e manutenção. O cuidado e o rigor na criação e implementação, assim como na manutenção da imagem, garantirá sua pregnância pela sociedade. Um dos objetivos primordiais deste manual é fornecer aos usuários internos e externos subsídios para se tornarem agentes da marca Meu Dinheiro e não apenas meros cumpridores de regras. Átila Venancio dos Santos Designer responsável
Sumรกrio
Apresentação
9
Processo Criativo do Símbolo
10
Construção do Símbolo e Ícone do App
11
Construção do Logotipo + Símbolo
12/13
Alfabeto Corporativo
14/15
Padrão Cromático Corporativo
16
Monocromia Traço e Tons de Cinza
17
Área de Proteção
18
Reduções
19
Sobre Tons de Cinza
20
Usos Indevidos
21
8 • App Meu Dinheiro
Apresentação
A Assinatura Visual é o elemento visual mais expressivo para identificar e projetar os valores e a personalidade do aplicativo. A Assinatura Visual se caracteriza pela combinação do símbolo com o logotipo. Nas variações da Assinatura é acrescentada o slogan do aplicativo “Controle financeiro, fácil!”, conforme são especificadas neste Manual. Sua configuração sintética é de rápida comunicação. A simplicidade das formas possibilita maior visibilidade e melhor fixação da imagem do aplicativo nas diferentes mídias.
Manual de Identidade Visual App Meu Dinheiro v.1.0 • 9
Processo Criativo do Símbolo
Raf
10 • App Meu Dinheiro
1º versão
Versão final
Construção do Símbolo e Ícone do App
A eficiência da Identidade Visual do App Meu Dinheiro depende de um minucioso controle sobre os elementos visuais e textuais que o compõem. Cada elemento deve estabelecer uma relação com a configuração do todo. A construção e a reprodução precisa da Assinatura do App Visual Meu Dinheiro evita a sua descaracterização.
Como utilizar os ícones impressos:
Quatro cores com uma sombraesta é a versão principal
A figura ao lado relata a sequência de operações para a construção do ícone:
Estas sequências de operações apenas ilustram o processo de construção geométrica do ícone e do símbolo, não havendo ecessidade de retomá-las.
IMPORTANTE Para evitar reproduções imprecisas, utilizar os originais contidos no CD que acompanha o Manual. A Assinatura Visual não deve ser composta graficamente, nem reproduzida a partir de scanner ou cópias xerográficas.
Quatro cores, sem a sombra projetada para uso em PowerPoint ou outras aplicações onde a sombra não reproduz bem.
Cor lisa, sem a gota-sombra é para uso somente em brindes e itens tais como chapéus e camisas, onde um processo de 4 cores e de gradiente não podem ser usados.
Manual de Identidade Visual App Meu Dinheiro v.1.0 • 11
É a particularização da escrita de um nome. A forma diferenciada com a qual o nome do aplicativo é registrado nas diversas aplicações da programação visual. A base do logotipo Meu Dinheiro é o tipo Pluto. Na figura ao lado temos a sequência de operações para a sua construção.
ESPACEJAMENTO Um dos segredos vitais para um visual agradável das mensagens textuais é a utilização do espacejamento óptico, em detrimento do espacejamento mecânico padrão dos softwares processadores de texto. A divisão de espacejamento entre os signos tipográficos deriva-se da divisão da espessura da haste vertical da letra “i” em 5 partes iguais, sendo cada parte um módulo de espacejamento. A aplicação deste módulo pode ser observada na figura acima.
12 • App Meu Dinheiro
MeuDinheiro
Construção do Logotipo + Símbolo
Manual de Identidade Visual App Meu Dinheiro v.1.0 • 13
O alfabeto corporativo é utilizado para normatizar os textos incluídos nas aplicações, juntamente com os demais elementos visuais. Para que as diversas formas de comunicação do Meu Dinheiro sejam apresentadas de forma consistente e coerente, deve-se utilizar os tipos gráficos aqui especificados. A escolha de um leque reduzido de tipos gráficos deve-se, sobretudo, à necessidade de criar uma forte identificação com a escola. Os tipos escolhidos são: Bree (com suas variações de peso) como alfabeto primário para títulos publicitários e destaques e Myriad Pro (e suas variações de peso) como alfabeto secundário para grandes quantidades de texto, como em relatórios anuais e newsletter devido ao seu maior grau de legibilidade e por proporcionar descanso visual durante a leitura.
ABCDEFGH abcdefghijklmno1234567 Alfabeto principal
Bree
abcdefghij Alfabetos secundários
Myriad Pro
14 • App Meu Dinheiro
HIJKLMNO 7890”!@#$%&*( )
jklmno
Alfabeto Corporativo
QUAIS AS CARACTERÍSTICAS DA bree? Bree, criado pela foundry TypeTogether, é uma fonte sem serifa elegante que proporciona um olhar polido e moderno para uso de marca. Algumas de suas características mais característicos são a forma cursiva do ‘a’, e ‘e’ , as curvas internas do ‘v’ e ‘w’, o florescer do ‘Q’ e a fluidez das formas em ‘g y z’ . Letras alternadas a estes estão disponíveis quando um olhar mais clássico é desejado. Claramente influenciado pela escrita, Bree mostra uma mistura agradável dos capitulares discretos e as letras minúsculas mais vivas, que dão ao texto uma aparência alegre e animada. É definitivamente um itálico memorável vertical!
QUAIS AS CARACTERÍSTICAS DA myriad pro? Myriad é uma família de fontes, sem-serifa, concebida por Robert Slimbach, Carol Twombly, e a equipe de design da Adobe Systems. É uma das muitas fontes semelhantes à Frutiger de Adrian Frutiger. A Miriad Pro, uma família de fontes criada mais tarde, por volta de 1998, inclui mais variantes da Myriad, desde o Light ao Black, do Condensed ao Extended, e também caractreres do alfabeto grego, cirílico e da europa central.
Manual de Identidade Visual App Meu Dinheiro v.1.0 • 15
Padrão Cromático Corporativo
A cor, por si só, já é marca, independente de toda concepção gráfica. A cor acentua a visibilidade da marca, construída sob ritmos geométricos. As cores corporativas do Meu Dinheiro são um elemento fundamental para assegurar sua rápida identificação. Para reproduzir corretamente as cores corporativas devese observar atentamente as especificações deste manual. A fidelidade na reprodução das cores é um item fundamental para garantir a consistência da identidade visual da empresa. Verifique a fidelidade das tonalidades comparando-as sempre com a escala Pantone Formula Guide. Na tabela ao lado estão as referências dos materiais usados com maior freqüência.
É permitido a combinação de cores para gradientes.
PANTONE Referência de produção em cores. CMYK Produção gráfica em escala Europa e composição de cores. RGB Produção de TV, vídeo e multimídias. HEXACROMÁTICO Referência de cores para internet. 16 • App Meu Dinheiro
Cores adicionais estão disponíveis com base em determinados produtos. Se sua comunicação é produto relacionado, siga as orientações e cores relativos encontrados nas diretrizes do produto. Cor
Pantone
C
M
Y
K
R
G
B
Web #
Vermelho Escuro MD
7652 C
20
100
100
50
117
8
9
750709
Vermelho Claro MD
1795 C
0
100
100
20
196
22
28
C4151C
Laranja MD
144 C
0
50
100
0
247
148
30
F7941D
Amarelo MD
7549 C
0
30
100
0
253
185
19
FDB813
Cinza MD
Cool Gray 11 C
0
0
0
80
88
89
91
58585B
Monocromia Traço e Tons de Cinza
A versão a traço positiva é usada sobre fundos claros e tons médios (até 50%). Também utilizada como matriz para processos especiais de impressão e acabamento como hot stamping, relevo seco, verniz selecionado e silk-screen (serigrafia).
A versão a traço negativa é usada em fundos de tons médios escuros e pretos (de 60% a 100%). Também utilizada nos casos previstos para utilização a meio-tom e onde o resultado da combinação figura/fundo proporcione um efeito óptico desagradável.
Manual de Identidade Visual App Meu Dinheiro v.1.0 • 17
Área de Proteção x
A área de proteção tem a função de reservar a legibilidade e integridade visual da Assinatura Meu Dinheiro definida neste Manual. Esta área de não interferência deve ser criteriosamente respeitada, não podendo ser invadida por qualquer elemento gráfico que não seja referente à Assinatura, quer seja este, figura ou texto. Se possível, use um espaço maior em volta da Assinatura Visual para criar maior impacto.
x x/5
x
x/5 x/5
x/5
x x Nas figuras está estabelecida a regra que define a área de proteção mínima a respeitar. 18 • App Meu Dinheiro
x/5
Reduções
A Assinatura Visual requer cuidadosa programação para a definição de suas reduções como podem ser observadas a seguir. Recomenda-se não reduzi-la para versões horizontais além de 30mm, para versões verticais 20 mm e para o ícone além da medida de 15px. 30mm
30mm
20mm
20mm
15px
Em reduções menores que as aqui determinadas deve-se retirar o slogan.
15px
Manual de Identidade Visual App Meu Dinheiro v.1.0 • 19
Sobre Tons de Cinza
Nos fundos com tonalidades de cinza utiliza-se a Assinatura Meu Dinheiro a traço positivo sobre fundos claros e médios (até 50% preto) e negativo em fundos de tons médios escuros e pretos (de 60% a 100% preto) como observados abaixo. Nota-se como este procedimento nos permite não perdermos a legibilidade, visibilidade e leiturabilidade da Assinatura Visual.
20 • App Meu Dinheiro
porcentagens do PRETO
10%
60%
20%
70%
30%
80%
40%
90%
50%
100%
Usos Indevidos
As regras para o uso da Assinatura Visual Meu Dinheiro já definidas neste Manual devem ser obrigatoriamente respeitadas para que não haja a descaracterização da Identidade Visual Meu Dinheiro.
Inserção de elementos estranhos Não devemos sobrepor elementos visuais ou textuais à Assinatura Visual, para que a mesma seja mostrada em sua totalidade.
O uso adequado irá ajudar a fortalecer a Identidade Visual que a Meu Dinheiro procura estabelecer com o seu público. O uso inadequado, como demonstrado nos exemplos a seguir, é forte impedimento a esse objetivo.
Desproporção dos elementos visuais Não devemos modificar as características de dimensão e proporção entre o logotipo e o símbolo e entre estes e a razão social.
Aplicação correta da ssinatura Visual como parâmetro para comparação Posicionamento Não devemos desrespeitar a relação de posicionamento entre logotipo e símbolo proposto na página 7 deste Manual.
Qualquer uso inadequado da Assinatura Visual Meu Dinheiro enfraquece a construção da Identidade Visual do aplicativo. Manual de Identidade Visual App Meu Dinheiro v.1.0 • 21
www.meudinheiroweb.com.br
22 • App Meu Dinheiro