Manual de identidade visual Documento para orientação conceitual e aplicação da marca no desenvolvimento de materiais impressos e digitais. Versão 1.0 | 2016
Bem vindo ao nosso manual de marca Um novo olhar Responsabilidade na educação, promoção do ensino participativo e gestão integrada com controle dos investimentos públicos são os grandes conceitos da marca Gier. O presente manual foi elaborado para divulgar nossa essência e, para que todos participem desse processo, oferecemos algumas regras de utilização. As diretrizes aqui apresentadas são para unificarmos nossa forma de comunicar, de forma leve e inspiradora, auxiliando a valorizar o conceito da solução. Para facilitar seu entendimento, empregamos exemplos de uso da marca em múltiplos contextos. Sempre que iniciar a criação de algum material, consulte aqui as formas preferenciais de uso da marca. Para todos nós da Gier, a sua presença é mais do que bem-vinda. O convidamos para tornar sua atuação com a nossa marca, em uma oportunidade para integrar a verdadeira mudança social que a educação precisa, ajudando a transformar o ensino em um modelo social e participativo.
Conceito | Quem somos
1 2
Conceito Sobre nós ......................................................... 5 Tom de voz ....................................................... 7
3
Guia de imagem Ambientes ................................................................. 32 Como trabalhar em imagens? ............................... 33 Recorte de elementos ............................................. 36 Tratamento de imagens .......................................... 37 Trabalhando com imagens e textos ..................... 38
A marca Linha de evolução ......................................... 11 Conceito visual .............................................. 12 Assinaturas e versões .................................... 13 Malha construtiva .......................................... 14 Área de proteção ........................................... 15 Redução Máxima ............................................ 16 Cores ............................................................... 17 Monocromia ................................................... 19 P&B e tons de cinza ......................................... 20 Tipografia primária ......................................... 21 Tipografia secundária ..................................... 22 Proibições ........................................................ 23 Em imagens ..................................................... 24 Iconografia ....................................................... 25
4 5
Aplicações Impressos ................................................................... 41 Brindes ........................................................................ 47
Guia digital Visual web ................................................................ 53 Favicons e avatares ................................................ 54 Header e footer ....................................................... 55 Botões e assinatura ............................................... 56 Design de interfaces ............................................... 57 Papel de parede ...................................................... 59 Templates para apresentações ............................ 60
11
Conceito | Quem somos
A escola é o momento de formação do cidadão, onde ele deixa de ser um indivíduo para se tornar um ser social.
Conceito | Quem somos
2
1 3
Conceito | Quem somos
Conceito | Quem somos
presente
presente
Conceito
4
5
Conceito | Sobre nós
Inteligência Gier Com a Gier, atender a demanda da educação na sociedade de hoje, envolve dar condições reais para o desenvolvimento do cidadão do amanhã. Somamos o conceito do ensino participativo com a modernização de toda a gestão da educação; olhamos com carinho para a forma como os alunos experimentam o ensino, do momento da matrícula até sua formação. Gier é a primeira ferramenta completa de gestão da educação voltada à solução do conhecimento. Nosso conceito envolve toda a comunidade escolar, além dos gestores no processo da educação. Essa participação ampla e atenciosa é fundamental para transformar o ensino do Brasil em um modelo de aprendizagem social.
Portal de Relacionamento A Gier acompanha o educador em todos os processos e orienta a registrar no sistema toda matéria dada em sala de aula, bem como as atividades extras. O compartilhamento dessas informações, através do Portal de Relacionamento, estabelece um compromisso por parte dos responsáveis em acompanhar o cumprimento das tarefas, operando como uma rede social de cada unidade escolar.
Conceito | Sobre nós
Gestão da educação A solução produz indicadores gerais por unidade escolar, como quantidade de alunos, recursos empregados com manutenção e merenda, material de suporte acadêmico, disponibilização de transporte escolar, assim como todos os fatores que fazem parte do sistema de educação local.
“
A modernização no acesso a informação em um ambiente fácil e rápido de usar, favorece o desempenho acadêmico e o aprendizado do aluno.”
Estrutura da escola Tudo é comparado e apresentado aos gestores sob uma visão analítica, o que permite a tomada de ações corretivas e preventivas. Gier compara o desempenho das unidades escolares com os índices do IDEB (Índice de Desenvolvimento da Educação Básica), indicando ações para qualificar e sociabilizar as melhores práticas no ensino.
6
7
Conceito | Quem somos
tom de voz
Conceito | Tom de voz
O que falamos? Em nossa comunicação, falamos sempre dos nossos diferenciais e lembramos a importância do conceito da Gier, firmado na vocação social, no respeito a participação da família na escola, e em como a gestão pública possui um papel essencial como facilitadora para que todo o processo da educação tenha estrutura e uma operação saudável, atingindo excelentes resultados. Filme Gier “A formação de verdadeiros cidadãos só é possível através da corresponsabilidade e da humanização e o GIER oferece o suporte necessário para que possamos alcançar esses objetivos”. Comunicação Interna “Logo vamos mostrar como a Gier é um bom motivo pra você ter orgulho do que #ÉNOSSO”.
Como falamos? Na educação, a mensagem deve ser sempre a mais clara possível, por isso, usamos uma linguagem didática, exemplificada e sólida. Quando o assunto é a Gier, a participação de todos é uma regra, assim, tudo o que falamos deve ser compreendido de primeira, como quando o aluno entende perfeitamente a lição de um bom professor. Nossa comunicação deve ser sempre bem adequada à linguagem gráfica, valorizando a percepção total do apelo social (emoção) e dos diferenciais da nossa ferramenta e das funcionalidades da nossa ferramenta (razão), de maneira organizada.
Palavras-chave Gier é a primeira ferramenta completa da gestão da educação voltada à solução do conhecimento que gerencia cada unidade da rede escolar e promove a integração entre pais, alunos e professores.
8
2 9
Conceito | Quem somos
Conceito | Quem somos
A marca
10
11
A marca | Linha de evolução
Linha de evolução Ao longo dos anos a marca da Gier foi aperfeiçoada, buscou sempre representar graficamente a atribuição da educação, inclusive com elementos da escola simulados nos símbolos. Assim como a modernização na maneira de educar é um conceito característico da Gier, o seu design adotou formas que remetem a evolução da sociedade, desta forma, acentuando a simplicidade e o minimalismo, e priorizando a usabilidade.
2010 - 2011
2012 - 2013
2014 - 2015
A marca | Conceito visual
Conceito visual A identidade visual da Gier imprime um conceito leve e descontraído, adequando-se à vocação social da solução. A marca é formada pelos elementos geométricos básicos: o triângulo e o quadrado. Um conjunto de três triângulos centrais formam um cubo e, cada triângulo, possui uma cor que representa um papel dentro do processo da educação. A união destas três formas também refere-se a escola; alunos e familiares; município e gestão. Cada um atuando dentro de seu papel, mas todos seguindo o mesmo objetivo, que é apresentar um processo de ensino mais justo e humanizado. O quadrado é a forma básica que representa a ordem, a racionalidade – remete a organização dos recursos educacionais e a ideia de responsabilidade na gestão. O entendimento do material de comunicação deve ser facilitado, indicado por fotografias e do uso de cores primárias, que ajudam a endossar as cores da marca, criando o laço emocional entre o público e a Gier.
2016
12
13
A marca | Assinaturas e versões
símbolo
Assinaturas e versões
logotipo / lettering
Nossa marca é composta por alguns elementos gráficos, conforme exemplo demonstrado ao lado. Utilizamos exclusivamente assinatura na horizontal, com duas configurações no uso do slogan: abaixo e, quando não for possível, ao lado. Lembre que a versão com o slogan aplicado abaixo é a forma preferencial.
slogan descritivo abaixo
Secundária
Versão horizontal com slogan descritivo ao lado
Primária Versão horizontal com slogan descritivo abaixo
A marca | Malha construtiva
15x
Malha construtiva
4x
34x
4x
1,5x 1,5x
A malha construtiva ajuda a reproduzir a marca e a alinhar corretamente os símbolos que a compõe, detalhando o estudo de proporção e geometria.
17x
Cria a relação entre os elementos, as distâncias, os alinhamentos e proporções, com o objetivo de manter equilíbrio, harmonia e estabilidade visual. 2x A modulação da marca é baseada no módulo em que x é a representação de um quadrado dentro do quadriculado, deve-se sempre seguir a proporção aqui apresentada. 1,25x
4x
1x
14
15
A marca | Área de proteção
Área de proteção Para assegurar que as versões da nossa marca estejam claramente aplicadas em torno de um espaço livre, evitando a aproximação excessiva de outros elementos visuais, criou-se uma área de proteção mínima ao redor da marca, funcionando também como uma região de respiro visual.
4x 4x
4x 4x
A marca | Redução Máxima
Redução máxima Buscamos sempre manter a melhor leitura da marca. Tenha atenção, em caso da redução máxima, para garantir a legibilidade. Nas situações em que a redução for necessária, siga o tamanho mínimo permitido para aplicação, tanto na horizontal quanto na vertical.
Versões impressas em mm
40 mm Assinatura horizontal completa
Versões digitais em px
20 mm Assinatura horizontal sem slogan descritivo
180 px Assinatura horizontal completa
100 px Assinatura horizontal sem slogan descritivo
16
17
A marca | Cores
Cores
O uso das cores é o principal recurso gráfico para apoiar o apelo emotivo ao tom de comunicação da Gier. Conforme a cor, é possível impactar a emoção do público, ou falar de um aspecto mais racional da ferramenta em si. Nossa marca é construída pelas cores primárias: azul, vermelho e amarelo. São as primeiras cores que as crianças aprendem na escola.
Azul Pantone 640 C
É a cor da harmonia, paz no ambiente escolar,
Pantone® Solid Coated
dignidade, estabilidade e tecnologia. Auxilia
C: 80 / M: 30 / Y: 10 / K: 0
na reprodução de informações de maneira sóbria,
R: 5 / G: 142 / B: 194
facilitando a apresentação didática de conteúdos,
Hexadecimal: #058ec2
além de induzir ao diálogo e à troca de informações.
A marca | Cores
Vermelho É a cor mais excitante para os nossos cérebros
Pantone 185 C
e traz a ideia de amor, estreitamento da relação
Pantone® Solid Coated
entre aluno–escola, responsável–escola, aluno–
C: 0 / M: 100 / Y: 100 / K: 0
responsável e escola–secretaria educacional
R: 227 / G: 6 / B: 19
do município.
Hexadecimal: #e30613
Amarelo Pantone 116 C Pantone® Solid Coated C: 0 / M: 20 / Y: 100 / K: 0 R: 255 / G: 204 / B: 0 Hexadecimal: #ffcc00
Representa a riqueza, e no caso da Gier, pode ser sobre a expectativa de um futuro promissor, e sobre as informações e dados coletados para uma tomada de decisão assertiva em qualquer âmbito escolar.
18
19
A marca | Monocromia
Monocromia Quando não for possível aplicar a marca em sua integralidade de cores, na sua versão original, devido ao conflito visual com o fundo, ela pode ser aplicada em versão monocromática branca. Indicamos o uso de um fundo com cores que estejam dentro da nossa paleta: azul, amarelo ou vermelho.
Vermelho e fundo branco
Amarelo e fundo branco
Azul e fundo branco
A marca | PxB e tons de cinza
P&B e tons de cinza A marca poderá ser utilizada com uma variação de P&B e tons de cinza, em impressos e documentos onde não existam a possibilidade de aplicar cores. A intensidade do cinza poderá variar de acordo com a necessidade, sempre buscando a legibilidade e a preservação dos elementos gráficos que compõem a marca.
Versão preto no fundo branco
Versão tons de cinza no fundo branco
Versão branco no fundo preto
Versão branco no fundo tons de cinza
20
21
A marca | Tipografia primária
Tipografia primária A fonte primária utilizada pela Gier é a “raleway”. Foi escolhida por sua formação curva e orgânica, relacionado-se conceitualmente à vocação social da solução. A tipografia deve ser utilizada em chamadas, títulos e onde não exista a necessidade de uma leitura extensa.
abc d e f g h i j k l mn o pq r s t u v w x y z A B C D E F G H I J K L M N O P Q R S T U VW XY Z
0 1 2 3 4 5 6 7 8 9 Thin Light Medium Bold Heavy
ExtraLight Regular SemiBold ExtraBold
raleway
A marca | Tipografia secundária
Tipografia secundária A fonte secundária deve ser usada em textos corridos, onde houver necessidade de leitura extensa. A “source sans” tem característica simples, aspecto visual limpo e possibilita uma leitura agradável. Pode ser aplicada tanto em materiais impressos como nos digitais.
abc d e f g h i j k l mn o pq r s t u v w x y z ABCDEFGHIJKLMNOPQRSTUVWXYZ
0 1 2 3 4 5 6 7 8 9 Extralight Regular Bold
Light Semibold Black
source sans
22
23
A marca | Proibições
Proibições As proibições visam manter a originalidade, preservar os elementos, as cores e formas que integram a marca. A marca foi projetada para ser apresentada de acordo com o padrão que estabelecemos nas páginas anteriores e tudo que fugir disso a descaracteriza, desta forma, os exemplos abaixo nunca devem ser aplicados.
Uso de cores fora da paleta definida
Símbolo fora de proporção
Distorção da marca
Troca de posições dos elementos da marca
Símbolo com cores fora da paleta
Texto em cima da marca
A marca | Em imagens
Em imagens O mal uso da logo em imagens pode prejudicar seus aspectos visuais. Atenha-se Ă s dicas do que nunca fazer e cuide para sempre aplicar a logo de forma que harmonize com o fundo.
Marca sem legibilidade
Usar sombra na marca
Marca colorida sobreposta nas mesmas cores
Marca em gradiente e sem legibilidade
24
25
A marca | Iconografia
Iconografia O uso dos ícones ajuda a expressar ideias de forma rápida e intuitiva. Utilizamos para apresentar textos rápidos, resumir conceitos e apresentar funcionalidades; indicada para explicar a ferramenta, módulos e reforçar uma ideia marcada no texto de forma didática, os ícones devem ser utilizados com objetividade.
Outline ícones Para comunicados de leitura rápida e linguagem minimalistas, os ícones em outline ajudam a exemplificar ideias de forma simplificada.
A marca | Iconografia
Flat ícones Usamos para exemplificar os módulos de funcionamento e outras informações mais densas, requerendo uma comunicação didática.
26
27
Conceito | Quem somos
Buscamos sempre resultados com foc de uma educação d o ensino se torna um
a eficiência em co na construção de qualidade, onde m processo social.
Conceito | Quem somos
28
29
Conceito | Quem somos
3 Conceito | Quem somos
Guia de imagem
30
31
Conceito | Quem somos
Guia de imagem | Ambientes
Ambientes Usamos alunos em espaços da escola como salas de aula, ou mesmo no ambiente familiar, para mostrar os locais onde a solução é utilizada.
32
33
Guia de imagem | Como trabalhar com imagens?
Como trabalhar com imagens? Fundo branco Inserimos imagens recortadas sobre o fundo branco para destacar uma cena e expor um conceito com apelo emocional.
Guia de imagem | Como trabalhar com imagens?
Cabelo em tons de amarelo
Fotos posadas Para obter atenção imediata, em materiais como banners e aberturas de assuntos, usamos fotos posadas, que podem vir acompanhadas de títulos.
Tons da paleta Usamos exclusivamente os tons utilizados em nossa paleta, que são as cores da marca Gier: azul, vermelho e amarelo, além do branco.
Camiseta em tons de vermelho
34
35
Conceito | Quem somos
Guia de imagem | Como trabalhar com imagens?
Recorte de elementos Destacamos elementos da escola, evidenciando suas cores como meio para estimular no público o interesse sobre o material de divulgação.
36
37
Guia de imagem | Tratamento de imagens
Tratamento de imagens A aplicação de filtros e tratamento de imagens é parte do nosso guia de estilo e busca expressar enfaticamente um conceito aliado ao sentimento provocado pela cor usada no filtro.
Efeito Gradient Map na imagem
Retículas na imagem
Guia de imagem | Trabalhando com imagens e textos
Trabalhando com imagens e textos Da união da imagem com o texto exercemos com maior intensidade o sugestionamento da mensagem que buscamos transmitir ao leitor.
Efeito Gradient Map na imagem
Retículas na imagem
Sobreposição com um texto
Como colocar texto em cima de imagens
38
4 39
Conceito | Quem somos
Conceito | Quem somos
Aplicações
40
41
Aplicações | Impressos
Cartão de visitas
Aplicaçþes | Impressos
Papel timbrado
42
43
Aplicaçþes | Impressos
Pasta folder simples
Aplicações | Impressos
Envelope saco
44
45
Aplicações | Impressos
Envelope meio ofício
Aplicações | Impressos
Capa e adesivo para CDs
46
47
Aplicações | Brindes
Caneca
Aplicações | Brindes
Canetas, lápis e borrachas
48
49
Aplicaçþes | Brindes
Capa para celular
Aplicações | Brindes
Squeeze (garrafa)
50
51
Conceito | Quem somos
Guia digital
5 Conceito | Quem somos
52
53
Guia digital | Visual web
Visual web Buscamos conectar o conceito de modernização da Gier com a utilização de interfaces digitais, seguindo a mesma identidade visual apresentada nas páginas anteriores. Assim, a marca carrega em seu design digital as mesmas formas adotadas pela tendência contemporânea, marcado pela simplicidade e o minimalismo, priorizando a usabilidade do usuário. O estilo de favicons, avatares, header, footer e botões deverão seguir os modelos apresentados nas próximas páginas.
Guia digital | Favicons e avatares
Favicons e avatares Os favicons são pequenas imagens que ficam guardadas em um site para visualização pelo navegador. Os avatares são representações gráficas que indicam um personagem.
Modelos de assinaturas eletrônicas para entrar nos e-mails.
54
55
Guia digital | Header e footer
Header e footer O nosso header (topo do site) foi definido como espaço para o menu de navegação e da logomarca. O footer (campo de rodapé) é onde ficam os contatos e o mapa do site. Modelos de assinaturas eletrônicas para entrar nos e-mails.
Modelos de assinaturas eletrônicas para entrar nos e-mails.
Modelos de assinaturas eletrônicas para entrar nos e-mails.
Guia digital | Botões e assinatura
Botões e assinatura Usamos botões com as bordas arredondadas, proporcionando uma abordagem mais orgânica que deve seguir os modelos abaixo.
Exemplo de botão
Exemplo de botão
Exemplo de botão
Exemplo de botão
Exemplo de botão Modelos de assinaturas eletrônicas para entrar nos e-mails.
Exemplo de botão
Exemplo de botão
Exemplo de botão
56
57
Guia digital | Design de interfaces
Design de interfaces
Guia digital | Design de interfaces
Antes de iniciar qualquer trabalho digital, como interfaces para apps, por exemplo, consulte os exemplos abaixo e a linha visual aqui adotada.
58
59
Guia digital | Papel de parede
Os planos de fundo Gier dever達o ser bem arejados, tornando a logomarca ou imagem de fundo o grande destaque.
Papel de Planos deparede fundo
Guia digital | Templates para apresentações
Templates para apresentações Templates para apresentações
60
61
Conceito | Quem somos
Conceito | Quem somos
62
63
Conceito | Quem somos
A modernização completa do ensino.
Conceito | Quem somos
Fale com a gente! Se houver qualquer dĂşvida ou precisar solicitar algum material, entre em contato com o departamento de marketing da EICON:
marketing@tecngroup.com.br
64