Monografia - maranata.org.br

maranata.org.br Redesign de website

SĂŁo Paulo 12/2016

Marcelo Mattos Jarra

RA: 915122685

Caio Leonardo Silva Quevedo RA: 915117383

Redesign de website Monografia apresentada à Universidade Nove de Julho para a obtenção do título de Tecnólogo em Design Gráfico.

Este trabalho foi desenvolvido na disciplina Projeto Gráfico II e mediado pelo Prof. Dr. Ailton Santos Silva

São Paulo 12/2016

Sumário Introdução

7

ONGs, conceito e importância.

Afinal, o que é uma ONG? A importância das ONGs na sociedade

9 9 11

Objetividade em um site não Governamental Estrutura eficiente Flat Design Design Responsivo

15 17 20 22

Redesign do website Os problemas encontrados Análise de concorrentes Mapa de fluxo de navegação maranata.org.br Nova arquitetura Novo Mapa de fluxo de navegação Protótipos Avaliação do protótipo de papel Nova interface

25 26 34 38 39 41 42 44 46

Conclusão e objetivos Alcançados

67

Bibliografia

67

Introdução Esta monografia tem como objetivo, mostrar o processo de redesign do website da ONG maranata.org.br, tentando construir uma identidade virtual para melhor visualização na web. Abordamos pontos importantes como a nova estrutura do fluxo de navegação, através dos estudos e teorias sobres arquitetura de informação, utilização de protótipos de papel para avaliação de navegabilidade do website, estudos e comparação de pontos positivos e negativos de concorrentes. Para redesign da interface usamos os conceitos do flat design e design responsivo, tecnologias mais modernas para uma melhor usabilidade.

7

1

ONGs, conceito e importância

Afinal, o que é uma ONG? ONG é uma sigla para o termo Organização não Governamental. Muitos também utilizam a expressão Terceiro setor, traduzida de seu termo original em inglês Third sector. Muitos conhecem pelo primeiro termo, sabem que são organizações voluntárias com fins não lucrativos, mas não sabem ao certo como são geridas, funcionam ou para que servem.Em uma ONG, benefícios financeiros não podem ser distribuídos entre seus diretores e associados, resultam de ações não governamentais, ou seja, depende da criação através da benevolência de uma pessoa ou de um grupo delas (fundadores).

Por não depender de apoio financeiro provindo do governo, imagina-se que este tipo de instituição depende de atos de benevolência ou até mesmo de doações, quando na verdade, podemos perceber que um instituição que se enquadra neste perfil, depende de um conjunto complexo de adesões (pessoas da sociedade civil) e de contribuições voluntárias. São entidades que não representam um governo, com ações em prol de outras pessoas e que necessitam deste tipo de trabalho feito pelas instituições.

9

1 No Brasil, o sentido de ONG está mais relacionado a um sistema de cooperação para o desenvolvimento.

Muitos associam a ONG a um trabalho desenvolvido por membros para membros da sociedade civil. O termo sociedade civil se apresenta como um modo de legitimar a autoridade e a capacidade de indivíduos e instituições particulares em exercer a cidadania de forma direta e autônoma. Viver e “estar” na sociedade civil dá uma sensação ou sentido de vinculação com a cidadania, cumprindo seus direitos e deveres em um plano simbólico e vinculado à política, visto o posicionamento de seus participantes e aspirações com a vida em sociedade. Naturalmente distinguindo-se do estado e promovendo interesses coletivos.

Em resumo, de acordo com Fernandes (1995 e 1996a), “terceiro setor” é composto de organizações sem fins lucrativos, criadas e mantidas pela ênfase na participação voluntária, num âmbito não-governamental, dando continuidade às práticas de “caridade” e da “filantropia”, graças, sobretudo, à incorporação do “conceito” de cidadania e de suas múltiplas manifestações na sociedade civil.

10

A importância das ONGs na sociedade.

Agora que já sabemos o que é uma ONG e suas especificidades, podemos tentar compreender qual a sua importância para a sociedade civil que depende ou usufrui dos serviços ofertados pelas entidades/ instituições.

As ONGs são criadas inicialmente para atender necessidades das comunidades nas quais se inserem a fim de realizar trabalhos em lugares que o Estado não consegue “chegar” e contam com doações e colaboração de instituições privadas. Através das ONGs, seus associados podem se integrar e interagir, conhecendo um mundo diferente e ampliando seus conhecimentos, contribuindo de modo significativo para o exercício de sua cidadania.

Existem diversos tipos de ONGs, com diferentes finalidades. Como por exemplo, ONGs com objetivo de levar a informatização à comunidades mais carentes, Ongs compostas por diversos projetos sociais, como a ONG analisada neste presente trabalho. A ONG analisada, Maranata, localizada em São Paulo, no bairro da Casa Verde, possui quatro diferentes projetos sociais.

11

1 A Creche Maranata, que oferece alimentação e atividades pré escolares , para as crianças de 02 à 04 anos, possibilitando que os familiares da região tenham onde deixar seus filhos para trabalhar com a garantia de que serão atendidos os direitos de seus filhos preservados e respeitados.

O Centro da Juventude atende crianças de 07 à 17 anos. O atendimento é feito nos períodos da manhã e da tarde, de acordo com a conveniência dos alunos, oferecendo-lhes alimentação, acompanhamento nas tarefas escolares, atividades esportivas em quadra própria, encaminhamento pré profissionalizante: noções de informática, atividades de artes plásticas, cênicas e musicais.

12

Logo Maranta Fonte: http://maranata.org.br

Logo Centro da Juventude Fonte: http://maranata.org.br

O Lar de Elizinha que oferece condições de desenvolvimento humano a crianças e adolescentes de ambos os sexos de 0 à 17 anos, os acolhidos são encaminhados pelo poder judiciário e o atendimento é em tempo integral, com acompanhamento de funcionários e voluntários. Tirando as crianças das ruas, dando-lhes um endereço na vida.

Logo das irmas de Elizinha Fonte: http://maranata.org.br

O Núcleo de convivência do Idoso, que atende no período da tarde os idosos oferecendo lanche e oficina de artes, música, ginástica, origami, dança, meditação, bordado e também grupo de terapia e orientação psicológica. O Centro da Juventude atende crianças Logo NCI Fonte: http://maranata.org.br

13

2

Objetividade em um website não Governamental.

Atualmente é difícil imaginar a evolução mundial sem o Design. Entende-se pelo termo “Design” a conceituação de um Projeto gerado através da solução de certo problema; seja ele um Projeto Gráfico ou Projeto de Produto. O Design começou a surgir na época da Revolução industrial, quando a demanda de produção de produtos necessitava de aumento devido ao crescimento e expansão dos grandes centros urbanos. Essa revolução mercantil gerou grandes mudanças, que resultou a necessidade de um estudo/projeto para resolver a situação e alavancar o mercado das empresas ao redor do mundo. Como essa mudança tomou uma proporção gigantesca desde aquela época, cada produto fabricado continha características peculiares de sua cultura e país de origem, assim fazendo com que o mesmo ganhasse uma identidade própria. Porém, no contexto de mercado globalizado e a necessidade de troca de informações mundiais; o projeto de Design Gráfico/Produto exige uma forma que seja aceita internacionalmente; ainda sim mantendo certas características, mas chegando ao equilíbrio. Ressaltando as qualidades de um bom design: melhor funcionalidade e estilo.

15

2 Nos últimos tempos é perceptível que está acontecendo um grande crescimento tecnológico das mídias e canais de comunicação, como o desenvolvimento visual de revistas, jornais, livros, anúncios, outdoors, cinema, televisão, logotipos, folders, catálogos, web design, displays, embalagem de produtos, todo esse pacote engloba-se dentro do Design Gráfico.

O Design Gráfico é um elemento muito importante nas empresas e tem como prioridade chamar a atenção do consumidor para seus produtos e serviços. É fundamental por exemplo que uma empresa tenha em mente que para atingir o maior número de seu público alvo, precisa que sua comunicação visual seja impactante, de modo a prender a atenção de seu usuário/telespectador/ consumidor. Consequentemente será elaborado junto ao design toda uma estrutura no produto; sendo 100% funcional, elegante, ergonômica, prática, simples e direta.

Todos esses elementos agregam qualidade ao produto; mas o papel mais importante do design gráfico é que a comunicação entre usuário e produto tenha praticidade e clareza, passando todo o conceito que a empresa deseja, independente do seu ramo de trabalho.

16

Estrutura eficiente.

Pensando nestes elementos básicos para a criação de um design prático e com boa usabilidade, ao criar o Website da ONG Maranata, buscamos inspiração nos conceitos de arquitetura da informação, flat design e design responsivo.

A arquitetura da informação contribui para criar facilidade de acesso promovendo a usabilidade do site. O arquiteto de informação é responsável por tornar o website mais acessível, utilizando a análise do fluxo de informação, conceituação do desenho da interface e testes realizados com usuários, para obter resultados positivos em relação a sua experiência de navegação, simples e resumidamente “tornar claro o que é complexo.”

(Wurman 1997)

17

2 Três pontos são a base da arquitetura de informação, o usuário do qual é feito o estudo de seu comportamento e necessidades, para proporcionar uma experiência agradável frente ao website. Conteúdo, toda informação, serviço disponibilizada pelo website e o Contexto que depende da organização e planejamento da informação a ser inserida no website.

Neste projeto focamos em três pontos importantes para manter a eficiência na usabilidade no website da ONG, a navegabilidade, legibilidade e acessibilidade.

Conteúdo

Usuario

A.I.

Contexto

Base da arquitetura de informação Fonte: Arquivo próprio.

18

A Navegabilidade é primordial, considerando que todos os item que constitui a navegação do website deve estar alinhado a seu objetivo, permitindo fácil entendimento e procura por informações, o layout tem que ser harmônico e organizado, e não promover desordem visual e de informação, fazendo o usuário ter o menor número de cliques possível para atingir seu objetivo.

A Legibilidade está relacionada diretamente com a tipografia, considerando essa de suma importância para se comunicar e transmitir a informação. A tipografia tem que ser bem empregada, e relacionada com seu público alvo e objetivos do projeto.

Acessibilidade de um website, compreende esse tendo liberdade de acesso a todas as plataformas disponíveis.

Na construção de um site, o livre acesso a vários tipos de navegadores e adaptação a múltiplos dispositivos, se torna indispensável em um website na atualidade.

19

2 Flat Design Um estilo minimalista, regido pela redução e hierarquia dos elementos, é usado principalmente nas mídias digitais, como websites e aplicativos. As interfaces que utilizam Flat Design, são mais planejadas, buscando a funcionalidade, facilitando a compreensão e a interação dos usuários. “As formas a princípio mais neutras e, portanto, anônimas e sem estilo, acabam por converter-se nas mais marcantes e inconfundíveis”.

(ZABALBEASCOA; MARCOS, 2001, p. 18) Dentre as suas características, o uso de imagens simples, transmitem mensagens mais rapidamente e efetivamente, o uso de ícones e cores sólidas em tons pastéis. A tipografia é um elemento muito utilizado no Flat Design, fontes sem serifa são amplamente utilizadas pela simplicidade na estrutura dos caracteres, letra cursivas são utilizadas de maneira que não descaracterize o estilo, sua importância está na harmonização com o layout.

Pawilak (2015) “A tipografia é peça fundamental no Flat, ela deve ser clara e direta”

20

Icones no estilo flat design -

Paleta de cor flat design -

Fonte: http://nextecommerce.com.br/

Fonte: http://wearecmyk.com/cmyk-lab-whats-after-flat-design/

21

2 Design Responsivo A utilização de dispositivos móveis para acessar a web, a cada dia fica mais fácil. Com uma variedade de aparelhos no mercado que possuem dimensões e resoluções de tela diferentes. Pensando na usabilidade de um website frente a esse desafio, uma nova metodologia para construção de websites foi adotada O conceito de design responsivo na sua forma ampla deve ser entendido como o design capaz de “responder” às características do dispositivo ao qual é servido. Responder, nesse contexto, tem o sentido de movimentar-se expandindo e contraindo. Em outras palavras, o layout responsivo expande e contrai com a finalidade de se acomodar de maneira usável e acessível à área onde é renderizado, seja um smartphone, tablet, desktop, mecanismo de busca, etc. (SILVA, 2014, p.35).

22

Adaptação para múltiplas resoluções de tela, expandindo e contraindo com a finalidade de se acomodar de maneira usável e acessível. O desenho de um grid fluido é uma peça muito importante no projeto inicial de um website, já definindo a hierarquia do conteúdo perante a variação de tamanho das telas possíveis. Imagens e mídias flexíveis capazes de contrair ou expandir suas dimensões, também proporcionam uma adequação do conteúdo ao seu layout.

Simulação design responsivo -

Fonte: arquivo próprio

23

3

Redesign do website

O website de uma ONG, tem como objetivo principal informar sobre algum problema social que necessita de atenção, fornecendo um conteúdo de qualidade para atingir seu usuários e conseguir doações financeiras, de alimentos e outros materiais.

Pensando nessa necessidade, esta entidade precisa se comunicar de modo claro e conciso, fato que seu site atual não cumpria. Ao realizar o redesign deste website foi essencial pensar no público colaborador e nos usuários que utilizam o site para contribuir e se informar sobre as atividades realizadas. Pensamos em elementos de fácil acesso visual e de navegação simplificada.

25

3 Os problemas encontrados A primeira vista o site da ong maranata, se apresenta de um maneira confusa, sendo difícil a distinção dos elementos logo na primeira página, não apresentando seu objetivo claramente de modo a impedir uma comunicação eficiente com usuário. A falta de hierarquia visual no site torna seu conteúdo vago.

Seu grid não é responsivo, o que não permite uma fluidez e hierarquização dos elementos das páginas em dispositivos móveis, como tablets e smartphones, o que diminui muito o alcance de visitantes no website.

Ter uma página de contatos é primordial para troca de informações entre o usuário e a instituição, além de não possuir uma, o site não tem mais nenhum meio de comunicação digital, como as redes sociais tornando a existência da ONG virtualmente obsoleta. As cores não são bem aplicadas. A paleta de cores do site é basicamente em tons de laranja, nas laterais do website a cor não permite uma boas visualização do conteúdo central causando o efeito de “vibrar na vista”. A tipografia não permite um equilíbrio gráfico no site, há uma grande variação e ausência de peso, apenas na identificação das páginas.

26

Pรกgina Inicial do website Maranata

- Fonte: http://maranata.org.br

27

3 Analisando a hierarquia de informação do website, a primeira página (home) possui três áreas de destaque, “Nossa Atividades”, “Mural”, “Galeria de imagens”(1).

A seção “Nossa Atividades” (2), é um slider que troca de informação por tempo ou pela interação do usuário.

As imagens são de baixa qualidade, tanto na resolução como na produção, dificultando a comunicação.

As informações no Mural estão constantemente desatualizadas, e de difícil leitura, o corpo do texto é pequeno e sem hierarquia de informação. No canto esquerdo está a Galeria de imagens, sendo a menor das três seções, suas imagens são pequenas e sem definição, não permitindo ao usuário uma boa identificação.

O ponto negativo mais aparente seria o POP UP (3), que surge na abertura da primeira página (home), Lembrando que um dos pontos negativos para uma boa usabilidade apontados por Jakob Nielsen são o uso de POP UPs. Ele se mistura com outros elementos da página não dando nenhum sinal de destaque, sendo o mais agravante, que seu conteúdo são as informações para doações, com os dados bancários da ONG.

28

1 2

3

Pรกgina Inicial -

Fonte: http://maranata.org.br

29

3 Os projetos sociais da ONG não possuem páginas próprias. As informações mais importantes, sobre os projetos sociais se encontra na página “Nossas obras” (4), em um breve texto com fotos de baixa qualidade.

4

Página Nossas Obras -

30

Fonte: http://maranata.org.br

A página “Agenda”(5), existe uma simulação de um calendário, dispondo de duas fileiras de quadrados sendo esses os meses, que somem na primeira rolagem do site. Não apresenta nenhuma interação e o conteúdo dos meses já ocorridos permanece na página dificultando a visualização dos eventos que vão por vir.

5

Página Agenda -

Fonte: http://maranata.org.br

31

3 A página “Aniversários”(6), apresenta uma mistura de tipografias e elementos gráficos que confundem o usuário do site. Sendo uma seção de exclusividade para integrantes da ONG, porém exondo o nome de várias pessoas.

6

Página Aniversários

Na página “Parceiros”(7), foram colocados os logotipos de todas as empresas que contribuem com a ONG. A página não tem nenhuma interação, como o link para o website da empresa colaboradora.

- Fonte: http://maranata.org.br

7

Página Nossos Parceiros

32

- Fonte: http://maranata.org.br

8 A página “Encontros”(8), Não se mostra relevante e não condiz com o conteúdo do site, sendo uma página fora de contexto.

Página Encontros

Na página “Vídeos”(9), se apresenta sem um boa diagramação e uma sequência de vídeos sem especificar sobre o que são e de quem.

- Fonte: http://maranata.org.br

9

Página Vídeos - Fonte: http://maranata.org.br

33

3 Análise de concorrentes A análise de concorrentes é de extrema importância tanto para o redesign como para a criação de um website.

Nesta análise, é possível obter informações sobre como os concorrentes apresentam seus serviços e qual o discurso que apresentam através de sua comunicação visual. Ao observar a concorrência é possível elencar pontos fortes e fracos para compreender como oferecer seus serviços de modo eficaz, a fim de compreender como posicionar a marca na web. É essencial realizar uma análise dos principais concorrentes, diretos e indiretos. Após elencar todos, precisamos identificar quais são os concorrentes em potencial, para observar quais elementos poderão servir de base para conduzir a disposição dos elementos e as escolhas para a construção do website.

Para análise de concorrente foram analisados três concorrentes diretos e três indiretos, sendo concorrentes diretos que estão no mesmo segmento de negócio com a proposta da ONG, e Indiretos que estão em outro segmento ou um nível acima.

34

Um dos websites concorrentes analisados foi o da ONG LBV (Legião da Boa Vontade), que conta com tipografia bem empregada, simplicidade nos elementos gráficos como na barra de navegação e botões de interação no estilo flat design, somado a paleta de cores reduzida e ao design responsivo que se adequa a todos os dispositivos móveis sem perda de legibilidade, tornando o website um dos concorrentes indiretos com maior potencial e impacto para o redesign do website maranta.org.br.

O conteúdo textual(1) do site é posto e uma coluna de texto central, com corpo e espaçamento maior do que o habitual, deixando o texto de fácil compreensão e de boa leitura.

O rodapé(2) foi outro item que chamou a atenção, sua simplicidade e eficiência em conter elementos como: endereço da sede, links para as redes sociais e inscrição para a newsletter, serviu de inspiração para o redesign do website da ONG Maranata.

35

3 1

Exemplo de diagramação do texto - Fonte: http://lbv.org.br

36

2

Exemplo do rodapĂŠ - Fonte: http://lbv.org.br

37

3 Mapa de fluxo de navegação maranata.org.br Website original Página inicial Páginas de 1º nivel Páginas de 2º nivel

# Não possue páginas Início (home)

Quem somos

38

Nossas Obras

Nossos Parceiros

Agenda

Imagem

Encontros

Aniversários

Vídeos

Classificados

Nova arquitetura A organização do conteúdo do website foi baseada em seu grau de importância para com o objetivo a ser atingido, no caso obter doações e voluntários para ONG. Com base na análise dos concorrentes e estudos de outros sites do mesmo segmento, foi retirado e renomeado todo conteúdo que produzisse interferência na comunicação direta com o usuário, consequentemente melhorando a usabilidade do website.

A página de “Aniversários”, foi retirada por ser um conteúdo exclusivo para alguns membros da ONG, deixando exposto o nome de diversos usuários e colaboradores da ONG. A página “Parceiros” foi substituída por uma seção na página “Início” (Home), sendo uma seção importante, mas não fundamental do website, usada para revelar o nome das empresas que colaboram, foi alocada como último conteúdo apresentado na página. Cada logotipo é um link que direciona para o website da empresa parceira da ONG, que não tinha antes.

39

3 A página “Encontros”, que remete a explicação dos encontros feitos por casais e jovens, foi removida por ser uma seção sem objetivos concretos. Seu conteúdo é repetitivo e não atinge os usuários que não conhecem a ONG, sendo que para participar de um encontro de casal ou de jovens o interessado deve entrar em contato com a ONG por telefone.

A página “Vídeos”, foi substituída pelo link direto para a página da ONG no youtube. Já que a mesma não tem uma quantidade de vídeos relevantes e de criação própria.

A página “Agenda “ foi substituída pela “Eventos”, uma das formas da ONG conseguir recursos são através dos eventos por ela promovidos, como almoços, jantares, bazares, etc. Pensando nisso juntamos duas seções, o mural, que não é utilizado corretamente pela ONG e a página “Agenda”, que informa todos os eventos que serão realizados no ano. Permitindo o usuário obter mais informações em uma só página.

O conteúdo da página “Imagem” foi remanejado para a nova página “Eventos”. Permitindo o usuário acesso a galeria de fotos dos eventos já ocorridos.

40

Novo Mapa de fluxo de navegação Website maranata.org.br redesenhado Página inicial Páginas de 1º nivel Início (home)

Páginas de 2º nivel

# Não possue páginas

Sobre

Creche Maranata

Projetos #

Centro da Juventude

Lar de Elizinha

Eventos

Ajude! #

Núcleo de convivência do idoso

Contato

Doar $

Voluntários

41

3 Protótipos O objetivo central dos protótipos e a experimentação e análise de funcionalidade de um website, uma simulação simples da interface. Na construção do wireframe, nos preocupamos por manter a simplicidade e objetividade das informações da ONG, fazendo o usuário atingir o objetivo principal em poucos cliques. Foram vários estudos até conseguirmos o primeiro protótipo de papel onde foi feito uma simulação de usabilidade.

Foto do protótipo de papel.

Página “Creche Maranata” Fonte: arquivos do projeto

42

Foto do protótipo de papel.

Página “Voluntariado” Fonte: arquivos do projeto

Foto do protótipo de papel.

Página “Eventos” Fonte: arquivos do projeto

43

3 Avaliação do protótipo de papel Esta avaliação analisa a interface e a usabilidade do website, baseado nos fundamentos do W3C e elementos do livro USABILIDADE NA WEB, de Jakob Nielsen. O teste foi feito em todas as páginas do website, o que possibilitou uma avaliação mais aprofundada.

Para a avaliação de usabilidade foi utilizada a técnica objetiva (ensaios de interação, sistema de monitoramento).

O teste com o protótipo de papel foi realizado por cinco usuários e foi dividida em duas etapas. Primeiro o usuário tinha que percorrer a interface do protótipo para conhecer melhor como funcionava o website. No segundo passo realizar tarefas pré-estabelecidas pelos avaliadores, acessando páginas específicas do website.

Nos testes realizados percebemos uma dificuldade no menu de navegação, em relação ao botão “Ajude!”, apesar de estar destacado dos demais itens, os usuários não estavam associando o botão com sua proposta.

Para corrigir esse erro, adicionamos “Ajude!” na mesma configuração dos itens do menu.

44

No “RODAPÉ’’ o espaço para digitar o endereço de e-mail, newsletter da ONG, a nomenclatura do botão “enviar”, não estava condizente com a função. Foi substituido por “Inscrevar-se”. Os testers relataram outro ponto importante, a falta de um aviso depois dos formulários de contato, voluntarido e newsletter. Alguns cards, contendo informações específicas sobre alguns integrantes da ONG, também foram confundidos com links. Para solucionar o problema adicionamos informações de contato, como e-mail (link mailto) e telefone.

Concluímos que a interface do website não é complexa.

Não possui um vasto agrupamento de textos, o que pode torna o website cansativo para leitura. A navegação do usuário no site é fluida, pois o site e suas páginas são bem dinâmicas e intuitivas. Os elementos mais importantes se destacam como deveriam. Não foram encontrados grandes problemas de navegação, apenas alguns elementos dispostos nas páginas que estavam em lugares desfavoráveis e outras opções de informação sem relevância para o usuário.

45

3 Nova interface Paleta de cores Para conseguir transmitir a mensagem a fim de que todos pudessem compreender de modo rápido e principalmente acessível, fizemos o uso de cores contrastantes e vibrantes, para atrair a atenção.

No website utilizamos as cores principais do logotipo da ONG. O Azul em três tons que representa a cor do céu, do espírito e do pensamento, simboliza a fidelidade, a personalidade, ideal e o sonho. O Laranja em dois tons, uma cor quente, que representa atividade, movimento e espontaneidade. As cores de maior contraste como o Ciano, Vermelho e Verde, utilizamos para destacar os botões de ação como para envio do formulário. O Cinza, para textos sobre fundo branco, para manter a serenidade na leitura dos textos, deixando a página mais limpa.

46

Tons com base no logotipo

Logotipo da ONG

#336699

#75a3d1

#ff6633

#19334d

#ff9900

Links e botões

Textos

#b82e00

#757575

#4caf50

#03a9f4

47

3 Tipografia

Nós seres humanos somos orientados por aspectos visuais e normalmente nos atraímos por formas mais geometrizadas e harmônicas, deste modo, selecionamos uma fonte que passasse credibilidade. A tipografia foi uma escolha feita na execução do site, pois como também usamos um estilo flat design optamos por seguir este padrão. Pensando nisso, evitamos fontes serifadas e escolhemos uma fonte com mais movimento.

Utulizamos a fonte Raleway, uma fonte moderna e elegante sem serifa, com bom contraste nos caracteres, o que permite uma boa leitura.

48

Títulos principais e chamadas

Subtítulos e texto em destaque

Textos

49

3 Elementos que constam em todo as as páginas.

Menu de navegação

Menu do website novo - Fonte: arquivos do projeto

Rodapé da página

Rodapé do website novo - Fonte: arquivos do projeto

50

Menu da página - Mobile

Rodapé da página - Mobile

Rodapé do website novo - Fonte: arquivos do projeto

Menu do website novo - Fonte: arquivos do projeto

51

3 Página Início No começo do conteúdo da página, colocamos um slide que troca a cada 4 segundos de banner, todos relacionados com as obras sociais da ONG. Logo abaixo, o lema da ONG seguido por quatro cards, com uma breve explicação sobre cada obra social. Ao sobrepor o card o mesmo muda para cor laranja indicando um link para página específica do projeto.

Página Inicial 1ª parte - Fonte: arquivos do projeto

52

Na terceira rolagem, surge a seção de eventos, onde ao sobrepor, muda do laranja claro para laranja escuro indicando uma interação com o usuário. Ao clicar sobre o item surge um modal logo abaixo do item selecionado, com informações sobre o evento indicado.

Na sequência, a seção “parceiros da Maranata”, mostra todas as empresas que contribuem com a ONG, Cada logotipo é um link que direciona para a página da empresa.

Página Inicial 2ª parte - Fonte: arquivos do projeto

53

3 Página Inicial Responsiva Quando o website fica na versão mobile, o slide não é mais revelado, por ser um conteúdo de reforço sobre as obras sociais da ONG. Dando destaque maior para os cards que aparecem um na sequência do outro.

Página Inicial - Fonte: arquivos do projeto

54

Página sobre

A página sofreu mudanças em seu conteúdo, fornecendo somente o necessário ao usuário. Foi adicionado um card para cada área reponsavel pela gestão geral da ONG. Utilizamos personagens no estilo flat para representar cada membro indicado.

A página mobile se mantém na mesma configuração, deixando o texto fluido e os cards na vertical.

Página Sobre - Fonte: arquivos do projeto

55

3 Página Projetos Usamos a página da Obra social “Creche Maranata”, para exemplificar, todas as páginas relacionadas aos projetos sociais seguem o mesmo layout, mudando apenas seu conteúdo. Cada página possui uma descrição do projeto, endereço e um card com informações e contato com o responsável pelo projeto. Dois botões foram adicionados, doar e voluntários, ambos de cor laranja para dar destaque, linkando com suas respectivas páginas.

56

Página Creche Maranata - Fonte: arquivos do projeto

O único conteúdo removido foi a imagem, sendo um conteúdo secundário, demos prioridade para as informações sobre o projeto e o responsável.

Página Creche Maranata Fonte: arquivos do projeto

57

3 Página Eventos Sofrendo grandes mudanças, e sendo mesclada com outras áreas do site, a página de eventos se torna mais acessível e informa com mais eficiência sobre as atividades e eventos proporcionados pela ONG. No topo da página temos um calendário, onde o usuário seleciona o mês desejado, surgindo links com os eventos disponíveis no mês. Abaixo é disponibilizada uma galeria com as fotos dos eventos passados.

Página Eventos - Fonte: arquivos do projeto

58

Quando o mês selecionado já tiver ocorrido, uma mensagem surge no local onde apareceria os links pra eventos, indicando a galeria de fotos dos eventos ocorridos.

Mensagem de mês passado - Fonte: arquivos do projeto

O usuário ao selecionar o evento que deseja ver, um lightbox abre, permitindo a visulização das fotos do evento.

Duas setas postadas nas laterais permitem a navegação para outras fotos da galeria.

59

3 Na versão mobile, o calendário fica duplicado para manter a legibilidade e usabilidade em dispositivos móveis, permitindo que o usuário possa com os dedos selecionar o mês desejado.

Página Eventos

Fonte: arquivos do projeto

60

Na versão mobile, a seção de fotos dos eventos passados mantém a proporção das imagens e se aloca verticalmente.

Página Eventos Galeria Fonte: arquivos do projeto

A galeria na versão mobile se adequa ao tamanho da tela, mantendo as interações da versão desktop.

Lightbox

Fonte: arquivos do projeto

61

3 Página Doar $ Uma página que foi adicionada, e de suma importância para uma ONG. Nesta página colocamos os dados bancários e um link para uma página do Paypal.

Sua versão responsiva mantém todos os elementos, ajustados verticalmente.

Página Doar - Fonte: arquivos do projeto

62

Página Voluntariado Segue o mesmo layout da pagina doar. Um formulário permite o usuário inscrever-se para ser um voluntário na ONG. Preenchendo campos básicos sobre o voluntário e de qual projeto ele deseja participar.

Página Voluntariado - Fonte: arquivos do projeto

63

3 Página Contato Uma página muito importante que não existe no website original. Um formulário básico permite o usuário mandar uma mensagem para ONG. O mapa do Google Maps foi adicionado no fim da página para localização geográfica.

Página Contato - Fonte: arquivos do projeto

64

Visualização do Projeto O site maranata.org.br ainda não foi alterado. Uma prévia do trabalho final pode ser visualizada pelo endereço www.maranta.2fh.co.

Para visualizar o site em um dispositivo móvel, utilize o leitor de QR Code do smartfone.

Abra o aplicativo e aponte para imagem ao lado. Você será direcionado para o website.

65

4

Conclusão e objetivos Alcançados

Considerando todos os pontos negativos e positivos nas análises do próprio site maranata.org.br, como dos concorrentes diretos e indiretos, redesenhamos o website pensando em uma boa usabilidade e interação, fornecendo uma boa experiência para o usuário.

O conteúdo foi otimizado, transmitindo mais clareza ao usuário, dispensando informações desnecessárias e sem objetividade.

A consistência nas páginas do novo website, permitiu criar uma padrão gráfico mais forte e agradável, melhorando a navegação e entendimento do conteúdo. Utilizamos os padrões do Flat Design para redesenhar o website, criando uma paleta de cores com base no logotipo da ONG e variações tonais para hierarquizar elementos nas páginas.

A tipografia foi padronizada melhorando a legibilidade, utilizamos a Fonte Raleway, com variações de peso e corpo para hierarquizar elementos nas páginas, com a intenção de deixar a leitura mais fluida e confortável.

Por fim, é possível perceber que o site ficou bem mais agradável que o anterior, com o conteúdo alocado de modo mais intuitivo dentro dos menus, posicionados de modo a facilitar a navegação, legibilidade e experiência do usuário.

67

5

Bibliografia

FERNANDES, Rubem César, Elos de uma cidadania planetária, in Revista Brasileira de Ciência Sociais. ANPOCS, São Paulo, 1995 FERNANDES, Rubem César, Privado porém público: o terceiro setor na América Latina, Rio de Janeiro, Relume Dumará, 2ª ed., 1996.

RAMOS, Marcos Roberto; TRISKA, Ricardo; SOUZA, Richard Perassi Luiz. As influências do Flat Design: das mídias digitais aos produtos.

Temática Ano XI, 2015.

ANJOS, Lucas Schwartz dos; MÜLLING, Tobias Tessmann.

Características projetuais do design responsivo para interfaces digitais Blucher Design Proceedings, num. 2, vol.2, 2015 ZABALBEASCOA, A.; MARCOS, J. R., Minimalismos, Barcelona, Gustavo Gili S.A, 2001.

AGNER, Luiz. Ergodesign arquitetura de Informação: trabalhando com o usuário, Quartet, Rio de Janeiro, 2009.

Silva, M. S., Web Design Responsivo, Novatec, 2014.

ROYO, Javier. Design digital, São Paulo, Rosari, 2011.

Nielsen, Jakob. Usabilidade móvel, Rio de Janeiro, Elsevier, 2014.

PAWILAK, A. Flat design: Quais as Melhores Cores, Fontes e como Fazer a Sombra no Photoshop. Disponível em: http:// photoshopparainiciantes.com.br/flat-design/#cores-flat-design, Acesso em: 16 nov. 2016.

Google Material Design, Disponível em: https://material.google.com, Acesso em: 25 out. 2016.

69

Projeto acadĂŞmico desenvolvido pelos alunos da Universidade Nove de Julho.