vv
Guia de Marca
Logotipo Construção
05
Versões
08
Área de Proteção
10
Redução Máxima
11
Usos Incorretos
12
Tipografia Tipografia Principal
15
Tipografia de Apoio
16
Tipografia de Sistema
17
Cor
Paleta de cores
19
Regras de utilização
19
Imagem Ilustração
v19
Grafismos
21
Fotografia
23
Exemplos Aplicações
25
Logotipo
do serviçoprestado pela marca, as formas do logotipo não são absolutas.
Logotipo/construção
Traduzindo o approach comportamental
Cada paciente tem um comportamento diferente, hábitos diferentes e objetivos diferentes, e assim, não faz sentido que a marca seja algo imutável, mas que ela sempre siga se transformando. Fernanda Sakurai traz um sistema de logotipia variável. Enquanto a tipografia e paleta de cor se mantém constantes, trazendo consistência ao logotipo, as formas do símbolo podem ser alteradas livremente, desde que mantidas ordenação de cor, hierarquia, e sobreposição.
5
Logotipo/construção
O símbolo do logotipo foi construido com base em três formas orgânicas, que traduzem os valores aproximação, troca, e desmistificação. A composição das formas sempre sempre deve levar em conta sua sobreposição, que representa o trabalho conjunto entre a profissional e o paciente. Variações das formas podem ser criadas livremente, de forma manual ou em ferramentas online de arte generativa, como www.blobmaker.app ou freeonlinetools.com/tool/blob-generator
6
Logotipo/construção A tipografia do logotipo faz o uso de ligaduras para ilustrar a parceria profissional/paciente, em busca de uma alimentação saudável e desmistificada, ilustrada pelos terminais dos caracteres, desenhado em forma de folha.
7
Logotipo/versões
Aplicação Completa A aplicação completa é a versão preferencial do logotipo, ideal como primeiro ponto de contato entre a marca e o cliente. Essa versão se divide em horizontal e vertical.
Horizontal
8
Vertical
Aplicação Monocromática
A aplicação reduzida pode ser aplicada quando
A aplicação monocromática das
não houver espaço suficiente para a aplicação
versões completa e reduzida devem
da versão completa ou dentro de ambientes
ser utilizadas apenas quando não
de marca, como dentro do consultório
houver possibilidade técnica de
e em imagens de perfil de redes sociais.
aplicação da versão colorida.
Logotipo/versões
Aplicação Reduzida
9
Logotipo/área de proteção 10
Área de proteção Para garantir a otimização da leitura, visibilidade e equilíbrio do logotipo, deve sempre ser respeitada uma área de segurança sem obstruções em seu posicionamento relativo às bordas ou a quaisquer elementos visuais.
Nas versões completas, essa área deve ser equivalente
Nas versões reduzidas, deve ser considerado um respiro
ao tamanho do caractere F do logotipo
equivalente ao tamanho do grafismo central do símbolo
O logotipo deve sempre ser legível.
Aplicação negativa vQuando aplicado sobre fundos escuros,
Para isso, deve-se evitar sua aplicação
a cor da tipografia é alterada para
em tamanhos menores do que
maior contraste e legibilidade.
os descritos abaixo.
Meios digitais: 250 px Meios impressos: 5 cm
Meios digitais: 25 px Meios impressos: 1 cm
Logotipo/redução máxima/ aplicação negativa
Redução Máxima
11
Logotipo/usos incorretos
Não remover ou adicionar elementos gráficos ao logo
Não aplicar os grafismos em cores diferentes das originais
Não aplicar o logo com proporções distorcidas
Não alterar a composição dos elementos do logotipo
Não aplicar os grafismos sem sobreposição
Não aplicar versões do logotipo sem contraste com o fundo
Não aplicar efeitos ou sombras ao logotipo
Não rotacionar o logotipo
A aplicação consistente do logotipo ao longo do tempo tornará a marca cada vez mais facilmente identificável. Para isso, deve-se evitar equívocos comuns na sua utilização.
12
13
Tipografia
14
ABCDEFGHIJKLMN OPQRSTUVWXYZ
A Aperçu foi criada com o objetivo de unir de forma harmônica aspectos das famílias tipográficas grotesca e geométrica, trazendo alta legibilidade tanto em pequenos trechos e subtítulos de maior destaque, quanto em grandes blocos de texto.
abcdefghijklmn opqrstuvwxyz
Esse propósito de conciliar o geométrico, ideal, simples e lógico, com o humano, complexo e emocional foi o principal motivo da escolha dessa typeface como principal tipografia da marca.
1234567890-=˜!@#$%ˆ&*()_+ []\{}:;”’`,./<>?
Aperçu Bold Aperçu Regular Aperçu Light
Tipografia/tipografia principal
Aperçu
A Aperçu pode ser aplicada em três pesos: Bold - Para títulos Regular - Para blocos de texto Light - Para subtítulos, combinada com a fonte secundária
15
Tipografia/tipografia principal
Bodoni* ABCDEFGHIJKLMN OPQRSTUVWXYZ abcdefghijklmn opqrstuvwxyz 1234567890-=˜!@#$%ˆ&*()_+ []\{}:;”’`,./<>?
Bodoni* Bold 16
A Bodoni* é a reinterpretação moderna de uma família tipográfica tradicional criada no final do século XVIII e sua história é uma tradução dos valores da marca. O tipo versátil criado na época da modernização da prensa móvel para os padrões que conhecemos hoje já foi adaptado aos mais diversos objetivos e necessidades, tendo sido usada tanto por marcas tradicionais como Calvin Klein e Washington Post, até para a comunicação “menos ortodoxa” de Britney Spears, ou na sinalização em neon para o musical “Mamma Mia!”. A Bodoni* é sempre aplicada em peso Bold, sendo ideal para títulos ou passagens curtas de texto que sejam hierárquicamente superiores ao restante.
Quando não for possível a utilização da Aperçu, deve ser utilizada em seu lugar a familia Trebuchet.
Tipografia/tipografia de sistema
Aperçu Trebuchet Quando for tecnicamente impossível utilizar a tipografia da marca, ela deve ser substituida pelas famílias tipográficas de sistema ao lado.
Bodoni* Times
Quando não for possível a utilização da Bodoni*, deve ser utilizada em seu lugar a Times Bold.
17
Cor
18
Cor/Paleta de cores
A paleta de cores da marca aproveita tons terrosos para trazer uma atmosfera de confortoe aconchego à comunicação visual. Abaixo temos para referência os códigos RGB, para uso digital, HEX, para uso Web, e CMYK, para utilização em meios impressos A paleta foi criada para ser explorada livremente, desde que mantida uma taxa de contraste que possibilite a legibilidade de qualquer elemento explorado nas composições da marca. Dessa forma, sempre que possível, a seguinte regra deve ser seguida na construção das composições visuais: 1. Selecione uma cor da primeira linha de cores abaixo. Esta será a cor principal e única cor da primeira linha usada na composição. 2. Selecione de duas a quatro cores da segunda e terceira linhas. Deve ser escolhida pelo menos uma cor de cada linha. RGB RGB RGB 58 5858 58 5858 58 5858 CMYK CMYK CMYK 70 7070 60 60 60 60 60 60 50 50 50 HEX HEX HEX #3a3a3a #3a3a3a #3a3a3a
RGB RGB RGB 76 7676 58 5858 46 4646 CMYK CMYK CMYK 50 50 50 60 60 60 70 7070 50 50 50 HEX HEX HEX #4c3a2e #4c3a2e #4c3a2e
RGB RGB RGB 250 250 250 110 110 110 00 0 CMYK CMYK CMYK 0070 07070 100 100 100 00 0 HEX HEX HEX #fa6e00 #fa6e00 #fa6e00
RGB RGB RGB 203 203 203 66 6666 64 64 64 CMYK CMYK CMYK 15 1515 90 90 90 70 7070 55 5 HEX HEX HEX #cb424a #cb424a #cb424a
RGB RGB RGB 67 6767 63 6363 87 8787 CMYK CMYK CMYK 75 7575 75 7575 45 4545 35 3535 HEX HEX HEX #433f57 #433f57 #433f57
RGB RGB RGB 0074 07474 169 169 169 CMYK CMYK CMYK 100 100 100 80 80 80 00000 0 HEX HEX HEX #004aa9 #004aa9 #004aa9
RGB RGB RGB 49 4949 128 128 128 134 134 134 CMYK CMYK CMYK 80 80 80 35 3535 45 4545 55 5 HEX HEX HEX #318086 #318086 #318086
RGB RGB RGB 112 112 112 151 151 151 98 9898 CMYK CMYK CMYK 60 60 60 25 2525 75 7575 55 5 HEX HEX HEX #709762 #709762 #709762
RGB RGB RGB 160 160 160 160 160 160 160 160 160 CMYK CMYK CMYK 40 40 40 30 30 30 35 3535 00 0 HEX HEX HEX #a0a0a0 #a0a0a0 #a0a0a0
RGB RGB RGB 168 168 168 127 127 127 99 9999 CMYK CMYK CMYK 30 30 30 50 50 50 65 6565 10 1010 HEX HEX HEX #a87f63 #a87f63 #a87f63
RGB RGB RGB 255 255 255 176 176 176 79 7979 CMYK CMYK CMYK 0035 03535 75 7575 00 0 HEX HEX HEX #ffb04f #ffb04f #ffb04f
RGB RGB RGB 207 207 207 128 128 128 126 126 126 CMYK CMYK CMYK 15 1515 60 60 60 40 40 40 00 0 HEX HEX HEX #cf807e #cf807e #cf807e
RGB RGB RGB 127 127 127 116 116 116 206 206 206 CMYK CMYK CMYK 55 5555 60 60 60 00000 0 HEX HEX HEX #7f74ce #7f74ce #7f74ce
RGB RGB RGB 118 118 118 267 267 267 221 221 221 CMYK CMYK CMYK 55 5555 25 2525 00000 0 HEX HEX HEX #76a7dd #76a7dd #76a7dd
RGB RGB RGB 106 106 106 196 196 196 183 183 183 CMYK CMYK CMYK 55 5555 0035 03535 00 0 HEX HEX HEX #6ac4b7 #6ac4b7 #6ac4b7
RGB RGB RGB 160 160 160 193 193 193 145 145 145 CMYK CMYK CMYK 40 40 40 10 1010 50 50 50 00 0 HEX HEX HEX #a0c191 #a0c191 #a0c191
RGB RGB RGB 251 251 251 245 245 245 240 240 240 CMYK CMYK CMYK 1122 1424040 0 HEX HEX HEX #fbf5f0 #fbf5f0 #fbf5f0
RGB RGB RGB 204 204 204 178 178 178 162 162 162 CMYK CMYK CMYK 20 2020 30 30 30 35 3535 00 0 HEX HEX HEX #ccb2a2 #ccb2a2 #ccb2a2
RGB RGB RGB 255 255 255 211 211 211 141 141 141 CMYK CMYK CMYK 0020 02020 50 50 50 00 0 HEX HEX HEX #ffd38d #ffd38d #ffd38d
RGB RGB RGB 255 255 255 184 184 184 173 173 173 CMYK CMYK CMYK 0035 03535 25 2525 00 0 HEX HEX HEX #ffb8ad #ffb8ad #ffb8ad
RGB RGB RGB 180 180 180 172 172 172 229 229 229 CMYK CMYK CMYK 30 30 30 30 30 30 00000 0 HEX HEX HEX #b4ace5 #b4ace5 #b4ace5
RGB RGB RGB 186 186 186 213 213 213 244 244 244 CMYK CMYK CMYK 25 2525 10 1010 00000 0 HEX HEX HEX #bad5f4 #bad5f4 #bad5f4
RGB RGB RGB 178 178 178 219 219 219 215 215 215 CMYK CMYK CMYK 30 30 30 0015 01515 00 0 HEX HEX HEX #b3dad7 #b3dad7 #b3dad7
RGB RGB RGB 197 197 197 234 234 234 183 183 183 CMYK CMYK CMYK 25 2525 0035 03535 00 0 19 HEX HEX HEX #c5eab7 #c5eab7 #c5eab7
Imagem
20
Imagem/ilustração O uso de ilustração é muito importante na proposta visual da marca. O uso de ilustração como apoio gráfico permite que a mensagem seja transmitida de forma lúdica e informal, e gerando identificação com públicos mais heterogêneos. As ilustrações devem respeitar a paleta de cores da marca, dando preferência a formas orgânicas e estilo minimalista.
21
Imagem/ilustração
Considerando a aplicação majoritária em pequenos formatos e redes sociais, imagens com grande número de detalhes devem ser evitadas. A proposta da marca deve sempre ser levada em conta na escolha das personagens, sendo preferida a escolha de corpos fora do padrão magro e imagens que sugiram movimento.
22
Imagem/grafismos Para apoio visual no uso de ilustração ou como background, a marca faz uso de formas e linhas abstratas, sempre seguindo a paleta de cores proposta e atentando para que haja um diálogo entre as formas e as ilustrações utilizadas na composição.
23
Imagem/fotografia
Visando gerar aproximação entre a marca e o público e levando em conta a facilitação no processo de produção fotográfica, a marca faz uso de uma estratégia de direção fotográfica voltada para o realismo e evitando a utilização de filtros. Para trazer a identidade de marca às postagens focadas em fotografia é utilizada uma moldura discreta (de não mais de 50 px) trazendo grafismos abstratos e cores da marca. Quando impossível a produção original de fotografia para a marca podem ser utilizados bancos de imagem, desde que com muita atenção à proposta da marca na curadoria de material. Deve-se evitar imagens posadas, superproduzidas ou com uso excessivo de filtros que afastem o resultado final da realidade. Alguns bancos de imagens 100% gratuitos com boa curadoria de imagem são: www.unsplash.com www.foodiesfeed.com www.rawpixel.com www.freepik.com (com imagens e ilustrações) www.rgbstock.com www.stockvault.net www.picjumbo.com www.pexels.com burst.shopify.com
24
25
Exemplos
26
27
28
29
30
31
32
33
34
alessioperez.com