MANUAL DE IDENTIDADE VISUAL
INTRODUÇÃO O objetivo deste guia é apresentar os elementos que compõem a identidade visual da marca MOODSIGHT. Os elementos de identidade: logo, tipografia, cor, tom de voz, grids, grafismos, imagens e ícones entre outros estão definidos nesse manual para facilitar a criaçao de comunicações que representem a imagem da marca.
SOBRE O PROJETO O Moodsight é uma ferramenta multifuncional cujo objetivo é incrementar a relação homem-máquina a fim de aumentar e acelerar a produção dos designers. Tem o propósito de automatizar certas atividades e gerar um ambiente de experimentações proporcionando aos usuários uma otimização no processo criativo, facilitando a prototipação. O usuário seleciona o painel do seu pinterest que irá passar pelo sistema de IA, reconhecendo as cores predominantes das imagens e gerando a paleta de cores, mostrando diversas aplicações em componentes de interface, teste de ícones e fontes sobre as cores, mockup interativo e acesso a um Material design kit e CSS.
SUMÁRIO 04. IDENTIFICAÇÃO DE ELEMENTOS 06. PERSONALIDADE
22. MASCOTE Mascote e variações Ilustração e estilo
Voz & Tom Persona e Propósito Mídia social Público-Alvo
13. MARCA Conceito O logo - símbolo + logotipo Moodboard Variações e aplicações Área de proteção e Redução Responsividade O que não fazer
24. ELEMENTOS Cores Degradês GrafismoÍcones Padrões Fotografia Fontes
IDENTIFICAÇÃO DE ELEMENTOS
04
PERSONALIDADE
PERSONALIDADE Voz & Tom Nossa voz não muda muito mas nosso tom é diferente a cada situação, meio e pessoas nas quais estamos iniciando um diálogo.
Voz: Inteligente, amigável, animada e moderna.
Tom de voz: Amigável
Profissional
Espontânea
Estrategista
Moderna
Tradicional
Divertida
Séria
Relacional
Transacional
06
Personalidade
Persona e Propรณsito
PERSONA Brincalhona, Inspiracional, Amigรกvel, Casual.
PROPร SITO Enga jar, Informar, Motivar, Vender.
07
Personalidade
Mídia social O sistema moodsight trabalha em conjunto com o plataforma do pintEeest. Essa simbiose permite com que as ferramentas já pré existentes funcionem em suporte na área das mídias sociais. O web App moodsight auxilia também na comunicação entre profissionais já que determinada coleção de imagens pode criar inúmeras variantes de design final. Um estudo de engenharia reversa pode ampliar as possibilidades iniciais dos layouts e projetos.
08
Personalidade
Público-Alvo
Personas
PRIMÁRIO São profissionais de criação (marketing, design, publicidade, arquitetura, editores, etc.) entre 25-40 anos que precisam aumentar a sua capacidade de produção e utilizam os painéis noPinterest.
CATARINA
GEORGE
RAFAEL
SECUNDÁRIO Estudantes, artistas e designers entre 18-24 anos com um processo criativo que envolvam tecnologias digitais e procuram novas ferramentas de produtividade.
ARIANA
Idade: 29
Idade: 33
Idade: 20
Idade: 24
Ocupação: Designer/ Front-end Developer
Ocupação: UX Designer
Ocupação: Estudante/ Design Gráfico
Ocupação: Estudante/ Design Digital
Catarina trabalha em home-office para uma empresa de tecnologia. Mesmo trabalhando em casa ela se frustra fazendo o mesmo processo de criação, e busca ganhar mais tempo livre otimizando seu trabalho.
George trabalha como Ux Designer chefe de uma equipe de designers em uma empresa B2B, ele produz soluções centradas no usuário e está sempre em busca de maneiras suprir a demanda dos clientes e atender suas necessidades.
Rafael é um estudante que procura novas ferramentas e está entusiasmado com sua escolha de curso e o mercado de atuação, mas se frustra com as cargas excessivas de atividades e quer novas maneiras de testar ideias e prototipar.
Ariana é bolsista e estuda Design Digital, faz estágio numa agência de e-commerce, ela produz as interfaces dos projetos e quer ganhar tempo no processo de criação e experimentar novas ideias.
09
Personas Moodboard
Personas Moodboard
MARCA
12
MARCA Conceito SIGNIFICADO:
Labirinto
O Símbolo presente no logo é composto por 4 círculos, forma escolhida por trazer o sentimento de modernidade, comunidade e unidade em relação homem-máquina com o avanço da presença da inteligência artifical em ferramentas de design. O conceito do símbolo leva em consideração o campo de visão computacional de IA, que tem um papel dentro do projeto e a ideia de um labirinto que remete a complexidade, mente, escolhas e caminhos que o usuário tomará. O nome Moodsight é a junção entre a visão e a emoção, uma dualidade presente no relacionamento Homemmáquina, no caso a visão da IA e o sentimento do Designer, trabalhando em conjunto.
Labirinto - mente, complexidade, escolhas e caminhos.
SIGNIFICADO:
Olho
Círculo
Olho - Inteligência, percepção, Visão computacional, consciência.
SIGNIFICADO: Círculo - União, modernidade, comunidade, é o maior por ter a função de amarrar os conceitos.
MOOD Tom emocional predominante ou atitude geral
SIGHT Visão, algo que está na visão de alguém, habilidade de ver.
Fonte usada na composição do logotipo
PAYTONE ONE
13
Marca
O logo = símbolo + logotipo A composição consiste do símbolo mais o logotipo que utiliza a fonte Paytone One.
Aplicação do logo em negativo.
14
Moodboard
15
Marca
Variações e aplicações O logo possui uma ampla vairação de cores nas esferas do simbolo e no miolo das letras “o” no logotipo. As cores podem ser alteradas entre as definidas na paleta de cor da marca. As aplicações sobre fundos coloridos podem ser tanto com a versão normal ou em negativo dependendo da legibilidade do logo na cor de fundo, o mesmo vale para aplicação sobre fotos.
16
Marca
Área de proteção e Redução Para proteger o logo e manter sua legibilidade é definida uma área de proteção que corresponde a metade do símbolo que compõe o logo. O tamanho mínimo de redução do logo é de 31mm e do símbolo quando sozinho de 6mm.
17
Marca
Responsividade A redução responsiva do logo para aplicação no meio digital deve respeitar a proporção estabelecida para mudançasm. A partir de 1/4 do tamanho original é aconselhável a utilização de uma versão monocromática e a partir de 1/8 de redução utilize apenas o sÍmbolo.
18
Marca
O que não fazer É importante para a consistência da marca que se respeite a aplicação correta do logo. O logo não pode ser alterado e modificado na cor ou composição. Algumas formas erradas de utilização estão demonstradas nessa página.
19
MASCOTE
20
MASCOTE Mascote e variações O mascote “Ocho” é composto pelo símbolo presente no logo utilizado como o seu olho e as cores da paleta de cor da marca. Ele mostra o lado mais informal e casual servindo também como um avatar carismático para a inteligência artificial por trás do produto. A representação de um Polvo foi escolhida por remeter e simbolizar a inteligência, multi-tarefa, habilidade, flexibilidade e criatividade, que são os pilares principais do Moodsight. A principal forma de expressão do mascote consiste na alteração na região da boca. Existe a possibilidade de outras ferramentas para ficar no tentáculo. Os acessórios e expressões do personagem são utilizados para tornar a jornada do usuário no site mais interativa.
Bocas Algumas das possibilidades de expressão.
Ferramentas São os acessórios que podem ser alternados.
21
Mascote
Ilustração e estilo As ilustrações do mascote podem divergir do estilo definido dele, mas mantendo sempre o símbolo do logo incorporado como o olho, podendo ser também estilizado para se encaixar numa ilustração em específico. É uma área de liberdade maior para criatividade alternar estilos para enriquecer conceito e chamar a atenção, e o meio de utilização pode ser tanto para impresso ou digital. O papel no meio digital será em materiais promocionais e de divulgação do produto, mantendo a diversificação e a ilustração como um traço da marca dentro do seu sistema de identidade.
22
ELEMENTOS
ELEMENTOS CORES PRINCIPAIS
Cores Foram 8 cores escolhidas para formar a paleta de cor da marca, sendo 5 cores principais que são utlizadas com mais frequência e 3 cores secundárias de apoio. As cores principais escolhidas tem o intuito de passar confiança, experimentação, criatividade e inovação. Use o RGB e HEX para exibição na tela e uso digital. E o CMYK para impressão.
R 246
G 10
B 157
C 6
M 89
Y 0
R 121
G 211
B 211
C 53
M 0
Y 23
R 248
G 35
B 91
C 0
M 92
Y 44
R 167
G 102
B 254
C 59
M 64
Y 0
R 23
G 229
B 191
C 62
M 0
Y 40
HEX: #f60a9d
ROSA K 0
HEX: #7ad3d3
AZUL K 0
HEX: #f8235b
VERMELHO K 0
HEX: #a766fe
ROXO K 0
HEX: #0ee0b9
VERDE K 0
24
El ementos / Cores
Variações tonais Cada cor possui 2 variações tonais uma mais claro e outra escura. Pensadas para dar maior flexibilidade na aplicação da paleta de cor tanto em elementos de interface quanto em materiais impressos.
RGB 237/ 170/ 205 HEX: #edaacd CMYK 4/ 44/ 0/ 0
RGB 174/ 255/ 255 HEX: #aeffff CMYK 32/ 0/ 9/ 0
RGB 253/ 181/ 201 HEX: #fdb5c9 CMYK 0/ 40/ 7/ 0
RGB 167/ 158/ 254 HEX: #a79efe CMYK 43/ 40/ 0/ 0
RGB 184/ 255/ 223 HEX: #b8ffdf CMYK 31/ 0/ 23/ 0
RGB 246/ 10/ 157
HEX: #f60a9d
CMYK 6/ 89/ 0/ 0
RGB 246/ 10/ 57
HEX: #7ad3d3
HEX: #f8235b
CMYK 0/ 92/ 44/ 0
RGB 167/ 102/ 254
HEX: #a766fe
CMYK 59/ 167/ 0/ 0
RGB 15/ 224/ 186 CMYK 64/ 0/ 41/ 0
HEX: #4eb8b8
CMYK 66/ 2/ 32/ 0
RGB 205/ 67/ 103
HEX: #cd4367
CMYK 14/ 85/ 39/ 0
RGB 124/ 89/ 173
HEX: #7c59ad
CMYK 63/ 71/ 0/ 0
RGB 0/ 162/ 128 HEX: #0ee0b9
HEX: #c24996
CMYK 26/ 82/ 0/ 0
RGB 78/ 184/ 184
CMYK 6/ 89/ 0/ 0
RGB 248/ 35/ 91
RGB 194/ 73/ 150
HEX: #00a27f
CMYK 87/ 1/ 62/ 0
25
El ementos
Degradês
DEGRADÊS PRINCIPAIS
São 3 degradês principais que misturam as cores definidas na paleta de cor e 3 degradês secundários.
Roxo para o Rosa
HEX: #a766fe
HEX: #f60a9d
Roxo para o Verde
HEX: #a766fe
HEX: #0fe0ba
Azul para o Rosa
HEX: #7ad3d3
HEX: #f60a9d
DEGRADÊS SECUNDÁRIOS
Rosa para o Vermelho
HEX: #f60a9d
HEX: #f8235b
Vermelho para o Azul
HEX: #f8235b
HEX: #7ad3d3
Vermelho para o laranja
HEX: #f8235b
HEX: #f96b64
26
El ementos / Degradês
Degradê primário ROXO PARA O ROSA Cada degradê é composto por apenas duas cores, mantendo sempre um ângulo de 45º na sua aplicação.
HEX:#a766fe
45º
HEX:#f60a9d
El ementos / Degradês
Degradê primário ROXO PARA O VERDE Cada degradê é composto por apenas duas cores, mantendo sempre um ângulo de 45º na sua aplicação.
HEX:#a766fe
45º
HEX:#0ee0b9
El ementos / Degradês
Degradê primário A ZUL PARA O ROSA Cada degradê é composto por apenas duas cores, mantendo sempre um ângulo de 45º na sua aplicação.
HEX:#7ad3d3
45º
HEX:#f60a9d
El ementos / Degradês
Degradê secundário ROSA PARA O VERMELHO Cada degradê é composto por apenas duas cores, mantendo sempre um ângulo de 45º na sua aplicação.
HEX:#f60a9d
45º
HEX:#f8235b
El ementos / Degradês
Degradê secundário VERMELHO PARA O A ZUL Cada degradê é composto por apenas duas cores, mantendo sempre um ângulo de 45º na sua aplicação.
HEX:#a766fe
45º
HEX:#7ad3d3
El ementos / Degradês
Degradê secundário
HEX:#f96b64
VERMELHO PARA O LARANJA Cada degradê é composto por apenas duas cores, mantendo sempre um ângulo de 45º na sua aplicação.
Coloridos HEX:#f8235b
45º 32
El ementos
Grafismos Aplicações: Monocromáticas
1
2
3
ELEMENTOS DE FERRAMENTAS DE DESIGN
Os grafismos utilizados tem intuito de lembrar o usuário algo que é familiar, então a decisão foi de utilizar elementos que remetessem a ferramentas digitais utilizadas pelo nosso público-alvo. Entre os grafismos estão dois que lembram (1) seleção e podem ser utilizidados com intuito de destacar algum elemento; o segundo remete a (2) vetorização que pode ser utilizado para fazer formas ilustrativas vetorizadas sobre imagens e o terceiro grafismo é uma ligação direta com a parte conceitual por trás do trabalho no qual remete a (3) conexão, presente em redes neurais de Inteligência artificial e também recorrentemente utilizado pra simbolizar conexões de um Big Data.
Um exemplo de aplicação do grafismo que traz o estilo de vetorização.
33
El ementos / Grafismos
Aplicações: Coloridas Monocromáticas
FORMAS DE APOIO
A grande inspiração dos grafismos de forma utilizados em todo o projeto foi o Memphis Group assim como o Padrão utlizado como background do site, o objetivo é trazer ao usuário uma sensação visual de um ambiente de experimentação.
Remete a elementos de uma interface, botões e elementos de navegação podem ser empregados de maneira mais livre aproveitando-se das paletas de cores e gradientes para criar uma composição interessante.
34
El ementos
Ícones Utilizamos ícones compostos por linhas e icones sólidos, aplicamos o gradiente na estilização e para manter uma unidade visual com a marca.
35
El ementos
Padrões Possuimos 3 tipos de padrões para utilização sobre imagens e como background do site. O padrão utilizado no layout do site é “Memphis Colorful”, baseado no movimento “Memphis Group” que teve origem em Milão na Itália fundado por Ettore Sottsass.
Padrão utilizado para edição e composição de imagens.
Padrão “Memphis Colorful” utilizado predominantemente no layout do site.
A escolha desse padrão com fundo principal do site se dá a própria essência do Memphis design, que passa a sensação de um ambiente experimental, como referido aos trabalhos do grupo Memphis suas obras são uma combinação de Bauhaus com Fisher Price (empresa de brinquedos), eles passam uma sensação de playground, quebrando o molde rigído da Bauhaus. Queremos que os usuários se sintam num lugar de experimentação, onde errar, testar e aprender seja algo amigável. Padrão de grid utilizado em imagens e outros materiais.
36
El ementos
Fotografia As fotos mostram o dia à dia real de um designer, focando no seu ambiente e nas suas ferramentas. Devem ser evitadas imagens super produzidas que pareçam falsas, e a autenticidade deve ser um valor predominante no estilo fotográfico. As fotos devem ser monocromáticas reforçando as cores da marca e podendo aplicar também um dos gradientes de duas cores definidos para adicionar efeitos. Os grafismos sobre fotos devem ser mantidos monocromáticos e podem ser utilizados livremente respeitando o senso estético apresentado.
37
38
El ementos
Fontes As duas fontes escolhidas para este projeto são a Paytone One para compor o logotipo e a Quicksand para as outras utilizações em materiais e na plataforma, variando seu peso e espaçamento para diferentes composições visuais. Uma característica forte da nossa marca é aplicação de tipografia como um elemento visual, utilizando textos desarticulados como parte da composição ou integrando texto na imagem.
PAYTONE
Aa
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 $@#?!:
QUICKSAND
Aa
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 $@#?!:
Quicksand é uma tipografia sem serifa com terminais arredondados. Usando formas geométricas como fundação central.
Aa
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 $@#?!:
Paytone One é uma tipografia sem serifas desenvolvida para usar um webfont de exibição e headlining em páginas da web modernas, possui pontas oblíquos nas extremidades.
Aa
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 $@#?!:
39
EDITAR TAMANHO EDITAR TAMANHO
40
FICHA TÉCNICA ARTHUR ROBERTO ITALO DRAGO LUCAS SERIO GUILHERME BUENO FABIO ARAÚJO KELVIN HIEKATA