DESIGN NO DESENVOLVIMENTO DE LOJA VIRTUAL: DO...
111
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
Transcript of DESIGN NO DESENVOLVIMENTO DE LOJA VIRTUAL: DO...
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
de Lima.
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 comorequisito 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êmicode Desenho Industrial, da Universidade Tecnológica Federal do Paraná. O aluno foiarguido pela Banca Examinadora composta pelos professores abaixo, que apósdeliberação, consideraram o trabalho aprovado.
Banca Examinadora: Profa. Priscila Daienny Zimermann Nardon (Esp.)AvaliadoraDADIN – UTFPR
Prof. Kleiton Semensatto da Costa (MSc.)ConvidadoDADIN – 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çãoUniversidade Tecnológica Federal do ParanáCâmpus CuritibaDiretoria de Graduação e Educação ProfissionalDepartamento 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,
Cinema, Séries, Marca, Loja Virtual, Web Design, User Experience, Responsivo
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 31 - Escopo de funções de página institucional ............................................. 60
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
Figura 56 - Caixa para camiseta ............................................................................... 85
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 4 http://www.boxofficemojo.com/franchises/chart/?id=lucasfilm.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/ 6 http://www.fecomercio.com.br/upload/pdf/2015/13/C&S-33.pdf
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.
“A comunicação visual é assim, certos casos, um meio insubstituível de passar
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 11 https://alistapart.com/article/responsive-web-design
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.
12 https://www.lukew.com/resources/mobile_first.asp
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 http://revistagalileu.globo.com/Revista/Common/0,,EMI110213-17770,00-
ICONES+POP+CAEM+EM+DOMINIO+PUBLICO.html
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.
15 https://slackprop.wordpress.com/2013/06/03/on-geek-versus-nerd/
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.
16 http://www.proselex.net/documents/the%20new%20hacker%27s%20dictionary.pdf
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 22 www.lojadccomics.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 semelhante presente 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á
23 http://designculture.com.br/10-regras-de-ouro-para-criacao-de-um-naming-parte1
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.
48
Figura 18 - Geração de sketches manuais Fonte: Edição do Autor (2017)
5.2.3. SELEÇÃO DE ALTERNATIVAS
Considerando-se os níveis do design emocional, conforme definidos por
Norman (2008), a escolha da alternativa está relacionada também ao vínculo com o
nível visceral, numa tentativa que a marca seja capaz de trazer ao usuário emoções
que o levem a desenvolver laços afetivos em sua interação com a marca.
A partir das alternativas geradas através de sketches manuais, optou-se pela
escolha da proposta 08 por entender que a mesma possui elementos gráficos e
tipográficos que criarão maior identificação com o público e com a marca. A teia
presente no projeto gráfico da marca busca aproximar-se de fãs do personagem
Homem-Aranha, um dos principais personagens da Marvel. Já a tipografia escolhida
tenta identificar-se com leitores de quadrinhos em geral, pelo fato de apresentar
elementos gráficos que se assemelham a títulos de personagens da Disney, Marvel e
Turma da Mônica, como mostra a imagem a seguir. Os elementos da marca estão
diretamente relacionados ao seu mercado de atuação, com a coesão de elementos
gráficos que unem símbolos e tipografia.
49
Figura 19 - Alternativa selecionada Fonte: Edição do Autor (2017)
5.2.4. ESTUDO CROMÁTICO
A paleta cromática escolhida para o desenvolvimento da marca Teia Nerd
apoia-se na análise dos painéis semânticos expostos, trazendo cores vibrantes,
contrastantes e presentes entre a grande maioria dos personagens relacionados a
cinema e quadrinhos, buscando ainda uma aproximação com a paleta cromática de
duas empresas responsáveis por arrastar multidões para o mercado da cultura de
massa: DC Comics e Marvel. A busca pela associação da marca com os personagens
relacionados a estas duas empresas faz parte do processo de inserção da marca no
mercado da cultura pop, e isso se dá também através da fixação de cores da marca
no consciente de seus clientes, essa percepção se dá pelo significado que as cores
representam dentro do contexto em que os fãs de cultura de massa estão inseridos.
Figura 20 - Marcas DC Comics e Marvel Fonte: Edição do Autor (2017)
50
Figura 21 - Paleta cromática Teia Nerd Fonte: Edição do Autor (2017)
A escolha dessa paleta cromática se complementa pelo significado atribuído a
essas cores. Segundo informações do site Viver de Blog25, enquanto o azul é
associado a intelectualidade, criatividade e promove a confiança numa marca, o
vermelho é associado a paixão, emoção, além de prover um sentido de proteção do
medo, combinação perfeita para uma marca relacionada a cultura de massa.
5.2.5. ESTUDO TIPOGRÁFICO
Tipografia é um dos elementos que compõem a identidade visual de uma
marca. Para Perreira:
“Tipologia ou tipografia é o conjunto de caracteres – letras, algarismos e sinais, seu
estilo, formato, tamanho e arranjo visual, que constituem a composição dos textos,
usada num projeto gráfico.” (Perreira, 2004, p.4)
O processo de escolha de tipografia deve levar em consideração o fato de que
o acerto na escolha da tipografia contribuirá positivamente para o sucesso da
representação da empresa. A escolha da tipografia para este projeto de identidade
visual levou em consideração a escolha por uma família tipográfica que apresentasse
25 https://viverdeblog.com/psicologia-das-cores/
51
legibilidade e fácil leitura, mesmo em tamanhos reduzidos.
Figura 22 - Estudo Tipográfico Fonte: Edição do Autor (2017)
Seguindo os estudos realizados, definiu-se como tipografia principal a família
Minnie. Essa escolha se deu pelo fato da tipografia apresentar características
inerentes a marcas relacionadas a cultura pop, como a legibilidade e simplicidade da
fonte, curvas e linhas bem definidas. Essas características colaboram para a aplicação
da marca em diversos meios e em diferentes tamanhos, sem comprometer a leitura e
legibilidade da marca.
Figura 23 - Família tipográfica Minnie Fonte: Edição do Autor (2017)
Como tipografia auxiliar, optou-se pela família Gotham por apresentar uma
variedade de pesos e estilos, colaborando para a aplicação de informações com
coerência com os demais elementos visuais da marca.
52
Figura 24 - Tipografia auxiliar Gotham Fonte: Edição do Autor (2017)
5.2.6. ALTERNATIVA FINAL
Após escolha do sketch manual e dos estudos cromático e tipográfico, iniciou-
se o processo de vetorização e refinamento da marca, destacando que problemas
como redução de marca e equilíbrio entre símbolo e tipografia foram resolvidos de
modo que o resultado abaixo, representa a essência daquilo que a marca Teia Nerd
deseja transmitir através de sua identidade visual. O manual da marca está anexado
nos apêndices do projeto.
Figura 25 – Projeto gráfico escolhido para a marca Teia Nerd Fonte: Edição do Autor (2017)
53
5.3. LOJA VIRTUAL
Desenvolvida a identidade visual da marca, requer-se o desenvolvimento de
sua loja virtual. O desenvolvimento deste layout se dará através das aplicações
conjuntas das metodologias de projeto desenvolvidas por Bruno Munari e Garrett,
sendo a metodologia de Munari aplicada para a especificação do problema, coleta e
análise de informações e do desenvolvimento de soluções, e a metodologia de Garrett
aplicada para o desenvolvimento do layout da loja virtual, ambas adaptadas de acordo
com as necessidades do projeto.
5.4. METODOLOGIA DE MUNARI
A metodologia de Munari prevê doze etapas, onde trata de uma sequência de
etapas criadas para facilitar o desenvolvimento do projeto. São instruções, que
seguidas passo a passo simplificam e agilizam o processo de desenvolvimento.
Figura 26 - Metodologia de Munari Fonte: Edição do Autor (2017)
5.5. METODOLOGIA DE GARRETT
A metodologia de Garret (2003) divide-se em cinco níveis:
54
Nível 1 – Estratégia: identifica-se as necessidades dos usuários e objetivos do
website, verificações e identificações dos requisitos e restrições do projeto.
Nível 2 – Escopo: define-se os elementos, conteúdo, características e
funcionalidades do website.
Nível 3 – Estrutura: define-se as categorias, organização, desenho de interação
e arquitetura de informação do website.
Nível 4 – Esqueleto: desenvolvimento da interface do website (wireframes),
distribuição de botões, imagens e demais elementos inerentes à página.
Nível 5 – Superfície: definição do layout com base na identidade.
A metodologia de Garret insere o usuário como o centro do processo, focando
na organização da interface como fator de importância no processo de
desenvolvimento, pois a definição de sucesso ou não do website se dará pela forma
que o usuário irá desempenhar as suas funções nele e se a navegação será eficiente.
5.6. ADAPTAÇÃO DAS METODOLOGIAS
O desenvolvimento do layout para a loja virtual se dará a partir das informações
adquiridas pela pesquisa da metodologia de Munari, adaptada à metodologia de
Garrett, visando um desenvolvimento amplo e metódico, conforme representado na
imagem a seguir.
55
Figura 27 - Adaptação das metodologias Fonte: Edição do Autor (2017)
5.6.1. PROBLEMA E SUA DEFINIÇÃO
O objetivo desta etapa do projeto é desenvolver o layout para loja virtual da
marca Teia Nerd, focando no desenvolvimento de página principal, página de produto
e uma página estática para conteúdo institucional. Deverão ser adotados métodos de
web design responsivo e mobile first para a criação do layout.
AD
AP
TA
ÇÃ
O D
AS
ME
TO
DO
LO
GIA
S
PROBLEMA
DEFINIÇÃO DO PROBLEMA ESTRATÉGIA
COMPONENTES DO PROBLEMA
COLETA DE DADOS
ANÁLISE DE DADOS ESCOPO
CRIATIVIDADE
MATERIAIS E TECNOLOGIA
EXPERIMENTAÇÃO
MODELO ESTRUTURA
VERIFICAÇÃO
DESENHO DE CONSTRUÇÃO ESQUELETO
SOLUÇÃO SUPERFÍCIE
56
5.6.2. BRIEFING E ESTRATÉGIA
O foco desta etapa do projeto é verificar a necessidade do usuário e objetivos
do website. Para isso, foi desenvolvido um briefing sobre a marca e os objetivos que
a mesma deseja alcançar.
A Teia Nerd é uma marca que pretende ingressar no mercado da cultura de
massa, aqui denominada cultura pop. Focada no desenvolvimento de produtos
exclusivos através da cultura do remix, serão desenvolvidos produtos de personagens
que se encontram em domínio público, apoiando-se ainda nos limites do direito
autoral, fugindo do normal e buscando um encontro com o incomum, com o inusitado.
A inspiração da empresa surge de todas as vertentes da cultura de massa, do
quadrinho ao cinema, da animação à série de TV, do jogo de tabuleiro ao jogo de
realidade virtual, buscando estampar em seus produtos personagens e momentos
marcantes, entregando a seus clientes produtos que não só apenas gostariam de
utilizar no seu cotidiano, mas de colecionar, presentear e reconhecer a essência da
Teia Nerd em cada detalhe de seus produtos.
O público-alvo da Teia Nerd é todo potencial consumidor fã ou admirador de
cultura pop, conforme pesquisa Geek Power 201626, o público ficará inicialmente
delimitado entre jovens de 18 a 34 anos, com renda entre 2 e 10 salários mínimos,
mas ainda assim buscando levar em consideração classes econômicas de menor
poder aquisitivo, permitindo que toda pessoa possa ter acesso a um produto
personalizado com as estampas desenvolvidas pela marca.
5.6.3. COMPONENTES DO PROBLEMA
Segmento de mercado, público-alvo, produtos trabalhados, layout, distribuição
de informações, fluxo de navegação, desenvolvimento de três páginas: página inicial,
página de produto e página estática institucional.
26 http://www.ibopeinteligencia.com/noticias-e-pesquisas/omelete-e-conecta-mapeiam-os-habitos-do-
consumidor-de-cultura-pop-do-brasil/
57
5.6.4. COLETA DE DADOS
De acordo com a pesquisa e análise de similares realizada no capítulo 5 e
também por meio de painel semântico exibido a seguir, as informações sobre cada
similar serão relevantes para moldar a identidade e modo de comunicação online da
loja virtual da marca Teia Nerd.
Figura 28 - Painel semântico de lojas similares Fonte: Edição do Autor (2017)
5.6.5. ANÁLISE DOS DADOS
Por meio da pesquisa e análise de similares realizada no capítulo 5, foi possível
perceber que apesar de atuarem em um mesmo nicho de mercado, as empresas
pesquisadas utilizam diferentes estratégias visuais na composição do layout de suas
lojas virtuais. Enquanto algumas das empresas preferem destacar áreas da loja virtual
58
como banner de promoções, outras preferem o destaque na imagem dos produtos,
estratégias diferentes que tem o mesmo objetivo como finalidade. Percebe-se ainda
um padrão no modo em que as informações são distribuídas.
5.6.6. ESCOPO
O objetivo desta etapa do projeto é especificar os elementos, conteúdo,
características e funções que farão parte do website. Será detalhado a seguir os
elementos que devem fazer parte do website, dividindo-se a página em áreas como
topo, miolo e rodapé. Esse processo será feito para a página inicial e repetido nas
páginas de produto e contato.
Figura 29 - Escopo de funções da página inicial Fonte: Edição do Autor (2017)
PÁGINA INICIAL
TOPO
LOGOTIPO
MENU INSTITUCIONAL
TELEFONE
ÍCONES DE REDES SOCIAIS
BUSCA
CARRINHO DE COMPRAS
MENU DE CATEGORIAS
BANNER DE OFERTAS
MIOLO
PEQUENOS BANNERSDE DESTAQUES
PRODUTOS -LANÇAMENTOS
PRODUTOS -
DESTAQUES
RODAPÉ
CADASTRO DE E-MAIL
MEIOS DE CONTATO
MENU INSTITUCIONAL
PÁGINA DO FACEBOOK
POSTAGENS DO INSTAGRAM
MEIOS DE PAGAMENTO
SELO DE SEGURANÇA
59
Figura 30 - Escopo de funções da página do produto Fonte: Edição do Autor (2017)
PÁGINA DO PRODUTO
TOPO
LOGOTIPO
MENU INSTITUCIONAL
TELEFONE
ÍCONES DE REDES SOCIAIS
BUSCA
CARRINHO DE COMPRAS
MENU DE CATEGORIAS
BANNER DE OFERTAS
MIOLO
FOTOS DO PRODUTO
CATEGORIA E SUBCATEGORIA
NOME DO PRODUTO
PREÇO
QUANTIDADE
BOTÃO COMPRAR
CÁLCULO DE FRETE
DESCRIÇÃO DO PRODUTO
DEPOIMENTOS
RODAPÉ
CADASTRODE E-MAIL
MEIOS DE CONTATO
MENU INSTITUCIONAL
PÁGINA DO FACEBOOK
POSTAGENS DO INSTAGRAM
MEIOS DE PAGAMENTO
SELO DE SEGURANÇA
60
Figura 31 - Escopo de funções de página institucional Fonte: Edição do Autor (2017)
PÁGINA INSTITUCIONAL / CONTATO
TOPO
LOGOTIPO
MENU INSTITUCIONAL
TELEFONE
ÍCONES DE REDES SOCIAIS
BUSCA
CARRINHODE COMPRAS
MENU DE CATEGORIAS
BANNER DE OFERTAS
MIOLO
TÍTULO DA PÁGINA
TEXTO DESCRITIVO
FORMULÁRIO DE CONTATO
BOTÃO ENVIAR
RODAPÉ
CADASTRODE E-MAIL
MEIOS DE CONTATO
MENU INSTITUCIONAL
PÁGINA DO FACEBOOK
POSTAGENS DO INSTAGRAM
MEIOS DE PAGAMENTO
SELO DE SEGURANÇA
61
5.6.7. CRIATIVIDADE
Será necessário o desenvolvimento de um layout que imponha sua identidade,
valorizando áreas para divulgação de promoções e produtos, incorporando elementos
gráficos que criem identificação da loja com o seu público-alvo.
5.6.8. MATERIAIS E TECNOLOGIA
Parte do desenvolvimento deste projeto se deu através da geração de
alternativas manuais, utilizando-se apenas de materiais como papel sulfite, lápis e
caneta. As alternativas manuais foram digitalizadas com auxílio de escâner.
Para prosseguir com o desenvolvimento do projeto, foram utilizados softwares
como Adobe Fireworks para o desenvolvimento do layout e Adobe Photoshop para
tratamento de imagens e simulação de produtos.
5.6.9. EXPERIMENTAÇÃO
Pertinente a etapa de experimentação, foi realizada uma pesquisa de imagens
relacionadas a lojas virtuais do mesmo segmento, sendo assim possível o início do
processo de criação do website.
62
Figura 32 - Rascunho de estrutura de página inicial e de produto para layout desktop Fonte: Edição do Autor (2017)
5.6.10. MODELO
Pertinente a etapa apresenta-se o modelo de estrutura de página inicial para a
loja virtual, considerando a metodologia mobile first, com versões para dispositivos
mobile e desktop. A versão mobile contempla a possibilidade de rolagem de página,
mantendo uma faixa fica com ícone para acesso ao menu, logotipo, carrinho de
compras e busca de produtos.
63
Figura 33 - Estrutura da página inicial para versão mobile Fonte: Edição do Autor (2017)
64
Figura 34 - Estrutura da página inicial para versão desktop Fonte: Edição do Autor (2017)
65
5.6.11. ESTRUTURA
A esta etapa do projeto cabe a apresentação do mapa do site, representando
de maneira clara o desenvolvimento do fluxo de informações, com o intuito de facilitar
a navegação do usuário.
Figura 35 - Mapa do site Fonte: Edição do Autor (2017)
Página Inicial
Categorias
Almofadas
Camisetas
Canecas
Cadernos
Chaveiros
Botons
Porta Copos
Pôster
Taça de Chopp
Página do produto
Minha Conta
Login
Cadastro
Esqueci a senha
Termos e condições
Carrinho
Carrinho de compras
Endereço para entrega
Pagamento
Confirmar pagamento
Institucional
Quem somos
Medidas de camisetas
Trocas e devoluções
Forma de pagamento
Forma de envio
Perguntas frequentes
Fale Conosco
66
5.6.12. VERIFICAÇÃO
Após o desenvolvimento da estrutura para a página inicial da loja virtual, fez-se
necessário o desenvolvimento de layout que previsse situações de uso de áreas
específicas da loja em dispositivos mobile, como busca, acesso ao menu e acesso ao
carrinho de compras.
Figura 36 - Ações em acesso pela versão mobile Fonte: Edição do Autor (2017)
5.6.13. DESENHO DE CONSTRUÇÃO / ESQUELETO
Após as alternativas de estrutura que foram criadas para a loja virtual, faz-se
necessário a criação de wireframe que demonstre como se portarão as páginas de
produto e página de contato, tanto na versão mobile como na versão desktop.
67
Figura 37 - Página inicial e página de contato para versão mobile Fonte: Edição do Autor (2017)
68
Figura 38 - Página de produto para versão desktop Fonte: Edição do Autor (2017)
69
Figura 39 - Página de contato para versão desktop Fonte: Edição do Autor (2017)
70
5.6.14. SOLUÇÃO
Cabe após a produção do layout para a loja virtual Teia Nerd, realizar
comparação com a análise de similares realizada no capítulo 5, com o intuito de se
apontar o que se manteve alinhado aos similares e o que foi desenvolvido diferente.
Com relação a versão mobile, na área superior do layout, o topo, pode-se
apontar uma aproximação com as lojas Nerdstore, Geek Store Brasil e Loja DC
Comics, onde optou-se por utilizar uma versão alternativa de assinatura da marca,
permitindo assim uma versão compacta do topo, com acesso rápido ao menu, carrinho
de compras e busca e ícones. O ícone de acesso ao menu foi posicionado a esquerda
da marca, permitindo assim a abertura do menu surgindo pelo lado esquerdo da tela.
Já os ícones de busca e carrinho de compras foram estrategicamente inseridos no
canto direito da faixa superior, de modo que permaneçam sempre visíveis ao usuário.
Na versão desktop, optou-se por uma estrutura diferenciada das lojas similares,
mantendo a marca no lado esquerdo, e dividindo o restante da área em duas faixas
horizontais, cuja faixa superior recebe o menu de acesso a conta do usuário, telefone
e redes sociais, enquanto itens que foram julgados de maior importância como a busca
e o carrinho de compras foram posicionados na faixa inferior. Com relação ao banner
principal, manteve-se abaixo desta área tanto na versão mobile como na versão
desktop.
A área central do layout, destinada a inserção de conteúdo dinâmico foi
desenvolvida de maneira a se afastar da estrutura pensada pelos similares. A página
inicial foi estrutura com banners de menor destaque, e duas categorias de produtos.
Aqui, a diferença entre mobile e desktop, é que na versão mobile todos os produtos
não são exibidos ao mesmo tempo, mas sim com setas laterais para que o usuário
possa visualizar novos produtos. Essa solução foi pensada com o intuito que o usuário
não tenha uma rolagem de tela muito grande quando estiver realizando o acesso por
seu dispositivo mobile.
Em relação a área inferior do layout, o rodapé, o conteúdo aproximou-se do que
já é exibido por seus similares, mantendo o mesmo conteúdo para versões mobile e
desktop, com a diferença de que a versão mobile não possui imagens como apelo
gráfico no background, permitindo assim o carregamento de página mais veloz,
melhorando a experiência do usuário no acesso mobile a loja virtual.
71
5.6.15. SUPERFÍCIE
Como resultado final deste projeto serão apresentados a seguir os layouts
criados para a página inicial, página de produto e página de contato da loja virtual.
Figura 40 - Layout mobile para loja Teia Nerd Fonte: Edição do Autor (2017)
72
Figura 41 - Layout mobile com ações Fonte: Edição do Autor (2017)
73
Figura 42 - Layout desktop para página inicial Fonte: Edição do Autor (2017)
74
Figura 43 - Layout desktop para página de produto Fonte: Edição do Autor (2017)
75
Figura 44 - Layout desktop para página de contato Fonte: Edição do Autor (2017)
76
6. DESENVOLVIMENTO DE PRODUTOS
Dando prosseguimento ao projeto de lançamento da marca Teia Nerd, faz-se
necessário a criação de estampas que venham a figurar nos produtos comercializados
pela empresa. Como salientado, a marca atuará na criação de produtos originais,
inspirados em personagens da cultura de massa através da cultura do remix,
permitindo a criação de novos produtos através da adição de materiais existentes e
da derivação ou combinação de situações e/ou personagens já enraizados na cultura
de massa. Os modelos criados a seguir servem como exemplo de como funcionará o
processo de concepção das estampas de produtos.
6.1. ESCOLHA DE TEMAS
Após pesquisa realizada pelo desenvolvedor deste projeto, entre quadrinhos,
cinema, séries de TV envolvendo personagens de super-heróis e ficção científica que
pudessem ser combinados para a criação de novos produtos, chegou-se a escolha de
alguns personagens e franquias para criação de estampas, descritos abaixo.
6.2. ESTAMPA 1
A banda Ramones faz parte do cenário da cultura pop há décadas, seu primeiro
álbum ‘Ramones’ revolucionou o mercado musical e se tornou símbolo de mudanças
culturais e comportamentais que se mantém atuais até o presente. A banda ficou
reconhecida por suas letras simples que falavam desde amor a homenagens a filmes
de terror, pelo modo em que os integrantes se vestiam, seus cabelos, tornando-se
sucesso entre os jovens da época. Canções como ‘Blitzkrieg Bop’ fizeram e ainda
fazem parte da trilha sonora de séries de TV e filmes de sucesso entre o público da
cultura de massa, caso mais recente do filme Spider-Man Homecoming27.
Já a série de ficção científica Fringe, exibida entre 2008 e 2013, ganhou o status
27 http://www.imdb.com/title/tt2250912/soundtrack
77
de cult28 devido ao apego dos fãs pela mesma e pelo bem elaborado enredo que
moveu a história por cinco anos. A série cujo enredo mesclava ficção científica em um
cenário contemporâneo possuía em seu elenco principal uma equipe com quatro
personagens, um ponto em comum com a banda Ramones. Para o desenvolvimento
da estampa, foram utilizados elementos gráficos da série e nomes de personagens
para se criar uma estampa que remetesse a marca da banda Ramones.
Figura 45 – Fringe Fonte: O Autor (2017)
Figura 46 - Marca Ramones e elenco principal da série Fringe Fonte: Edição do Autor (2017)
28 https://www.ligadoemserie.com.br/2013/01/fringe-a-batalha-final-e-hoje/
78
6.3. ESTAMPA 2
A banda Green Day é um grupo de punk rock californiano formado em 198729,
com canções em filmes que fizeram sucesso entre o público jovem, como American
Pie30. Antes do nome Green Day, a banda se chamava Sweet Children, que é uma
gíria para aqueles que passam o dia sem fazer suas obrigações e fumando
maconha31. Já a série Breaking Bad32 se tornou popular pela sua narrativa que mistura
suspense, drama e até mesmo humor negro, onde um professor de química frustrado
e endividado, descobre uma doença e pensando em deixar sua família em uma
situação financeira estável, abraça o mundo do crime produzindo drogas, em parceria
com um ex-aluno.
A ligação entre a banda e a série se dá pelo assunto em comum entre ambas,
as drogas, através da narrativa da série e a referência do nome inicial da banda. A
estampa criada, altera a marca da série de TV, utilizando o nome da banda e o seu
ano de fundação, fazendo alusão a elementos da tabela.
Figura 47 - Green Day Fonte: O Autor (2017)
29 https://www.facebook.com/pg/GreenDay/about/?ref=page_internal 30 http://www.imdb.com/title/tt0252866/soundtrack 31 https://mundoestranho.abril.com.br/musica/as-origens-dos-nomes-de-25-bandas-como-queen-muse-coldplay-
e-outras/ 32 http://www.amc.com/shows/breaking-bad
79
Figura 48 - Marca Breaking Bad e banda Green Day Fonte: Edição do Autor (2017)
6.4. ESTAMPA 3
Por vezes o filme de um personagem de quadrinhos torna-se tão popular que
frases do filme se tornam marcantes, a ponto de inspirar a criação de produtos e até
mesmo como motivação pessoal para alguém ligado ao personagem. Na trilogia O
Cavaleiro das Trevas, dirigido por Christopher Nolan, a frase “Por que caímos?” se
tornou tão popular quanto os personagens do filme. Nessa estampa que mistura
lettering e efeitos grunge, a frase ganha um layout que pode ser aplicado em qualquer
tipo de produto.
Figura 49 - Why do we fall? Fonte: O Autor (2017)
80
7. PONTOS DE CONTATO
Os pontos de contato consistem em representar a empresa nos mais variados
tipos de mídia, transmitindo a essência da marca de forma autêntica e harmoniosa.
Os materiais desenvolvidos para a Teia Nerd e exibidos a seguir são os necessários
para a abertura da empresa, devido ao seu modelo de negócios (vendas online).
Segundo Wheeler (2012), a integração entre os materiais de identidade visual
de uma empresa facilita a compreensão de informações e a tomada de decisão pelos
consumidores.
7.1. APLICAÇÕES BÁSICAS
Tendo em vista o modo operacional da empresa, no qual os produtos serão
comercializados exclusivamente pela internet e divulgado em redes sociais, as
aplicações devem prever a interação fornecedores e consumidores. Como o foco
deste trabalho é o desenvolvimento da loja virtual, o foco desta etapa serão aplicações
básicas como cartão de visitas, papel timbrado, pasta, redes sociais e embalagens
para acomodação de produtos.
O desenvolvimento do material a seguir é fundamentado em etapas do
processo de criação de Wheeler (2012). Seu desenvolvimento busca a coerência
visual dos pontos de contato da empresa e leva em consideração, questionamentos
levantados por Wheeler (2012): “Quem usa?”, “Quais as informações essenciais?”.
Respondendo essas questões, é correto afirmar que quem fará uso desses materiais
são fornecedores e consumidores finais, e as informações essenciais são a marca e
as informações de contato, tendo em vista que tais materiais ainda informam o
endereço do site da empresa, que é também o principal meio de divulgação da
mesma. Portanto, foi criado uma comunicação coerente, atrativa e que conversa com
todos os pontos de contato da empresa.
81
Figura 50 - Cartão de Visitas Fonte: O Autor (2017)
Figura 51 - Papel Timbrado Fonte: O Autor (2017)
82
Figura 52 – Pasta Fonte: O Autor (2017)
Figura 53 - Rede social Fonte: O Autor (2017)
83
7.2. EMBALAGENS
Cabe ao designer enxergar as circunstâncias de cada projeto, inclusive aqueles
com limitadores, como orçamento. Levando esse fator em consideração, foram
desenvolvidas embalagens com diretrizes visuais que podem ser seguidas
futuramente, além de permitir possíveis ajustes para inserção de informações
institucionais ou de contato.
Figura 54 – Sacola Fonte: Edição do Autor (2017)
84
Figura 55 - Caixa para caneca Fonte: Edição do Autor (2017)
85
Figura 56 - Caixa para camiseta Fonte: Edição do Autor (2017)
7.3. ESPECIFICAÇÕES
Após o desenvolvimento dos materiais da empresa, é necessário documentar
as definições da marca e de seus pontos de contato, garantindo assim a sua
reprodução de maneira correta.
86
8. CONSIDERAÇÕES FINAIS
O desenvolvimento da pesquisa e a utilização na prática de metodologias que
auxiliam no desenvolvimento de um projeto deste porte possibilitou compreender o
contexto deste mercado em franca expansão e compreender conceitos que permitam
a criação de novos produtos, indo de acordo com o que o público alvo anseia. O design
e suas vertentes foram responsáveis diretos pela criação de uma nova marca e
empresa, instigando a mesma a atuar num concorrido mercado de igual para igual
com qualquer empresa concorrente, permitindo inclusive o lançamento de uma marca
com pontos de contato que garantem uma comunicação mais eficaz entre empresa e
consumidor/fornecedor.
Identificou-se que as metodologias adotadas foram satisfatórias, tendo em vista
que através de sua adaptação e aplicação no projeto, suas etapas foram plenamente
efetivas ao atender as necessidades de desenvolvimento deste projeto. Através deste
projeto foi possível observar o processo completo para o desenvolvimento de uma
nova marca, desde o naming a pontos de contato. Desta forma, conclui-se que os
materiais desenvolvidos representam a tradução de conceito, estratégia e imagem
criadas nos conceitos de naming, design de identidade e design de website desta
marca. Os resultados finais comprovam a sintonia e coerência visual entre todas os
materiais da marca, demonstrando que o processo de desenvolvimento deste projeto
possui potencial para aplicação futura em projetos similares, evidenciando a força que
o design impõe no surgimento de uma nova empresa.
A consistência no conceito criado com este projeto contribui para a
consolidação da marca no mercado de cultura de massa, e em conjunto com um
consistente plano de negócios, permitirá a empresa obter uma visão animadora de
seu negócio desde a sua criação até a real inserção no mercado.
87
REFERÊNCIAS
A LIST APART. Responsive web design. 2010. Disponível em
https://alistapart.com/article/responsive-web-design. Acesso em: 16, Outubro, 2017.
AVORIO, André. SPYER, Juliano. Para Entender a Internet. Edição: 1ª. 2009.
CARDOSO, Rafael Denis. Uma introdução à história do design. São Paulo, Edgard
Blücher, 2000.
CUCHE, Denys. A noção de cultura nas ciências sociais. Bauru, Edusc, 1999.
DICTIONARY. Geek. Disponível em http://www.dictionary.com/browse/geek. Acesso
em: 16, Setembro, 2017.
ÉPOCA. Comic Con Experience 2016: o evento cresceu e deixou de ser apenas
para nerds. São Paulo, 2017. Disponível em
http://epoca.globo.com/cultura/noticia/2016/12/comic-con-experience-2016-o-evento-
cresceu-e-deixou-de-ser-apenas-para-nerds.html. Acesso em 18, Junho, 2017.
GALVÃO, Danielle Pini. Os nerds ganham poder e invadem a TV. Revista Científica
Eletrônica Intraciência. Guarujá, 2009.
GARRETT, James. The elements of user experience: user-centered for the web.
New Rider, 2003.
GAÚCHA ZERO HORA. Marco da cultura pop, primeiro disco dos Ramones foi
lançado há 40 anos. Porto Alegre, 2016. Disponível em
https://gauchazh.clicrbs.com.br/cultura-e-lazer/noticia/2016/04/marco-da-cultura-pop-
primeiro-disco-dos-ramones-foi-lancado-ha-40-anos-5785536.html. Acesso em 18,
Outubro, 2017.
HABERMAS, Jurgen. Mudança estrutural da esfera pública. Rio de Janeiro, Tempo
88
Brasileiro, 1984.
IMDB. Homem-Aranha: De volta ao lar. 2017. Disponível em
http://www.imdb.com/title/tt2250912/soundtrack. Acesso em 19, Outubro, 2017.
JOTA. Moda, business e direito. São Paulo, 2017. Disponível em
https://jota.info/advocacia/moda-business-e-direito-04112014. Acesso em: 15, Junho,
2017.
LIGADO EM SÉRIE. Fringe: a batalha final é hoje! São Paulo, 2013. Disponível em
https://www.ligadoemserie.com.br/2013/01/fringe-a-batalha-final-e-hoje/. Acesso em
20, Outubro, 2017.
LIMA, Luiz Costa. Teoria da cultura de massa. São Paulo, Paz e Terra, 2002.
LOBACH, Bernd. Design Industrial: Bases para a configuração de produtos
industriais. Edição: 1ª. São Paulo, Editora Blucher, 2001.
LOPES, S. A Web Mobile. Programe para um mundo de muitos dispositivos. São
Paulo, Casa do Código, 2013.
LUKEW. Mobile First. 2011. Disponível em
https://www.lukew.com/resources/mobile_first.asp. Acesso em 21, Outubro, 2017.
MEGGS, Philip B.; PURVIS, Alston W. História do design gráfico. São Paulo, Cosac
Naify, 2009.
MUNARI, Bruno. Das coisas nascem as coisas. Edição: 2ª. São Paulo, Martins
Fontes, 1981.
______MUNARI, Bruno. Design e comunicação visual. Edição: 2ª. São Paulo,
Martins Fontes, 2001.
89
MUNDO ESTRANHO. As origens dos nomes de 25 bandas, como Queen,
Coldplay e outras. 2017. Disponível em
https://mundoestranho.abril.com.br/musica/as-origens-dos-nomes-de-25-bandas-
como-queen-muse-coldplay-e-outras. Acesso em 19, Outubro, 2017.
NIELSEN, Jakob; LORANGER, Hoa. Usabilidade na web: projetando sites com
qualidade. Rio de Janeiro, Campus, 2007.
NIELSEN. Brasileiros com internet no smartphone já são mais de 70 milhões.
São Paulo, 2015. Disponível em http://www.nielsen.com/br/pt/press-
room/2015/Brasileiros-com-internet-no-smartphone-ja-sao-mais-de-70-milhoes.html.
Acesso em: 21, Outubro, 2017.
NOVA ESCOLA. O que é cultura pop? São Paulo, 2017. Disponível em
https://novaescola.org.br/conteudo/1528/o-que-e-cultura-pop. Acesso em: 18, Junho,
2017.
OPUS SOFTWARE. Estatísticas de uso de celular no Brasil. São Paulo, 2016.
Disponível em https://www.opus-software.com.br/estatisticas-uso-celular-brasil.
Acesso em: 27, Outubro, 2017.
ORTEGA Y GASSET, José. A rebelião das massas. São Paulo: Martins Fontes,
2002.
PUBLICA DIREITO. Os limites dos Direitos Autorais: uma interpretação civil-
constitucional. Disponível em
http://www.publicadireito.com.br/conpedi/manaus/arquivos/anais/XIVCongresso/153.
pdf. Acesso em 20, Junho, 2017.
SANTOS, Flavio Anthero dos. O Design como Diferencial Competitivo. Edição: 1ª.
Itajaí, Editora Univale, 2000.
90
SENAC. O essencial do design gráfico. Edição: 2ª. São Paulo, Editora Senac São
Paulo, 2014.
SEVCENKO, Nicolau. A corrida para o século XXI: no loop da montanha-russa.
São Paulo, Companhia das Letras, 2009.
SILVA, M.S. Web Design Responsivo. São Paulo, Novatec, 2014.
VILLAS-BOAS, André. O que é e o que nunca foi design gráfico. Edição: 1ª. Rio de
Janeiro, 2AB, 1998.
VIVER DE BLOG. [Infográfico] A psicologia das cores no marketing e no dia-a-
dia. Disponível em https://viverdeblog.com/psicologia-das-cores. Acesso em 12,
Outubro, 2017.
WHEELER, Alina. Design de identidade da marca. Porto Alegre, Bookman, 2012.
WROBLEWSKI, L. Mobile First. New York, NY - USA: A Book Apart, 2011.
91
APÊNDICES
APÊNDICE A – MANUAL DE IDENTIDADE VISUAL
Man
ual d
e Id
enti
dad
e V
isua
l
Teia
Ner
dA
Tei
a N
erd
é u
ma
mar
ca q
ue e
stá
nasc
end
o a
go
ra n
o m
erca
do
da
cult
ura
po
p, f
oca
da
no d
esen
volv
imen
to
de
pro
dut
os
inéd
ito
s at
ravé
s d
a cu
ltur
a d
o r
emix
, de
per
sona
gen
s q
ue e
nco
ntra
m-s
e em
do
mín
io p
úblic
a e
apo
iad
a no
s lim
ites
do
dir
eito
aut
ora
l, fu
gin
do
do
no
rmal
e b
usca
ndo
um
enc
ont
ro c
om
o in
com
um, c
om
o
inus
itad
o.
A in
spir
ação
da
emp
resa
sur
ge
de
tod
as a
s ve
rten
tes
da
cult
ura
po
p, d
o q
uad
rinh
o a
o c
inem
a, d
a an
imaç
ão
à sé
rie
de
TV
, do
jog
o d
e ta
bul
eiro
ao
jog
o d
e re
alid
ade
virt
ual,
bus
cand
o e
stam
par
em
seu
s p
rod
uto
s
per
sona
gen
s e
mo
men
tos
mar
cant
es, e
ntre
gan
do
a s
eus
clie
ntes
pro
dut
os
que
não
só
ap
enas
go
star
iam
de
utili
zar
no s
eu c
oti
dia
no, m
as d
e co
leci
ona
r, p
rese
ntea
r e
reco
nhec
er a
ess
ênci
a d
a Te
ia N
erd
em
cad
a
det
alhe
de
seus
pro
dut
os.
Mar
ca -
Core
s
Mar
ca -
Core
s (N
egat
ivo)
Pale
ta d
e Co
res
Pan
tone
29
4C
C: 1
00
| M
: 87
| Y: 2
2 | K
: 20
R: 0
| G
: 56
| B
: 130
Pan
tone
18
5C
C: 3
| M
: 10
0 |
Y: 1
00
| K
: 0
R: 2
30 |
G: 1
3 | B
: 46
Mar
ca -
Pret
o e
Bran
co
Mar
ca -
Pret
o e
Bran
co (N
egat
ivo)
Mar
ca -
Tons
de
Cinz
a
Pale
ta d
e Co
res
- Ton
s de
Cin
za
G: 4
1
C: 0
| M
: 0 |
Y: 0
| K
: 84
R: 5
7 | G
: 57
| B: 5
7
G: 9
5
C: 0
| M
: 0 |
Y: 0
| K
: 63
R: 1
18 |
G: 1
18 |
B: 1
18
Redu
ção
Máx
ima
A fi
m d
e se
pre
serv
ar a
leit
urab
ilid
ade
e le
gib
ilid
ade
da
mar
ca, r
eco
men
da-
se q
ue o
tam
anho
da
mar
ca n
ão
seja
infe
rio
r a
20x2
0 m
m.
Ass
inat
uras
Co
mo
uso
em
fo
rmat
o d
e as
sina
tura
, sug
ere-
se a
uti
lizaç
ão d
o lo
go
tip
o c
om
o e
xpo
sto
na
mar
ca, o
u d
e
man
eira
mai
s si
mp
lifica
da,
co
mo
na
Seg
und
a o
pçã
o.
Uso
da
Mar
caD
eve-
se e
vita
r a
aplic
ação
da
mar
ca e
m f
und
os
colo
rid
os
ou
em s
itua
ção
que
pre
jud
ique
sua
leit
ura.
Co
ntud
o, c
aso
est
a m
edid
a se
ja in
evit
ável
, sug
ere
o u
so d
a m
arca
mo
nocr
om
átic
a, s
egui
ndo
as
ori
enta
ções
abai
xo.
EX
EM
PLO
S D
E A
PLI
CA
ÇÃ
O C
OR
RE
TA D
A M
AR
CA
EX
EM
PLO
S D
E A
PLI
CA
ÇÃ
O INCORRETA
DA
MA
RC
A
Mal
ha C
onst
rutiv
a e
Are
jam
ento
A m
alha
co
nstr
utiv
a d
efine
a o
rgan
izaç
ão d
os
elem
ento
s q
ue c
om
põ
em a
mar
ca e
tem
co
mo
ob
jeti
vo
ori
enta
r a
rep
rod
ução
da
iden
tid
ade
visu
al e
a m
anut
ençã
o d
as p
rop
orç
ões
da
mar
ca, s
eja
em a
mp
liaçõ
es o
u
red
uçõ
es. C
ons
ider
a-se
na
mal
ha c
ons
trut
iva
que
cad
a m
ód
ulo
A é
um
a un
idad
e fu
ndam
enta
l da
cons
truç
ão,
conf
orm
e re
pre
sent
ado
ab
aixo
. O u
so d
a m
arca
dev
e ai
nda
pre
ver
um c
amp
o d
e p
rote
ção
de
no m
ínim
o U
M
mó
dul
o d
a m
alha
co
nstr
utiv
a, c
om
o d
emar
cad
o e
m v
erm
elho
, vis
and
o g
aran
tir
sua
visi
bili
dad
e e
evit
ar a
inte
rfer
ênci
a d
e o
utro
s el
emen
tos
grá
fico
s em
sua
s d
ifer
ente
s ve
rsõ
es d
e us
o.
Tipo
grafi
a (M
arca
)
Minnie
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
Tipo
grafi
a (A
uxili
ar)
Gotham
ABCDEFGHIJKLM
NOPQRSTUVWXYZ
abcdefghijklmnopqrstuvw
xyz
01234567890
ABCDEFGHIJKLM
NOPQ
RSTUVWXYZ
abcdefghijklmnopqrstuvw
xyz
01234567890
Cart
ão e
Tim
brad
o
Dou
glas
Fer
raz
Fund
ador
R. D
es. A
nton
io d
e Pa
ula,
1391
, Cur
itiba
, PR
41 9
8476
.846
3
ww
w.te
iane
rd.c
om.b
r
cont
ato@
teia
nerd
.com
.br
Past
a
Cons
ider
açõe
s Fi
nais
Par
a ap
licaç
ões
em
mat
eria
is d
e co
mun
icaç
ão im
pre
ssa
(ban
ners
, car
taze
s, fl
yers
, co
nvit
es, e
tc)
e o
nlin
e
(sit
e, r
edes
so
ciai
s, a
plic
ativ
os)
, a m
arca
dev
e se
r in
seri
da
de
aco
rdo
co
m a
s es
pec
ifica
ções
que
co
nsta
m
nest
e m
anua
l de
iden
tid
ade
visu
al.
Na
imag
em a
bai
xo, p
od
e se
r o
bse
rvad
o a
ap
licaç
ão d
a m
arca
em
am
bie
nte
onl
ine.
