Manual De Identidade Visual

User Manual: Pdf

Open the PDF directly: View PDF PDF.
Page Count: 42

DownloadManual De Identidade Visual
Open PDF In BrowserView PDF
ual

Página | 3

Manual de Identidade Visual

Introdução
O objetivo deste documento é apresentar as diretrizes que definem a nossa marca,
passando pelos conceitos e valores que a sustentam, até chegar às regras e medidas
que moldam a sua apresentação e a forma como se relaciona com o público.

Partiu! /

Página | 4

Partiu! /

Manual de Identidade Visual

e Visual
Página | 5

Manual de Identidade Visual

Índice
7 Marca

23 Paleta de Cores

39

11 Público Alvo

33

41 Ilustrações

13

35 Ícones

ogotipo

ipografia

edalhas

Partiu! / Índice

Marca

Página | 7

Manual de Identidade Visual

Pilares da marca
Os pilares da marca definem sua posi o no mundo, seus objetivos e motivos
pelos quais e iste, os compromissos e valores que colabora e se empenha em
cumprir, além da sua ess ncia

Partiu! / Pilares da Marca

Página | 8

Manual de Identidade Visual

O propósito

Os compromissos

A essência

O objetivo deste documento é apresentar

Aproveitar os eventos e atividades que

O nosso slogan,

as diretrizes que definem a nossa marca,

ocorrem nos espaços urbanos para auxiliar

deve ser capaz de aproximar o público do

passando pelos conceitos e valores que a

pessoas a interagirem ora das redes,

nosso objetivo, além de prepar lo para a

sustentam, até chegar às regras e medidas

ao mostrar a elas eventos e atividades

e peri ncia que ir obter ao utilizar

que moldam a sua apresentação e a forma

acontecendo nestes espa os, que sejam

nosso serviço.

como se relaciona com o público.

acess veis e que elas possam achar

onhe a o que te rodeia ,

nossa ess ncia é

interessantes a ponto de querer participar.

esolver problemas

globais de orma local , e re ete o objetivo
deste projeto, ou seja, ao trabalhar a

rovocar uma re e

o a respeito do tempo

que atualmente é gasto em intera

es

quest o da depend ncia de nternet e dos
aparatos tecnol gicos, que a ige pessoas

dentro das redes e que poderiam ser

de todo o globo, com um projeto de

eitas em espa os sicos reais, o que

propor

possibilitaria melhora na qualidade de vida

e ser aplicado em múltiplas

o local, mas que pode se adaptar

regi es di erentes

Partiu! / Pilares da Marca

Página | 9

Manual de Identidade Visual

Os valores

Interação

Movimento

Diversidade

Partiu! / Pilares da Marca

Público Alvo

Página | 11

Manual de Identidade Visual

Público lvo rim rio

Público Alvo Secundário

essoas de ambos os se os, que moram em regi es urbanas e s o financeiramente
independentes

niversit rios ou j

ormados amiliarizados com redes sociais e a

navegar pela nternet nteressados em conhecer e participar de eventos na cidade
que sejam de

cil acesso eventos baratos ou de gra a e pr

imos do indiv duo

mpresas que operam no meio digital, seja através de sites ou aplicativos, e que
t m como produto a divulga

o de eventos diversos que acontecem ao redor de

seus usu rios, como sho s, conven
s

de atingir este p blico é criar rela

es, viagens, tours, entre outros O objetivo

es entre os projetos para que nos seja avor vel

atividades de lazer que praticam ou t m interesse em come ar a praticar se adequam

pelas e pans o dos nossos produtos através da inclus o dos eventos presentes nas

às categorias que estabelecemos atividades re erentes à m sica, gastronomia, arte,

plata ormas dessas empresas capta

educa

empresas possibilidade de implantar o sistema de recompensas, aonde os usu rios

o, sa de, esportes, tecnologia, causas sociais, etc

o de p blico consumidor j usu rio dessas

bem pontuados podem trocar esses pontos por pr mios com as empresas aliadas
atraca ivre, rip dvisor, irbnb, ic ets or un

Partiu! / Público Alvo

Logotipo

Página | 13

Manual de Identidade Visual

Pin Google maps

Letra “P”

Construção do símbolo
O símbolo criado busca trazer os assuntos
que a marca trata localiza

o e o ato

do símbolo parecer um pin de mapas e
s , além de azer re er ncia a outros
elementos da identidade visual, como o
logotipo a letra

que representa

o nome da marca

Partiu! / ogotipo

Página | 14

Opções em teste
de fonte

Partiu! / ogotipo

Manual de Identidade Visual

Manual de Identidade Visual

Página | 15

Opções em teste
de cores

Partiu! / ogotipo

Página | 16

Manual de Identidade Visual

Logotipo
or sua vez, o logotipo artiu apresenta
um outro ponto importante da marca a
socializa

o, que representa ir a algum

lugar azer alguma coisa
o qu n o é importante, desde que traga
a intera

o entre pessoas

O logo ent o tem o objetivo de reunir
esses conceitos, e apresentar
a quem o v os valores
e conceitos mais importantes da marca.

Partiu! / ogotipo

Manual de Identidade Visual

Página | 17

Variações Logotipo
O logo deve ser utilizado sempre que
poss vel na sua ers o rincipal, ao menos
que os meios de veicula

o dificultem

o seu entendimento, devendo ent o ser
adotada a ers o

onocrom tica, mais

simples porém mais leg vel
em meios espec ficos
pre er vel que o logo seja aplicado
sobre fundos neutros e próximos ao
branco, devendo ser adotada a sua vers o
monocrom tica quando utilizado sobre
undos coloridos e ou carregados

Partiu! / ogotipo

Página | 18

Variações em preto e branco e tons de cinza

Partiu! / ogotipo

Manual de Identidade Visual

Página | 19

Manual de Identidade Visual

2x

Área de Proteção

2x

necess rio manter uma dist ncia entre
o logo e os demais presentes na tela, de
modo que estes não prejudiquem a leitura
e o entendimento da marca.
rea de prote

o é medida com base no

espa o entre a marca e o logotipo como
mostra ao lado.

x

Partiu! / ogotipo

Página | 20

Manual de Identidade Visual

Redução e Limites
redu

o deve ser eita, como mostrado

ao lado, para a aplica

o do logo em

di erentes ormatos, respeitando sempre
os limites de legibilidade

100%

Partiu! / ogotipo

50%

25%

Página | 21

Manual de Identidade Visual

Partiu!
Não utilizar

Respeitar a tipografia e as cores do logo

Respeitar a posição do símbolo e do logotipo.

De modo a manter consistente a identidade
visual da marca, certas regras devem ser
seguidas durante a aplica

o do logo

Não esticar ou distorcer o logo.
Não aplicar o logo sobre fundos que o tornem de difícil leitura.

Partiu! / ogotipo

Paleta de cores

Página | |23
Página
23

Manual de Identidade Visual

Paleta de ores rim ria
# FFB073
As cores ao lado representam a paleta de
cores utilizada, servindo tanto para

R255 G176 B115
C0% Y39% M57% K0%

a identidade visual da marca
ores nstitucionais

# FF1449
R255 G20 B73
C0% Y94% M57% K0%

Partiu! / Paleta de Cores

Página
Página
| 24| 24

Manual
Manual
de Identidade
de Identidade
Visual
Visual

# E6E6E6
# E6E6E6
R230
R230
G230
G230
B230
B230
C12%
C12%
Y8%
Y8%
M9%
M9%
K0%
K0%

# 333333
# 333333
R51R51
G51G51
B51B51

Paleta
Paleta
Tons
Tonsdedecinza
cinza

C69%
C69%
Y60%
Y60%
M56%
M56%
K66%
K66%

OsOs
tons
tons
dede
cinza
cinza
mais
mais
escuros
escuros
sãosão
utilizados
utilizados
para
para
te te
tostos
seguindo
seguindo
a ordem
a ordem
hierhier
rquica,
rquica,
dodo
escuro
escuro
como
como
destaque
destaque
ou ou
importante
importante

# F2F2F2
# F2F2F2

ao ao
tom
tom
intermedi
intermedi
rio rio
para
para
subt
subt
tulos
tulos

R242
R242
G242
G242
B242
B242

e textos
e textos
dede
apoio.
apoio.

C6%
C6%
Y4%Y4%
M5%
M5%
K0%
K0%

OsOs
tons
tons
mais
mais
claros
claros
sãosão
utilizados
utilizados
para
para
compor
compor
o fundo.
o fundo.
É preferível
É preferível
utilizar
utilizar

# 666666
# 666666
R102
R102
G102
G102
B102
B102
C56%
C56%
Y45%
Y45%
M45%
M45%
K33%
K33%

o tom
o tom
que
que
antecipa
antecipa
o branco
o branco
para
para
compor
compor
o fundo.
o fundo.

# FFFFFF
# FFFFFF
R255
R255
G255
G255
B255
B255
C0%
C0%
Y0%
Y0%
M0%
M0%
K0%
K0%

# 999999
# 999999
R153
R153
G153
G153
B153
B153
C41%
C41%
Y32%
Y32%
M32%
M32%
K11%
K11%
Partiu!
Partiu!
/ Paleta
/ Paleta
de Cores
de Cores

Página | 25

Manual de Identidade Visual

# FF00CC
# 333399
R51 G51 B153

R255 G0 B204
C26% Y83% M0% K0%

C95% Y87% M0% K0%

Paleta de Cores Secundárias
s cores secund rias comp em degrad s
e servem para identificaras di erentes
ategorias

# F7B733
# F83600
R248 G54 B0

R247 G183 B51
C2% Y32% M85% K0%

C0% Y87% M96% K0%

# 00EEFF
# 2A54F4

R0 G238 B255

R42 G84 B244

C58% Y0% M11% K0%

C86% Y67% M0% K0%

# 11998E
R17 G153 B142

# 24FE41
R36 G254 B65
C63% Y0% M100% K0%

C80% Y16% M50% K2%
Partiu! / Paleta de Cores

#FF1449

#FF1449

#FFB073

#FFB073

DegradêDegradê
PrimárioPrimário
O degradê primário
O degradê
é fundamental
primário é fundamental
para a identidade
para da
a identidade
marca, elada
é amarca,
cor ela é a cor
representadarepresentada
no logotipo, pode
no logotipo,
ser usado
pode ser usado
junto ao logotipo
juntoem
aomonocromático.
logotipo em monocromático.
Os degradês Os
formados
degradês
a partir
formados
de a partir de
combina

escombina
espec ficasesdeespec
coresficas
t m de cores t m

devem ser utilizados
devem ser
de acordo
utilizados
com
deaacordo com a
parte da paleta
parte
a qual
da paleta
pertencem.
a qual pertencem.

O degradê deverá
ser usado
O degradê
deverá ser usado
na direção, denabaixo
parade
cima
direção,
baixo para cima
respeitando arespeitando
angulação a angulação
de 67°.
de 67°.

0%

0%

100%

100%

#333399

#FF00CC

#333399

#FF00CC

DegradêDegradê
Secundário
Secundário
Este degradê Este
devedegradê
ser utilizado
devepara
ser utilizado para
sinalizar a Categoria
sinalizar
Música.
a Categoria Música.

O degradê deverá
O degradê
ser usado
deverá ser usado
na direção, denabaixo
direção,
parade
cima
baixo para cima
respeitando arespeitando
angulação a angulação
de 67°.

0%

0%

de 67°.

100%

100%

#F84600

#F7B733

#F84600

#F7B733

DegradêDegradê
Secundário
Secundário
Este degradê Este
devedegradê
ser utilizado
devepara
ser utilizado para
sinalizar a Categoria
sinalizar
Gastronomia.
a Categoria Gastronomia.

O degradê deverá
O degradê
ser usado
deverá ser usado
na direção, denabaixo
direção,
parade
cima
baixo para cima
respeitando arespeitando
angulação a angulação
de 67°.

0%

0%

de 67°.

100%

100%

#2A54F4

#00EEFF

#2A54F4

#00EEFF

DegradêDegradê
Secundário
Secundário
Este degradê Este
devedegradê
ser utilizado
devepara
ser utilizado para
sinalizar a Categoria
sinalizar
Arte
a Categoria
e Educação.
Arte e Educação.

O degradê deverá
O degradê
ser usado
deverá ser usado
na direção, denabaixo
direção,
parade
cima
baixo para cima
respeitando arespeitando
angulação a angulação
de 67°.

0%

0%

de 67°.

100%

100%

Man

#11998E

#24FE41

#11998E

#24FE41

DegradêDegradê
Secundário
Secundário
Este degradê Este
devedegradê
ser utilizado
devepara
ser utilizado para
sinalizar a Categoria
sinalizar
Estilo
a Categoria
de vida.Estilo de vida.

O degradê deverá
O degradê
ser usado
deverá ser usado
na direção, denabaixo
direção,
parade
cima
baixo para cima
respeitando arespeitando
angulação a angulação
de 67°.

0%

0%

de 67°.

100%

100%

Página | 31

Manual de Identidade Visual

Partiu! /

Tipografia

Manual de Identidade Visual
Uso exclusivo apenas
para logotipo.

Aa Bb

Arista Light

Aa Bb

Raleway Bold

Página | 33

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Tipografia
onte do logotipo utilizada é rista onde
apresenta uma abordagem geométrica
e suave, permitindo uma combin

o nas

ormas do s mbolo artiu
Obtenha pelo site http

zeta onts

Para uso em títulos
e informações
em destaque,
subtítulos e textos.

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 $@#?!:

com arista
ale a é uma elegante am lia de tipos
sans seri destinada a t tulos e outros usos
de grande porte
oi definida nos pesos old, egular

Aa Bb

Raleway Regular
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789 $@#?!:

e ight, variando con orme a necessidade
de cada te to, embora respeitando sempre
uma consist ncia visual

old para t tulos,

egular para blocos de te to, etc
Obtenha pelo site https
com specimen
.

ale a

onts google

a b

ale a ight
a b c d e
g h i j
n Oo p aq r s t u v

l

m
z

Partiu! / ipografia

Ícones

Página | 35

Manual de Identidade Visual

Ícones
Os cones do artiu e istem para acilitar a leitura das in orma

es em cada tela,

a simplificando e a tornando mais visual, r pida e pr tica
Os principais cones oram baseados no ormato da onte rista, presente no logotipo,
e no s mbolo, porém com uma espessura menor para serem mais leg veis em redu

Partiu! / Ícones

es

Página | 36

Manual de Identidade Visual

Música

ho s
e festivais

Gastronomia

Eventos
Gastronômicos

Arte
e Educação

Cinema
e Teatro

Exposições
e Eventos

Estilo
de Vida

Saúde
e Esporte

ecnologia
e Inovação

estas
e baladas

Categorias
lustram as ategorias presentes na pe a
e devem impactar visualmente de modo
a serem reconhecidos acilmente pelo
usu rio

Partiu! / Ícones

estaurantes
e ares

Página | 37

Manual de Identidade Visual

Menu

Indicar Evento

Mapa

avoritos

Eventos

Curtir

oto

edalha

Promoções

erfil

Sair

hec in

ecomendado

Funcionais
resentes nos menus, ilustram de orma
l dica as a

es e criar evento e telas

e lista de eventos, configura

es, perfil

do usu rio que representam e devem ser,
assim como os cones de ategorias, de
cil entendimento
onfigura

es

avoritado

Partiu! / Ícones

Medalhas

Página | 39

Manual de Identidade Visual

Avaliador de Eventos

Eventos com muitas curtidas

Medalhas de eventos

Medalhas

s medalhas s o mais detalhadas para se
Em conta

destacarem, pois servem como adornos,
enaltecendo os feitos alcançados durante
a trajet ria pelo aplicativo artiu

Colecionador de medalhas

em
movimentado

em
atendido

Pet
liberado

Limpo

Indicador de eventos com medalhas

epresentam tanto as conquistas que um
usu rio atinge durante a utiliza

o da pe a,

bem como os pontos fortes de um evento

om

baseado no eedbac que

i fi

os usu rios passam

Indicador de eventos

o pleto perfil
NOVIDADE

eguro

Inovador

Com
acessibilidade

Partiu! /

edalhas

Ilustrações

Página | 41

Manual de Identidade Visual

Ilustrações
s ilustra

es oram eitas seguindo o

Partiu!

estilo iconogr fico, porém de orma mais
detalhada, com o objetivo de representar
visualmente as instruções as quais
se referem.

Partiu! / Ilustrações

Página | 42

Partiu! /

Manual de Identidade Visual

Man

Página | 2

Partiu! /

Manual de Identidade Visual

Manual d

isual

Página | 43

Manual de Identidade Visual

Ficha Técnica
Universidade Anhembi Morumbi | Ano 2017
Design Digital | Manhã
Trabalho de Conclusão de Curso
Autores:
Caio Paschoa
Diego Zago
Gustavo Almeida
e erso

eal

cas erreira
Vitor Videira
Yago Melani
Orientador:
Carlos Alberto Barbosa
Partiu! /



Source Exif Data:
File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
Linearized                      : No
XMP Toolkit                     : XMP Core 5.4.0
Creator Tool                    : Adobe InDesign CC 2017 (Macintosh)
Metadata Date                   : 2017:11:30 01:12:11-02:00
Create Date                     : 2017:11:30 01:12:05-02:00
Modify Date                     : 2017:11:30 01:12:11-02:00
Format                          : application/pdf
Original Document ID            : xmp.did:3295b1da-25a6-453e-b807-414e93a4053c
History Software Agent          : Adobe InDesign CC 2017 (Macintosh)
History Parameters              : from application/x-indesign to application/pdf
History Changed                 : /
History When                    : 2017:11:30 01:12:05-02:00
History Action                  : converted
Instance ID                     : uuid:76a521db-19f9-1f42-be5b-b74cb770c3fa
Document ID                     : xmp.id:04d6c13a-4fee-4556-ab1c-fc92524c0cc6
Derived From Rendition Class    : default
Derived From Document ID        : xmp.did:3295b1da-25a6-453e-b807-414e93a4053c
Derived From Instance ID        : xmp.iid:1aa0316e-63db-4bb2-ba04-5e94b6b6d8bd
Derived From Original Document ID: xmp.did:3295b1da-25a6-453e-b807-414e93a4053c
Rendition Class                 : proof:pdf
Trapped                         : False
Producer                        : Adobe PDF Library 15.0
Page Count                      : 42
PDF Version                     : 1.4
Creator                         : Adobe InDesign CC 2017 (Macintosh)
EXIF Metadata provided by EXIF.tools

Navigation menu