Manual de identidade visual
1
2
missão Nossa missão é auxiliar as cidades se tornarem
conectadas,
inteligentes
e
sustentáveis facilitando a projeção de soluções inovadoras, que através do Design Thinking Sustentável, sanam as dores da população, melhorando a qualidade de vida e favorecendo a comunicação entre consumidor e mercado.
visão Ser a plataforma líder na construção colaborativa de soluções sustentáveis para smart cities, reconhecida por sua metodologia, transparência, confiabilidade e dinamismo, destacando-se pela participação dos usuários e dos projetos viabilizados através da plataforma.
valores Transparência
Confiabilidade
Dinamismo Inovação Resiliência Sustentabilidade 3
Ăndice
4
06 a marca
08 conceito de criação
14 paleta de cores
Logo
Variações tonais
Proporção
Padrão de cores
Variações
Degradês
Margem de segurança Redução Responsividade
22 grafismo Aplicações
24 tipografia Aplicações
28
fotografia
34
motion brand
Usos incorretos Aplicações
5
ÁGORA
a marca Ágora era o local onde os gregos se reuniam para discutir, democraticamente, questões filosóficas e políticas. Localizado normalmente em praças públicas, as Ágoras eram locais de venda e lazer da população local.
6
7
conceito de criação Com base no fonema da palavra Ágora, onde a silaba tonica é o A, graças ao acento agudo, determinamos que a letra A deveria ser maior e com mais enfase no logo. Então, a letra tônica tem o tamanho de 2 R (218px), ja as demais tem largura de 196px. Para substituir o acento, colocamos um arco de baixo para cima, trabalhando a ideia de progresso, o mesmo se estabiliza e chega em um ponto, como o fluxo de trabalho de um projeto, que, começa de baixo, sem nada estabelecido, e chega em um ponto, em um ritmo rotativo). O arco, cruza o A, que por sua vez, se liga ao G, formando a letra grega Alfa, e expressa a idéia de conexão. O ponto, localizado no final do arco, tem sua posição fixa, seguindo a linha do vão entre as letras O e R passando a sensação de estabilidade e por ultimo, a letra A da palavra Ágora, ficou menos distante do R, comparado às demais letras que por sua vez tem 32,3px de distância, a mesma largura do traçado da tipografia. 8
LOGO
Base de redução baseado na proporção aurea
9
LOGO
variações O logo possui quatro variações, seguindo a paleta de cores. As aplicações sobre fundos coloridos podem ser tanto com a versão primária ou negativa dependendo da legibilidade e foco da aplicação o mesmo vale para aplicação fotográfica.
10
LOGO
X
X
X
X
margem de segurança e redução Para proteger a legibilidade do logo é fundamental usar a margem de segurança correspondente a letra “O” que compõe o logo, pois se trata exatamente da metade da proporção do mesmo
11
LOGO
responsividade Ao trabalhar com peças responsivas, a marca deve seguir os seguintes
1/1 100%
parâmentros de redução. A redução máxima do logo como um todo deve ser até 25% para mair comprensão de seus elementos. Abaixo de 25% é conselhavel a utilização
1/2 50%
de apenas o simbolo.
1/4 25%
12,5% 12
LOGO
usos incorretos NÃO
Para maior consistência da marca
NÃO
mudar a cor da marca
tirar elementos da marca
NÃO
mudar o tom de cores para as
que não estão na nossa paleta
é necessario respeitar sua aplicação original não a modificando ou alterando seus elementos. Ao lado alguns exemplos de utilizações incorretas.
NÃO
Mudar a direção do degradê
NÃO
usar em linhas
NÃO
distorcer marca
Todas as aplicações indevidas se replicam para a redução
13
paleta de cores C M Y K 79 69 0 0
A paleta de cores foi definida através do estudo do painel semâtico, onde
R 94
definimos uma cor primária e três secundárias. Cada cor busca representar um
#5e5ae3
conceito na para a marca, sendo elas:
C M Y K 70 0 53 0
Verde Turquesa: A união de
R 6
sustentabilidade com tecnologia
G B 201 152
# 06c998
C M 78 31 R 78
Roxo: Mistério e versatilidade Use o RGB e HEX para exibição na tela e uso digital. E o CMYK para impressão.
14
G 31
Y 0
K 0 B 00
#1790d5
Azul: Segurança Amarelo: Criatividade e ideias.
G B 90 227
C 7
M 0
Y K 84 0
R G B 248 233 49 #f8e931
PALETA DE CORES
C M Y K 60 0 46 0
C M Y 76 0 61
R G B 9 235 179 #09ebb3
R 7
K 0
G B 184 140 #07b88c
variações tonais Cada uma das cores possui duas variações tonais, visando dar maior flexibilidade no uso da paleta.
C M Y K 70 0 53 0
C M Y K 100 100 19 6
R G B 69 65 196 #4541c4
R G B 38 35 123 # 26237b
C M Y 85 45 7
C M Y K 94 64 29 10
A combinação das cores junto com o seu tom tem o intuito de trazer o sentimento de segurança e serenidade para a plataforma.
K 0
R G B 21 123 181 #157bb5
C M 13 7
Y K 91 0
R G B 229 216 57 #e5d839
R G B 18 29 129 #125981
C M Y K 26 19 100 0 R G B 198 185 34 #c6b922 15
PALETA DE CORES
padrões de cores Cada cor secundária representa um perfil de usuários, seguindo os seus respectivos significados apresentados na paleta de cores. O padrão de cores deve ser seguido para fortalecer o conceito de cada usuário. Em degradê todas as cores fazem ligação com a principal, sendo ela o ponto âncora.
16
PALETA DE CORES
Degradês Cada degradê trabalha com a passagem da cor primária para as cores secundárias e seus devidos tons, formado quatro degradês diferentes. Os degradês (azul, amarelo e roxo) devem ser utilizados na composição de peças e identif icação de perf is na plataforma. Já o verde primário se mantem neutro e tem o intuito de reforçar a preseça da marca.
17
degradê neutro tons de verde O degradê é composto por dois tons de verde da paleta primária mantendo o ângulo de 235º A utilização desse degradê deve ser usado em peças neutras que não conversam diretamente com um dos perfis da plataforma
#09EBB3
18
#07B88C
degradê entusiasta
#09EBB3
roxo para verde O degradê é composto por uma das cores primárias seguida de uma das secundárias, mantendo um angulo de 235º A utilização desse degradê deve ser associado as peças voltadas para o perfil de Entusiasta.
#8A10FD
19
degradê projetista amarelo para verde O degradê é composto por uma das cores primárias seguida de uma das secundárias, mantendo um angulo de 235º A utilização desse degradê deve ser associado as peças voltadas para o perfil de Projetista
#F8E931
20
#09EBB3
degradê investidor
#09EBB3
azul para verde O degradê é composto por uma das cores primárias seguida de uma das secundárias, mantendo um angulo de 235º A utilização desse degradê deve ser associado as peças voltadas para o perfil de Invetidor
#1790D5
21
grafismos Para o auxilio visual do usuário trabalhamo com dois tipos de grafismos com formas circulares. Os circulos gradiente trazem em seu conceito a ideia de ciclos, fluidez e modulariedade, se adaptando a cada ambiente proposto. O pontilhismo traz o conceito de concepção de projetos, bastante utilizado em sketchbooks, o mesmo reforça a liberdade na idealização de soluções e a grid pontilhada assim, como o pontilhismo reforça a ideia de projeção com o conceito de sustentabilidde, uma vez que sua forma é a mesma utilizada em placas de energia solar.
22
GRAFISMO
aplicações grafismos
23
tipografia Utilizamos fontes que fossem levemente arredondadas, para que, de maneira orgânica,
pudessem
relacionar
o
digital e o natural. A fonte Typo Grotesk Rounded, que foi
tipografia logo
utilizada no logo, é uniforme e de fácil leiturabilidade, por conter um grande espaçamento
interno
nas
letras
mais elípticas, e é menos métrica, tornando-a natural na sua forma.
industrial,
o
que
ajuda
na
legibilidade e na leiturabilidade, sem perder as características necessárias para o projeto, a mesm aé usada em dois pesos para da mais sobriedade para as peças.
24
ABCDEFGHIJKLMNOPQRSTUVWXZ abcdefghijklmnopqestuvwxz
A Montserrat possui uma aparência mais
Typo Grotesk Rounded
0123456789 $@#?!
TIPOGRAFIA
tipografia textos e web
Montserrat Regular A
B
C
a
b
c
D d
E e
F f
G g
0 1 2 3 4 5 6 7 8 9
H h
I i
J j
K k
L
l
m
M n
N
O
P
Q
R
S
o
p
q
e
s
N
O
P
Q
R
S
p
q
e
s
t
t
T u
U v
V w
W x
X
Z
X
Z
z
$ @ # ? !
Montserrat Bold A
B
C
a
b
c
D d
E e
F f
0 1 2 3 4 5 6 7 8 9
G g
H h
I i
J j
K k
L l
m
M n
o
T u
U v
V w
W x
z
$ @ # ? !
25
TIPOGRAFIA
usos incorretos X
NUNCA USAR FONTES EM MAIÚSCULAS
X
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. SED ALIQUET ANTE NEC DIGNISSIM DICTUM. MAURIS HENDRERIT VULPUTATE IACULIS. PROIN FAUCIBUS ODIO QUIS GRAVIDA COMMODO. CLASS APTENT TACITI SOCIOSQU AD LITORA TORQUENT PER CONUBIA NOSTRA, PER INCEPTOS HIMENAEOS. DONEC BIBENDUM VENENATIS EROS UT TINCIDUNT. ALIQUAM QUIS SCELERISQUE ERAT, UT SOLLICITUDIN ARCU. FUSCE VITAE
NUNCA DESALINHAR NÃO USAR MESMO PESO EM SUBTITULO
FELIS A VELIT ULLAMCORPER DAPIBUS IACULIS ID MI. NULLAM ELIT EST, DICTUM VITAE URNA ET, CONDIMENTUM GRAVIDA TELLUS. QUISQUE ALIQUAM QUIS SCELERISQUE ERAT, UT SOLLICITUDIN ARCU. FUSCE VITAE FELIS A VELIT ULLAMCORPER DAPIBUS IACULIS ID
X
26
X
NUNCA DESALINHVAR NÃO SOBREPOR
TIPOGRAFIA
usos corretos X
Usar a fonte MONTSERRAT
X
para títulos em caixa baixa
Fonte Montserrat 20 pt. Entrelinha 34 pt
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet ante nec dignissim dictum. Mauris hendrerit vulputate iaculis. Proin faucibus odio quis gravida commodo. Class aptent taciti sociosqu ad Fonte Quicksand 12 pt. Entrelinha 18,4pt
litora torquent per conubia nostra, per inceptos himenaeos. Donec bibendum venenatis eros ut tincidunt. Aliquam vitae felis a velit ullamcorper dapibus iaculis id mi. Nullam elit est, dictum vitae urdictum vitae udictum vitae udictum vitae udictum vitae udictum vitardictum vitae urdictum vitae urdictum vitae urdictum vitae qqna et,
Título a esquerda
condimentum gravida tellus. Quisque vel tortor
Subtitulo em baixa
lacus. Phasellus convallis vestibulum tristique. Vivamus cursus usce vitae felis a velit ullamcorper dapibus iaculis id mi. Nullam elit est, dictum vitae
Título a esquerda
urna etuisque vel tortor lacus. Phasellus convall.
Subtitulo em baixa
Phasellus convallis vestibulum
X
X
27
fotografia O estilo fotográf ico da Ágora trabalha com imagens que mostram a realidade dos usuários no ambiente de trabalho, execução de projetos e concepção de novos produtos. As fotograf ias devem ilustrar uma experiência positiva do consumidor em contato com a marca. Deve se trabalhar com imagens contrastantes e expontaneas que demonstrem o sentimento de alegria, confiança e proximidade. Cada perfil de usuário deve trabalhar com fotografias do seu segmentos, seguindo os parametros aqui apresentados.
28
29
FOTOGRAFIA
fotografias que devem ser evitas D eve s e ev i t a r a a u t i l i z a ç ã o d e fo to g ra f i a s p o s a d a s , s e m contrastes, monocromáticas, com tons muitos escuros e que vão contra os conceitos trabalhados
30
31
FOTOGRAFIA
aplicações Ao trabalha com composição textual, as fotografias devem seguir os seguites parametros: Área de respiro: áreas de pouco ou nenhum elementos, onde ao aplicar o texto não prejudique a leiturabilidade do mesmo. Área de ação: Área do assunto principal trabalhado na fotografia. A aplicação do logo deve ser seguir a margem de segurança proposta anteriormente, sempre aplicada na área mais neutra da composição.
ÁREA DE RESPIRO
32
ÁREA DE AÇÃO
FOTOGRAFIA
lorem ipsum dolor sit amet els doler ipsum
33
motion brand A animação do logo foi criada co m p e r s p e c t i va s d i fe re n te s af im de simbolizar a variedade de pespectivas que a plataforma pode enxergar ao realizar uma análise de sustentabilidade. S u a f o r m a a r re d o n d a d a e m desenvolvimento simboliza a forma cíclica dos passos do design thinking. A animação deve ser utilizada em peças audivisuais, trabalhalhando com as cores da paleta seguindo a aplicação necessária para cada peça. A mesma não deve ser acelarada, cor tada e ter sua velocidade reduzida ou acelerada.
34
Este manual é de consulta obrigatória para a aplicação da marca. Se você está com duvidas ou problemas com suas respectivas aplicações, por favor entre em contato com nossa equipe de designers. designbrand@agorasolucoes.com
