UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ CÂMPUS CURITIBA – SEDE CENTRO
DEPARTAMENTO ACADÊMICO DE DESENHO INDUSTRIAL CURSO DE TECNOLOGIA EM DESIGN GRÁFICO
DOUGLAS RODRIGO FERRAZ
DESIGN NO DESENVOLVIMENTO DE LOJA VIRTUAL: DO
RASCUNHO À CRIAÇÃO DE PRODUTOS DA CULTURA POP
TRABALHO DE CONCLUSÃO DE CURSO
CURITIBA 2017
DOUGLAS RODRIGO FERRAZ
DESIGN NO DESENVOLVIMENTO DE LOJA VIRTUAL: DO
RASCUNHO À CRIAÇÃO DE PRODUTOS DA CULTURA POP
Trabalho de Conclusão de Curso de graduação, apresentado à disciplina de Trabalho de Conclusão de Curso, do Curso Superior de Tecnologia em Design Gráfico do Departamento Acadêmico de Desenho Industrial – DADIN – da Universidade Tecnológica Federal do Paraná – UTFPR, como requisito parcial para obtenção do título de Tecnólogo.
Orientadora: Profa. MSc. Fabiane Alves
CURITIBA 2017
TERMO DE APROVAÇÃO
TRABALHO DE CONCLUSÃO DE CURSO 042
DESIGN NO DESENVOLVIMENTO DE LOJA VIRTUAL: DO RASCUNHO À CRIAÇÃO DE PRODUTOS DA CULTURA POP
por
Douglas Rodrigo Ferraz – 1718053
Trabalho de Conclusão de Curso apresentado no dia 28 de novembro de 2017 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á. O aluno foi arguido pela Banca Examinadora composta pelos professores abaixo, que após deliberação, consideraram o trabalho aprovado.
Banca Examinadora: Profa. Priscila Daienny Zimermann Nardon (Esp.) Avaliadora
DADIN – UTFPR
Prof. Kleiton Semensatto da Costa (MSc.) Convidado
DADIN – UTFPR
Profa. Fabiane Alves de Lima (MSc.) Orientadora
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”.
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ
PR
Ministério da Educação
Universidade Tecnológica Federal do Paraná
Câmpus Curitiba
Diretoria de Graduação e Educação Profissional Departamento Acadêmico de Desenho Industrial
DEDICATÓRIA
Dedico este trabalho a todas as pessoas que de uma forma ou outra me apoiaram nesta caminhada, em especial minha esposa Karine e meu filho Pedro Henrique pelo apoio e incentivo durante toda a minha graduação. À minha mãe Maura Ferreira que desde cedo me incentivou nos estudos, mesmo quando a dificuldade era mais forte do que nós, e a meu primo Patrick (in memorian) e minha avó Inez (in memorian) que estariam muito felizes com minha conquista.
AGRADECIMENTOS
Agradeço a minha esposa Karine e meu filho Pedro Henrique, pela mudança a qual essa graduação nos impôs e pelo incentivo diário durante todo este percurso. Agradeço a UTFPR pela oportunidade de realização de um sonho, aos professores que compartilharam seu conhecimento durante todo esse tempo, aos amigos Rodrigo Alves e Leonardo Biazotto pelo conhecimento e experiências acadêmicas e profissionais compartilhadas durante este período.
Agradeço de forma especial a minha orientadora, Professora Fabiane Lima, que apoiou minhas ideias e que buscou sempre explicar e me fazer entender as dificuldades que encontrei no desenvolvimento deste projeto. Agradeço ainda aos professores Ed Sarro, Priscila Zimmermann e André Lucca pela orientação necessária e sempre esclarecedora, e também ao professor Manoel Schroeder com o qual tive o prazer de aprender muito neste período e sempre nos deu muitas dicas, e que hoje coloco em prática no meu dia-a-dia profissional tudo que pude aprender com ele.
“Você dará às pessoas da Terra um ideal pelo qual lutar. Elas tentarão acompanhá-lo. Elas tropeçarão. Elas cairão. Mas com o tempo elas estarão com você ao sol, Kal. Com o tempo você as ajudará a fazer maravilhas.” (O HOMEM DE AÇO, 2013)
RESUMO
FERRAZ, Douglas Rodrigo. Design no desenvolvimento de loja virtual: do
rascunho à criação de produtos da cultura pop. 2017. Trabalho de Conclusão de
Curso – Curso Superior de Tecnologia em Design Gráfico, da Universidade Tecnológica Federal do Paraná.
O presente projeto teórico-prático tem como principal objetivo a utilização do design gráfico como ferramenta essencial na criação de design de loja virtual voltada aos consumidores de produtos da cultura de massa, inspirados em personagens de histórias em quadrinhos, cinema e séries de TV. A proposta abordará desde o desenvolvimento de naming da loja virtual até a criação de estampas que serão utilizadas nos produtos comercializados. Serão utilizadas no projeto diferentes abordagens metodológicas, como a metodologia de Munari e a metodologia de Garrett, sendo a primeira aplicada para a especificação do problema, coleta e análise de informações e do desenvolvimento de soluções e a última, voltada para a área de web design e orientada pelas práticas em experiência do usuário (UX – User Experience), focando assim no desenvolvimento da loja virtual propriamente dita. Para o conceito de criação das estampas a serem aplicadas nos produtos, será utilizado o conceito de cultura do remix, permitindo à loja virtual a criação de novos produtos por meio da adição de materiais existentes e da derivação ou combinação de situações e/ou personagens da cultura de massa, relacionando esses produtos a situações e/ou personagens já enraizados no imaginário do público-alvo.
Palavras-chave: Cultura de Massa, Cultura Pop, Histórias em Quadrinhos,
LISTA DE FIGURAS
Figura 1 – 3 níveis de design emocional de Norman ... 19
Figura 2 – Pirâmide das boas experiências ... 22
Figura 3 – Metodologia de Garret ... 23
Figura 4 – Camiseta Baby Groove ... 28
Figura 5 - Ícones pop caem em domínio público ... 30
Figura 6 - Gráfico de dispersão ... 32
Figura 7 - Cara dos Quadrinhos e Professor Frink ... 32
Figura 8 - Nerd por Dr. Seuss ... 34
Figura 9 - A vingança dos nerds ... 35
Figura 10 - Bill Gates nos anos 90 ... 36
Figura 11 - Lojas versão mobile ... 38
Figura 12 - Área superior de lojas versão desktop ... 39
Figura 13 - Área central de lojas versão desktop ... 41
Figura 14 - Rodapé de lojas versão desktop ... 42
Figura 15 - Pontos de contato com a marca ... 43
Figura 16 - Painel semântico de personagens ... 46
Figura 17 - Marcas de personagens ... 46
Figura 18 - Geração de sketches manuais ... 48
Figura 19 - Alternativa selecionada ... 49
Figura 20 - Marcas DC Comics e Marvel... 49
Figura 21 - Paleta cromática Teia Nerd ... 50
Figura 22 - Estudo Tipográfico ... 51
Figura 23 - Família tipográfica Minnie ... 51
Figura 24 - Tipografia auxiliar Gotham ... 52
Figura 25 – Projeto gráfico escolhido para a marca Teia Nerd ... 52
Figura 26 - Metodologia de Munari ... 53
Figura 27 - Adaptação das metodologias ... 55
Figura 28 - Painel semântico de lojas similares ... 57
Figura 29 - Escopo de funções da página inicial ... 58
Figura 30 - Escopo de funções da página do produto ... 59
Figura 32 - Rascunho de estrutura de página para layout desktop ... 62
Figura 33 - Estrutura da página inicial para versão mobile ... 63
Figura 34 - Estrutura da página inicial para versão desktop ... 64
Figura 35 - Mapa do site ... 65
Figura 36 - Ações em acesso pela versão mobile ... 66
Figura 37 - Página inicial e página de contato para versão mobile ... 67
Figura 38 - Página de produto para versão desktop ... 68
Figura 39 - Página de contato para versão desktop ... 69
Figura 40 - Layout mobile para loja Teia Nerd ... 71
Figura 41 - Layout mobile com ações ... 72
Figura 42 - Layout desktop para página inicial ... 73
Figura 43 - Layout desktop para página de produto ... 74
Figura 44 - Layout desktop para página de contato ... 75
Figura 45 – Fringe ... 77
Figura 46 - Marca Ramones e elenco principal da série Fringe ... 77
Figura 47 - Green Day ... 78
Figura 48 - Marca Breaking Bad e banda Green Day ... 79
Figura 49 - Why do we fall? ... 79
Figura 50 - Cartão de Visitas ... 81
Figura 51 - Papel Timbrado ... 81
Figura 52 – Pasta ... 82
Figura 53 - Rede social ... 82
Figura 54 – Sacola ... 83
Figura 55 - Caixa para caneca ... 84
LISTA DE SIGLAS
FECOMERCIO – Federação do Comércio de Bens, Serviços e Turismo do Estado de São Paulo
ESPM – Escola Superior de Propaganda e Marketing UX – User Experience (Experiência do Usuário) IHC – Interação Humano-Computador
ISO – International Organization for Standardization (Organização Internacional de Normalização)
MIT – Massachusetts Institute of Technology
API – Application Programming Interface (Interface de Programação de Aplicativos) RWD – Responsive Web Design
SUMÁRIO 1. INTRODUÇÃO ... 13 1.1. OBJETIVO GERAL ... 14 1.2. OBJETIVOS ESPECÍFICOS ... 14 1.3. JUSTIFICATIVA ... 14 1.4. PROCEDIMENTOS METODOLÓGICOS ... 16 1.5. ESTRUTURA DO TRABALHO ... 17 2. FUNDAMENTAÇÃO TEÓRICA ... 18 2.1. DESIGN ... 18 2.2. DESIGN GRÁFICO ... 19 2.3. WEB DESIGN ... 20 2.4 USABILIDADE ... 22
2.5. WEB DESIGN RESPONSIVO ... 24
2.6. MOBILE FIRST ... 25
3. CONCEITO ... 26
3.1. CULTURA DE MASSA ... 26
3.2. CULTURA DO REMIX ... 27
3.3. LIMITES DO DIREITO AUTORAL ... 28
3.4. GEEK E NERD ... 31
3.4.1. GEEK ... 33
3.4.2. NERD ... 33
4. PESQUISA E ANÁLISE DE SIMILARES... 37
4.1. VERSÃO MOBILE ... 37
4.2. VERSÃO DESKTOP - TOPO ... 39
4.3. VERSÃO DESKTOP – ÁREA CENTRAL ... 40
4.4. VERSÃO DESKTOP - RODAPÉ ... 41
5. DESENVOLVIMENTO DO PROJETO ... 43 5.1. NAMING ... 43 5.2. IDENTIDADE VISUAL ... 45 5.2.1. PAINEL SEMÂNTICO ... 45 5.2.2. GERAÇÃO DE ALTERNATIVAS ... 47 5.2.3. SELEÇÃO DE ALTERNATIVAS ... 48
5.2.4. ESTUDO CROMÁTICO ... 49 5.2.5. ESTUDO TIPOGRÁFICO ... 50 5.2.6. ALTERNATIVA FINAL ... 52 5.3. LOJA VIRTUAL ... 53 5.4. METODOLOGIA DE MUNARI ... 53 5.5. METODOLOGIA DE GARRETT ... 53
5.6. ADAPTAÇÃO DAS METODOLOGIAS ... 54
5.6.1. PROBLEMA E SUA DEFINIÇÃO ... 55
5.6.2. BRIEFING E ESTRATÉGIA ... 56
5.6.3. COMPONENTES DO PROBLEMA ... 56
5.6.4. COLETA DE DADOS ... 57
5.6.5. ANÁLISE DOS DADOS ... 57
5.6.6. ESCOPO ... 58 5.6.7. CRIATIVIDADE ... 61 5.6.8. MATERIAIS E TECNOLOGIA ... 61 5.6.9. EXPERIMENTAÇÃO ... 61 5.6.10. MODELO ... 62 5.6.11. ESTRUTURA ... 65 5.6.12. VERIFICAÇÃO ... 66
5.6.13. DESENHO DE CONSTRUÇÃO / ESQUELETO ... 66
5.6.14. SOLUÇÃO ... 70 5.6.15. SUPERFÍCIE ... 71 6. DESENVOLVIMENTO DE PRODUTOS ... 76 6.1. ESCOLHA DE TEMAS ... 76 6.2. ESTAMPA 1 ... 76 6.3. ESTAMPA 2 ... 78 6.4. ESTAMPA 3 ... 79 7. PONTOS DE CONTATO ... 80 7.1. APLICAÇÕES BÁSICAS ... 80 7.2. EMBALAGENS ... 83 7.3. ESPECIFICAÇÕES ... 85 8. CONSIDERAÇÕES FINAIS ... 86 REFERÊNCIAS ... 87
APÊNDICES ... 91 APÊNDICE A – MANUAL DE IDENTIDADE VISUAL ... 91
13 1. INTRODUÇÃO
Segundo Martin Cézar Feijó1, professor do Programa de Pós-Graduação em
Educação, Arte e História da Cultura da Universidade Mackenzie, o surgimento da cultura pop se deu através das artes plásticas, ligado ao pintor e cineasta Andy Warhol. “Trata-se de um tipo de arte que tenta reproduzir ícones dos meios de comunicação, em uma época que coincide com o auge do cinema e da televisão e com a explosão de certas bandas e artistas, como os Beatles”.
Gelson Santana Penha, professor do curso de Mestrado em Comunicação da Universidade Anhembi-Morumbi esclarece também ao site Nova Escola, que a cultura pop nasce em meio à explosão do consumo individual “e apaga as diferenças entre imagem e realidade, reprodução e original”. “E o pop é exatamente isso, ele é muito mais consumido do que vivido; é a arte dialogando com o consumo sem pudor”, afirma Martin César Feijó.
É importante entender esse contexto sobre a cultura de massa, para que possamos ter a noção do que ela representa para o mercado atual, tendo em vista que uma das principais características da cultura de massa é a de que ela alimenta produtos voltados para um público essencialmente jovem, exercendo influência sobe ele, principalmente na moda e no estilo. “Quando surgiu o grupo The Who, nos anos 60, houve um movimento de estilo de roupas coloridas e calças justas, que é um tipo de estética que influenciou muito os jovens daquela época”, lembra o professor Martin Cézar Feijó ao site Nova Escola.
A demanda por produtos relacionados à cultura de massa torna-se cada vez maior, à medida que cada vez mais personagens, principalmente de histórias em quadrinhos, invadem nosso cotidiano por meio de mídias como cinema, TV, jogos, livros, etc. No ano 2016, somente os filmes de personagens da Marvel Comics2, DC
Comics3 e Star Wars4 renderam US$ 5.832.988.177,00 em bilheteria mundial,
segundo dados disponíveis no site Box Office Mojo, principal serviço de relatório de bilheterias dos Estados Unidos. Os valores contemplam exclusivamente bilheteria de cinema, sem considerar licenciamento de produtos como brinquedos e roupas.
1 Nova Escola: https://novaescola.org.br/conteudo/1528/o-que-e-cultura-pop
2 http://www.boxofficemojo.com/franchises/chart/?id=marvelcomics.htm
3 http://www.boxofficemojo.com/franchises/chart/?id=dccomics.htm
14
Segundo a Pesquisa Geek Power 20165, a maioria do público brasileiro
consumidor da cultura de massa é jovem (18 a 34 anos – 68%), com curso superior completo ou cursando (65%) e com renda entre 2 e 10 salários mínimos (64%), cujos quais 91% desde público opta pelas compras por meio de lojas virtuais. Trata-se, portanto, de um público cuja renda varia entre pessoas de baixo e alto poder aquisivo.
Sendo assim, o objetivo deste projeto é desenvolver um estudo que permita a futura implantação de loja virtual que ofereça produtos relacionados à cultura de massa visando atender a demanda de consumidores deste segmento, visando oferecer opções de produtos que levem em consideração a faixa de idade, escolaridade e rendimento deste público, focando na etapa de criação do design de todos os produtos que serão comercializados.
1.1. OBJETIVO GERAL
Desenvolver o estudo teórico-prático para futura implantação de loja virtual que realizará a criação e comercialização de produtos relacionados a cultura de massa.
1.2. OBJETIVOS ESPECÍFICOS
Pesquisar design, identidade visual e design digital para web
Conceituar cultura do remix e delimitar possibilidades através do direito autoral Comparar e analisar produtos e plataformas similares
Desenvolver o projeto gráfico de marca e layout para loja virtual
1.3. JUSTIFICATIVA
Segundo a Revista Comércio & Serviços da FECOMERCIO6, “consumidores
5
http://www.ibopeinteligencia.com/noticias-e-pesquisas/omelete-e-conecta-mapeiam-os-habitos-do-consumidor-de-cultura-pop-do-brasil/
15
de produtos ligados à cultura pop ganham força como potenciais clientes, abrindo possibilidades de negócios para empresários que entendem o universo e estão dispostos a fornecer o que esses compradores querem e da maneira como desejam ser atendidos”.
A Comic Con Experience, convenção que reúne fãs da cultura de massa reuniu na sua última edição, entre os dias 01 e 04 de dezembro de 2016, em São Paulo, um público estimado em 180 mil pessoas7; um público que pode ser considerado maior
que o da San Diego Comic-Con, a convenção de cultura pop mais famosa e importante do mundo. Um público tão vasto que atraiu também o público comum, que nunca leu uma história em quadrinho, mas que não perdeu um episódio da série de TV do seu super-herói favorito. Na edição anterior do evento, em 2015, os expositores faturaram mais de R$ 15 milhões, segundo informações dos organizadores.
Devido à vasta abrangência de assuntos relacionados à cultura de massa, como, histórias em quadrinhos, livros, séries de TV, cinema, jogos e a multiplicidade de franquias relacionadas a essas mídias, o mercado da cultura de massa mostra-se um segmento com boas oportunidades de negócios. E a internet é hoje a principal mídia desse mercado8, permitindo aos fãs e consumidores acesso à novidades e
informações, e principalmente adquirir produtos relacionados à cultura pop através de lojas virtuais do gênero.
Segundo o professor de criação digital da ESPM, Vince Vader9, “quem aposta
no setor deve conhecer o universo nerd, ou pelo menos ter uma equipe com essa expertise. Ao abrir uma empresa, é preciso entender o mercado minimamente e aliar isso a uma visão de negócio pragmática, buscando sempre o lucro”, completa.
Fica evidente a existência de um mercado em expansão, que desperta o interesse e fidelidade de seus consumidores através da relação que muitos desenvolvem com personagens ligados à cultura pop. Desta forma, a internet é ferramenta essencial para a comercialização desse tipo de produtos.
7 http://epoca.globo.com/cultura/noticia/2016/12/comic-con-experience-2016-o-evento-cresceu-e-deixou-de-ser-apenas-para-nerds.html 8 http://www.ibopeinteligencia.com/noticias-e-pesquisas/omelete-e-conecta-mapeiam-os-habitos-do-consumidor-de-cultura-pop-do-brasil/ 9 http://www.fecomercio.com.br/upload/pdf/2015/13/C&S-33.pdf
16 1.4. PROCEDIMENTOS METODOLÓGICOS
Metodologia é o estudo dos métodos, um estudo dos caminhos para se chegar a um fim. A metodologia pode ser dividida em vários métodos para que se possa chegar a um determinado objetivo. Em seu livro “Das coisas nascem as coisas” (1981), Bruno Munari apresenta uma metodologia de projeto baseada em doze etapas:
P: Problema
DP: Definição do Problema CP: Componentes do Problema CD: Coleta de Dados
AD: Análise dos Dados C: Criatividade MT: Materiais e Tecnologias E: Experimentação M: Modelo V: Verificação DC: Desenho de Construção S: Solução
As dificuldades encontradas durante o desenvolvimento de um produto ou projeto são complexas, sendo inadequada a resolução de maneira intuitiva. A realização de pesquisa de semelhantes e a utilização de métodos já experimentados anteriormente podem auxiliar no alcance de melhores resultados com mais objetividade e com menor esforço.
A utilização de uma metodologia de projeto permite definir o problema como um todo e dividi-lo para evidenciar seus subproblemas e destinar a resolução de tais subproblemas parciais colaborando para a solução global do projeto. Sendo assim, para a execução do projeto de design será abordada a metodologia de Munari, levando em consideração a afirmação do autor de que “projetar é fácil quando se sabe o que fazer”.
17 “Desenvolver uma metodologia de trabalho é tarefa árdua, mas é fundamental imprimir esse esforço para que o processo possa ser reproduzido, especialmente quando o produto do designer é desenvolvido por uma equipe. Sem um sistema abrangente capaz de descrever, organizar as etapas do processo de criação, guiar as decisões a serem tomadas, abrangendo todos os aspectos envolvidos, não há como assegurar a qualidade dos projetos elaborados, que passarão a depender tão somente de rompantes de criatividade sem assegurar a possibilidade de continuidade no desenvolvimento da produção”. (CASTILHO et al., 2008, p.2)
Já a metodologia do ‘Projeto E’ de Meurer e Szabluk (2008) estruturada de acordo com as etapas sugeridas por Garrett, voltado ao web design, foca no desenvolvimento da loja virtual visando a compreensão sobre as tomadas de decisões sobre projetos, visando orientar as práticas em experiência do usuário (UX). É uma metodologia constituída por conceitos, definições, métodos e processos de grandes autores em design.
1.5. ESTRUTURA DO TRABALHO
Para melhor entendimento, este projeto foi dividido em nove capítulos de modo a explicar de maneira detalhada o que será desenvolvido. No primeiro capítulo encontra-se a introdução, onde se apresenta o assunto deste projeto, objetivo geral, objetivos específicos, justificativa, os procedimentos metodológicos adotados e a estrutura do trabalho. No segundo capítulo, encontram-se fundamentações teóricas sobre design, design gráfico, web design, web design responsivo e usabilidade.
A seguir, no terceiro capítulo encontram-se definições sobre o conceito de cultura de massa, cultura do remix, limites do direito autoral e pesquisa de similares. O quarto capítulo dedica-se a conceituação e diferenciação entre os termos geek e nerd. Ao quinto capítulo cabe a pesquisa e análise de similares. O desenvolvimento do projeto, contendo as etapas desenvolvidas são detalhadas no sexto capítulo. O sétimo capítulo destina-se a explicação de como será o processo de criação de estampas. Os pontos de contato serão exibidos no oitavo capítulo, enquanto o último destina-se a considerações parciais sobre o projeto, e as expectativas para a continuação do mesmo.
18 2. FUNDAMENTAÇÃO TEÓRICA
Os tópicos abaixo abordarão fundamentações sobre design, design gráfico, web design, usabilidade e vendas online, temas pertinentes a este projeto.
2.1. DESIGN
Existem muitas formas de definir o conceito de design, portanto não é sábio simplificar sua definição. Löbach (2001) diz que “o conceito de design muitas vezes causa confusão porque nem sempre fica claro o que se quer dizer com este termo”. O design se faz presente em nosso cotidiano gerando cada vez mais dúvidas.
“Definir e conceituar a atividade de design é um trabalho já exaustivamente realizado, mas parece que em nenhum momento qualquer das definições e conceitos até hoje desenvolvidos conseguiram abordar o design em toda sua plenitude, mesmo porque essa atividade está em constante mudança, sofrendo transformações contínuas”. (SANTOS, 2000, p. 19)
Para Flusser (1995), as palavras ‘design’, ‘mecânica’, ‘máquina’, ‘técnica’ e ‘arte’ estão relacionadas e que cada um dos conceitos é impensável sem os demais, e explicam de certa forma, porque a palavra design pôde ocupar o espaço em que é conferido no discurso contemporâneo. Essa relação foi negada por séculos, sofrendo uma separação brusca entre o mundo das artes e o mundo da técnica e das máquinas, dividindo a cultura em dois ramos, o científico e o estético. Mas no final do século XIX essa divisão se tornou insustentável, permitindo que o design conectasse esses dois mundos. Desta forma, design pode ser considerado esse lugar em que arte e a técnica se apoiam, tornando possível uma nova forma de cultura.
Além de adicionar valor aos produtos industrializados, o design proporciona a melhoria do aspecto funcional, ergonômico e visual de um produto potencializando principalmente a satisfação do seu usuário. Desta forma, o design acaba por se tornar uma qualidade daquilo que foi projetado.
Em relação ao design emocional, Norman (2008) o define em três níveis: visceral (preferências básicas biológicas, relacionados aos aspectos físicos como
19
aparência e cores, é o nível que nos faz sentir atração pela beleza e ter aversão por coisas feias e desorganizadas), comportamental (relacionado não apenas com a facilidade de uso, mas também o prazer pelo uso) e reflexivo (relacionado ao status social, de refletir como nos sentimos sobre a utilização de um produto).
Figura 1 – 3 níveis de design emocional de Norman Fonte: Site Ux.blog (2017)
Sendo assim, um produto deve ser desenvolvido levando em consideração todos os níveis, de modo que venha a corresponder ao desejo do consumidor, pois a eventual falha de um dos níveis pode prejudicar outro nível, comprometendo a qualidade do produto. Considerando os três níveis de design emocional de Norman, podemos através do design, criar desejos e atingir a emoção dos consumidores, criando um vínculo entre pessoa e objeto, por meio do significado que o objeto passa a ter para o usuário.
2.2. DESIGN GRÁFICO
O design gráfico busca a união da estética dos objetos às suas funcionalidades, é associado a elementos visuais que transmitem uma mensagem, tudo o que vemos é comunicação visual, seja uma árvore, um desenho requintado ou uma camiseta têm valores diferentes de acordo com o contexto em que estão inseridos.
20 informações de um emissor a um receptor, mas as condições fundamentais do seu funcionamento são a exatidão das informações, a objetividade dos sinais, a codificação unitária e a ausência de falsas interpretações”. (MUNARI, 2001, p. 56).
Compreende-se assim que diversos estudos são necessários com o intuito de gerar a criação e aplicação de peças gráficas, a partir de um conceito criado resultando num produto que tem o principal objetivo de comunicar. Para Villas-Boas:
“Morfologicamente, design gráfico é uma atividade de ordenação projetual de elementos estético-visuais textuais e não textuais com fins expressivos para reprodução por meio gráfico assim como o estudo desta atividade e a análise de sua produção. Essa produção inclui a ilustração, a criação e a ordenação tipográfica, a diagramação, a fotografia e outros elementos visuais. No entanto, não inclui nenhuma delas isoladamente: o design gráfico é justamente a combinação de todos estes elementos com os fins e meios acima descritos”. (VILLAS-BOAS, 2003, p. 12-13)
O designer é peça fundamental no desenvolvimento de um produto, ele deve avaliar, combinar técnicas, métodos, materiais, tecnologias, processos de produção e custos para atender as necessidades do usuário do produto. O estudo de cores, formas, fontes, grafismos para a criação de um produto permite ao designer evitar erros e gastos desnecessários, ao mesmo tempo que conquista consumidores, podendo assim transmitir sua ideia e conceito. Para que possa ter o domínio dessas atividades durante a concepção de um produto, é de extrema importância que o designer adote metodologia que se adapte melhor a seu projeto.
“O método de projeto, para designer, não é absoluto nem definitivo; pode ser modificado caso ele encontre outros valores objetivos que melhorem o processo. E isso tem a ver com a criatividade do projetista, que, ao aplicar o método, pode descobrir algo que o melhore. Portanto, as regras do método não bloqueiam a personalidade do projetista; ao contrário, estimulam-no a descobrir coisas que, eventualmente, poderão ser úteis também aos outros.” (MUNARI, 1998, p. 11)
2.3. WEB DESIGN
O web design requer do profissional conhecimentos técnicos que vão além do design. Hoje, o web design e o design gráfico são vertentes do design que caminham juntas, graças às familiaridades que os profissionais da área encontram em suas ferramentas ou por suas representações imagéticas e dimensionais. O profissional da
21
área – webdesigner – deve se qualificar de modo que tenha conhecimento sobre teoria das cores, tipografia, arquitetura de informação, UX, conhecimento de linguagem de estruturação, tendo assim maior controle sobre o projeto em que estiver trabalhando. O webdesigner deve estar ciente de que o usuário final do website possa ser uma pessoa sem conhecimentos de web design ou programação, portanto, deve identificar os principais objetivos e requisitos do projeto, de acordo com as necessidades do público-alvo, a partir da arquitetura da informação do website, analisando tendências e conceitos.
“[...] quando estamos usando a web, cada dúvida aumenta o nosso trabalho, distraindo nossa atenção de cada tarefa que estamos executando. As distrações podem ser pequenas, porém vão se avolumando, e as vezes podem nos confundir.” (KRUG, 2000, p. 5)
O webdesigner deve focar na relação entre usuário e interface, diminuindo sua complexidade, pois o tempo perdido e a dificuldade em encontrar as informações desejadas em uma página fazem com que o usuário se sinta frustrado e procure outro website. Segundo Nielsen:
“Devemos eliminar elementos de design confusos e utilizar o máximo possível as convenções de design. Melhor ainda, devemos estabelecer padrões de design para cada tarefa importante em um website. Os padrões aprimoram o sentido de domínio dos usuários em relação a um site, ajudam-nos a realizar suas tarefas e aumentam sua satisfação geral com um site.” (NIELSEN, 2006, p.46)
Observa-se, portanto, a importância da utilização de elementos e padrões para cada tarefa, permitindo ao usuário a realização de suas tarefas com facilidade. O design é, portanto, essencial para o estudo de IHC, que tem como objetivo principal, estudar e definir métodos para interações entre usuário e interface. O ponto de partida está no usuário, como elemento central de foco e análise. Ou seja, o humano tem maior peso na interação entre humano e máquina (CARVALHO, 2003, p. 75-89).
O foco da IHC se concentra em usabilidade (fatores que tornam um produto de fácil utilização), critérios ergonômicos (fatores humanos aplicados à IHC, sendo o ajuste ao suporte físico do usuário) e design de interação (permite que o usuário realize tarefas facilmente e que a interface respondo dentro da expectativa do usuário). As intersecções dessas áreas compõem os principais padrões de IHC atuais.
22 2.4. USABILIDADE
A usabilidade serve para definir a facilidade com que o usuário utiliza uma ferramenta ou interface. A norma ISO 9241 diz que usabilidade é a medida pela qual uma ferramenta ou interface pode ser usada por usuários específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação, sendo:
Eficácia: capacidade de executar a tarefa de forma correta e completa; Eficiência: recursos gastos para conseguir ter eficácia, seja tempo, dinheiro,
produtividade ou memória;
Satisfação: nível de conforto que o usuário sente ao utilizar a interface. Quando falamos de experiência do usuário, a usabilidade é um fator fundamental, como demonstrado na ‘pirâmide das boas experiências’, trazendo o questionamento “Eu consigo usar? ”.
Figura 2 – Pirâmide das boas experiências Fonte: Site Catarinas Design (2017)
A usabilidade está diretamente ligada a percepção e facilidade que o usuário tem no manejo seu produto ou interface. Segundo Nielsen (2003, p. 10), a importância que a usabilidade assumiu na economia da internet é maior do que no desenvolvimento de um produto físico, pois antes os clientes só experimentavam a usabilidade de um produto após terem comprado e pago. E a usabilidade sobre um website está a apenas alguns cliques do usuário. Conforme Krug:
“Quando você obriga os usuários a pensar em algo que deve ser simples, como o que pode ser clicado, está desperdiçando o estoque limitado de paciência e boa vontade
23 que todo o usuário traz para um site novo. ” (KRUG, 2000, p. 18)
A usabilidade está diretamente ligada ao diálogo na interface, essa interface deve auxiliar e não dificultar no processo de interação (BASTIEN E SCAPIN apud VIEIRA, 2008, p. 54). O usuário não pode ser culpado pela dificuldade de interação com a interface, mas sim quem a projetou e não pensou nas prováveis situações de uso e erros que poderiam vir a serem cometidos.
Algumas regras simbolizam a maior parte dos itens com os quais se deve preocupar no que diz respeito a usabilidade e que irão refletir na experiência de seu usuário, como conhecer seu público e os objetivos dos usuários na interface, gerar ideias para aproveitamento futuro, aperfeiçoar a navegação, produção e implementação de código, conteúdo e imagens, lançamento da interface e atualização de interface a partir da análise de métricas.
Outra análise metodológica é a de Garret (2003), focando na organização de uma interface como fator de importância no processo de projeção.
Figura 3 – Metodologia de Garret Fonte: Site Faber-Ludens (2017)
Como se percebe, o usuário está no centro do processo, pois a forma como o usuário irá desempenhar suas funções define o grau de sucesso da interface. Garrett foca na organização da estrutura da interface, facilitando o acesso ao que o usuário procura. Conclui-se que o design é um fator estratégico indispensável e que pode trazer resultados positivos, se bem aplicado.
24 2.5. WEB DESIGN RESPONSIVO
O acesso à internet por meio de dispositivos móveis, como smartphones e tablets, sofreu um exponencial crescimento nos últimos anos. Dados de pesquisa realizada pela Nielsen IBOPE10 mostra que o número de brasileiros que utilizam
dispositivos móveis para acesso à internet chegou a 72,4 milhões no segundo semestre de 2015, um crescimento de 4% em relação ao primeiro trimestre do mesmo ano. Esse crescimento expõe a necessidade de utilizar novos conceitos no desenvolvimento de um website, a fim de se propiciar ao usuário final uma fácil e rápida navegação.
A maior dificuldade encontrada pelos usuários no acesso à websites por meio de smartphones é a dimensão de tela dos dispositivos, evidentemente inferior aos monitores de um computador comum, sendo assim, é necessário que os websites se adaptem a diferentes dimensões de tela, facilitando a exibição de seu conteúdo. E frequentemente surgem novos dispositivos que possibilitam o acesso à internet, e, portanto, cabe ao webdesigner desenvolver um website que se adapte a diferentes dispositivos, sendo esta a função do design responsivo.
“Antes de qualquer coisa, é necessário que fique muito claro que design responsivo não diz respeito simplesmente e somente à adaptação do layout ao tamanho da tela. Vai muito além disso, pois 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 design responsivo ou layout responsivo expande e contrai com a finalidade de se acomodar de maneira usável e acessível à área onde é visitado ou, mais genericamente, ao contexto onde é renderizado, seja um smartphone, um tablet, um leitor de tela, um mecanismo de busca, etc.” (SILVA, 2014, p.35)
O termo web design responsivo surgiu em 2010, em uma publicação escrita por Ethan Marcotte (2010) no site “A List Apart”11, onde propõe que ao invés de ser
desenvolvido um design para cada dispositivo, deve-se tratar as diferentes opções de dispositivos como faces diferentes de uma mesma experiência, permitindo o gerenciamento unificado de conteúdo do website, pois o webdesigner não precisará
10
http://www.nielsen.com/br/pt/press-room/2015/Brasileiros-com-internet-no-smartphone-ja-sao-mais-de-70-milhoes.html
25
mais realizar o gerenciamento de conteúdo separadamente para cada dispositivo.
2.6. MOBILE FIRST
Mobile first é uma metodologia abordada por Luke Wroblewski12, com o intuito
de focar o desenvolvimento projetual de uma página para ser visualizada inicialmente em dispositivos mobile, para gradativamente pensar-se nas modificações que deverão ser aplicadas ao layout para que se adapte a dispositivos de telas maiores.
Para Lopes (2013), é melhor iniciar o desenvolvimento de seu projeto levando em consideração as restrições impostas por dispositivos mobile e então evoluir para telas maiores, do que ter o trabalho de limitar o desenvolvimento pelo mesmo ter sido pensado inicialmente para a versão desktop.
“Criar um design mobile-first e focar no principal, e isso não e fácil. É bem mais fácil fazer uma interface cheia de coisas que uma interface simples que atinja o mesmo objetivo. Bons designs, porém, são simples e funcionais; e pensar primeiro no mobile te ajuda a chegar nisso.” (LOPES, 2013, p.34)
A adoção desta abordagem na criação de websites permite que o webdesigner foque nas funções e conteúdos essenciais da página, contribuindo para a melhora da experiência do usuário.
26 3. CONCEITO
Os tópicos abaixo abordarão conceitos sobre cultura de massa, cultura do remix e limites do direito autoral, temas necessários a este projeto.
3.1. CULTURA DE MASSA
Mesmo com a invenção dos tipos móveis de metal por Gutenberg, em 1438, o acesso à informação e cultura permanecia restrito à burguesia, que se estruturava como classe definindo metas para se alçar ao poder disseminando seus princípios e valores. Somente com a expansão da Revolução Industrial durante o século XIX e início do século XX, e sua consequente evolução tecnológica é que a sociedade pode passar por profundas transformações ditando o padrão da racionalidade e consumo. A sociedade passou a ter, ao lado da cultura erudita e da cultura popular, a cultura de massa, alimentada por seus meios de comunicação, como, jornais, revistas, cinema e televisão, que proporcionavam a disseminação de informação, e como consequência direta, introduziam novos conceitos no cotidiano das pessoas.
“De repente a multidão tornou-se visível, instalou-se nos lugares preferenciais da sociedade. Antes, não existia, passava desapercebida, ocupava o fundo do cenário social; agora antecipou-se às baterias, tornou-se o personagem principal. Já não há protagonistas: só há coro”. (ORTEGA Y GASSET, 2002, p.43)
A cultura de massa está relacionada à concentração humana nas cidades, tipicamente ligada a uma sociedade que passou pela mercantilização da produção cultural. Enquanto a cultura popular está ligada ainda a camadas da cultura erudita, a cultura de massa é proveniente do surgimento de produtos industrializados em sua cultura. Pode-se afirmar que toda produção simbólica ou material, como o cinema, que seja produzido para o consumo é cultura de massa.
“Mesmo fora da procura de lucro, todo sistema industrial tende ao crescimento, e toda produção de massa destinada ao consumo tem sua própria lógica que é a de máximo consumo. A indústria cultura não escapa a essa lei. Mais que isso, nos seus setores, os mais concentrados, os mais dinâmicos, ela tende ao público universal.” (MORIN, 2002, p.35)
27
É importante salientar que a cultura de massa tem por finalidade criar o consumo extensivo de produtos simbólicos, transformando a própria cultura em meio de comércio e ganhos, dessa forma, a própria cultura de massa pode ser chamada indústria cultural, pois é produzida para ser consumida como um produto.
A grosso modo, pode-se dizer que o surgimento da cultura de massa se deu graças ao processo de acumulo de capital e pelo potencial tecnológico industrial, no caso a comunicação, e também pelo acesso das classes populares ao consumo. É dentro deste contexto que se encaixa o que conhecemos hoje como cultura pop.
3.2. CULTURA DO REMIX
Alexandre Matias (Para Entender a Internet, 2015, p. 29) conta que o termo remix surgiu nos anos 70 e ajudou na maturidade do rock nos anos 60, quando uma geração musical descobriu que alterar aquilo que foi feito em estúdio com efeitos e superposições. Mais tarde, Tom Mould, um produtor americano descobriu que esse recurso poderia ser aproveitado na disco music, permitindo que uma música pudesse ser esticada, às vezes por mais de dez minutos, se desejado. Com essa novidade, os DJs passaram a combinar músicas, juntar batidas e isso ajudava na movimentação da pista de dança se fizesse discos que ajudassem o DJ. Assim foi inventando novidades como o breque instrumental no meio da música, o single de 12 polegadas e, finalmente, o remix.
A cultura do remix não poderia ficar restrita às pistas de dança, pois é um movimento que incentiva a criação de trabalhos derivados ou combinados por meio da existência de materiais existentes para a criação de um novo produto. Ou seja, permite remixar o trabalho de detentores de direitos autorais.
Lawrence Lessig (Remix, 2008) apresenta isso como um ideal desejável e argumenta que a saúde, o progresso e a criação de riqueza de uma cultura é ligada a um processo participativo.
E a cultura do remix é amplamente difundida no cenário da cultura de massa, um grande exemplo disso são as fanfictions, uma expressão criada por fãs e leitores para preencher lacunas, criar histórias de origem ou derivadas de livros, séries de TV
28
e filmes. Isso é uma forma de contar histórias com rumos diferentes da obra original, de modo a agradar fãs descontentes com o rumo da obra original, e até mesmo como forma de homenagear ou continuar uma história que teve um fim.
Vivemos hoje em uma sociedade que adota a cultura do remix mesmo que inconscientemente, consumidores de roupas customizadas a móveis e carros personalizados, existe no mercado em geral uma infinidade de produtos criados e reinventados pelo desejo dos próprios consumidores, a fim de satisfazer a compra de um produto com as características que deseja.
Figura 4 – Camiseta Baby Groove Fonte: Site Nerdstore (2017)
3.3. LIMITES DO DIREITO AUTORAL
Como já demonstrado nesse trabalho, o mercado da cultura de massa vem exercendo uma grande representatividade em diversos segmentos da economia criativa, e, portanto, é de suma importância trazer para este trabalho a legislação e os limites do direito autoral em que parte do projeto deverá se situar.
No final do século XVIII existia um crescente de legislações nacionais sobre direitos autorais, e embora alguns países estivessem adotando normas protecionistas
29
que se aplicavam às obras estrangeiras, a maioria protegia apenas o autor nacional e em algumas vezes, autores estrangeiros domiciliados no país. Desta forma, proteção de obras em outros países dependiam de tratados bilaterais ou multilaterais por diferentes países, gerando uma busca por uniformização da regulamentação internacional, celebrando um tratado multilateral de tendência universalista. A primeira tentativa resultou na Convenção de Berna13 em 1886, e continua sendo ainda, a
principal referência sobre o assunto em nível mundial.
Pela legislação brasileira (Lei 9.610/1998) o criador de uma obra intelectual deve ser recompensado pelo uso de sua produção, seja ele músico, compositor, escritor, cineasta, escultor, pintor ou arquiteto, deve receber uma retribuição pela divulgação e exploração de sua obra, estimulando a criação dos autores.
“Lei Nº 9.610 de 19 de fevereiro de 1998, Título II, Das Obras Intelectuais, Capítulo I, Das Obras Protegidas. Art. 7º. São obras intelectuais protegidas as criações do espírito, expressas por qualquer meio ou fixadas em qualquer suporte, tangível ou intangível, conhecido ou que se invente no futuro, tais como:
Inciso VIII – as obras de desenho, pintura, gravura, escultura, litografia e arte cinética; IX – as ilustrações, cartas geográficas e outras obras da mesma natureza;”
Dado esse contexto inicial sobre direitos autorais, é necessário delimitar ainda os limites do direito autoral, que possibilita a criação de novas obras a partir do conceito da cultura do remix, por exemplo.
“Lei Nº 9.610 de 19 de fevereiro de 1998, Título III, Dos Direitos do Autor, Capítulo IV, Das Limitações aos Direitos Autorais. Art. 46. Não constitui ofensa aos direitos autorais: Inciso I – a reprodução:
c) de retratos, ou de outra forma de representação da imagem, feitos sob encomenda, quando realizada pelo proprietário do objeto encomendado, não havendo a oposição da pessoa neles representada ou de seus herdeiros;
Inciso VIII – a reprodução, em quaisquer obras, de pequenos trechos de obras
preexistentes, de qualquer natureza, ou de obra integral, quando de artes plásticas, sempre que a reprodução em si não seja o objetivo principal da obra nova e que não prejudique a exploração normal da obra reproduzida nem cause um prejuízo injustificado aos legítimos interesses dos autores.
Art. 47. São livres as paráfrases e paródias que não forem verdadeiras reproduções da obra originária nem lhe implicarem descrédito.”
13 A Convenção de Berna relativa à proteção das obras literárias e artísticas, também chamada
Convenção da União de Berna ou simplesmente Convenção de Berna, que estabeleceu o reconhecimento do direito de autor entre nações soberanas, foi adotada na cidade de Berna, Suíça, em 1886. (Berne Convention for the Protection of Literary and Artistic Works, World Intellectual Property Organization, consultado em 20 de junho de 2017)
30
A cultura do remix, portanto, pode sim proporcionar a criação de novas obras derivadas ou combinadas por meio da existência de materiais existentes para a criação de um novo produto, desde que esse não seja uma cópia ou venha a prejudicar a exploração da obra em que o novo objeto foi baseado, ou ainda caso esta obra não encontre oposição de seu autor ou de seus herdeiros.
Há de se considerar ainda que diversos personagens relevantes para a cultura pop já se encontram sob domínio público14, uma condição jurídica na qual a obra já
não possui direitos autorais, permitindo a sua livre utilização. São casos de personagens como Drácula, Frankenstein, Elvis, Gato Félix e até mesmo o Superman (caso de desenhos mais antigos).
Figura 5 - Ícones pop caem em domínio público Fonte: Site Revista Galileu
14
31
Nos países signatários a Convenção de Berna, uma obra se torna pública após setenta anos do falecimento de seu autor, ou quando o mesmo não possui herdeiros. Nesses casos, o domínio público refere-se aos direitos patrimoniais do autor e não aos direitos morais, estes imprescritíveis. Ou seja, o autor sempre deverá ser citado.
Diante do exposto, é correto afirmar que os limites do direito autoral são de extrema importância para o segmento da cultura pop, uma vez que permite a criação de novos produtos utilizando-se da cultura do remix, sem a infração da lei.
3.4. GEEK E NERD
É comum as pessoas pensarem que geek e nerd signifiquem a mesma coisa, o estereótipo criado pelo imaginário popular faz com que esses dois termos fossem destinados a pessoas vistas como pessoas excêntricas, fãs de tecnologia, jogos, etc. Mas geek e nerd são termos diferentes para definir diferentes tipos de pessoas, enquanto o geek é trata-se de um fã de tecnologias e novidades, o nerd é descrito como intelectual que se concentra em obter profundo conhecimento sobre um tema ou determinada área.
Em 2013, Burr Settles, um cientista de dados e engenheiro de softwares, publicou em seu site15 os resultados de um experimento realizado para mostrar quais
palavras são mais ligadas aos termos geek e nerd. Com a ajuda de APIs de streaming e de pesquisa, ele analisou informações do Twitter relacionadas aos dois termos entre dezembro de 2012 e janeiro de 2013, o que incluiu 2,6 milhões de postagens na rede social. O resultado pode ser visto através do gráfico a seguir que apresenta várias palavras utilizadas na rede social.
32 Figura 6 - Gráfico de dispersão
Fonte: Site Slackpropagation
É possível afirmar através do gráfico que o termo geek está relacionado a coisas e objetos, enquanto o termo nerd se aproxima mais de ideias. Nota-se que palavras como quadrinhos, cosplay, coleções e camisetas se aproximam mais do termo geek, enquanto seminários, física, biologia são palavras que se aproximam mais do termo nerd.
Burr Settles utiliza o “Cara dos Quadrinhos” (Comic Book Guy) e o Professor Frink, ambos personagens de Os Simpsons para ilustrar a diferença entre geek e nerd.
Figura 7 - Cara dos Quadrinhos e Professor Frink Fonte: Site Slackpropagation
33 3.4.1. GEEK
O termo geek teve seu primeiro registro em 1876, como sinônimo de bobo (fool) e somente algum tempo depois passou a servir como designação para artistas de rua que atuavam em performances bizarras, entre elas incluía comer insetos (bugs). Criou-se aí a analogia de computer geek para a pessoa que trabalhava eliminando bugs de computador. Em meados dos anos 90, época que a tecnologia passou a ser considerada como um meio de libertação dos padrões, o termo geek deixou de ser pejorativo quando um glossário, mantido pelo MIT e mais tarde publicado como o livro Hacker’s Dictionary16 o definiu como “pessoas que escolheram a concentração ao
invés da conformidade; aqueles que buscam um objetivo e não concordam com a adequação social padronizada. Neofilistas de carteirinha, e são também adeptos de computador.” O geek acaba se tornando um especialista naquilo que gosta. Suas preferências pessoais são relacionadas à gadgets e tecnologia, jogos eletrônicos, filmes e coleção de objetos.
3.4.2. NERD
O termo nerd tem três conhecidas possibilidades de origem, a primeira delas oriunda da década de 50, no livro infantil If I ran the zoo (Dr. Seuss, 1950) e faz alusão a uma estranha criatura fictícia, onde o narrador do livro, Gerald McGrew afirma que colecionaria “um Nerkle, um Nerd e um Seersucker também” em seu jardim zoológico imaginário. Tratava-se basicamente da caracterização de um personagem cômico, magrelo e com dificuldades para interações sociais.
34 Figura 8 - Nerd por Dr. Seuss
Fonte: Site Shmoop
A segunda vez que se tem conhecimento da origem e uso da palavra nerd remete ao final dos anos 60, quando os termos nurd ou gnurd foram utilizados em ambiente universitário, mais precisamente no Rensselaer Polytechnic Institute e no MIT, quando estudantes dessas universidades utilizavam o termo “knurd” (“drunk”, traduzindo, bêbado, escrito ao contrário) para descrever pessoas que preferiam ficar em seus quartos estudando a irem a festas. Seria então a palavra nerd um derivado dos termos nurd, gnurd ou knurd. A última versão seria oriunda de Northern Electric
Research and Development (Departamento de Pesquisa e Desenvolvimento da
Northern Electric, companhia de energia elétrica do Canadá conhecida atualmente como Nortel), atribuída aos engenheiros e pesquisadores da empresa, considerados muito inteligentes e que trabalhavam com seus crachás à vista, os quais exibiam a sigla N.E.R.&D. (Galvão, 2009).
O termo não seria popular se não houvesse sua propagação através de grandes mídias, como o cinema, por exemplo. Pode-se perceber através do TV e do cinema, através de séries como “Happy Days” (exibida de 1974 a 1984) e também no cultuado filme “A vingança dos nerds” como o termo era usado para a criação de estereótipos psicológicos, visuais e estéticos relacionado ao nerd.
35 Figura 9 - A vingança dos nerds
Fonte: Site Hits Daily Double
O filme, ambientado em uma universidade, satiriza a vida de estudantes tidos como nerds, que tentam acabar com o bullying que sofrem da fraternidade Alpha Beta, uma sociedade modelo de atletas machistas. Os nerds eram considerados no ambiente universitário como a antítese dos populares, que eram considerados jovens belos, atraentes e esportistas.
Gradativamente, os termos geek e nerd foram perdendo a conotação negativa conforme a ascensão do Vale do Silício e da indústria tecnológica americana permitia que os intitulados nerds acumulassem fortunas, e isso fica claro através da representação de pessoas como Bill Gates e Steve Jobs.
36 Figura 10 - Bill Gates nos anos 90
Fonte: Site Business Insider
Atualmente é comum encontrar pessoas trajando camisetas e acessórios ligados a quadrinhos, filmes e jogos, em outras palavras, expondo o seu orgulho geek, ou orgulho nerd. Ambos os termos já foram tratados como pejorativos por muito tempo, mas foram refinados e redefinidos como termos de orgulho e representação de grupo. Com a globalização e ascensão da indústria tecnológica, as últimas duas décadas foram marcadas pela grande demanda de produtos que representam os públicos geek e nerd, seja através do cinema com filmes como A Rede Social e universos compartilhados de filmes de super-heróis ou na TV através de séries como The Big Bang Theory, Sillicon Valley, Doctor Who.
37 4. PESQUISA E ANÁLISE DE SIMILARES
A pesquisa de similares para este projeto apresenta empresas de grande relevância no cenário da cultura pop nacional. Para comparação, foram escolhidas as empresas Nerdstore17, ChimpArt18, Pop Mega Store19, Red Bug20, Geek Store Brasil21
e Loja DC Comics22, empresas de relevância no mercado de produtos relacionados a
cultura de massa. As lojas similares serão analisadas em relação as suas versões mobile, além da versão desktop, neste caso dividido em três etapas: topo, área central e rodapé.
4.1. VERSÃO MOBILE
Pode-se perceber algumas semelhanças entre as lojas escolhidas, como o posicionamento de logotipo na área central nos casos das lojas ChimpArt, Pop Mega Store e Red Bug, devido ao formato e área ocupada pela marca, ao contrário das lojas Nerdstore, Geek Store Brasil e Loja DC Comics que possuem logotipos em formato horizontal. As lojas com logotipo em formato horizontal possuem um ganho de tela em relação às demais, permitindo que o usuário tenha acesso a banner de promoções ou produtos sem necessidade de rolagem de tela.
Com relação a área central dos websites, percebe-se, com exceção da Geek Store Brasil, a existência de dois modelos para exibição de conteúdo, sendo o primeiro sem a exibição de produtos, focando na divulgação de banners de destaques e categorias, casos das lojas Nerdstore, Pop Mega Store e Loja DC Comics; enquanto que o segundo modelo contempla a exibição de produtos no corpo do website, um abaixo do outro, alternando com pequenos banners. A exceção neste caso fica por conta da loja Geek Store Brasil, que dentro os modelos selecionados é a única a inserir até dois produtos lado a lado, o que dependendo do ponto de vista pode ser avaliado sob duas perspectivas: ao mesmo tempo em que a página pode exibir mais produtos
17 www.nerdstore.com.br, acesso em 13, Outubro, 2017
18 www.chimpart.com.br, acesso em 14, Outubro, 2017
19 www.popmegastore.com.br, acesso em 15, Outubro, 2017
20 www.redbug.com.br, acesso em 15, Outubro, 2017
21 www.geekstorebrasil.com.br, acesso em 17, Outubro, 2017
38
sem rolagem de tela, também acaba tendo a imagem de seus produtos menor em relação aos concorrentes citados.
Figura 11 - Lojas versão mobile Fonte: Edição do Autor (2017)
39
Com relação a área inferior dos websites, também chamada de rodapé, percebe-se o mesmo padrão em todos os similares, com a exibição de maneira organizada de informações tidas como institucionais, como menu de acesso a demais páginas, formas de contato e exibição de meios de pagamento.
4.2. VERSÃO DESKTOP – TOPO
Percebe-se a adoção de um padrão nas lojas virtuais de referência, mantendo dois estilos de topo, onde num primeiro modelo a marca é centralizada com o formulário de busca à esquerda e dados como carrinho de compras e login à direita, enquanto que no segundo modelo a marca mantém-se à esquerda, dando espaço a um campo de busca maior, mantendo login e carrinho de compras à direita.
Figura 12 - Área superior de lojas versão desktop Fonte: Edição do Autor (2017)
40
O espaço para destaques é localizado sempre abaixo do menu, com fotos e textos cujo tamanho da fonte se sobressai as demais áreas do site, chamando a atenção do usuário para este ponto da loja virtual.
Em dois casos, Chimp Art e Loja DC Comics, a área destinada ao topo do website é também utilizada de maneira temática, com o layout fazendo uso de personagens ou elementos gráficos que tenham ligação com o nome da empresa. É notório que a maioria dos similares fazem bom uso e preenchimento das áreas do topo, através da exibição de conteúdos da loja, com exceção dos similares Pop Mega Store e Geek Store Brasil, onde percebe-se a existência de espaços vazios no topo, que poderiam ser melhor aproveitados com o intuito de se melhorar a experiência do usuário no acesso ao website, seja por meio de opções de acesso que diminuíssem o número de cliques do usuário para se realizar determinada ação, como acesso rápido ao cadastro ou carrinho de compras, situações não visíveis na versão mobile do website devido a menor área para exibição do conteúdo.
4.3. VERSÃO DESKTOP – ÁREA CENTRAL
Assim como ocorre na versão mobile, a área central dos websites é destinada a exibição de banners e produtos, com a diferença de que na versão desktop os banners são exibidos com dimensões maiores. As lojas optam por alternar entre a exibição de produtos e banners de promoções.
A partir do momento que o website possui uma dimensão maior, novas opções podem ser pensadas com o intuito de se melhorar a navegação e experiência do usuário. Com exceção da Loja DC Comics, todas as demais optam por manter um cabeçalho colado ao topo e sempre visível mesmo quando ocorre a rolagem de página. Esse cabeçalho normalmente é composto pela marca da empresa, um campo de busca e opções de acesso rápido a carrinho de compras, cadastro, acesso a conta. Essa solução visa manter as opções mais importantes de uma loja virtual sempre visíveis ao usuário, permitindo que o mesmo realize uma busca de produtos sem a necessidade de ser conduzido ao topo da página. Em alguns casos, as lojas similares optam por incluir na área central um “carrossel” para exibição de marcas ou coleções específicas, seria uma outra forma de acesso rápido a determinada área do website.
41 Figura 13 - Área central de lojas versão desktop
Fonte: Edição do Autor (2017)
4.4. VERSÃO DESKTOP – RODAPÉ
Com relação a área inferior dos websites, aqui chamada de rodapé, percebe-se que o padrão percebe-semelhante prepercebe-sente na versão mobile dá espaço a possibilidades de personalizações e agregação de elementos gráficos que contribuem para a tematização desta área do layout.
Enquanto Chimp Art e Pop Mega Store optaram pela personalização diferenciada desta área do website, acrescentando elementos gráficos que fazem referências a elementos da cultura pop, as demais lojas optam por focar na
42
organização do conteúdo. A área do rodapé é comumente dividida em três ou quatro colunas que se dividem em exibir informações como menu institucional, meios de contato, formas de pagamento e redes sociais. Pelas amostras realizadas, pode-se dizer que se trata de um padrão em lojas virtuais nacionais, e que a facilidade com que o usuário encontra tais informações é um agravante para que essa estrutura se mantenha desta forma.
Figura 14 - Rodapé de lojas versão desktop Fonte: Edição do Autor (2017)
43 5. DESENVOLVIMENTO DO PROJETO
Com base na fundamentação teórica e conceituação deste projeto, o desenvolvimento prático deste projeto seguirá as seguintes etapas:
Naming
Identidade visual Loja virtual
Estampas para produtos Pontos de contato
Especificações
5.1. NAMING
Naming é o processo de escolha de nome para um produto, serviço ou empresa, de modo que reforce uma característica ou diferencial melhorando assim o posicionamento do produto, serviço ou empresa. O processo de escolha de um nome cria um ativo valioso, que segundo Wheeler (2012) tem o potencial de ser uma campanha publicitária. Por isso, a abordagem no processo de naming deve ser criativo, estudado e estratégico.
Figura 15 - Pontos de contato com a marca Fonte: Wheeler, 2012, p.13
44
Segundo Wheeler (2012), há uma série de fatores denominados “pontos de contato da marca” que possibilitam ao cliente memorizar e fidelizar-se a uma marca, como exemplificado na imagem anteior.
Apesar de ser um processo que exija cuidado quanto ao posicionamento e estratégia da empresa, produto ou serviço, segundo detalha Mauro Gaspar, no site Design Culture23 existem dez regras a serem consideradas na criação de um naming:
Regra 1 – ser curto, fácil de prenunciar/escrever.
Regra 2 – ser neutro a problemas/organizações da sociedade e da
cultura envolvente.
Regra 3 – adequado ao que pretende vender. Regra 4 – de fácil memorização.
Regra 5 – não deverá ser descritivo. Regra 6 – não pode ser contraditório.
Regra 7 – deve de ser lícito (permitido por lei). Regra 8 – ser verdadeiro quanto ao seu conteúdo. Regra 9 – estar disponível (não esquecendo a internet).
Regra 10 – ser pronunciado internacionalmente (pensar no futuro).
Mesmo com os pontos levantados por Wheeler (2012) e as regras para a criação de um nome, o fator emocional ainda é importante no desenvolvimento de um projeto. Os níveis de design emocional defendidos por Norman (2008) são fatores preponderantes no desenvolvimento deste projeto, pois o design em nível visceral a construir uma ligação emocional com determinado objeto ao encontrarmos mais afinidade com o mesmo, enquanto que no nível reflexivo o design se reflete na construção de uma personalidade espelhando nossa própria imagem em um produto, intelectualizando o mesmo. São escolhas pessoais que pretendem desde a concepção do projeto, estimular o futuro consumidor através de suas cores e formas, escolhendo elementos para a definição do nome e desenvolvimento da marca, passando por cores e grafismos que remetam as principais editoras de quadrinhos, bem como a associação do nome ao personagem Homem-Aranha e ao já
45
estereotipado padrão do consumidor de cultura de massa.
Portanto, para a criação do projeto de deste estudo, foi escolhido o nome Teia
Nerd. A escolha do nome levou em considerações tanto os fatores levantados por
Wheeler (2012) como por Mauro Gaspar, e serão descritos a seguir.
A Teia Nerd atuará na criação e comercialização de produtos relacionados a cultura pop através de loja virtual, e para isso um nome curto e de fácil escrita e pronúncia se fazia necessário. A escolha pelo termo nerd ao invés de geek se dá devido ao enraizamento e popularização do termo em nossa cultura, com os termos muitas vezes sendo considerados a mesma coisa. Erick Itakura, psicólogo do Núcleo de Pesquisa em Psicologia e Informática da Clínica da Pontifícia Universidade Católica de São Paulo, defende essa teoria24, em sua opinião, “o que mudou ao longo
dos anos foi a aceitação social das pessoas ligadas em tecnologia”.
Portanto, a escolha do nome Teia Nerd se dá por enquadrar-se nas dez regras básicas para criação de naming, e por ser um nome voltado estrategicamente para um público alvo, que são os consumidores de produtos da cultura de massa. Será uma empresa ligada a fatores exemplificados por Wheeler que permitirá a fácil memorização e fidelização dos clientes com a marca.
5.2. IDENTIDADE VISUAL
O capítulo a seguir destina-se a construção e estruturação dos elementos visuais que compõem a identidade visual da Teia Nerd. A identidade deve conter elementos que transmitam uma mensagem ao seu público alvo, e para a construção de tal símbolo são necessários fatores como estudo de cores, tipos e formas.
5.2.1. PAINEL SEMÂNTICO
A análise do painel semântico consiste em associar imagens a essência da
24
http://zerohora.clicrbs.com.br/zerohora/jsp/default2.jsp?uf=1&local=1&source=a1727028.xml&template=3898. dwt&edition=9069
46
marca, com o intuito de indicar elementos que sejam relevantes para a construção da identidade visual da marca.
Figura 16 - Painel semântico de personagens Fonte: Edição do autor (2017)
Além de informar e comunicar determinado público, uma imagem deve transmitir emoções e sentimentos, e essa é uma das tarefas que personagens de quadrinhos e cinema conseguem realizar, a partir do momento que o fã cria empatia e acompanha a jornada de seu personagem preferido. Talvez seja esse o grande segredo para que o mercado de cultura pop ocupe tanto espaço nas grandes mídias, pois é cada vez maior o número de pessoas que se interessam por esse meio, indo buscar nos primórdios da criação daquele personagem que mais lhe cativou, sua história, crescimento, provações e conquistas.
Figura 17 - Marcas de personagens Fonte: Edição do autor (2017)
47
As marcas relacionadas a personagens e franquias de super-heróis e ficção científica passam por poucas mudanças ao longo dos anos, sofrendo algumas variações de acordo sempre com a fase pela qual o personagem está passando, mas em essência os formatos se mantém. Isso serve para cativar o público e de certa forma mantê-lo sempre íntimo daquele personagem que pode estar acompanhando há anos. Nada mais é do que a fidelização do cliente pela marca.
A identificação de elementos que possam ser utilizados como referência no processo criativo através do painel semântico contribuíra para a criação da identidade visual da marca Teia Nerd, destacando-se algumas características como linhas bem definidas, simplicidade na estrutura visual e em suas aplicações, cores contrastantes e predominância de cores quentes.
Os painéis semânticos contribuíram ao apresentar direcionamentos para a geração de alternativas na criação da marca Teia Nerd.
5.2.2. GERAÇÃO DE ALTERNATIVAS
Baseado nas definições de posicionamento da marca e na análise dos painéis visuais, iniciou-se a geração de alternativas da marca Teia Nerd. Foram criadas alternativas que incorporam linhas firmes e fluídas, tipografia de fácil leitura e elementos ligados a cultura pop ou que façam alusão ao nome da marca.
O processo de criação divide-se em cinco etapas, sendo: Geração de sketches manuais;
Seleção de alternativa; Estudo cromático; Estudo tipográfico; Proposta final.
