capa
capa com nomes
Autores Diego Zago Jefferson Leal Matheus Bezerra Vitor Videira Yuki Finamore Design Digital 5ยบ Semetre Matutino
Ă?ndice
05 Introdução 07 Conceito de Criação 09 Público Alvo 11 Estratégia de Comunicação 13 Ativismo 15 Design de Informação 15
Arquitetura da Informação
15
Hierarquia e Agrupamento
17 Logotipo 19 Paleta de Cores 21 Tipografia 23 Design de Navegação 27 Design de Interface 27
Estilo das Ilustrações
29
Interfaces
41
Interfaces Aplicativo
43 Design de Interação 45
Gamificação
49 Conjunto de Tecnologias 49
Banco de Dados
50
Programas Utilizados
Introdução
O projeto utiliza dos conceitos de ciberativismo e gamificação para informar de uma forma clara e objetiva, o porque deve-se doar sangue, com o foco direcionado para o Brasil. Ao apresentar os motivos, pretende-se mobilizar e engajar as pessoas a doarem sangue, algo que não é muito discutido no Brasil.
assim, o objetivo é combater estes motivos, portanto, cada interface é voltada para o combate de um destes motivos, e ao final espera-se que o usuário se sinta engajado a doar.
As informações levantadas através de pesquisas, apontaram os principais motivos de não termos tantos doadores no Brasil, como o esperado, 7
Conceito de criação
O projeto visa principalmente mobilizar as pessoas a participarem da nossa ONG, utilizando os conceitos de ativismo e ciberativismo. Por meio de uma pesquisa identificamos os principais motivos que impedem as pessoas de doar, com isso pretendemos combater estes motivos apresentando informações e mantendo um contato direto com nosso público. Além do conceito de gamificação, iremos promover encontros que possibilitem este contato direto, mobilizando e incentivando nosso público alvo a fazer doação. 9
Público Alvo
O público alvo foi definido por meio de uma pesquisa onde foram selecionadas as principais faixas etárias doadoras. Nosso objetivo é falar diretamente com este público que já tem costume de doar, para que outras pessoas venham a ser incentivadas. Como é possível ver na tabela abaixo, as faixas etárias com maior potencial de doadores estão entre 20 e 39 anos, representando 69,6% dos doadores do Brasil.
Tabela 1 – Tabela Doadores Brasil – Divididos por faixa etária. 2004. Fonte: Anvisa
11
Estratégia de Comunicação
Com base na pesquisa referencial, definimos quais os principais motivos que levam as pessoas a não doar. Assim, estabelecemos uma hierarquia de informações, do motivo mais comum até o menos, com o objetivo de esclarecer e combater de certa forma estes impedimentos. Na tabela 2, podemos ver as razões.
Tabela 2 – Distribuição de freqüências por razão de nunca ter doado sangue. 2004. Fonte: Anvisa
Pretendemos combater estas razões, apresentando soluções para cada uma delas, além de apresentar informações que muitas vezes são dúvidas ou “tabus” para as pessoas. Cada interface possui um tipo de animação para deixar o conteúdo um pouco mais dinâmico e torne fácil a associação do conteúdo com a animação. O vídeo dos melhores momentos do último encontro de doadores será postado no Youtube, na conta da ONG Amigos de Sangue. O Facebook será um meio de divulgação que estará ligado diretamente com a ONG e o projeto de gamificação, o usuário ao compartilhar a página do projeto, receberá pontos que contribuem para seu ranking no site. 13
Ativismo
O projeto tem um caráter ativista, que busca incentivar e mobilizar o maior número de pessoas a realizar doações. Uma das estratégias abordadas no projeto, é a realização de encontros de doadores e potenciais doadores dentro de um espaço de tempo préestabelecido (90 dias, o tempo de espera entre uma doação e outra), para que com isso, as pessoas se sintam incentivadas. O objetivo é dar continuidade ao projeto da web, eliminando algumas das principais razões que impedem as pessoas
de realizarem a doação. Entre elas principalmente o medo e a falta de tempo, que são as razões que mais se destacam. Este tópico se desdobra no nosso projeto de gamificação, onde o participante do encontro, recebe uma recompensa na nossa aplicação.
15
Design de Informação Arquitetura da Informação Hierarquia e Agrupamento
Arquitetura da Informação 1 – Informação sobre o tempo médio de doação e sobre os encontros. 2 – Benefícios da doação de sangue. 3 – A situação do banco de sangue no Brasil e quantas pessoas é possível ajudar. 4 – Informação dos casos em que a pessoa pode e não pode doar. 5 – Informação dos locais de doação e encontros. 6 – Processo de doação de sangue. 7 – Vídeo com depoimentos de doadores. 8 – Perguntas Frequentes. Hierarquia e Agrupamento A – “Estou sem tempo”: Informações 1 e 5. B – “Porque doar”: Informações 2 e 3. C – “Posso doar?”: Informação 4. D – “Como doar?”: Informação 6 e 7. E – “Dúvidas”: Informação 8. 17
Logotipo
Figura 5 - Logotipo.
O conceito do logotipo é transmitir às pessoas a ligação entre o doador e receptor. O símbolo do coração além de ser associado a vitalidade, representa o amor ao próximo, sentimentos e emoções. Os dois tons de vermelho simbolizam o sangue do doador e receptor, a impressão de movimento torna a ilustração em uma forma líquida, fazendo a relação de união entre eles. O fundamento de “fechamento” da gestalt também foi utilizado para formar o símbolo do coração, através dos espaços em branco realiza-se um preenchimento visual da forma. A fonte Signika é utilizada em meios de comunicação onde é necessária a clareza de informações, além disso, ela se relaciona com o logo e complementa a identidade do mesmo. 19
Paleta de Cores
A paleta de cores é composta pelo branco, vermelho e cinza. O branco predomina na interface, gerando um contraste em relação às outras cores. Os tons de vermelho, foram utilizados nas ilustrações para simbolizar o sangue, sendo aplicado nos ícones e quando há necessidade de destacar determinados elementos. O cinza foi utilizado principalmente nos textos, ícones e para dar forma às ilustrações.
Figura 6 - Paleta de Cores.
21
Tipografia
As fontes utilizadas foram Lato Bold, Lato Light e Lato Regular. Lato é uma fonte sem serifa, possui 9 pesos. É uma fonte equilibrada, ela pode ser usada tanto no corpo do texto, como em tamanhos maiores, onde destaca seus traços originais. Sua estrutura forte proporciona uma elegância e seriedade, porém seus detalhes semi arredondados mantém um tom amigável, dando equilíbrio sério e amigável. Lato é uma fonte sem serifa, possui 9 pesos. A fonte Lato Bold foi utilizada para todos os títulos, Lato Light para textos em geral e Lato Regular para textos do Pop Up.
Figura 7 - Tipografia.
23
Design de Navegação
A navegação foi pensada para que qualquer pessoa possa ter acesso às informações, tendo a possibilidade de explorar ainda mais o conteúdo, através do nosso projeto de gamificação. Assim, desenvolvemos uma interface voltada para as pessoas que se cadastrarem no site, onde a mesma terá acesso
a todo esse projeto, tendo um perfil, recebendo feedbacks e podendo “competir” com outras pessoas. O projeto de gamificação, serve para gerar este estímulo a mais, mas não é o foco principal do projeto, que é mobilizar as pessoas a doarem sangue.
25
Figura 9 - Mapa de Navegação - Log in.
Figura 10 - Mapa de Navegação - Após Log in.
26
27
Figura 11 - Fluxo de Navegação.
Design de Interface Estilo das Ilustraçþes
img.13 - J.Carlos - Revista para todos n.431 - 1927
As ilustrações foram inspiradas nos desenhos de J. Carlos, designer brasileiro citado no livro “Linha do tempo do design gráfico brasileiro”, que fez parte do movimento artístico Art déco no Brasil. Por nosso tema apresentar um caráter pesado, as ilustrações possuem um traço mais orgânico, para não causar desconforto ao nosso público. Explorando um ar mais humano e natural, as ilustrações trazem uma leveza a um tema tão delicado.
img.13 - J.Carlos - Revista para todos n.499 - 1928
Img.14 - J.Carlos - Revista para todos n.474 - 1928
29
Design de Interface Interfaces
O layout foi definido de forma que todo o conteúdo fique apenas em uma página. Definiu-se uma hierarquia de informações, baseada nos principais motivos que levam as pessoas a não doar, assim, os motivos são apresentados de forma linear em diferentes “interfaces”, do maior motivo para o menor. As interfaces foram divididas em um grid de 12 colunas, de forma que o conteúdo sempre ocupe pelo menos um terço da página.
31
Figura 16 - Layout “Home”.
Interface “Home” Esta interface contém o menu de navegação centralizado no topo da página. Apresenta a imagem de uma bolsa de sangue “vazia”, o objetivo é lembrar o formato de um coração que está sendo preenchido com sangue. A bolsa estar vazia, significa que o usuário ainda não teve acesso às informações do site. 32
Figura 17 - Layout “Estou sem tempo”.
Interface “Estou sem tempo” Nesta interface está em foco a imagem de uma ampulheta para simbolizar a falta de tempo. A interface está dividida em três partes, sendo uma delas para encontros e outra para locais.
33
Figura 18 - Layout “Porque doar”.
Interface “Porque doar” O foco nesta inferface é a bolsa de sangue vazia com uma expressão triste, simbolizando o estado dos bancos de sangue do Brasil. Foram dedicadas duas colunas para o conteúdo, por ser uma interface com muitas informações. Também disponibilizamos as informações dos bancos de sangue atualmente, na forma de bolsas de sangue que variam de vazias à cheias. 34
Figura 19 - Layout “Posso doar?”.
Interface “Posso doar?” Apresenta a imagem de uma bolsa de sangue em formato de “proibido”, para se assimilar e complementar com o conteúdo apresentado ao lado. Por ser a interface com maior quantidade de informação, utilizaram-se “Pop-ups” para melhor visualização de informações.
35
Figura 20 - Layout “Como Doar?”.
Interface “Como doar?” Essa interface possui a ilustração do braço de um doador durante o processo de coleta de sangue. Ícones destacados em vermelho que representam cada etapa da doação, estão presentes para melhor assimilação com o conteúdo.
36
Figura 21 - Layout “Dúvidas?”.
Interface “Dúvidas?” Apresenta a ilustração de uma interrogação que faz relação ao título da interface.
37
Figura 22 - Layout “Final”.
Interface “Final” Apresenta o coração cheio, representando que o usuário teve acesso às informações e agora está fazendo parte da ONG Amigos de Sangue.
38
Figura 23 - Layout página login.
Interface Login e Cadastro O site possui páginas para login, cadastro, login via facebook, recuperação de senhas antes do usuário acessar o site, com opção de poder pular essas etapas.
39
Figura 25 - Layout “Perfil”.
Interface “Perfil” A interface do perfil é dividida de forma que o usuário possa ter acesso a todas as informações de seu perfil e opções de gamificação facilmente, o usuário tem visão de todos os próximos eventos, medalhas que contém e que faltam, ranking, etc.
40
Figura 26 - Barra de navegação superior.
Figura 27 - Barra de navegação Inferior.
Barras de Navegação Existem duas barras de navegação, a primeira (superior) fig.26 aparece quando a página é carregada, conforme o usuário navega pelas interfaces, a barra superior fica oculta e a segunda barra (inferior) fig.27 aparece, com mais opções de navegação, informações do perfil e interações.
41
Figura 28 - Layout pop’up.
Pop’up Na página “Posso doar?” apresenta botões que ao clicar abrirá o pop’up caso o usuário queira saber mais sobre o assunto selecionado.
42
Aplicativo As interfaces do aplicativo são versões resumidas da versão desktop, quando existe muita informação em uma interface, optouse por criar uma nova página especialmente para esses casos.
Figura 29 - Layout aplicativo.
Figura 30 - Layout aplicativo.
Figura 31 - Layout aplicativo.
Figura 32 - Layout aplicativo.
43
Design de Interação
Interação do scroll Interação do scroll para ser direcionado para a informação selecionada.
Figura 33 - Barra de navegação superior - Interação por scroll.
Interação com o Google Maps. Interação com Google Maps para realizar buscas de hemocentros próximos.
Figura 34 - Intearação Google Maps.
45
Interação pelo Facebook. Interação pelo Facebook para login, compartilhar e participar de eventos.
Figura 35 - Intearação Facebook para login.
Figura 36 - Intearação Facebook para compartilhar e participar de eventos.
46
Interação com o Youtube.
Figura 37 - Intearação YouTube.
Gamificação O projeto apresenta conceitos de gamificação, uma forma de atribuir conceitos dos “games” para outras realidades, a fim de expandir o conteúdo e torná-lo mais dinâmico. Deve-se destacar que o principal objetivo do projeto é o aumento do número de doadores de sangue no Brasil, porém, não apenas aumentar em quantidade, mas também em qualidade. Durante todo o desenvolvimento do projeto, tomou-se o cuidado de esclarecer claramente quais as condições em que uma pessoa pode ou não pode doar, os riscos e os benefícios de se doar sangue. Um projeto assim não pode exigir que o pensamento da população brasileira mude, mas esperar que potenciais doadores não percam mais tempo e se tornem novos doadores. 47
O usuário ganha troféu nas seguintes situações: - Ao navegar por todas as interfaces. -Confirmando a participação em um evento por meio do QR code. - A cada doação. Quanto mais vezes o usuário doar, melhor vai ser o troféu. - Ao curtir nossa página no Facebook ou compartilhar. - Um ranking vai comparar os usuários que mais doaram sangue.
48
49
Conjunto de Tecnologias Banco de Dados
Foi criada uma base de dados chamada de “Projetoz” onde foi armazenada a tabela “user” para realizar o cadastro dos usuários. Na tabela “user” foi criado o campo “id” para não ocorrer repetição de ids no site, o campo “login” foi criado para cada usuário ter um username próprio e não hajam nomes repetidos, o campo “email” foi criado para o usuário conseguir efetuar o login e solicitar uma nova senha, caso esqueça a sua antiga, o campo “senha” e “rsenha” foram criados para o usuário inserir uma senha pessoal para ter acesso a sua conta e perfil.
Figura 38 - Banco de dados - Log In - Cadastro.
51
Figura 39 - Banco de dados - Log In - Campos.
Foram utilizadas as seguintes tecnologias: -Adobe Photoshop, como software de edição, montagem, formatação de layout e criação de peças. - Adobe Illustrator CC foi utilizado junto ao Adobe Photoshop, na criação dos layouts e nas construções das peças gráficas, sendo utilizado principalmente para vetorização. - O Adobe Fireworks CC teve utilização para a formação dos wireframes, protótipos e também na formação do layout. 52
- Adobe After Effects CC.
- Adobe InDesign para diagramação do Plano Executivo.
- Final Cut X para a criação de vídeos, vinhetas e edição.
- Microsoft Word para a edição de textos.
- AppInventor na criação do aplicativo
Na parte de programação foram utilizados o Adobe DreamWeaver, Sublime Text 3 e Brackets. Foram utilizadas as linguagens HTML e CSS para a inserção de conteúdo e estilização, JavaScript para aplicação de efeitos visuais como animações e PHP para trabalhar junto com o banco de dados, inserindo e acessando dados guardados no mesmo. 53
www.ongamigosdesangue.com.br