Plano executivo | TCC Symbee

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