Manual de identidade visual by Douglas Martins

? Relatório Qual é a boa Douglas W. da Silva Baptista Tálassa Chediak

Sumário

A idéia �� 4 Sobre ..................................................................... 4

Wireframe �� 6 Protótipo �� 6 Wireframe �� 7

Qual é a boa ?

Elaboração 7 Ícones 7

Protótipo.............................................................

Identidade 8 Aplicação

Experiência ......................................................

Apresentação �� 10

Manual da marca ............................................ 11 Escala de cor preferencial – Pantone / Aplicações Escala de cor – RGB / Aplicações

Escala de cor – CMYK / Aplicações Reduções

Arejamento 12 12

Familia tipográfica

Linha de produtos ............................................ 14 Marketing ............................................................. 15

Publicidade �� 15 Produtos

Qual é a boa ?

Aplicações de cores

Venda de produtos

A idéia

A ideia de criar um aplicativo, e não uma linha de produtos para o projeto integrado, surgiu da vontade de fugir um pouco do tradicional e do esperado. A princípio pensamos em fazer um aplicativo que tivesse como linha principal a segurança. Seria um projeto que beneficiaria tanto os jovens quanto seus pais. O usuário faria uma espécie de check-in no seu aparelho quando estivesse em um determinado local e seu responsável seria imediatamente notificado, gerando, dessa forma, gerando mais tranquilidade para os pais e tirando dos filhos o dever de ter que ligar para casa para avisar que chegou onde iria. Depois de alguns debates, fomos percebendo que aquela abordagem não iria ser exatamente o que queríamos quando pensamos em um projeto para jovens, e que o aplicativo poderia ser interpretado como uma forma de controle e privação de liberdade. Então, partimos para elaborar uma nova ideia, algo que fosse 100% para o nosso público alvo e que estivesse relacionado com os seus próprios interesses, e não com os de

seus pais. A ideia da segurança não foi totalmente abandonada, ela apenas se tornou um dispositivo opcional dentro do aplicativo.

Sobre

Qual é a boa? é um aplicativo, em forma de rede social, voltado ao público adolescente e pré-adolescente. Com ele o usuário poderá realizar uma série de atividades tais como: compartilhar lugares que foi com seus amigos, postar fotos, comentar lugares e dar nota a eles. Os check-ins feitos somam pontos que podem ser trocados por brindes que foram especialmente concebidos em função do estilo de cada lugar. O usuário poderá adquirir um cartão que dará a ele desconto em uma série de estabelecimentos que serão cadastrados no nosso sistema. Essas parcerias com os bares, restaurantes, boates e cinemas serão indispensáveis para o funcionamento do aplicativo. Cada estabelecimento manterá sua própria página e irá alimentá-la com informações, marketing e publicidade que acharem conveniente.

Wireframe

Wireframes são esboços básicos de um projeto, devendo ser feitos de maneira simples e bem esclarecedora, de modo que toda a equipe envolvida entenda de fato o posicionamento dos objetos. Neles devem ser especificados alguns detalhes como altura, cores usadas e fontes. O objetivo não é de forma alguma retratar minuciosamente o projeto, mas sim hierarquizar as informações, de maneira que o entendimento do desenho seja comum a todos, facilitando com isso o desenvolvimento da aplicação e a distribuição de tarefas. Questões como usabilidade e acessibilidade

também devem ser levadas em conta no desenvolvimento do aplicativo.

Protótipo

A etapa seguinte à dos wireframes é a de protótipo, na qual todas as informações reunidas pela equipe e aplicadas nos wireframes devem ser levadas em consideração, devendo o protótipo ser submetido a testes de usabilidade e acessibilidade. Nessa etapa deve ser feita a representação fiel do artefato gráfico e também deve-se ditar regras para a construção fiel e padronizada.

Wireframe

Primeiro decidimos o que nosso projeto abordaria e dessa forma elaboramos os nossos wireframes de telas, optamos por aplicar 5 interfaces diferentes para melhor amostragem e ideia de como seria o produto. Partimos pelo conceito da primeira tela, a tela de login na qual é estabelecido o primeiro contato com o usuário(a) e por isso levamos em consideração questões como o layout da interface, se simularia ou não um ambiente de uma casa de festas, porém o aplicativo destina-se a um público não só que curte baladas, mas que também procura por passeios públicos, bibliotecas e shows.

Ferramentas Para criarmos os wireframes usamos como ferramenta um molde feito em formato de um iPhone 3gs em papel Paraná que por ser resistente é menos maleável e mais rígido para realizar o contorno. Por ter o tamanho fiel ao de um celular e foram utilizadas medidas

Qual é a boa ?

exatas de campos de preenchimento e botões para melhor caracterização da interface. Para compartilhar informações usamos uma ferramenta de gerenciamento de tarefas chamada Trello, uma ferramenta gratuita na qual você cria cards/boards com etapas do trabalho e foi essencial para andarmos com o projeto de maneira tranquila e até poupamos muitos diálogos desnecessários que foram respondidos através do Trello.

Elaboração Depois que os esboços estavam no papel e que a maior parte dos testes tinham sido aprovados, iniciamos a etapa de elaboração das interfaces. Determinamos as cores principais, a logo e suas características e, finalmente, a disposição dos ícones. Fizemos os banners de publicidade acompanhando a mesma identidade visual que tínhamos elaborado para a marca. Seguimos com essa preocupação de não perder a “cara da marca” no hotsite e, embora tendo de seguir as exigências do briefing, optamos por conservar as cores principais e modificar as secundárias, para que dessa maneira pudéssemos preservar o que achávamos ser indispensável

Ícones Junto ao Wireframe tivemos a preocupação de elaborar ícones para o aplicativo, levando sempre em conta a identidade do material e a necessidade de uma comunicação clara com o usuário. Nesse sentido, criamos em listas os ícones imprescindíveis para a aplicação; ícones que devem servir como atalhos, e não como enfeites. Porém, seguir a identidade a risca era fazer com que os ícones se tornassem elementos despercebidos e por isso preferimos usar ícones com mais detalhes e ilustrados.

Protótipo

O protótipo deve interpretar de forma real e fiel como o usuário visualizaria a aplicação em execução no smartphone e, por essa razão, tivemos todo o cuidado em projetar de forma real a perspectiva da aplicação e fazer com que as definições feitas no wireframe fossem levadas ao protótipo. O processo de determinação da tipografia e das cores a serem utilizadas foi facilitado pela criação dos aspectos e definições nos wireframes.

Identidade A identidade do aplicativo influencia seu “peso” na interface, no hot-site e nos outros dois produtos. Em razão disso, optamos por uma interface que buscasse conceitos minimalistas e bem simples, sem tentar simular ambientes e lugares. Dessa forma, não criamos um rótulo do produto e com isso os usuários não pensarão no aplicativo como apenas um aplicativo para baladas, mas sim de qualquer tipo de “boa”, desde um restaurante até um ambiente público. Não foi, entretanto, tão simples criar um conceito minimalista e ainda escolher cores e tipografias. Por este motivo decidimos que a interface teria uma identidade única e não sofreria alterações significativas.

Qual é a boa ?

Aplicação

Todas as interfaces foram desenvolvidas com a utilização do Photoshop e Ilustrator, para as peças vetoriais utilizamos o ilustrator que nos permitia detalhamentos mais apurados e certos que o Photoshop que é já foi utilizado mais para a manipulação de imagem e alusão a luz e sombra. Vale ressaltar que nossas interfaces seguem um padrão definido e que dessa forma o usuário fica mais ambientado ao design da aplicação e com isso fortalece mais a ideia de identidade do aplicativo.

Experiência

“Bom eu já tinha uma ideia formada, porém ainda não havia uma segurança no que era vendido, o produto em si gerava mais questões do que soluções, demorei cerca de 2 semanas pra encontrar a minha dupla e por sorte nossas ideias se uniram, conseguimos alimentar de maneira significante o projeto, idealizamos algo no papel e foi posto devidamente em prática. Nos encontrávamos apenas 2 vezes por semana e o contato era totalmente através de e-mails. Administramos muito bem o tempo e conseguimos fazer tudo que pensamos desde o inicio. Foi uma experiência acadêmica muito valiosa, pois tive a oportunidade de aprender bastante e ensinar o que pude e houve de fato uma ajuda de ambas as partes. Acredito que essa troca de informações e opiniões foi primordial para o projeto. Acredito que tenha sido o projeto mais complexo que tenha participado e que por ser muito fora do tradicional acabou chamando um foco muito grande e por isso deveria ter sua devida importância e servirá como boa peça gráfica. Gostaria de agradecer ao professor Chico que teve de forma significante total peso oferecendo ajuda e dando sugestões para abordagens.”

Douglas Baptista

Tálassa

Qual é a boa ?

“Quando eu ouvi a ideia do projeto, confesso que achei ela um pouco desafiadora demais e achei que não fossemos conseguir fazer tudo que tínhamos conversado. Depois do primeiro encontro o projeto foi ganhando mais e mais consistência e foi ficando mais polido, tudo ficou mais fácil e possível com o tempo. Apesar dos poucos encontros, nós conseguimos fazer com que a ideia fosse trabalhada e que chegássemos a um consenso do que precisava ser feito, sempre em comum acordo. Posso dizer então, que eu aprendi muito nesse projeto, fico muito grata pelo meu parceiro Douglas que me ensinou bastante coisa e me ajudou a por algumas das minha ideias em prática. Sem dúvida esse foi o projeto mais enriquecedor e gratificante que já tive a chance de fazer parte.”

Apresentação

Qual é a boa? é um aplicativo voltado para o público jovem, despojado e que gosta de comunicação. Elaboramos, então, uma identidade visual bem minimalista, procurando não dar ênfase apenas à balada, mas sim a qualquer tipo de “boa”. Nosso logotipo é um balão de diálogo e interfere de maneira significativa na tipografia usada, que é arredondada e bem simples. Não procuramos simular ambientes em nossa aplicação, pelo simples fato dele não ser um aplicativo direcionado.

Definição de cores A cor possui grande valor em um logotipo. Por isso, para fugir do tradicional azul de rede social, optamos por uma cor que não estivesse ligada a nenhuma rotulação e chegamos a um consenso. Não fazemos uso de outra cor, variando simplesmente entre a nossa cor institucional e o preto e branco. Utilizamos a versão preto e branco somente para a eventualidade de se necessitar de uma cópia de algum material que tenha o logotipo com ou sem slong. Orientamos que se houver necessidade de imprimir ou encaminhar o arquivo para uma fotocópia que seja utilizada a versão P&B para melhor visualização da marca, preservando, assim, a integridade do logotipo.

Pantone 339 C

RGB - 15 / 180 / 150

Escala de cor preferencial – Pantone / Aplicações

Qual é a boa ?

Hexadecimal - #11B694

CMYK - 75% 0% 55% 0%

Escala Pantone – Deve-se usar a escala pantone somente para impressões gráficas. Conservando assim as cores do Logotipo e assegurando que não haverá problemas com a impressão em relação à tonalidade das cores escolhidas.

Escala de cor – RGB / Aplicações Escala RGB – Deve-se usar a escala RGB somente em campanhas multimídias, ou seja, na exposição do Logotipo em propagandas ou em transmissões multimídias onde a marca terá algum destaque.Vale enfatizar que nos casos da exposição do Logotipo em Motion Design também deve ser usada à escala RGB.

Escala de cor – CMYK / Aplicações Escala CMYK – Deve-se usar a escala CMYK no caso da ausência da Escala RGB e no caso das impressões em policromia onde o processo de impressão é realizado em combinações de 4 cores (ciano, magenta, amarelo e preto).

Reduções Estabelecemos algumas regras de redução para com a marca, visando sempre a legibilidade do Logotipo e sua integridade, evitando assim a diversidade de significados que um logotipo possa ter. Orientamos então que não haja de forma alguma qualquer desvio das regras aqui estabelecidas.

Height : 3,19 cm Height : 95 pixels

Qual é a boa ?

Width : 13,0 cm Width : 391 pixels

Arejamento

a a - 21 pt

Aplicações de cores Versão preto e branco

Utilizamos a versão preto e branco somente na necessidade de uma cópia de algum material que tenha o logotipo com ou sem slong. Orientamos que se houver necessidade de imprimir ou encaminhar o arquivo à uma fotocópia seja utilizado a versão P&B para melhor visualização da marca e assim preservando a integridade do logotipo.

Versão monocromática

Recomendamos o uso da versão monocromática na necessidade de impressão em off-set ou silk-screen. A versão monocromática utiliza apenas as cores institucionais ao logotipo. Essa necessidade é devido que o processo de impressão Silk-Screen, onde a tinta é vazada, pressionada por um rolo compressor. É utilizada na impressão em variados tipos de materiais (papel, plástico, borracha, madeira, vidro, tecido, etc...).Já no processo off-set é feito pela repulsão da água e da tinta gordurosa. Versão traço

Versão fundos coloridos

Qual é a boa ?

Nosso logotipo em traços deverá ser preenchido com a cor branca e somente em um fundo branco.

Seguimos alguns padrões de aplicações em fundos coloridos para que não haja nenhuma poluição visual e preserve sempre a leitura do logotipo.

Familia tipográfica Seguimos alguns padrões de aplicações em fundos coloridos para que não haja nenhuma poluição visual e preserve sempre a leitura do logotipo. Centiry Gothic

Aa,Bb,Cc,Dd,Ee,Ff,Gg,Hh,Ii,Jj,Kk,Ll,Mm,Nn,Oo,Pp,Qq,Rr,Ss,T t,Uu,Vv,Ww,Xx,Yy,Zz - 1,2,3,4,5,6,7,8,9,0. 13

Linha de produtos Para este projeto integrado deveríamos criar uma linha de produtos para jovens ou animais. Optamos por criar algo para jovens da faixa etária de 15 a 18 anos por ser um grande desafio e que nos permitiu explorar problemas e encontrar soluções para eles. Pensamos, então, em uma rede social que fosse comercializada como aplicativo e que contaria com mais dois produtos, a saber, buttons e um cartão promocional que permita acúmulos de pontos e posterior

troca por produtos ou vantagens.

Nossa publicidade será efetiva, direta e destinada a um tipo de público apenas. Em função disso, não procuraremos veicular nossa publicidade nas mídias tradicionais. Nosso alvo é um público mais interativo e comunicativo, que busca novas redes sociais, sendo, por essa razão, mais exposto à publicidade veiculada em sites do que na mídia impressa, televisiva ou radiofônica

Marketing Publicidade Utilizaremos como meio de divulgação de nosso aplicativo anúncios em sites, divulgação através de videos na internet e, obviamente, através de anúncios em lojas de aplicativos on-line.

Produtos Nossos produtos possuem identidade e juntos formam um kit.

Venda de produtos Nossos produtos serão vendidos separadamente e em etapas. O primeiro produto que o usuário deve adquirir é o aplicativo, podendo a compra ser feita através da store responsável pelo seu O.S. O preço será universal. O aplicativo poderá ser adquirido por U$ 0,99 e os buttons serão comercializados separadamentes, podendo chegar ao valor de U$ 1,00. Os vales promocionais funcionam como uma forma de presente, o que possibilitará a conquista de novos usuários.

Qual é a boa ? 15

Web-site

Uma das maneiras de chegar ao nosso público é através do nosso site Uma das formas de chegarmos ao nosso público alvo é através do nosso hot-site, elaboramos vários wireframes para chegarmos a uma solução inteligente para o visual do site sem alterar nossa identidade visual e visando isto aplicamos ao nosso background imagens e na troca de styles os modelos de celulares (Android e iPhone) se modificam e dessa forma você visualiza melhor e tem uma ideia mais ampla e clara da aplicação e dessa forma atingimos dois tipos de plataformas. Não optamos pela programação padronizada e requerida pela W3C e nos guiamos mais pelo visual.

Utilizamos de imagens do nosso produto para chamarem mais a atenção de nosso público alvo e por isso as utilizamos em tamanhos grandes para despertar curiosidade e pouco texto para que não seja um conteúdo muito elaborado e que tome muito tempo do nosso usuário ou futuro usuário. A troca de estilos foi exigido e decidimos utilizar a troca de conteúdo e não de layout, pelo fato do layout levar a identidade da marca e qualquer alteração implicaria no entendimento visual do site e na identidade da marca. Por isso o miolo foi desenvolvido em 3 classes e aplicadas a elas como background apenas uma imagem, então cada página tem sua própria div class e na troca do estilo modifico apenas esse background.

Qual é a boa ?

Web-Site