Manual de Identidade Visual Vantago
Apresentação
A Identidade Visual de uma empresa é uma ferramenta de comunicação que visa transmitir os seus valores e ideais por meio de uma série de peças gráficas. De forma geral, uma identidade visual abrange muito mais do que apenas um logotipo. Ela contém toda a comunicação visual exercida pela empresa, sendo assim um dos principais modos de comunicação entre ela e seu público. Este manual tem por objetivo normatizar a identidade visual da Vantago, para que ela possa manter sua integridade, eficiência, e conservar seus valores.
2
Conceitos Básicos
Para melhor compreender a a linguagem deste manual, seguem abaixo algumas explicações simplificadas de conceitos referentes ao design gráfico: Marca: todo e qualquer aspecto de uma empresa ou organização pela qual ela seja conhecida, ou seja, o modo como ela é percebida pelo público. Marca gráfica: expressão gráfica da empresa, aplicada de acordo com sua identidade visual. Símbolo: o símbolo é a representação de um significado. No design gráfico ele é usado para designar o grafismo ou imagem que representa a empresa. Ou seja, ele é a síntese da empresa, o seu significado, expresso em forma gráfica. Tipografia: termo referente à “tipos”, fontes. Tipos diferentes têm variados impactos sobre o leitor de um texto. No contexto de uma identidade visual, eles devem se adequar aos valores da empresa, bem como apresentarem as características técnicas necessárias para sua utilização eficiente. Logotipo: representação do nome da marca, escrito em uma família tipográfica que transmita sua identidade.
3
Introdução
A Vantago é um clube de benefícios, onde através de um aplicativo seu público tanto corporativo quanto do varejo, podem aproveitar de oportunidades em uma rede de lojas e restaurantes. O nome Vantago teve origem na palavra vantagem, demonstrando joavilidade e profissionalismo. Sua missão é que as pessoas vivam melhor, através de um consumo mais inteligente e consciente. A Vantago não quer falar o que os clientes irão consumir e sim como eles podem fazer isso da melhor maneira, ou seja, proporcionando o empoderamento do cliente. Seus valores são: Experiência, confiança, excelência, liberdade, evolução, amor, simplicidade e proximidade. Os valores para serem transmitir através da identidade visual da Vantago como forma de conceitos chave foram: Evolução, navegação, proximidade e confiança.
4
Marca Assinatura principal
As assinaturas são as formas de apresentação da marca. Trata-se de combinações entre logotipo e símbolo, para melhor adaptá-la às diversas situações de uso. A assinatura principal é aquela que tem preferência de aplicação sobre todas as outras assinaturas nos mais diversos contextos e que melhor representa os valores da instituição. A assinatura principal da Vantago é a versão policromática composta pelo símbolo e logotipo, com o símbolo disposto acima e a direira da letra “o” em relação ao logotipo. O símbolo sozinho também pode e deve ser utilizado como assinatura secundária da empresa nos mais diversos materiais gráficos e no aplicativo. Ele só deve ser aplicado nas versões Azul Vantago, branco padrão ou preto padrão.
5
Marca Assinatura secundárias
As assinaturas secundárias são aquelas que podem ser utilizadas quando houver alguma dificuldade em aplicar a assinatura principal. As assinaturas secundárias da Lamparina Design são compostas pelo símbolo e pelo logotipo (que não deve ser utilizado sozinho), nas versões monocromáticas em preto ou branco. O símbolo sozinho também pode e deve ser utilizado como assinatura secundária da empresa nos mais diversos materiais gráficos e no aplicativo. Ele só deve ser aplicado nas versões monocromáticas nas versões Azul Vantago, branco padrão ou preto padrão.
6
Marca Construção do logotipo
O logotipo foi criado a partir da fonte Azo Sans Bold. Algumas modicações foram feitas, com alteração do kerning e abertura das letras “A” e “G”. A abertura criada nas letras “A” e “G” tem a finalidade de tornar o logotipo algo mais leve, para contrabalancear com o seu peso de linha, essa abertura teve como base também a acessibilidade, é algo sútil mas que torna o logotipo um pouco mais aberto aumentando a sensação de acessível. A característica chanfrada das letras “A”, “T” e “G” colocam uma sútil diagonal com 10° no logotipo, a diagonal dá uma sensação de evolução, ascensão, mantendo a elegância da marca. A junção das letras “G” e “O” foi uma alusão feita à proximidade, as duas letras foram literalmente aproximadas. Essa junção também teve como objetivo aumentar a personalização do logotipo, tornando-o algo mais exclusivo da Vantago.
7
Marca Construção do símbolo
A seta surgiu da desconstrução de uma bússola, onde está direciona para novas descobertas, exploração do desconhecido, conquistas através do direcionamento. Conceituando assim o sentido de navegabilidade tão necessária em um aplicativo. A seta serve como guia possibilitando experiências e oportunidades, sua forma também remete a um bumerangue que vai e volta, conceituando fidelização, e abertura a novas experiências. Seu direcionamento é para cima representando a evolução, no sentido de crescer e desenvolver.
8
Marca Área de respiro
A área de respiro é o espaço físico mínimo que deve haver em torno da marca para que sua leitura e percepção não seja prejudicada pela presença de outros elementos gráficos, como texto, fotos ou outras marcas. Garantindo assim uma perfeita comunicação da marca. A área de arejamento da marca da Vantago é dada com base na altura (V), correspondente à altura do espaço negativo dentro da letra “O” do logotipo.
V
9
Regras Limite de redução
A marca possui um limite de redução, cuja finalidade é manter a integridade e reconhecimento até uma média distância. Uma redução maior que a redução limite sugerida prejudica seriamente a visualização dos elementos. Assim, foi estipulado o limite de redução de 10 milímetros de altura para impressões e de 24x24 pixels interfaces digitais com a marca em sua versão na qual utiliza-se apenas o símbolo. Para a versão principal, foi estipulado o limite de redução de 25 milímetros de largura para impressões e interfaces digitais.
25 mm
10 mm
10
Regras Tiipografia institucional
A tipografia é um elemento importante para a manutenção de um sistema de identidade visual. Dessa forma, para preservar a identidade da empresa, qualquer texto institucional deve ser composto com as famílias tipográficas auxiliares aqui definidas. Visando os diferentes tipos de aplicação da tipografia, a Vantago conta com duas famílias tipográficas, uma fonte serifada e outra sem serifa, essa sendo focada espeficiamente no aplicativo, permitindo assim um leque de opções na hora da escolha, de acordo com os objetivos e mídias a serem utilizados. As duas famílias tipográficas institucionais são: Droid Serif e Roboto. Para textos impressos e em textos longos deve-se utilizar a família de fonte serifada, ou seja, a Droid Serif, pela sua característica de facilitação da leitura. A segunda fonte Roboto, deve ser utilizada somente para web e no aplicativo, essa fonte foi escolhida por ser padrão para todos em muitos aplicativos e sites. A Droid Serif possui quatro pesos diferentes: Regular, Itálico, Bold e Bold Itálico. A família Roboto possui 16 pesos diferentes.
11
Regras Tipografia institucional
12
Roboto ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
Regras Tipografia institucional
Roboto
Droid Serif
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 01234567890 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&* ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&* ABCÇDEFGHIJKLMNOPQRSTUVWXYZ abcçdefghijklmnopqrstuvwxyz 0123456789 !?;.,{:}[]()\-_–/=|>”<`’~ˆ@#$%&*
13
Regras Cores institucionais
As cores desempenham um importante papel no bom funcionamento de um sistema de identidade visual. A unidade do código cromático original deve ser mantida, tendo em vista as alterações que podem ser provocadas pelos diferentes processos de impressão, por exemplo. Seguem os códigos cromáticos das cores originais que foram todas retiradas do Material Design da Google, nos padrões CMYK, utilizado para materiais impressos; RGB, utilizado para visualização digital; Código hexadecimal, utilizado para veiculação na web. No caso de aplicação da marca em suportes não citados anteriormente (linhas e tecidos, ou tinta para veículo, por exemplo), deve-se utilizar o padrão CMYK como referência.
Material Design: Blue 500 C: 70 M:34 Y:0 K:0 R:33 G:150 B:243 #2196F3
14
Material Design: Black C: 0 M:0 Y:0 K:100 R:0 G:0 B:0 #000000
Regras Cores auxiliares
A fim de não banalizar as cores institucionais da marca pelo excesso de uso e aumentar o número de possibilidades de aplicação sem comprometer a sua integridade, definiu-se uma paleta de cores auxiliares. Esta relação de cores apresenta afinidade com a marca, contribui para a consolidação dos seus valores e pode ser utilizada no desenvolvimento de quaisquer materiais institucionais. Tais cores foram selecionadas de forma que suas combinações fossem as mais harmônicas possíveis e pemitessem diferentes combinações e efeitos, para tal foram selecionadas cores monocromáticas, complementares, tríades e análogas. Sendo todas elas retiradas do Material Design da Google, devido as aplicações principais da identidade acontecerem através do aplicativo.
15
Regras Cores auxiliares
16
Seguem os códigos cromáticos das cores originais nos padrões CMYK, utilizado para materiais impressos; RGB, utilizado para visualização digital; e código hexadecimal, utilizado para veiculação na web.
Regras Fundos monocromáticos
É importante estar atento ao contraste gerado na composição de uma aplicação da marca em um fundo colorido. É necessário que exista um bom contraste entre o fundo e a marca. Para se utilizar a marca em fundos de cores mais saturadas e vivas, aconselha-se utilizar a versão monocromática. Quando a cor tiver pouco brilho, utiliza-se a versão monocromática branca, para gerar o contraste. Em um fundo de cor com muito brilho, a utilização correta é a versão monocromática preta, para que haja contraste. Atenção: a utilização da versão monocromática branca, em fundos amarelos ou alaranjados, não é recomendável, já que as cores são expansivas, e por isso prejudicam a definição da forma e dificulta a visualização dos elementos.
17
Regras Fundos monocromรกticos
18
Regras Fundos policromáticos
Fotos, imagens e texturas que apresentam fundos policromáticos. Nessas situações, para que a marca da Vantago possa ser utilizada concisamente, opta-se por utilizar camadas de transparência para aumentar o contraste entre a imagem de fundo e o símbolo. Alternativamente, pode-se utilizar uma área da imagem em questão que possua uma textura homogênea, poucos elementos e informações visuais, além de maior contraste em relação à assinatura, seja ela a assinatura regular, ou as versões monocromáticas.
19
Regras Usos incorretos
É importante que a aplicação da identidade visual seja coesa toda vez que seja aplicada, para que possa ser forte e identificável. Para isso seguem alguns usos incorretos que enfraquecem a identidade visual: 1) Utilizar efeitos de sombreamento ou margem
2) Aplicar gradientes
3) Utilizar contorno na marca
4) Alterar as proporções da marca
20
Regras Usos incorretos 5) Aplicação desalinhada
9) Aplicar efeitos 3D
6) Alterar a tipografia original
10) Incluir adereços à marca, mudar suas cores institucionais, tipografia, ou qualquer outro elemento gráfico, para a comemoração de uma data ou para a divulgação de uma campanha.
vantago 7) Utilizar uma assinatura não existente
8) Aplicar a marca em fundos com pouco contraste, como de cores similares às da marca. Para isso há as aplicações monocromáticas.
21
Elementos auxiliares Malha
Os elementos auxiliares são aqueles que ajudam a compor a identidade visual da empresa. A Vantago possui um tipo de elemento auxiliar: a malha. Malha ou grade: É um elemento gráfico composto por um ou mais módulos que replicados formam uma mancha gráfica regular. As malhas da organização são compostas por diferentes módulos originários do símbolo da Vantago, cujas combinações produzem estampas distintas, apontando para diferentes direções. Tais estampas possuem configurações que atendem a objetivos diversos. A módulo pode ser aplicado nas cores auxiliares da Vantago, sugere-se que sempre com uma transparência/opacidade mais baixa, para que fique como um elemento gráfico sutil.
ÚNICO MÓDULO
22
Manual de Identidade Visual Vantago
Janeiro de 2016 Este manual foi desenvolvido pela Lamparina Design, bem como a marca e as aplicações aqui apresentadas. Caso haja dúvidas em relação à aplicação da marca, entre em contato conosco. A Lamparina Design deverá ser consultada em um possível e futuro redesign da marca.