Mayra Carollina Nascimento
DESENVOLVIMENTO DE PROJETO DE PLATAFORMA
ONLINE PARA O GRUPO CROQUIS URBANOS CURITIBA
Trabalho de Conclusão de Curso
CURITIBA
2018
DESENVOLVIMENTO DE PROJETO DE PLATAFORMA
ONLINE PARA O GRUPO CROQUIS URBANOS CURITIBA
Trabalho de Conclusão de Curso de Graduação, apresentado à disciplina de Tecnologia em Design Gráfico do Departamento Acadêmico de Desenho Industrial - DADIN - da Universidade Tecnológica Federal do Paraná - UTFPR, câmpus Curitiba, como requisito parcial para obtenção do título de tecnólogo
Orientador: Prof. Dr. Cayley Guimarães
CURITIBA
2018
TERMO DE APROVAÇÃO
TRABALHO DE CONCLUSÃO DE CURSO 057
DESENVOLVIMENTO DE PROJETO DE PLATAFORMA ONLINE PARA GRUPO CROQUIS URBANOS CURITIBA
por
Mayra Carollina Nascimento – 1196731
Trabalho de Conclusão de Curso apresentado no dia 18 de junho de 2018 como requisito parcial para a obtenção do título de TECNÓLOGO EM DESIGN GRÁFICO, do Curso Superior de Tecnologia em Design Gráfico, do Departamento Acadêmico de Desenho Industrial, da Universidade Tecnológica Federal do Paraná. A aluna foi arguida pela Banca Examinadora composta pelos professores abaixo, que após deliberação, consideraram o trabalho aprovado.
Banca Examinadora: Profa. Pamela Aragão Henriques (Esp.) Avaliadora
DADIN – UTFPR
Prof. José Marconi Bezerra de Souza (Dr.) Convidado
DADIN – UTFPR
Prof. Cayley Guimarães (Dr.)
Orientador
DADIN – UTFPR
Prof. André de Souza Lucca (Dr.) Professor Responsável pelo TCC DADIN – UTFPR
“A Folha de Aprovação assinada encontra-se na Coordenação do Curso”. Departamento Acadêmico de Desenho Industrial
este projeto, professores, croquiseiros, amigos e família.
Primeiramente à minha mãe Célia Soares, por sempre cobrar e motivar minha caminhada, por vezes, me pegando pelas mãos para que eu conseguisse realizar cada etapa.
Ao meu marido Leandro Chernij, por não me deixar desistir, e, constantemente me recordar que são os pequenos passos que levam aos grandes resultados, dividindo cada pequena conquista em vitórias.
Ao meu pai José Mauricio do Nascimento, por estar todos os dias, da duração deste projeto, acompanhando minhas evoluções e me questionando quanto aos prazos.
Obrigada a todos os meus amigos mais próximos: Ralph Rodrigues, Mariana Souza de Oliveira, Eliane Kachel e José Luiz Kachel.
Às Garotas Nerds, Hot Tomatoes e Dragons Bzk’s, que entenderam minhas ausências e ansiedades durante a realização deste projeto, e que me deram palavras de incentivo e votos de breve retorno.
Um agradecimento especial e muito grande ao meu orientador Prof. Cayley Guimarães, que desde o início demonstrou grande carinho e paciência nos meus momentos adoecidos, durante crises de pânico e ansiedade. Por sempre me receber com sorrisos e palavras de conforto, e me assegurar que tudo daria certo.
Ao Professor José Marconi Bezerra de Souza pela proposta deste projeto, por todas as conversas e palavras gentis durante o desenvolvimento das etapas aqui presentes.
À todos os croquiseiros do Grupo Croquis Urbanos Curitiba, pois, o meu objetivo pessoal era mostrar da melhor forma possível o talento e beleza de suas produções, assim, agradeço também, por essa oportunidade. Especialmente à Mariana Godoy e Mikhael Gusso, que além de participantes do Grupo, são amigos queridos que me ajudaram durante todo o processo.
Quoth the Raven, “nevermore”. (POE, Edgar Allan,1924)
Online para o Grupo Croquis Urbanos Curitiba. 2018. Monografia
(Tecnologia em Design Gráfico). Universidade Tecnológica Federal do Paraná. Curitiba. 2018.
Este trabalho discorre sobre o levantamento de dados e projeto de desenvolvimento de uma plataforma web destinada ao Grupo Croquis Urbanos Curitiba. Este projeto, visa organizar as produções dos desenhistas, divulgar a atuação e abrir um espaço para o angariar de parceiros e patrocínios. Desta forma, o objetivo final é criar o projeto de um ambiente web para auxiliar o Grupo em suas atividades e atrair a atenção da comunidade para as produções que fazem parte da construção da memória da cidade de Curitiba.
Palavras-chave: Grupo Croquis Urbanos Curitiba, Projeto de Plataforma
Croquis Urbanos Curitiba Group. 2018. Monograph (Bachelor of Information
Systems). Federal University of Technology - Paraná. Curitiba. 2018.
This document describes the collection of data and project of development of a web platform for the Croquis Urbanos Curitiba Group. This project, intends to organize the productions of the illustrators, spread the acting and to open space for partners and sponsorship raising. In this way, the final goal is to create a project of a web environment to assist the Group on their activities and draw the attention of the community to the productions that are part of the memory of Curitiba city.
Keywords: Urban Sketches Curitiba Group, Project of a web Plataform,
Figura 1 – Encontro 236 - Rua XV de Novembro em Curitiba (PR). ... 15
Figura 2 – Encontro no Mananciais da Serra. ... 16
Figura 3 – Etapas da metodologia “arroz verde” MUNARI (2008). ... 17
Figura 4 – Requisitos para uma plataforma web levantados em entrevista com SOUZA (2017) ... 21
Figura 5 – Exemplo de estrutura da montagem das lâminas de árvore de foco ... 23
Figura 6 – Lâmina de foco “Catálogo de memórias”. ... 25
Figura 7 – Lâmina de foco “Educativo”. ... 26
Figura 8 – Lâmina de foco “Angariar Parceiros”. ... 27
Figura 9 – Lâmina de foco “Divulgação”. ... 28
Figura 10 – Lâmina de foco “Socialização”. ... 29
Figura 11 – Recorte do topo do website Urban Sketchers . ... 31
Figura 12 - Recorte do topo do website Urban Sketchers Brasil. ... 31
Figura 13 – Recorte do topo do website Urban Sketchers com marcações. 33 Figura 14 - Recorte do topo do website Urban Sketchers Brasil com marcações. ... 35
Figura 15 – Lâmina com foco em Divulgação - versão final. ... 37
Figura 16 – Boxed ou Wide. ... 38
Figura 17 – Geração de alternativa nº3 ... 40
Figura 19 – Livro “Um passeio por Curitiba na ponta do lápis”. ... 42
Figura 20 – Trecho do livro “Um passeio por Curitiba na ponta do lápis”. .... 43
Figura 21 – Paleta de cores criada para o projeto. ... 43
Figura 21 – Comparativo entre pesos da fonte Lato. ... 44
Figura 22 – Comparativo entre fonte com serifa e sem serifa. ... 44
Figura 23 – Exemplo de pesos da fonte Lato. ... 45
Figura 24 – Bloco de texto Lato Light. ... 46
Figura 25 – Bloco de texto Lato Regular. ... 46
Figura 30 – Página Mapa de Encontros. ... 54
Figura 31 – Página Memória de Curitiba. ... 55
Figura 32 – Página Como Participar. ... 56
Figura 33 – Página Eventos Anteriores. ... 57
Figura 34 – Página Registro Fotográfico. ... 58
Figura 35 – Página Parceiros e Patrocínios. ... 59
Figura 36 – Página Contato. ... 60
Figura 37 – Página Contato de Imprensa. ... 61
Figura 38 – Gráfico 1 - Identificação imediata de assunto. ... 63
Figura 39 – Gráfico 2 - Identificação de navegação. ... 63
Figura 40 – Gráfico 3 - Identificação de conteúdo. ... 64
Figura 41 – Gráfico 4 - Identificação de acesso às informações... 65
Figura 42 – Gráfico 5 – Facilidade do acesso as informações. ... 65
Figura 43 – Gráfico 6 – Sucesso da divulgação... 66
Figura 44 – Teste de contraste. ... 68
Figura 45 – Mapa de navegação. ... 70
Figura 46 – Demonstração da ferramenta do Mapa de Encontros. ... 70
Figura 47 – Página Inicial layout final. ... 72
Figura 48 – Gráfico de resposta sobre participação no Grupo. ... 78
Figura 49 – Gráfico de resposta sobre o conhecimento do Grupo... 78
Figura 50 – Gráfico de resposta sobre conhecimento do projeto. ... 79
Figura 51 – Gráfico de resposta sobre participação no projeto. ... 79
Figura 52 – Lâmina 1. ... 80 Figura 53 – Lâmina 2. ... 81 Figura 54 – Lâmina 3. ... 82 Figura 55 – Lâmina 4. ... 83 Figura 56 – Lâmina 5. ... 84 Figura 57 – Lâmina 6. ... 85
HTML5 Hypertext Markup Language, versão 5.
1.2 OBJETIVOS ESPECÍFICOS ... 11
2 CROQUIS URBANOS ... 13
2.1 O QUE É CROQUI URBANO? ... 13
2.2 CROQUIS URBANOS CURITIBA ... 14
3 MÉTODO DE PESQUISA ... 17
3.1 “ARROZ VERDE” ... 17
3.2 METODOLOGIA “ARROZ VERDE” APLICADA ... 18
3.2.1 Problema ... 20 3.2.2 Componentes do problema ... 21 3.2.3 Recolha de dados ... 22 3.2.3.1 Requisitos fundamentais ... 22 3.2.3.2 Requisitos complementares ... 24 3.2.3.3 Definição do foco ... 29 3.2.3.4 Análise de similares ... 30 3.2.3.4.1 Urban Sketchers ... 33
3.2.3.4.2 Urban Sketchers Brasil ... 34
3.2.4 Análise de dados ... 36 3.2.5 Criatividade ... 37 3.2.5.1 Paleta cromática ... 42 3.2.5.2 Tipografia ... 44 3.2.6 Materiais e tecnologias ... 47 3.2.7 Experimentação ... 47 3.2.8 Modelo ... 62 3.2.9 Verificação ... 62 3.2.9.1.1 Aplicação de alterações ... 68 3.2.10 Desenho construtivo ... 69 3.2.11 Solução ... 71 4 SOLUÇÃO ... 73 5 CONCLUSÃO ... 74
1 INTRODUÇÃO
O croqui é uma forma de desenho rápido, de técnica e materiais livres para retratar algo, muito utilizado em etapas iniciais de projetos, para colocar no papel de forma ágil o objeto que se pretende conceber.
Em sua aplicação artística, o croqui pode tomar traços mais detalhados, cores e até colagens em sua composição. Usufruindo desse conceito, surgiu o Grupo Croquis Urbanos Curitiba, um coletivo de desenhistas e entusiastas que retratam a cultura e arquitetura da cidade de Curitiba (PR).
Seus participantes variam entre estudantes, advogados, designers, professores e até tatuadores, unidos pelo amor ao desenho. Com encontros agendados sempre aos domingos e, retratando, cada um ao seu modo, a cidade em todas as suas formas. Ou seja, os participantes ilustram além da arquitetura, a história da cidade através dos movimentos culturais, como o Festival de Teatro de Curitiba, feiras abertas de rua e até celebrações religiosas. Desta forma, contribuí para a criação de um registro da memória da cidade e de seu povo.
Com mais de 20 participantes e cerca de 260 encontros realizados, a equipe coleciona um acervo representativo de produções – os desenhos – que, por sua vez, são publicados em um único meio de comunicação – a página da rede social Facebook.
Isso ocasiona desorganização, uma vez que não é possível realizar uma procura associativa pelo nome do ilustrador, pela data de realização ou pelo local retratado. Também, a limitação do meio de comunicação tanto interno entre os membros quanto à comunidade externa, sendo em uma rede social fechada que requer um registro para acesso.
Portanto, a proposta deste trabalho foi auxiliar o Grupo Croquis Urbanos de Curitiba, através do desenvolvimento de um projeto de plataforma web que englobe três requisitos fundamentais:
2- Divulgar as atividades e produções (croquis e registros fotográficos); 3- Angariar parceiros e patrocinadores.
Promovendo um ambiente unificado e organizado para catalogar as produções, podendo assim atrair mais pessoas a participar e aumentar o número de parcerias e patrocínios, para estender o mapa de locais registrados.
1.1 OBJETIVO GERAL
Desenvolver um projeto de plataforma web para o Grupo Croquis Urbanos Curitiba, focando na organização das produções, auxiliando na divulgação, tanto para a comunidade quanto para captar parceiros e patrocínios.
1.2 OBJETIVOS ESPECÍFICOS
Para o pleno desenvolvimento deste trabalho, uma série de objetivos específicos foram estipulados, sendo utilizados como direcionamento para a condução das pesquisas e eventuais criações gráficas. Elencam-se:
• Conduzir entrevista preliminar para definir os requisitos gerais esperados pelos participantes dentro da plataforma; • Categorizar os requisitos gerais;
• Desenvolver pesquisa com os participantes do Grupo para definir a relevância entre os requisitos gerais necessários ao projeto final;
• Pesquisar e definir método de desenvolvimento para a arquitetura da plataforma;
• Conduzir entrevista com os participantes para entender as expectativas em relação à estrutura da plataforma;
• Gerar alternativas de layout para a plataforma;
• Validar proposta final com participantes do Grupo e da comunidade;
• Implementar os ajustes identificados na etapa de validação para a finalização do projeto.
2 CROQUIS URBANOS
Esta seção está organizada em dois tópicos:
O primeiro definiu o que é o Croqui e a respeito do grupo que iniciou a ideia de encontros para a prática do desenho, que então se tornou o Urban
Sketchers, e na segunda parte conta-se a história do Grupo Croquis Urbanos
Curitiba, foco deste trabalho.
2.1 O QUE É CROQUI URBANO?
Segundo LOBACH (2001, p.16), croqui pode ser um dos conceitos para a tentativa de significação da palavra design, ou mesmo, “o meio de tornar visualmente perceptível a solução de um problema”. Contudo, ao referenciar o Croqui Urbano pode-se assumir o “problema” como forma de ilustrar a arquitetura, situações, celebrações, ou passagens de transeuntes em determinado local através de desenhos de observação. Utilizando técnica livre, cada participante representa o local ou cena escolhido com os materiais de sua preferência e forma pessoal de interpretação. O Croqui Urbano como forma de grupo de pessoas ilustrando, iniciou-se em 2008 com o jornalista e ilustrador de Seattle: Gabriel Campanario, com seu grupo Urban Sketchers, em tradução livre “esboçadores urbanos”. A premissa de Gabriel Campanario em convidar outros desenhistas para contribuir com seu blog de desenhos foi a de possibilitar aos leitores “verem o mundo, um desenho por vez”. O manifesto desse coletivo de ilustradores, de acordo com a publicação no site
urbansketchers.org, consiste em:
1. Nós fazemos desenhos de locação, através da observação direta, seja em ambientes internos ou externos.
2. Nossos desenhos contam histórias do dia a dia, dos lugares em que vivemos, e para onde viajamos.
3. Nossos desenhos são um registro do tempo e do lugar. 4. Nós somos fiéis às cenas que estamos retratando.
5. Nós utilizamos qualquer tipo de mídia e respeitamos nosso estilo individual.
6. Nós nos apoiamos e desenhamos juntos. 7. Nós compartilhamos nossos desenhos online. 8. Nós mostramos o mundo, um desenho de cada vez.
Com este manifesto estabelecido em 8 itens e pelo amor ao desenho, a ideia se espalhou pelo mundo e hoje conta com seguidores em diversos países, além de grupos individuais que contribuem cada um em sua própria região. Como acontece com o Grupo Croquis Urbanos Curitiba, facilitador deste trabalho e descrito a seguir.
2.2 CROQUIS URBANOS CURITIBA
Situado em Curitiba (PR), o Grupo Croquis Urbanos Curitiba tem seus encontros aos domingos, em locais sugeridos pelos membros, para desenhar e registrar a cidade de Curitiba, seu povo e eventos culturais. Os encontros são abertos para qualquer entusiasta do desenho, livre para cada participante escolher sua técnica, materiais e objeto de desenho. Dessa maneira, em um local vários temas diferentes são encontrados nas ilustrações.
Conforme apresentado anteriormente, o Grupo inspirado na atuação do Urban Sketchers também possui uma missão: a de registrar a cidade e dividir o aprendizado com seus participantes através do desenho de observação.
A história do Grupo teve seu início em 2013, quando de seu apartamento, o casal Lia Monica Rossi e José Marconi Bezerra de Souza, avistaram Reinoldo Klein desenhando o prédio do Paço Municipal e
solicitaram a permissão de Klein para se juntarem à atividade. Na mesma semana, SOUZA (2017) recebeu uma ligação de Wagner Polak propondo um encontro para desenhar locais da cidade para um projeto de história em quadrinhos.
Assim, nasceu o Grupo Croquis Urbanos Curitiba.
Os croquiseiros, como se auto intitulam os desenhistas - Reinoldo Klein, arquiteto; Lia Monica Rossi, designer; José Marconi Bezerra de Souza, artista plástico, designer e professor da UTFPR; Wagner Polak, professor e arquiteto, decidiram marcar encontros para a atividade. E no dia 10 de março de 2013, o primeiro encontro oficial, no Museu de Arte Contemporânea do Paraná (MAC/PR).
Dessa forma, as manhãs de domingo foram marcadas pela presença dos ilustradores em praças, construções antigas, ruínas, monumentos, museus, exposições, eventos culturais e até mesmo religiosos.
Nas figuras seguintes, estão os registros de dois encontros dos croquiseiros e seus desenhos, pelas fotografias de ROSA (2017).
Figura 1 – Encontro 236 - Rua XV de Novembro em Curitiba (PR). Fonte: ROSA (2017)
Figura 2 – Encontro no Mananciais da Serra. Fonte: ROSA (2017).
Além de seguir o manifesto proposto pelo Urban Sketchers, os curitibanos incorporaram à sua atividade o soar de um sino, indicando o fim do tempo de produção dos desenhos. Outro diferencial presente, é o registro fotográfico dos encontros e dos desenhos. Os fotógrafos participam regularmente e disponibilizam o material captado em páginas do Facebook. Assim, compartilham um outro olhar aos encontros e registros, e agregam ainda mais à preservação da memória dos locais e pessoas desenhadas.
Sendo a rede social Facebook o principal meio de comunicação, os membros do Grupo sentiam a necessidade de um local disponível na web em que organizar as obras criadas e a agenda de eventos. O intuito era que os membros acompanhassem a produção, atrair a comunidade a participar dos encontros e angariar patrocínios ou apoios para expandir o mapa de locais desenhados.
Durante o desenvolvimento do texto, foram apresentados os resultados das conversas com os membros e como se deu o ambiente online do Grupo Croquis Urbanos Curitiba.
3 MÉTODO DE PESQUISA
Após definida a metodologia para a condução deste trabalho, as etapas foram estabelecidas para o desenvolvimento desde o problema até a sua solução. Atendendo assim, aos requisitos necessários para as atividades do Grupo Croquis Urbanos Curitiba.
3.1 “ARROZ VERDE”
A metodologia projetual de MUNARI (2008, p.17), chamada “arroz verde” sugere desmembrar em etapas individuais o desenvolvimento, para que ao seu fim se apresente uma solução embasada e bem arquitetada. O autor defende que a estrutura de uma receita culinária é uma metodologia projetual, pois, envolve passos organizados e orientações que se seguidas, levarão a uma solução: o prato pronto. As etapas sugeridas pelo autor têm foco na resolução de problemas vide Figura 3:
Figura 3 – Etapas da metodologia “arroz verde” MUNARI (2008). Fonte: Autoria própria.
Desta forma, define-se qual receita fazer, sendo esse o problema: arroz com espinafres para quatro pessoas. A partir do problema, separa-se os ingredientes: arroz, espinafre, temperos, óleo e água. Leva-se em consideração indicações específicas da receita, se alguém já a fez, se há a necessidade de alteração por alguma restrição de dieta, sendo estes itens parte da coleta de dados. E, se a alteração desses itens resultaria em uma mesma solução, seria essa a parte da análise de dados. No caso de alteração da receita a Criatividade, e adaptar algo à gosto do cozinheiro ou dos convidados. Então, para a etapa de Materiais e Tecnologias, dentro da perspectiva da receita seria escolher a panela adequada, verificar se o prato vai ao forno ou ao fogo. Já, na Experimentação, seria a prova pessoal para adequar a quantidade de sal e temperos. Bem como, o modelo, a apresentação do prato para encaminhar à verificação que consistiria em uma prova de outra pessoa para que sua opinião seja observada e incorporada ao prato. Anotadas as alterações e adaptações feitas, é finalizada a etapa de desenho construtivo e servido o prato aos convidados, chegando à solução da receita: servir o prato pronto.
Assim como na receita descrita acima, este trabalho foi divido conforme as etapas sugeridas pelo autor que serão resumidas a seguir, para em um segundo momento detalhá-las individualmente.
3.2 METODOLOGIA “ARROZ VERDE” APLICADA
Com base na proposta metodológica de MUNARI (2008, p.20) identificou-se o problema e sua definição: a centralização da comunicação do Grupo Croquis Urbanos Curitiba apenas na rede social Facebook. Gerou-se assim, a demanda de criação de outra plataforma web, que fosse organizada de forma intuitiva, com suas informações, ilustrações e registros fotográficos à fácil acesso ao interlocutor. Para tanto, uma entrevista presencial com o
requisitos almejados à plataforma, ou seja, os componentes do problema. A entrevista foi conduzida em 2017, apenas com o cofundador como porta voz do Grupo com o intuito de entender o panorama geral do projeto. Entre as várias necessidades apresentadas por SOUZA (2017), algumas se destacaram como a grande demanda de espaço para organizar as produções tanto das ilustrações quanto das fotografias. Além de outras como um espaço para explicar o que é o Grupo e como participar dos encontros. E, dessa conversa, foram criadas lâminas para organizar os requisitos colocados pelo cofundador em árvores de foco. Assim organizadas, em cinco propostas de estruturas: catálogo de memórias; divulgação; educativo; angariar parceiros; socialização; foram levadas ao grupo para apresentação e debates de ideias, recolhendo dados para melhorar a estrutura da árvore e alinhando as necessidades ao projeto. Dessa forma, em participação na página fechada de membros do Grupo no Facebook, foi possível discutir sobre as estruturas colocadas anteriormente e expectativas dos demais participantes.
Com base nas informações discutidas com os ilustradores, um breve questionário foi elaborado e com a solicitação de SOUZA (2017), enviado à sete membros considerados os mais ativos para filtrar com precisão os requisitos essenciais ao desenvolvimento da plataforma. Portando, criou-se uma lâmina com os devidos ajustes de configuração em sua proposta. Assim, com a apresentação da nova lâmina, a etapa de recolha de dados e análise estaria chegando à conclusão.
Deste modo, seguindo a metodologia do “arroz verde” o próximo passo foi o da Criatividade, escolher formas e padrões para a utilização na plataforma com os requisitos definidos anteriormente e construir a arquitetura de informações. Sendo utilizada para a construção do layout e arquitetura a literatura de NIELSEN (2000), “Projetando Websites” e para a usabilidade e interação foi utilizada a obra de KRUG (2008), “Não me faça pensar”. De tal modo, na etapa de Materiais e Tecnologias foram definidas as linguagens de programação e propostas de funcionamento das ferramentas da plataforma. Para então, na etapa de Experimentação, colocar visualmente os elementos e criar as alternativas de páginas da plataforma. E, após o encaminhamento
do Modelo à Verificação, as alterações sugeridas foram aplicadas. Já na etapa de Desenho Construtivo houve o detalhamento técnico dos elementos presentes na versão final. Para então finalizar o projeto e Solucionar o Problema.
Uma vez resumidas as etapas desmembradas, elas estão detalhadas nos tópicos seguintes.
3.2.1 Problema
O Grupo Croquis Urbanos de Curitiba, atualmente, utiliza como meio de comunicação e exposição apenas a rede social Facebook. Limitando assim, algumas interações com a comunidade e impedindo que as peças produzidas e locais visitados sejam propriamente catalogados e expostos, segundo SOUZA (2017), um dos fundadores do Grupo Croquis Urbanos. A entrevista preliminar com o cofundador foi realizada em março de 2017, na sede Centro da Universidade Tecnológica Federal do Paraná da cidade de Curitiba (PR). Foram identificadas várias estruturas que este projeto poderia assumir e foi parte do desenvolvimento deste trabalho definir um escopo que atendeu ao Grupo e que foi coerente com a proposta de uma plataforma web. Vários requisitos colocados como necessidades dos croquiseiros, divergiam de um único foco, o que dificultava a proposta de estrutura simplificada e acessível a qualquer usuário da web. Dessa forma, estes requisitos foram organizados e elencados como componentes do problema, apresentados no próximo tópico.
3.2.2 Componentes do problema
SOUZA (2017) colocou como parte das necessidades do Grupo um espaço específico para explicar do que se trata a atuação dos croquiseiros e como seria possível alguém da comunidade externa participar. Além de uma área de exposição dos desenhos e dos registros fotográficos, assim como, as informações dos encontros com locais, datas e nomes dos participantes. Outras ideias apresentadas foram exemplificadas na Figura 4. Além dos requisitos diretamente sugeridos pelo cofundador do Grupo, outros foram adicionados para enriquecer a experiência de um usuário na visita à plataforma. Como a utilização de ferramentas para a apresentação do mapa interativo, para a organização das produções e o mailing:
Figura 4 – Requisitos para uma plataforma web levantados em entrevista com SOUZA (2017) Fonte: Autoria própria.
Com todos os requisitos elencados, foram criadas cinco árvores de conceitos, agrupando-os em categorias e estruturas para organizar por tipo
de foco que a plataforma poderia tomar. Apresentando com exemplos e sugestões de menus de navegação, possíveis estruturas da plataforma aos membros do Grupo para a recolha de dados e sua devida análise posteriormente.
3.2.3 Recolha de dados
LOBACH (2001, p. 29) direciona uma abordagem à projetos de produtos industriais e aqui é tomada sua perspectiva também ao projeto gráfico.
A satisfação de necessidades e aspirações tem um papel substancial, motivando a criação e o aperfeiçoamento de objetos. O processo se inicia com a pesquisa de necessidades e aspirações, a partir das quais se desenvolverão as ideias para sua satisfação, em forma de produtos. (LOBACH, 2001, p. 29)
Desta forma, foram identificadas as necessidades fundamentais e complementares em relação à plataforma para então o desenvolvimento de possíveis soluções para correspondê-las. Estas, apresentadas nos tópicos seguintes.
3.2.3.1 Requisitos fundamentais
Na construção das árvores foram tomados alguns requisitos como fundamentais, que deveriam estar presentes em todos os modelos por serem essenciais para o usuário perceber do que se trata a plataforma. Ou seja, é fundamental que o usuário identifique que está na plataforma do Grupo Croquis Urbanos Curitiba, o que é, e demais informações básicas para o
entendimento geral do Grupo. Sendo a essência desse ambiente web, em qualquer uma das árvores, apresentar o Grupo Croquis Urbanos Curitiba, para então diferenciar cada uma por sua característica secundária, por seu foco. Explica LOBACH (2001, p.54): “os produtos possuem diversas funções, que podem ser hierarquizadas pela importância. A função principal está sempre acompanhada de outras funções secundárias”. Desta forma, a “função” mais importante da plataforma é apresentar o Grupo, para então em sua função secundária estabelecer um foco entre: divulgação, angariar parceiros, catálogo de memórias, socialização e educativo.
Portanto, para todas as árvores criadas, os seguintes requisitos permaneceram fixos, descritos como requisitos fundamentais:
Figura 5 – Exemplo de estrutura da montagem das lâminas de árvore de foco Fonte: Autoria própria.
De acordo com a Figura 5, é possível observar os requisitos fundamentais elencados até este ponto:
• “O que é” referente ao significado do Grupo;
• “Mapa temático” ferramenta de mapa com os locais onde o Grupo já realizou encontros;
• “Memória de Curitiba” área onde disponibilizada à divulgação do livro que conta a história de Curitiba pelas produções do Grupo, material desenvolvido pelos participantes e que mostra de forma enriquecedora a colaboração para o registro da memória da cidade;
• “Cadastro de Mailing” uma ferramenta de captação de e-mails para que o Grupo possa comunicar os eventos seguintes, demais notícias e informações relevantes ao assinante.
• “Contato” uma página destinada ao usuário para estabelecer comunicação com os croquiseiros.
3.2.3.2 Requisitos complementares
Os requisitos complementares foram divididos a partir da definição de cinco possíveis direções que o projeto poderia tomar, com base nos requisitos gerais exemplificados na Figura 4.
Na primeira proposta Figura 6, a plataforma seria direcionada para a catalogação das produções, focada no passado, como um retiro de recordações do Grupo.
Figura 6 – Lâmina de foco “Catálogo de memórias”. Fonte: Autoria própria.
Já na proposta seguinte, “Educativo”, Figura 7, o foco seria em troca de experiências, auxiliar os participantes e comunidade externa sobre as técnicas e materiais possíveis de utilização, além de abrir espaço para palestras e voluntários.
Figura 7 – Lâmina de foco “Educativo”. Fonte: Autoria própria.
Para o foco de “Angariar Parceiros”, Figura 8, houve um espaço para a mostra das produções na área “galeria de artes” por conta da importância em demonstrar ao possível parceiro, a qualidade e relevância para a cidade de Curitiba das ilustrações e registros feitos pelo Grupo. Também, existiria a criação de hashtag para a rede social Instagram que é uma maneira de sinalizar nas buscas da web um determinado assunto. Nesta lâmina a proposta de hashtag seria a “#realizecroquis” com o objetivo de angariar parceiros especificamente para ações sociais em que o Grupo poderia organizar pela comunidade. E, uma sessão para patrocínios diretos aos croquiseiros a “Ajude o Croquis”. Esta, seria destinada à recepção de doações de materiais de desenho, itens para auxiliar no conforto dos participantes como por exemplo: cadeiras e tendas, além da recepção de ofertas de novos lugares para entrarem no portfólio de produções.
Figura 8 – Lâmina de foco “Angariar Parceiros”. Fonte: Autoria própria.
Na lâmina de “Divulgação”, Figura 9, a premissa foi dar destaque as produções do Grupo e às informações pertinentes para garantir um conhecimento geral a respeito da atuação dos croquiseiros. Com isso, o “calendário de eventos passados” e “espaço para fotógrafos” seriam as sessões para catalogar os desenhos e registros. Também com uma sessão para a criação de uma nova hashtag de Instagram e aplicada a uma ferramenta que captasse todas as postagens com a marcação do Grupo e trouxesse diretamente para a plataforma. Além de uma página separada de “Imprensa” para um formulário com direcionamento específico e assuntos relacionados. Isso, faria com que os formulários de contato preenchidos por membros da comunidade externa com questionamentos sobre a atividade, chegassem ao e-mail dos desenhistas de forma separada e propriamente titulada. Não se misturando com os e-mails dos membros da imprensa.
Figura 9 – Lâmina de foco “Divulgação”. Fonte: Autoria própria.
No foco de “Socialização”, Figura 10, uma ferramenta de blog foi sugerida para auxiliar na interação entre os membros. Esta, contaria com sistema de registro dos participantes com senhas individuais para o acesso e garantiria um espaço reservado e livre para colaborações. Desse modo, a ferramenta de hashtag do Instagram e uma similar para o Facebook também seriam adicionadas, aumentando a interação de membros e comunidade externa através do uso das redes sociais. Contudo, ambas as ferramentas deveriam ser constantemente alimentadas em suas plataformas de origem para que a plataforma do Grupo fosse atualizada.
Figura 10 – Lâmina de foco “Socialização”. Fonte: Autoria própria.
3.2.3.3 Definição do foco
Uma vez organizadas as lâminas de foco, elas foram apresentadas ao Grupo através do Facebook e discutidas com os membros. Dessa conversa foi possível identificar que os desenhistas também ansiavam pelos requisitos colocados por SOUZA (2017) e apenas um foco na plataforma não seria suficiente para satisfazer as necessidades de forma geral. Portanto, sete membros considerados os mais relevantes e participativos foram escolhidos pelo cofundador para responder um questionário direcionado a determinar uma estrutura final à este ambiente web proposto. Contudo, uma vez estabelecido o contato com estes membros, apenas quatro estavam disponíveis para responder às perguntas propostas. Eles solicitaram que fossem enviadas por e-mail, assim, proporcionando o melhor uso do tempo de cada um. Para otimizar o tempo dos participantes, a pesquisa foi limitada
a quatro perguntas e estas, foram elaboradas com a missão de priorizar a objetividade das respostas, enviadas junto às lâminas criadas. Foram elas:
1. Dentro das opções apresentadas, qual seria a (categoria) mais relevante para um primeiro momento do site?
2. Sobre a opção escolhida acima, qual foi o fator motivador de sua escolha?
3. Existe algum requisito presente em outra categoria que você gostaria que fizesse parte da opção que você escolheu?
4. Por que você acha necessário esse requisito dentro da proposta?
Das lâminas apresentadas, a que foi julgada mais relevante para este momento da plataforma, seria a de “Divulgação”, seguida pela “Catálogo de memórias”. As demais, não obtiveram votos. Para justificar a resposta, os participantes responderam que a divulgação seria a mais relevante por possibilitar a longo prazo a concretização dos outros focos propostos.
Quanto aos requisitos presentes em outras lâminas, a sugestão de integração à “Divulgação” seria a inclusão de área para angariar parceiros. Desse modo, a justificativa seria atingir um maior raio de atuação do que o atual que os parceiros e patrocínios poderiam proporcionar.
A seguir, dois websites similares em conteúdo foram analisados em seus erros e acertos, para a criação da proposta de estrutura do layout da plataforma do Grupo.
3.2.3.4 Análise de similares
Esta etapa do trabalho cunha-se na análise dos layouts dos websites dos blogs Urban Sketchers e Urban Sketchers Brasil (figuras 11 e 12). Em um primeiro momento, parte-se da observação. Na sequência, a obra de KRUG
(2008) é utilizada como subsídio de questionamento, para avaliar a experiência de navegação.
Figura 11 – Recorte do topo do website Urban Sketchers . Fonte: Urban Sketchers (Acesso em 2018).
Figura 12 - Recorte do topo do website Urban Sketchers Brasil. Fonte: Urban Sketchers Brasil (Acesso em 2018).
Foi possível notar um padrão no estilo boxed (também conhecidos por layout fixo), ou seja, o layout se encontra em uma espécie de caixa no centro da tela, não ocupando todo o espaço disponível no navegador web. Esse formato é comumente utilizado para blogs por conta da grande quantidade de texto assim, facilitando a leitura em blocos menores.
Notou-se uma despreocupação com a estética e a funcionalidade de ambos, contendo menus extensos e repletos de submenus confusos e de navegação dificultada no primeiro. Segundo KRUG (2008, p.33) a navegação fica dificultada pela falta de hierarquização de informações e se demanda tempo a procura de alguma informação dentro do website.
Outro item analisado foi a rolagem das páginas, sendo ambas muito extensas, carregadas a medida em que se rola abaixo, e não há nenhum botão de volta para o topo da página. Ainda na obra “Não me faça pensar”, KRUG (2008, p.25) afirma que o botão mais utilizado dentro de navegadores web é o de “voltar”, então, com a rolagem cansativa do site e sem um botão facilitador de volta ao topo, o menu fica distante e demanda mais tempo para voltar e, então acessar, outras páginas.
Para uma análise mais profunda sobre a dificuldade em utilizar estes sites, foram utilizadas as questões hipotéticas de usabilidade levantadas por KRUG (2008, p.85), “o teste do porta malas”: numa situação hipotética em que se acorda em um porta malas e assim que abre os olhos, vê o website objeto de estudo em sua frente. Nessa situação, deveria ser fácil a identificação das respostas para as seguintes perguntas:
1. Que site é este?
2. Em qual página estou?
3. Quais são as principais seções desta página? 4. Quais são minhas opções neste nível?
5. Onde eu estou no esquema das coisas? 6. Como eu posso realizar uma pesquisa?
As repostas para essas indagações estão respondidas a seguir, com base em marcações feitas nos sites Urban Sketchers e Urban Sketchers Brasil.
3.2.3.4.1 Urban Sketchers
A seguir, na Figura 13 ilustra o topo da página inicial do website do
Urban Sketchers com as marcações sugeridas por KRUG (2008, p. 86) para
a análise por observação e resposta das perguntas expostas anteriormente.
Figura 13 – Recorte do topo do website Urban Sketchers com marcações. Fonte: Autoria própria.
No canto superior esquerdo foi possível encontrar a identificação do site do Urban Sketchers e abaixo uma imagem de um desenho com um homem ao lado e seu nome como autor do desenho. Não havia nenhum indicativo de navegação no menu, nem mesmo marcação ou cor diferente para a página atual. Acima da sessão onde se inicia o Blog, porém, existia um pequeno título “USk Blog”. No corpo da página aparecia o título, o mesmo do menu de navegação, mas, não indicava de onde o usuário veio pela navegação ou em qual menu/submenu ele poderia acessar para continuar navegando por assuntos similares.
Na página inicial a hierarquização seguia do pequeno banner à duas colunas, uma maior a esquerda onde as postagens dos desenhos acontecem e na direita estão disponíveis imagens para levar ao conteúdo de simpósio e workshop. Além das trinta e duas opções no menu/submenu, era possível rolar a página para visualizar superficialmente as publicações dos desenhos e acessar mais informações na coluna da direita relacionada ao simpósio e workshop, estes também presentes para acesso via menu. Bem como, o calendário de workshops, alguns links de busca rápida, visualização os patrocinadores do simpósio, notícias e assinar o mailing que também estava sendo repetido no menu. Como não há marcações no menu, por cor ou símbolo indicativo, a identificação das páginas se dá apenas por seus títulos.
No topo da página, um ícone de lupa, que ao clicar abriria uma nova tela para a digitação da busca, com texto indicando que se deve pressionar a tecla “enter” para executar a pesquisa.
3.2.3.4.2 Urban Sketchers Brasil
Na Figura 14, é apresentado o topo da página inicial do website do
Urban Sketchers Brasil para a observação e análise com base nas perguntas
Após uma breve procura, se encontrava a pequena marca do Grupo
Urban Sketchers Brasil, que identifica o site, ofuscada pela falta de contraste
na aplicação em cima de uma grande fotografia no topo da página. Neste, é possível identificar a página pelo menu que muda de cor na página selecionada e pelo título logo abaixo. Além, do menu, postagens do blog e a coluna da direita com anúncio de simpósios e encontros e a barra de pesquisa.
Figura 14 - Recorte do topo do website Urban Sketchers Brasil com marcações. Fonte: Autoria própria.
Com sete opções de sessões na navegação, as postagens estavam em rolagem infinita e na coluna da direita havia conteúdo extenso entre pequenas imagens anunciando simpósios e nome de participantes com links para cada um. Ainda na página inicial, existia a marcação no menu indicando estar em “Blog” como é possível observar pela troca de cor ao fundo do menu. Por não estar em local de destaque, o usuário demora um pouco mais para encontrar o campo de pesquisa. Este, está localizado na coluna da direita
abaixo de um pequeno cartaz de divulgação e, não é possível observar na figura pois, houve a necessidade de rolagem da página para encontrá-lo.
Na sessão seguinte serão analisados os dados do questionário respondido pelos membros do Grupo e, os apontamentos observados no tópico “Análise de Similares”.
3.2.4 Análise de dados
Ambos os sites atendiam o objetivo de postagem dos desenhos e comunicação de eventos. Contudo, a navegação e usabilidade deixam o usuário confuso e utilizando mais tempo do que o ideal para encontrar mais informações sobre os Grupos. Segundo a usabilidade de KRUG (2008, p. 67), as barras de pesquisa de ambos falham. A primeira por abrir uma outra tela e explicar o uso com a frase indicando o uso da tecla “enter”. A segunda por não estar localizada em local ideal para um usuário, em qualquer que seja sua experiência com a web, encontrar. Observando essas questões, uma prioridade estabelecida foi localizar melhor a busca na execução deste projeto. Além disso, foram simplificados os menus e estudados para uma forma clara de demonstração da localização do usuário nas páginas.
De acordo com as respostas e dados coletados junto ao Grupo, evidenciou-se a necessidade de adição de uma sessão para parceiros à lâmina de Divulgação e a presença de alguma referência ao Blog de TAKEUCHI (2018) que acompanha a história do Grupo. Com nova configuração disposta conforme Figura 15:
Figura 15 – Lâmina com foco em Divulgação - versão final. Fonte: Autoria própria.
3.2.5 Criatividade
Para apresentar os desenhos do Grupo em tamanho maior que o dos websites similares, e para que o usuário possa apreciá-los com mais detalhes, optou-se pelo layout widescreen ou full, os quais compreendem na utilização de todo o espaço do navegador para a disposição das informações. Como explica o blog de marketing canadense Gilmedia em seu artigo “Should you
go Boxed or Full?” (s/a) (“Devo usar tela cheia ou encaixotada?” tradução
Figura 16 – Boxed ou Wide.
Fonte: Materialize css (Acesso em 2018).
Outro ponto positivo da disposição widescreen (ver Figura 16, comparativo entre o formato Boxed e Full) é a relação entre a quantidade de informações e a rolagem da página. Dessa forma, utiliza-se melhor o espaço do layout sem as faixas vazias em volta da “caixa” é possível apresentar maior número de informações sem a necessidade de rolagem frequente. Além da opção widescreen, foi escolhido também criar o layout de forma responsiva, assim como explica o artigo do SEBRAE “O que é um site responsivo?” (s/a), que o layout se adapta à monitores e dispositivos diferentes, reorganizando-se a cada resolução para que as informações reorganizando-se ajustem ao espaço existente.
Segundo o IBGE em 2015, 92,1% dos lares brasileiros acessaram a internet via telefone celular, portanto, é essencial que a plataforma do Grupo seja responsiva.
Na página inicial (Figura 17) os fundos e bordas do layout foram feitos brancos para dar áreas de respiro em volta da grande quantidade de imagens e cores presentes nas ilustrações. As áreas de respiro, são descansos para os olhos e úteis quando há grande quantidade de informação presentes num espaço limitado. Para garantir também, o foco nas informações mais relevantes, chamando atenção dos olhos para as informações presentes nas telas de forma separada, como explica FERNANDES (2015, p.52). Todo o foco da criação está em mostrar as produções do Grupo, começando pelo banner já no início da página, com uma ilustração em destaque, e a possibilidade de aumentar a visualização de todas as imagens na sessão abaixo pelas categorias das produções.
A fonte selecionada foi a Lato, disponível no Google fonts de forma gratuita, em suas variações de peso exemplificadas na Figura 21, pesos da fonte Lato para dar destaque à algumas informações. Essa fonte foi escolhida por ser sem serifa, demonstrado na Figura 22, comparativo entre a fonte Garamond com serifa e a Lato sem serifa, assim, apresenta uma forma mais linear e uniforme para ser utilizada na web.
No banner foi determinada uma área destinada para o nome do autor da obra e data de execução, a fim de valorizar o artista em questão, e auxiliar a identificação do evento pelo usuário no uso da busca. Uma sessão abaixo dessa área foi colocada para dar destaque ao livro de GODOY (2017), sobre o registro de Curitiba pelo Grupo. Como forma de valorizar os croquiseiros e exaltar a obra que também fez parte do projeto de conclusão de curso da autora.
Figura 17 – Geração de alternativa nº3 Fonte: Autoria própria.
conhecerem um pouco mais sobre os participantes e técnicas livres aplicadas. Sendo dividida por categorias, o usuário pode selecionar entre "Arquitetura", "Eventos", "Exposições", "Pessoas", e demais categorias que futuramente o grupo julgar necessária. Há também a opção de visualizar todas as categorias sem distinção para facilitar a visualização mais ampla das ilustrações. Caso o usuário passe o mouse por cima de um desenho duas opções deverão aparecer: um ícone de lupa indicando que pode ser visualizada maior a imagem e outro de sinal de “mais” para acessar todos os desenhos do mesmo evento retratado.
Abaixo das ilustrações, abrem-se três blocos de informações de "O que é?", "Como Participar?" e "Como apoiar ou patrocinar?", tendo cada bloco um botão para acessar a informação completa de cada tópico. Esses três assuntos foram escolhidos por serem partes do objetivo do site: divulgar à comunidade o que é o Grupo e como participar, assim como, chamar atenção para apoios e patrocínios.
Já no rodapé, um campo para cadastro do mailing vem em primeiro lugar, seguido da marca definida pelos croquiseiros e uma sessão com acesso rápido às notícias recentes relacionadas. O mailing, é uma ferramenta de captação de e-mails para que em uma ferramenta de disparo de e-mails de forma única para todos os endereços eletrônicos as novidades, eventos, notícias e o que mais julgarem necessário aos interessados e assinantes tomarem conhecimento. Já a repetição da marca se faz necessária no rodapé, por reforçar a identidade do coletivo de desenhistas e chamar atenção para a posse da plataforma. O acesso rápido de notícias, permite aos membros do grupo a disponibilização rápida de links para matérias e notas relativas aos membros em outros meios de comunicação, como jornais e revistas eletrônicos, vídeos e matérias exaltando a atividade do Grupo Croquis Urbanos Curitiba. Dessa forma, seguindo KRUG (2008, p. 95), a página inicial em seus elementos consegue dar uma ideia geral do conteúdo do site.
3.2.5.1 Paleta cromática
A escolha das cores foi baseada na marca e no padrão visual proposto por GODOY (2017). Utilizou-se o preto e branco ao longo do layout, no menu e textos, com variações em tons de cinza, a fim de destacar os desenhos. Um tom de verde foi escolhido para quebrar a monotonia e, assim, a cor da plataforma se faz através das ilustrações coloridas, valorizando ainda mais os croquis. Nas figuras a seguir apresentam-se o modelo aprovado para a capa do livro de GODOY (2017) e um trecho das páginas internas, expondo a forma de aplicação das cores e diagramação.
Figura 18 – Livro “Um passeio por Curitiba na ponta do lápis”. Fonte: GODOY (2017).
Figura 19 – Trecho do livro “Um passeio por Curitiba na ponta do lápis”. Fonte: GODOY (2017, p.6-7).
Dessa forma, o resultado das cores escolhidas é possível observar na Figura 20 – Paleta de cores criada para o projeto:
Figura 20 – Paleta de cores criada para o projeto. Fonte: Autoria própria.
3.2.5.2 Tipografia
A fonte selecionada foi a Lato, disponível no Google fonts de forma gratuita, em suas variações de peso exemplificadas na Figura 21, pesos da fonte Lato para dar destaque à algumas informações. Essa fonte foi escolhida por ser sem serifa, demonstrado na Figura 22, comparativo entre a fonte Garamond com serifa e a Lato sem serifa, assim, apresenta uma forma mais linear e uniforme para ser utilizada na web.
Figura 21 – Comparativo entre pesos da fonte Lato. Fonte: Autoria própria.
A família de fontes Lato foi criada em 2010 pelo designer Łukasz Dziedzic para um cliente que acabou descartando o uso da mesma para o uso corporativo. Assim, a fonte foi alocada para o domínio público1 e tem sido
amplamente utilizada pelo mundo. Segundo as estatísticas da plataforma
Google fonts (2018), a Lato já está presente em mais de 10 milhões websites
e seu uso mundial tem fatia no Brasil. Na Figura 23 – , apresenta-se alguns caracteres presentes na Lato, utilizando na primeira linha o peso Hairline e seguindo em suas variações até o Black.
Figura 23 – Exemplo de pesos da fonte Lato. Fonte: Autoria própria.
Trata-se de uma fonte sem serifa (ver Figura 22), e seu nome em polonês significa verão.
Os detalhes arredondados dão uma sensação calorosa enquanto a estrutura forte dá estabilidade e seriedade. Masculina e feminina, séria, mas amigável, com sensação de Verão. (DZIEDZIC, 2010)
1 Segundo o website JurisWay, o domínio público se dá quando os direitos do autor não mais incidem
Portanto, a escolha dessa fonte, para um projeto como o do Grupo Croquis Urbanos é harmônica, confere seriedade com a qual os croquiseiros constantemente atuam e a leveza do encanto em ilustrar os lugares e pessoas. Por estar disponível em diversos pesos de espessura nos traçados das letras, torna-se ideal para textos longos por criar uma área agradável, tanto quanto para destaque de títulos (exemplificado na Figura 24 e Figura 25), da “hairline” tão fina quanto um fio de cabelo até a “black” mais robusta e pesada.
Figura 24 – Bloco de texto Lato Light. Fonte: Autoria própria.
Figura 25 – Bloco de texto Lato Regular. Fonte: Autoria própria.
3.2.6 Materiais e tecnologias
Para a criação do Modelo do projeto da plataforma, o desenvolvimento foi dividido em duas partes. O back-end denomina-se à codificação interna de um site ou software, esta orquestra o funcionamento e conduz o comportamento das ferramentas. Já o front-end aplica-se à parte externa, ou seja, aonde será feita a interação com o usuário. Assim como, organiza o estilo visual e de usabilidade.
Dessa maneira, no back-end foi utilizada a linguagem de programação denominada PHP, em conjunto ao banco de dados MySQL, este responsável pelo armazenamento de informações inseridas, como, imagens, textos, identificação dos croquiseiros em suas ilustrações, referência aos fotógrafos em suas produções, além da organização dos croquis em relação as datas e nomes dos eventos. Já, as linguagens empregadas no front-end foram
HTML5, CSS3, JavaScript, estas, deram vida ao layout proposto. Através da
codificação dos elementos de detalhes aplicados, como sombras, transições de imagens, formulários, botões e à navegação. É relevante ressaltar que todas as tecnologias comentadas anteriormente, são livres de licenciamento, não havendo custos para suas aplicações.
No tópico seguinte, são apresentadas as alternativas e linguagem visual criada para o projeto.
3.2.7 Experimentação
Com algumas características já definidas, na etapa de criatividade, as alternativas de layout para a página inicial foram geradas. Tendo como base a afirmação de NIELSEN (2000, p.166), de que a primeira meta da página inicial deve ser definir ao usuário em qual sessão ele se encontra e do que se
trata o site, foram alocados conteúdos em disposições para que já em uma primeira visita todas as informações fundamentais pudessem ser rapidamente acessadas e/ou entendidas. O primeiro layout criado estará presente e comentado a seguir na Figura 26.
Essa, consistiu em colocar no layout todas as informações relevantes em ordem, para que posteriormente fossem ajustadas. Aqui as cores finais ainda não foram totalmente aplicadas. Alguns problemas logo foram identificados: como a devida referência ao autor da obra presente no banner, o espaçamento vertical entre os elementos, espaços em branco sem função de respiro e proximidade das áreas destinadas à exposição dos desenhos. Dessa forma, algumas correções foram feitas já na alternativa nº2 observada na Figura 27.
Figura 27 – Geração de alternativa nº2. Fonte: Autoria própria.
Na alternativa nº2 com os ajustes executados, outros problemas surgiram e com base na obra de NIELSEN (2000, p.126), outros aspectos foram alterados para obter um melhor resultado visual. De acordo com o autor, o fundo ou áreas sem conteúdo devem permanecer neutras e sem texturas, além disso, a quantidade de informação disposta não deve interferir no acesso as informações essenciais. Portanto, na próxima alternativa, uma linha de desenhos foi removida para diminuir a rolagem da página, com a justificativa do uso do botão “ver mais” para acessar abrir mais linhas de croquis na sessão. As cores de fundo do botão e rodapé foram alteradas para o branco, para garantir mais áreas limpas entorno da grande quantidade de informação já presente. Além da padronização de todos os botões para os conciliar o conceito de que todos os botões devem estar claramente identificados como botões.
Outro adicional, foi a reflexão com a obra de KRUG (2008, p.60), que propõe uma navegação intuitiva do menu, bem como a identificação rápida de localização entre as páginas. Para isso, foram adicionadas setas indicativas que existem mais opções no submenu de “O que é” e “Eventos e Encontros”. E com isso, uma linha abaixo do menu principal para indicar em qual sessão o usuário se encontra. Na Figura 28 também é possível observar a palavra “Home” no menu, mesmo sendo esta uma representação da página inicial. Nesta ocasião, a “Home” está ali representada para ilustrar sua presença no futuro, nas páginas internas. Uma vez que NIELSEN (2000) defende a exclusão desse elemento na página inicial por ser redundante. Outra característica adicionada por uso ilustrativo é a aplicação de obras dos croquiseiros, retiradas do grupo fechado do Croquis Urbanos Curitiba no
Facebook. Ali presentes apenas para atestar a capacidade dos desenhos de
Figura 28 – Geração de alternativa nº3. Fonte: Autoria própria.
Outros estudos foram feitos para ilustrar as páginas:
• Sobre: Figura 29 – Página Sobre
• Mapa de encontros: Figura 30 – Página Mapa de Encontros • Memória de Curitiba: Figura 31 – Página Memória de Curitiba • Como participar: Figura 32 – Página Como Participar
• Eventos Anteriores: Figura 33 – Página Eventos Anteriores Além das sessões:
• Registro Fotográfico: Figura 34 – Página Registro Fotográfico • Parceiros e Patrocínios: Figura 35 – Página Parceiros e Patrocínios • Contato: Figura 36 – Página Contato
• Imprensa: Figura 37 – Página Contato de Imprensa
Todas seguindo a linguagem visual criada na página inicial e prevendo blocos de conteúdo simulado para a alocação ao final do projeto. Todas estas foram aplicadas ao modelo disponibilizado online, para a visualização e navegação (https://croquis.herokuapp.com). Apresentadas a seguir:
Figura 29 – Página Sobre. Fonte: Autoria própria.
Figura 31 – Página Memória de Curitiba. Fonte: Autoria própria.
Figura 33 – Página Eventos Anteriores. Fonte: Autoria própria.
Figura 35 – Página Parceiros e Patrocínios. Fonte: Autoria própria.
Figura 36 – Página Contato. Fonte: Autoria própria.
Figura 37 – Página Contato de Imprensa. Fonte: Autoria própria.
Desta forma, ao montar o modelo, este foi apresentado ao Grupo e comunidade para os devidos testes. O link para acesso esteve disponível e indicado na próxima sessão deste trabalho.
3.2.8 Modelo
Foi disponibilizado, um modelo da plataforma via link (https://croquis.herokuapp.com) para visualização e acesso do layout proposto. Com a ressalva, de apresentar apenas a parte gráfica e de navegação do projeto da plataforma. As funcionalidades e ferramentas pretendidas foram descritas no tópico “Desenho Construtivo”.
3.2.9 Verificação
Nesta etapa, o modelo disponibilizado anteriormente foi apresentado aos croquiseiros e a comunidade externa que conhecia ou não o Grupo, para que respondessem um questionário sobre o projeto. Assim, foram identificadas alterações e melhorias possíveis. Deste questionário, criado na plataforma Google Forms, e divulgado em algumas redes sociais, as perguntas mais relevantes para esta etapa, são apresentadas abaixo:
Foi solicitado aos vinte e um respondentes que abrissem o link do modelo simultaneamente ao questionário para a resolução das perguntas. Dessa maneira, o usuário poderia navegar pelo website e ao mesmo tempo responder o que lhe foi requisitado no formulário. Destes, oito eram participantes ativos do Grupo Croquis Urbanos Curitiba, e, demais membros da comunidade externa, dados expostos em detalhes nos anexos deste trabalho.
A pergunta de maior relevância no momento era a que correspondesse a rápida e fácil identificação do assunto do website em um primeiro acesso. No Gráfico 1 pode-se observar que a maioria dos usuários confirmou a identificação do assunto e apenas uma minoria de 9,5%, não conseguiu identificar de imediato. E, no Gráfico 2 demonstra-se que somente 14,3%, o
total de três pessoas, não identificaram que estavam na página inicial do website.
Figura 38 – Gráfico 1 - Identificação imediata de assunto.
Fonte: Autoria própria.
Figura 39 – Gráfico 2 - Identificação de navegação. Fonte: Autoria própria.
Além da navegação, foi verificado, através do questionário, a identificação de informações por ordem de exibição ao longo da página inicial
do website modelo. Por meio das respostas do Gráfico 3, foi possível analisar que a ordem das informações da página não influenciou de forma significativa no reconhecimento dos itens dispostos. Sendo que 61,9% dos respondentes afirmaram encontrar a quarta sessão da página: “o que é; como participar; como apoiar ou patrocinar”, enquanto a segunda sessão “livro de Mariana Godoy” e que deveria ter maior visibilidade por estar no início, obteve apenas 42,9%. Outro fato interessante observado foi o resultado da sessão de “ilustrações lado a lado” pois, ocupam um grande espaço no layout, possuem cores e formas atrativas e mesmo assim resultou em apenas 47,6% das respostas.
Figura 40 – Gráfico 3 - Identificação de conteúdo. Fonte: Autoria própria.
Mais uma vez, pode-se notar um resultado inesperado, neste momento para o questionamento do Gráfico 4. Isso ocorreu ao se comparar o número do gráfico anterior com este. Uma vez que, no Gráfico 3 foi obtida a contagem de 13 pessoas assinalando que identificaram a sessão “o que é; como participar; como apoiar ou patrocinar” e, no Gráfico 4 esse número subiu para 19, totalizando 90,5% dos respondentes.
Figura 41 – Gráfico 4 - Identificação de acesso às informações. Fonte: Autoria própria.
Acredita-se que pode ter ocorrido influência da pergunta anterior nas respostas da subsequente, lembrando que o usuário tinha a liberdade de acessar o website enquanto respondia ao questionário. Contudo, devido a importância dessa sessão os números crescentes foram um resultado positivo para o projeto.
Figura 42 – Gráfico 5 – Facilidade do acesso as informações. Fonte: Autoria própria.
Outros resultados considerados positivos foram os dos Gráficos 5 e 6. Que demonstraram a facilidade em encontrar informações com nenhuma resposta inferior ao nível 3, sendo este regular, e a maioria dos números entre fácil e extremamente fácil no nível 5.
E, a respeito do despertar do interesse dos usuários em saber mais sobre o Grupo Croquis Urbanos Curitiba após navegar no modelo da plataforma, apresentado no Gráfico 6. Apenas 1 respondente julgou não ter interesse nenhum em conhecer mais a respeito dos croquiseiros.
Figura 43 – Gráfico 6 – Sucesso da divulgação. Fonte: Autoria própria.
Além das perguntas, os participantes também tiveram um espaço aberto para sugestões de melhorias para o modelo da plataforma. Em geral, os respondentes comentaram sobre aspectos de funcionalidades e ferramentas que não estavam disponíveis ao uso, apenas visualização. Situação explicada antes da aplicação do questionário. Houveram três comentários a respeito da responsividade do site, quesito que seria implementado apenas na construção do modelo final. Outro, sobre utilizar o menu de navegação de forma fixa ao topo, assim, o menu acompanha a rolagem por todo o site e fica sempre visível. Ainda na página inicial, uma
sugestão produtiva foi a alteração do destino e nome do botão “ver croquis” para a sessão “o que é”. Essa mudança foi pertinente pois, na página inicial já se possui uma galeria de croquis, e a informação “o que é” seria mais relevante para o primeiro acesso de alguém sem conhecimentos a respeito do Grupo.
Quanto sobre a parte gráfica de resposta de botões como os da página “Eventos Anteriores” que quando clicados não mudavam para o símbolo de “menos” ( - ). Isso se deu, por conta da inserção desses botões na ferramenta de organização chamada sanfona que se comporta como uma, abrindo e fechando suas abas para expor ou esconder os conteúdos nelas presentes. Outro comentário relativo à funcionalidade foi a respeito da busca dentro do padrão da sanfona. Uma pessoa julgou impraticável esse modo de pesquisa, contudo, não se atentou ao campo de pesquisa posicionado que permite uma busca mais direta pelos mesmos conteúdos. Dessa forma, entendeu-se necessário apresentar este campo de pesquisa com maior destaque, até a inclusão de uma frase chamando a atenção do usuário para as formas em que ele pode obter o resultado da procura de forma mais rápida.
Outros apontamentos sobre o layout, observaram a possibilidade de perda de contraste dos títulos presentes no banner na condição de aplicação de uma ilustração que não apresente contraste suficiente como a atual. Igualmente, houve um comentário a respeitos das cores escolhidas para a plataforma. Este, sugeriu que se mantivesse apenas as escalas de cinza propostas sem a adição da cor verde. Assim como, uma menção ao tamanho das fontes aplicadas em blocos de textos, que deveriam ser maiores.
No próximo item, são apresentadas as alterações acatadas aplicadas ao layout proposto.
3.2.9.1.1 Aplicação de alterações
Uma vez ponderadas todas as sugestões dadas pelos participantes do questionário anterior, algumas foram julgadas pertinentes e outras foram mantidas em sua forma original com devidas justificativas. Na Figura 44 houve a aplicação de sombreamento para garantir o contraste do nome do Grupo presente no banner e a troca das cores dos demais títulos para o preto, o aumento das fontes dos textos e alteração de nome e destino do botão “o que é”. As sessões foram mantidas em sua ordem original pelo resultado satisfatório das perguntas diretas dos questionários. A cor verde utilizada também foi mantida por ter o propósito de quebrar a monotonia da escala de cinza aplicada em todo o restante da proposta.
3.2.10 Desenho construtivo
Assim que a etapa de verificação foi concluída, as alterações e melhorias foram implantadas na versão final e no tópico solução apresentada. A seguir foram colocadas as indicações técnicas das fontes, formas e cores utilizadas ao longo do layout proposto, e, em um segundo momento o descritivo de funcionamento das ferramentas propostas:
Textos
Fonte Lato Regular Tamanho 16pt
Espaçamento entre linhas 24px
Títulos corpos das páginas
Fonte Lato Black em caixa alta Tamanho 30pt
Espaçamento entre linhas 30px
Subtítulos
Fonte Lato Black em caixa alta Tamanho 30pt
Espaçamento entre linhas 30px
Texto botões
Fonte Lato Black Tamanho 16pt
Botões
Cor #000000
Altura 30px (larguras variáveis)
Espaçamento vertical entre elementos: 104px ou proporcional, também foi utilizado o dobro ou metade de sua medida de acordo com a necessidade de harmonia de elementos das sessões.
A estrutura final do menu e submenus foi organizada de acordo com formas propostas anteriormente e dispostas por fim, nas sessões apresentadas a seguir na Figura 45:
