Plano executivo
manual_final.indd 1
21/11/2014 09:45:54
Sumário 1. PROPOSTA DE PROJETO......................................................................................04
1.1 Introdução.......................................................................................................................07 1.2 Conceito de criação.......................................................................................................09 1.3 Estratégia de comunicação.........................................................................................13 1.4 Justificativa......................................................................................................................15
2. SOBRE A MARCA....................................................................................................16
manual_final.indd 2
2.1 Diretrizes da Marca.......................................................................................................18 2.2 Origem do Nome..........................................................................................................20 2.3 Logo Symbee..................................................................................................................21 2.4 Icone/Mascote...............................................................................................................22 2.5 Lettering..........................................................................................................................23 2.6 Iconografia......................................................................................................................24 2.7 Painel Semântico...........................................................................................................26 2.8 Cores Primárias.............................................................................................................28 2.9 Cores Secundária..........................................................................................................30 2.10 Cores Tons de Cinza..................................................................................................32 2.11 Cores Uso em Campanha........................................................................................34 2.12 Família Tipográfica......................................................................................................36
21/11/2014 09:45:54
3 3. GUIDELINE...............................................................................................................38
3.1 Proporções......................................................................................................................40 3.2 Arejamento......................................................................................................................41 3.3 Aplicação Reduzida.......................................................................................................42 3.4 Positivo, negativo e grayscale....................................................................................44 3.5 Proibições.......................................................................................................................46
4. PEÇAS DE CRIAÇÃO...............................................................................................48
4.1 Ícone App........................................................................................................................50 4.2 Pattern.............................................................................................................................51 4.3 Mapa de Navegação Site............................................................................................52 4.4 Mapa de Navegação Mobile.......................................................................................53 4.5 Wireframes....................................................................................................................54 4.6 Fluxograma Mobile.......................................................................................................56 4.7 Fluxograma Site............................................................................................................58 4.8 Poster Conceitual..........................................................................................................60 4.9 Poster Produto.............................................................................................................61 4.10 Material Gráfico..........................................................................................................62 4.11 Interfaces Mobile.......................................................................................................64 4.12 Interfaces Site.............................................................................................................67
5. ANEXOS...................................................................................................................73
manual_final.indd 3
5.1 Tecnologia Utilizada......................................................................................................75 5.2 Personas..........................................................................................................................76
21/11/2014 09:45:54
PROPOSTA DE PROJETO
manual_final.indd 4
21/11/2014 09:45:55
manual_final.indd 5
21/11/2014 09:45:55
manual_final.indd 6
21/11/2014 09:45:55
Introdução
7
O presente projeto baseia-se nos conceitos de narrativa com uma nova forma
de criação, incentivando a escrita e a leitura de um modo mais moderno, com a ajuda da hipermídia, inserindo-a em um ambiente mais tecnológico. Neste manual de identidade está descrito em três etapas principais de como foi criado os conceitos, marca e identidade visual para a realização do projeto Symbee.
Como primeiro capítulo teremos o conceito de de criação do projeto, como este foi criado e com qual intuito, em seguida pode-se observar a estratégia de comunicação que foi desenvolvida para ter o seu diferencial e ser atrativo. Em seguida, ainda no mesmo capítulo está sendo explicado a justificativa do projeto, do por quê este foi desenvolvido da maneira que foi escolhido. No segundo capítulo é desenvolvido todas as etapas para o desenvolvimento da marca do projeto, explicando a origem do nome, a apresentação do logo e como este foi criado, iconografia, painel semântico, e as cores utilizadas para fixar a identidade visual, assim como a tipografia utilizada. O terceiro capítulo é focado na guideline do projeto, mostrando a parte técnica de como o logo foi elaborado, mostrando quais as formas corretas que este deve ser aplicado e os que não deve ser utilizado. O quarto capítulo está sendo exibido as peças de criação do projeto, tanto os digitais quanto os gráficos, todos com a identidade visual aplicada, assim como os mapas que mostram como funcionam a interação e navegação do projeto e interfaces mobile e desktop. Por fim, o cinco capítulo mostra os anexos do projeto, como o storyboard do video propaganda e as tecnologias utilizadas para o desenvolvimento do projeto por inteiro.
manual_final.indd 7
21/11/2014 09:45:55
manual_final.indd 8
21/11/2014 09:45:56
Conceito de criação
9
Com o intuito de permitir que as pessoas consigam trabalhar de forma colaborativa
para o desenvolvimento de novas narrativas, foi-se projetado uma plataforma que consiga dar o suporte ideal a isso, a Symbee. Seu objetivo principal é facilitar com que haja a geração de ideias colaborativas para a criação de uma narrativa a partir de desafios e etapas, sendo que estes utilizarão dos elementos da narrativa, em específico tempo, espaço e personagens, de forma a guiar o usuário durante sua interação no projeto. Após coletas e estudos realizados através de nosso painel semântico, chegamos as bases para nossa identidade visual. Trazendo idéias de conjunto, cooperação e co-autoria, notamos que muitos elementos orgânicos apareciam e se encaixavam perfeitamente também com a idéia de conforto que pretendemos levar aos usuários, desmitificando a temática ruim e pesada que a escrita carrega.
manual_final.indd 9
21/11/2014 09:45:56
manual_final.indd 10
21/11/2014 09:45:56
Conceito de criação
11
Na
natureza, a simbiose é uma relação mutualmente vantajosa entre dois organismos diferentes. Uma forma tão íntima de relação entre as espécies que a torna crucial para o desenvolvimento harmônico do indivíduo. Mesclamos então este conceito ao nosso, propondo o trabalho conjunto dos indivíduos para uma vantagem de ambos, que no caso se dará por meio da co-autoria. As Abelhas, organismos que constituem sociedade, ou seja, cooperam entre si, dividem os trabalhos e se comunicam. Explicitando essa dinâmica da espécie, trazemos conceitos visuais que a especifícam, como cores e formas. Os tons de amarelo, laranja e marrom, estão diretamente ligados ao animal. A forma hexagonal do favo (estruturas feitas para a construção de ninhos) tornou-se o principal grafismo presente em quase todas as estruturas do projeto, reforçando a ideia de “corrente” proposto até então.
manual_final.indd 11
21/11/2014 09:45:56
manual_final.indd 12
21/11/2014 09:45:56
Estratégia de comunicação
13
Muitas vezes o interesse pela escrita pode ser prejudicado devido a falta de
motivação ou até mesmo auxílio para realizar a mesma, afastando e até mesmo criando um certo preconceito por escrever. Quebrando esse paradigma, apresentamos uma nova forma de se estabelecer autor e criar uma narrativa. O objetivo do projeto é proporcionar, de forma interativa, dinâmica e imersiva, um trabalho em grupo entre pessoas. Em nossas dinâmicas todos poderão participar efetivamente das histórias, tornando-os co-autores das mesmas, guiando pros próprios rumos e influenciando em seus finais. Mostrando possíveis caminhos aos nossos usuários, pretendemos não só auxiliá-los, mas também incentivá-los a desenvolver sua própria criatividade, para que assim possam tornar-se escritores cada vez melhores. Um dos principais objetivos do projeto é criar histórias de plurais autores com o desafio de não poder prever qual será o próximo trecho da narrativa. Divertir e aprender, essas são as características que irão motivar os usuários a cada vez mais serem audaciosos.
manual_final.indd 13
21/11/2014 09:45:56
manual_final.indd 14
21/11/2014 09:45:56
Justificativa
15
O projeto está sendo desenvolvido para que haja um interesse pela escrita colaborativa,
pois foi analisado uma oportunidade de se trabalhar com narrativas de um modo diferenciado no qual aplica-se um projeto multiplataformas com interação, incentivando o usuário na escrita e leitura fazendo com que ao mesmo tempo proporcione diversão.
manual_final.indd 15
21/11/2014 09:45:56
SOBRE A MARCA
manual_final.indd 16
21/11/2014 09:45:56
manual_final.indd 17
21/11/2014 09:45:56
18 Diretrizes da marca Missão: Acender em nossos usuários a inspiração necessária para a concepção de narrativas colaborativas;
Posição: Auxiliar na criação de narrativas colaborativas;
Personalidade: Amigável, único, útil e inovador;
Alvo: Pessoas interessadas por tecnologia e desenvolvimento da escrita;
Tensão “Criar narrativas com essa plataforma é bem legal, mas não me sinto tão desafiado por sua proposta de criação”;
Valores da marca Criação colaborativa, Interatividade e desafiador.
manual_final.indd 18
21/11/2014 09:45:56
manual_final.indd 19
21/11/2014 09:45:56
20 Origem do nome
A concepção do nome se deu por meio da união das palavras Sym, do grego, “ação
conjunta”, “conjunto de” e “bee” do inglês, abelha, formando assim o nome Symbee, ou “conjunto de abelhas”.
Tal metáfora foi escolhida por representar a ideia principal de trabalho em conjunto para uma mesma finalidade, já que as abelhas são conhecidas por trabalharem de forma organizada, em conjunto, por um mesmo fim. Aliando-se ao fato de serem palavras que, em conjunto, formam um nome foneticamente agradável de ser ouvir e ser pronunciável, ajudando-o a se posicionar no mercado nacional. Ou seja, Symbee foi escolhido por tomarmos como base a analogia da vida das abelhas, na qual elas trabalhando em conjunto, conseguem trazer o néctar necessário para dentro de sua colmeia, criando os favos da mesma. Com essa ideia em mente, as abelhas seriam os nosso usuários que juntos trabalhariam dentro da nossa plataforma (Colmeia) para criar as narrativas colaborativas (Favos).
manual_final.indd 20
21/11/2014 09:45:57
Logo Symbee
21
Refletindo a ideia da analogia com a vida das abelhas, foram escolhidos dois elementos importantes para a concepção do ícone e do lettering:
“O movimento contínuo da abelha e sua forma, da qual foi abstraída e simplificada suas formas geométricas.”
manual_final.indd 21
21/11/2014 09:45:57
22 Ícone / Mascote
Usando o conceito de abstração e a analogia da “Vida das Abelhas”, a concepção do
ícone foi por meio da utilização de três hexágonos (formato de um favo) que ao interagirem entre si, criam o formato de uma abelha. As diagonais do hexágono criam uma angulação de 60º para passar a sensação de que a abelha está em movimento, voando, ela está em seu processo natural de ir colher o néctar necessário para a produção do favo de mel. Foi utilizado a transparência nos hexágonos para refletir o que cada um deles traz dentro de sí e as infinitas possibilidades que podem ter ao interagirem entre eles mesmo. Escolhemos utilizar três hexágonos, pois são três o número máximo de usuários para começar a criar uma narrativa dentro da plataforma. A disposição deles não foi apenas para abstrair a forma da abelha, como também podemos reparar na figura de um livro aberto que convida o usuário a começar uma nova história.
manual_final.indd 22
21/11/2014 09:45:57
Lettering
23
A proposta para o lettering era criar o movimento contínuo da escrita, que por sinal remete
também ao vôo das abelhas. Por isso, utilizamos a tipografia script “Birds of paradise” como base para a criação do lettering e trabalhamos em cima da harmonização de suas formas, para que a mesma pudesse transmitir a mesma ideia de um movimento contínuo tanto da escrita quanto do vôo.
manual_final.indd 23
21/11/2014 09:45:57
Iconografia
Terror
ComĂŠdia
Romance
manual_final.indd 24
21/11/2014 09:45:57
25
Ficção científica
Aventura e ação
Fantasia
manual_final.indd 25
21/11/2014 09:45:57
Painel sem창ntico
manual_final.indd 26
21/11/2014 09:45:58
27
manual_final.indd 27
21/11/2014 09:45:59
Cores - Primárias
Escolhemos a cor laranja de primária por ser uma cor que transmite sensações de alegria, autoconfiança, entusiasmo, construtividade, aptidão, servindo também para estimular e despertar a criatividade humana. A cor laranja além de promover o diálogo e interação social, refere=se à comunicação social, incentivando as conversas sobremaneira. Uma cor quente e convidativa, é tanto fisicamente e mentalmente estimulante.
LARANJA PRIMÁRIO UM - #EA660C R234 G102 B12 C1 M70 Y99 K0 LARANJA PRIMÁRIO DOIS - #F49E36 R244 G158 B54 C1 M45 Y84 K0 LARANJA PRIMÁRIO TRÊS - #E6831E R230 G131 B30 C6 M56 Y94 K0
manual_final.indd 28
21/11/2014 09:45:59
29
manual_final.indd 29
21/11/2014 09:45:59
Cores - Secundárias
As cores secundárias foram escolhidas como forma de completar e aumentar as
possibilidades dentro da nossa paleta de cores primeiramente escolhida.
MARROM SECUNDÁRIO - #EA660C R234 G102 B12 C33 M60 Y80 K38 LARANJA CLARO SECUNDÁRIO - #F8CE9A R248 G206 B154 C2 M23 Y45 K0 AMARELO SECUNDÁRIO - #7B239 R247 G178 B57 C1 M34 Y83 K0
manual_final.indd 30
21/11/2014 09:45:59
31
manual_final.indd 31
21/11/2014 09:45:59
Cores - Tons de cinza
Os tons de cinza são cores que complementam nossa paleta, ao contrário das
primárias e secundárias, elas não possuem um uso restrito e podem ser usadas em todo o material
PRETO SYMBEE- #010101 R1 G1 B1 C90 M78 Y62 K96 CINZA ESCURO SYMBEE - #302D2A R48 G45 B42 C66 M60 Y59 K71 CINZA CLARO SYMBEE - #7F8080 R127 G128 B128 C50 M38 Y39 K20 CINZA CLARO 2 SYMBEE - #CCCBCB R204 G203 B203 C23 M18 Y18 K1
manual_final.indd 32
21/11/2014 09:45:59
33
manual_final.indd 33
21/11/2014 09:45:59
Cores - Uso em campanha
Essas cores serĂŁo utilizadas em conjunto das outras para aumentar a gama de
possibilidades que poderemos encaixar e utilizar em nossos sĂmbolos.
ROSA SYMBEE - #EF2987A R242 G152 B122 C0 M50 Y50 K0 AZUL SYMBEE - #165D6E R22 G93 B110 C87 M44 Y40 K28 VERDE SYMBEE - #8DA93B R141 G169 B59 C52 M16 Y91 K2
manual_final.indd 34
21/11/2014 09:45:59
35
manual_final.indd 35
21/11/2014 09:45:59
Família tipografica
Escolhemos a fonte tipográfica Open Sans por possuir uma família grande,
permitindo diversas utilizações amigáveis ao projeto, e por ela ter sido projetada com uma tensão vertical, formas abertas e aparência neutra agradável ao olhar. A fonte foi otimizada para ser usada em qualquer tipo de ambiente, mantendo forte legibilidade para impressão, web e ou interfaces mobile.
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1 2 3 4 5 6 7 8 9 0 Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1234567890 Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz 1234567890
manual_final.indd 36
21/11/2014 09:45:59
37 Aplicação da Tipografia CAIXA ALTA - SYMBEE Open Sans Light - Symbee Open Sans Light Italic - Symbee Open Sans Regular - Symbee Open Sans Italic - Symbee Open Sans Semibold - Symbee
caixa baixa - symbee Open Sans Semibold Italic - Symbee Open Sans Bold - Symbee Open Sans Bold Italic - Symbee Open Sans Extrabold - Symbee Open Sans Extrabold Italic - Symbee
manual_final.indd 37
21/11/2014 09:45:59
GUIDELINE
manual_final.indd 38
21/11/2014 09:45:59
manual_final.indd 39
21/11/2014 09:45:59
40 Proporções
manual_final.indd 40
21/11/2014 09:46:00
Arejamento
manual_final.indd 41
41
21/11/2014 09:46:00
42 Aplicação reduzida A aplicação mínima do logo deve ser em 100px de largura e sem a tagline e a redução máxima do logo deve ser o mascote com 30px de largura
manual_final.indd 42
21/11/2014 09:46:00
Aplicação mínima
manual_final.indd 43
21/11/2014 09:46:00
Positivo, negativo e Grayscale
manual_final.indd 44
21/11/2014 09:46:00
45
manual_final.indd 45
21/11/2014 09:46:00
Proibições
A marca respeita a forma que ela foi criada, toda sua harmonização, por isso lista-
mos algumas proibições da forma de uso do logotipo
manual_final.indd 46
Distorção horizontal
Distorção vertical
Ícone na posição errada
Ícone com outra angulatura
21/11/2014 09:46:00
47 Logotipo refletido
Outro texto na tagline
Logotipo em baixa resolução
Logotipo positivo em fundos com cor
Usar cores fora da paleta no logotipo
manual_final.indd 47
Usar ícone sem opacidade
21/11/2014 09:46:00
PEÇAS DE CRIAÇÃO
manual_final.indd 48
21/11/2014 09:46:00
manual_final.indd 49
21/11/2014 09:46:00
50 Ă?cone app
manual_final.indd 50
21/11/2014 09:46:00
Pattern
manual_final.indd 51
51
21/11/2014 09:46:01
52 Mapa de navegação site
manual_final.indd 52
21/11/2014 09:46:04
Mapa de navegação mobile
manual_final.indd 53
53
21/11/2014 09:46:05
54 Wireframes
manual_final.indd 54
21/11/2014 09:46:05
Wireframes
manual_final.indd 55
55
21/11/2014 09:46:06
Fluxograma mobile
manual_final.indd 56
21/11/2014 09:46:10
57
manual_final.indd 57
21/11/2014 09:46:14
Fluxograma site
manual_final.indd 58
21/11/2014 09:46:19
59
manual_final.indd 59
21/11/2014 09:46:24
60 Poster conceitual
manual_final.indd 60
21/11/2014 09:46:24
Poster de produto
manual_final.indd 61
61
21/11/2014 09:46:25
62 Material grรกfico
manual_final.indd 62
21/11/2014 09:46:25
Mockup Embalagem
manual_final.indd 63
63
21/11/2014 09:46:25
64 Interfaces mobile
Tela de login
manual_final.indd 64
21/11/2014 09:46:25
Interfaces mobile
65
Interface inicial
manual_final.indd 65
21/11/2014 09:46:26
66 Interfaces mobile
Tela de criação de narrativa
manual_final.indd 66
21/11/2014 09:46:26
Interfaces site
67
Interface come莽ando uma hist贸ria
manual_final.indd 67
21/11/2014 09:46:26
68 Interfaces site
Pรกgina inicial
manual_final.indd 68
21/11/2014 09:46:26
Interfaces site
69
Landing pรกgina como funciona
manual_final.indd 69
21/11/2014 09:46:26
70 Interfaces site
Capa da p谩gina de leitura de hist贸rias
manual_final.indd 70
21/11/2014 09:46:26
Interfaces site
71
Textos na pรกgina de leitura
manual_final.indd 71
21/11/2014 09:46:27
manual_final.indd 72
21/11/2014 09:46:27
ANEXOS
manual_final.indd 73
21/11/2014 09:46:27
manual_final.indd 74
21/11/2014 09:46:27
Tecnologia utilizada
manual_final.indd 75
75
21/11/2014 09:46:27
76 Personas - Joaquina Telles
Joaquina Telles, sexo feminino, tem 22 anos e é estudante de marketing na ESPM. Trabalha em uma agência de marketing, está sempre focada tanto nos estudos como no trabalho. Gosta bastante de escrever, mas em seus trabalhos na faculdade, sente um pouco de dificuldades ao tentar se exp ressar através da escrita, gerando muitas vezes textos confusos. Joaquina gosta de navegar na internet, e gasta muito tempo em redes sociais, tanto em desktop quanto em mobile. Como ela conhece bastante de internet, sempre quando vai escrever, procura referências em sites, ou em pesquisas que encontra na internet para melhorar.
manual_final.indd 76
21/11/2014 09:46:28
Personas - Thiago Nunes
77
Thiago Nunes, sexo masculino, tem 24 anos e trabalha como Diretor de Arte na empresa D2 Design, sempre foi muito interessado por quadrinhos e desde os 12 anos estuda desenho, aos 17 anos ele integrou a Universidade Anhembi Morumbi, para estudar Design Gráfico, cursando cursos de pintura digital e modelagem 3D, como forma de complemento a Universidade. Além dos quadrinhos, Thiago gosta muito de cinema, atividade que ele faz com frequência em sua cidade natal, São Paulo, bem como andar de bicicleta e gastar horas e horas no computador. Como diretor de arte, não liga muito para escrever, mas gosta de estimular sua criatividade, através de brainstorms, ou mesmo nas próprias conversas que têm com seus amigos.
manual_final.indd 77
21/11/2014 09:46:28
78 Personas - Lola Esteban
Lola Esteba, sexo feminino, tem 17 anos de idade e está no terceiro ano do ensino médio. Como está no último ano, está focada nos estudos para tentar uma vaga em alguma universidade. Durante a semana, fica um bom tempo no computador estudando e conversando com os amigos. Já nos fins de semana, gosta de relaxar. Sempre gostou de ler e escrever, porém prefere quando faz junto a outras pessoas, ou em algumas brincadeiras que fazem quando estão em grupos, pois não se sente presa a algumas “normas” de escrita quando está se divertindo com os amigos.
manual_final.indd 78
21/11/2014 09:46:29
Personas - Flávio Pinheiros
79
Flávio Pinheiros, sexo masculino, tem 25 anos e cursou Letras na USP. Atualmente trabalha em uma loja da família, porém sempre gostou de escrever e criar textos e histórias. Desde quando terminou a faculdade, ele continuou a escrever e tentar fazer publicações de seus textos na internet, para tentar ganhar visibilidade e reconhecimento das pessoas na área. Gosta muito de criar trechos de histórias em momentos em que está inspirado por alguma coisa, assim como de criar pequenos poemas. Não costuma acessar muito a internet, a não ser para se conectar ao Facebook e falar com alguns amigos, ou para publicar textos recém criados por ele.
manual_final.indd 79
21/11/2014 09:46:29
manual_final.indd 80
21/11/2014 09:46:30
Desenvolvido por
manual_final.indd 81
21/11/2014 09:46:30
Integrantes Alan ken Iti Yochida Pertinhez CauĂŞ Alamino Ancona Danile Laham Ponzio Guilherme Satwa de Oliveira Amaral Gustavo Marinho Fuspini Rafael Luiz Ventura Raphael Correia Lucena Rita de Araujo Folador Stephanie Yoshimi Nonaka
Orientadores Carlos Alberto Barbosa
Design Digital MA8
manual_final.indd 82
21/11/2014 09:46:30