Manual Identidade Visual Release

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.