1
Manual de identidade visual
2
4
5
6
7
apresentação
Em um projeto de identidade visual se busca transmitir diversas informações por meio de elementos gráficos, com o objetivo de sintetizar a proposta da empresa e sua marca. Este manual visa coordenar a implantação e manutenção do sistema de identidade visual da marca Release, estabelecendo normas e orientação a veiculação da marca, aplicações e demais elementos gráficos.
8
sumรกrio
9
marca
aplicações
Conceito.............................12
Papelaria institucional..........48
Marca.................................14
aplicativo
Construção símbolo............16
Conceito.............................54
Espaçamento.....................18
Tipografia............................60
Grid do logotipo..................20
Telas....................................62
Relação de proporção.......22
Ícones.................................70
Tipografia............................26 Padrão cromático...............28 Versões................................30 Redução.............................36 Área de reserva...................38 Aplicações..........................40
10
11
marca
conceito
Sabendo que os principais conceitos da empresa são: • Todos os tipos de notícias em um só lugar; • Filtros de personalização das notícias; • Hierarquizar as notícias passadas de acordo com o gosto do usuário; foi montado um conceito de marca visando sintetizar todas essas informações em um grafismo que fosse atrativo para o público-alvo da empresa e ao mesmo tempo funcional. Conceito esse demonstrado a seguir.
marca • conceito 13
As cores mostram a diversidade das notícias apresentadas;
Como uma faixa todas essas informações foram unidas em um só lugar;
As dobras representam a personalização das notícias, principal diferencial da empresa;
Por final, a “faixa” foi dobrada formando um R, representando a primeira letra da palavra release.
14
marca
A marca possui duas versões, uma na vertical e outra na horizontal, levando em conta a relação entre tipografia e simbolo. Como regra, a marca, na maioria dos casos, deve ser utilizado nessas duas versões. A marca não pode sofre alterações em suas proporções, espaçamento, cores e sombras. Em alguns casos específicos podem ser utilizados apenas o símbolo ou apenas a tipografia, porém, este uso não deve ser considerado, nunca, a primeira opção.
marca • marca 15
versão vertical
versão horizontal
16
construção símbolo
O diagrama construtivo do símbolo serve para se manter um padrão simbólico independente da mídia utilizada. As sombras devem respeitar a angulação de 15º. Enquanto os triângulos a medida abaixo:
x 4x
x y onde y = x/1,196. Com as medidas formam-se triângulos equiláteros.
marca • construção símbolo 17
18
espaçamento
O espaçamento serve pra determinar a distância entre as letras atravÊs de uma medida base predeterminada. A medida base utilizado (x) equivale a largura da letra L da palavra release do logotipo dividido por 7.
x
marca โ ข espaรงamento 19
x
4x 4x
3x
3,5x
x
20
grid do logotipo
O diagrama construtivo serve para ser usado como base para a distribuição e organização dos elementos do logotipo como um todo e não devem ser alterados. A medida para o módulo do grid é equivalente a altura do símbolo dividido por 8, formando um quadrado (altura=largura).
8x
x
marca • grid do logotipo 21
versão vertical
14 módulos
15 módulos
versão horizontal
8 módulos
29 módulos
22
relação de proporção
Para que o logotipo sempre seja reproduzido da mesma maneira, respeitando o tamanho da tipografia e do símbolo, é necessário a análise da relação de proporção entre esses elementos. Para a marca release o coeficiente de proporção (x) equivale a altura da haste da letra minúscula r que dá início ao nome.
x
marca • relação de proporção 23
Versão Vertical
x 3x
x/2 x
Versão Horizontal
x/2 x 2x
x
24
25
26
tipografia
A parte da tipografia é dividida em duas: a tipografia principal e a tipografia secundária. A tipografia principal é a AvantGarde-Demi e deve ser utilizada para as mensagens prioritárias, como os títulos, e textos de corpo maior. A secundária, AvantGarde Bk BT ou a família Roboto, para as demais informações, como textos e descrições.
marca • tipografia 27
AvantGarde-Demi
AvantGarde Bk BT
ABCDEFGHIJKLMNO PQRSTUVWXYZ
ABCDEFGHIJKLMNO PQRSTUVWXYZ
1234567890
1234567890
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Roboto
Roboto Condensed
ABCDEFGHIJKLMNO PQRSTUVWXYZ
ABCDEFGHIJKLMNO PQRSTUVWXYZ
1234567890
1234567890
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
28
padrão cromático
Para a identidade visual ter um bom funcionamento ela precisa estar ligada a um padrão cromático, para poder manter uma unidade em todos os meios necessários para a aplicação do logotipo. Não deve ser utilizadas outras cores que não as especificadas aqui. Exceto, escala de cinza.
marca • padrão cromático 29
CMYK: C=79 M=32 Y=5 K=0 RGB: R=27 G=142 B=197 Pantone: 7689C Hexadecimal: #1D8EC5
CMYK: C=15 M=90 Y=31 K=0 RGB: R=209 G=63 B=117 Pantone: 225C Hexadecimal: #D24075
CMYK: C=4 M=34 Y=87 K=0 RGB: R=241 G=175 B=61 Pantone: 143C Hexadecimal: #F1AE3D
CMYK: C=0 M=0 Y=0 K=90 RGB: R=65 G=64 B=66 Pantone: 447C Hexadecimal: #414142
CMYK: C=2 M=69 Y=87 K=0 RGB: R=238 G=113 B=56 Pantone: 7578C Hexadecimal: #EE7138
CMYK: C=0 M=0 Y=0 K=25 RGB: R=199 G=200 B=202 Pantone: 420C Hexadecimal: #C6C8CA
30
versões
Em todos os casos, devese priorizar o uso da marca colorida e utilizando-se das cores descritas no Padrão Cromático. Porém, o manual, também estabelece outros tratamentos cromáticos secundários, para quando não for possível utilizar o logotipo na versão em cores.
marca • versþes 31
vertical cores
vertical cores
horizontal cores
horizontal cores
(fundo escuro)
(fundo escuro)
32 marca • versþes
vertical grayscale
vertical grayscale
horizontal grayscale
horizontal grayscale
(fundo escuro)
(fundo escuro)
marca • versþes 33
vertical azul
vertical amarelo
horizontal azul
horizontal amarelo
34 marca • versþes
vertical laranja
vertical rosa
horizontal laranja
horizontal rosa
marca • versþes 35
vertical preto
vertical negativo
horizontal preto
horizontal negativo
36
redução
Reduzir demais o tamanho de uma marca dificulta em sua leitura e entendimento. Porém, os limites estão relacionados diretamente ao processo de impressão empregado, à qualidade do original utilizado e à qualidade de reprodução obtida. Os limites indicados são recomendados para impressões em off-set e visualização digital. A redução além desse limite comprometerá a leitura da marca.
marca • redução 37
redução máxima impressão versão vertical
redução máxima digital versão vertical
7,5mm 45px
redução máxima impressão versão horizontal
redução máxima digital versão horizontal
10mm 60px
38
área de reserva
Ao redor da marca deve ser reservado um lugar livre de qualquer tipo de elemento gráfico para preservar a sua integridade e legibilidade. Este espaço é denominado “área de reserva”. O espaço mínimo para a área de reserva do logotipo release equivale a altura da letra r minúscula do nome.
x
x x
marca • área de reserva 39
Versão Vertical
x x
x x Versão Horizontal
x x
x x
40
aplicações
Para uma melhor legibilidade e fidelidade ao logotipo é necessário que os critérios de aplicação em diversos tipos de background sejam seguidos, para que o padrão da identidade visual se mantenha.
marca • aplicações 41
42 marca • aplicações
marca • aplicações 43
44 marca • aplicações
marca • aplicações 45
46
47
aplicações
48
papelaria institucional
Layout para uso da papelaria institucional contendo: cart達o de visitas, assinatura de e-mail e envelope.
aplicações • papelaria institucional 49
nome sobrenome +55 81 1111.1111 +55 81 2222.2222 email@releaseapp.com www.releaseapp.com
cartão de visitas frente (8cm x 5cm)
cartão de visitas verso (8cm x 5cm)
50 aplicações • papelaria institucional
Download from Windows Phone Store
www.releaseapp.com
envelope papel frente
envelope papel verso
aplicaçþes • papelaria institucional 51
nome sobrenome +55 81 1111.1111 +55 81 2222.2222 email@release.com www.release.com assinatura de e-mail
52
53
aplicativo
54
conceito
O aplicativo busca aliar os conceitos da identidade visual com um fácil uso do sistema, de maneira em que o usuário apenas deslize o dedo para um lado ou para o outro encontrar as informações que deseja.
LER AGORA
NOTÍCIAS
aplicativo • conceito 55
A faixa que forma o símbolo da marca é utilizada para apoio dos temas, de modo que trabalhe como um looping infinito girando, respectivamente, nas cores: Azul, amarelo, laranja e rosa.
ENTRETENIMENTO
ESPORTES
Como visto na imagem abaixo, ao final da faixa quando o usuário rola até ao final do lado direito aparecer - terá um ícone de um ‘mais’, que servirá para adicionar temas personalizados do usuário de maneira rápida e eficaz.
TECNOLOGIA
+
faixa de seleção de temas
56 aplicativo • conceito
tela de abertura
feed principal
aplicativo • conceito 57
feed principal ao rolar para cima
feed exclusivo de ‘notícias’
58 aplicativo • conceito
tela para leitura da notĂcia
menu lateral
aplicativo • conceito 59
temas preferidos (conceito para demais telas de configuraçþes)
60
tipografia
A tipografia utilizada nas telas é a Roboto. Por meio de testes, foi determinado que esta fonte melhor se adequa em termos de legibilidade para dispositivos móveis que possuem telas pequenas. É importante que respeite-se os tamanhos, cores e espaçamento determinados a seguir.
aplicativo • tipografia 61
Título
Título card
Roboto Condensed (All Caps) Tamanho: 20pt Cor: #000000 Entre-linhas: 24pt
Roboto Condensed (All Caps) Tamanho: 14pt Cor: #000000 Entre-linhas: 18pt
Informações
Subtítulo card
Roboto Light Tamanho: 8pt Cor: #414042 Entre-linhas: 10pt
Roboto Light Tamanho: 10pt Cor: #000000 Entre-linhas: 13pt
Texto notícia
Informações card
Roboto Light Tamanho: 14pt Cor: #000000 Entre-linhas: 18pt
Roboto Light Tamanho: 8pt Cor: #c7c8ca Entre-linhas: 10pt
Informações app Roboto Condensed Tamanho: 16pt Cor: #414042 ou #FFFFFF
62
telas
As regras para a criação das telas são pontos primordiais na construção da identidade visual do aplicativo. Seguindo as seguintes regras e as proporções determinadas, o aplicativo terá uma interface sólida, simples, intuitiva e visualmente agradável. As medidas se baseiam em um aparelho com resolução de 360px x 640px. Para se chegar nessa interface, foi construído um grid de medida base 8px x 8px. É importante que o desenvolvimento para outras resoluções respeitem as proporções aqui determinadas.
aplicativo • telas 63
72px
72px 10:00
200px
176px
tela de abertura
64 aplicativo • telas 24px
40px 136px 112px 32px
8px
16px
tela principal
aplicativo • telas 65
16px
8px
56px
24px
136px
TÍTULO INFORMAÇÕES TEXTO NOTÍCIA
tela notícia
66 aplicativo • telas
112px 16px 56px
INFORMAÇÕES APP 32px
tela principal
72px
aplicativo • telas 67
16px
24px 56px INFORMAÇÕES APP
8px
32px
tela notícia
68 aplicativo • telas
8px
24px TÍTULO CARD
128px
INFORMAÇÕES CARD
SUBTÍTULO CARD
card notícias
16px
aplicativo • telas 69
24px
56px
8px
40px
36px
tela principal ao rolar para cima
70
ícones
Para a criação dos ícones foi criado um grid de medida base um quadrado de largura de 4 px, de modo que se adequasse ao grid utilizado para a construção do aplicativo.
aplicativo • ícones 71
ícone tema - entretenimento
72 aplicativo • ícones
ícone tema - esportes
aplicativo • ícones 73
ícone tema - notícias
74 aplicativo • ícones
ícone tema - tecnologia
aplicativo • ícones 75
ícone tema - personalizado
76 aplicativo • ícones
ícone menu - configurações
aplicativo • ícones 77
ícone menu - log-out
78 aplicativo • ícones
ícone menu - perfil
aplicativo • ícones 79
ícone menu - sobre
80 aplicativo • ícones
ícone menu - temas preferidos
81
82
83
Designer responsรกvel: Bruno Perruci +55 81 8847.3581
84