UNIVILLE - Universidade da Região de Joinville
Webdesign
Prof.: Guilherme Zaffari
Aluna: Isabela Loepert

DESENVOLVIMENTO ...
Sumário

Introdução

3

Posicionamento Estético

24

Estrutura do Projeto E

6

Cronograma

25

Análise Estrutural

26

An...
Sumário

Organização do Site - Card Sorting

53

Wireframes - Hipótese 4

67

Organização do Site - Descrição das

55

Wir...
Introdução

Este relatório consiste no conjunto de todas as
análises e pesquisas utilizados ao longo do
projeto. A intençã...
Introdução

O projeto apresentado neste relatório é uma
interface gráfica para Web com foco na interação
do usuário com a ...
Introdução

O Projeto E é uma metodologia projetual
desenvolvida para guiar e otimizar projetos de
interface gráfica amigá...
Estrutura do Projeto E
Desenho de Novas Experiências
Navegação, Interação e Transação

Diagramação e Composição

Arquitetu...
ESTRATÉGIA
Definição do Tema

A IGA desenvolvida neste projeto tem como tema
as Bikes Fixas. Dentre as seções abordadas,
estarão: His...
Definição do Tema

9
Palavras-Chave

Bicicleta

Consumo

Transporte

Ciclismo

Customização

Atividade Física

Tendência

10
Definição de Termos

Bicicleta: Veículo de duas rodas presas a um
quadro, movido pelo esforço do próprio usuário
através d...
Definição de Termos

Ferramentas: Recursos que os sítios virtuais construídos nos conceitos da web 2.0 possuem para
gerar ...
Definição de Termos

vos HTML do sítio. Esse tipo de estrutura permite
que o leiaute seja totalmente independente do
conte...
Definição de Termos

Folha de Estilos (estilos CSS): Uma folha de estilo
nada mais é do que o planejamento
técnico-estrutu...
Definição de Termos

Programação Visual: Compreende o desenho de
interação, a arquitetura da informação
(organização das t...
Questões Projetuais

1. O que projetar?

2. Porquê projetar?

Uma IGA composta por 12 ferramentas utilizáveis e que tem co...
Justificativa - Motivo Pessoal

A escolha do tema abordado no projeto
justifica-se pelo fato da criadora do mesmo ter um
c...
Objetivos

Conscientizar as pessoas
no uso da bicicleta como transporte
eficiente e ecológico
Tornar-se referência sobre
o...
Antecedentes - História do Tema
1871

1890

A Penny Farthing, inventada pelo
engenheiro britânico James Starley, foi
uma d...
Antecedentes - Situação do Tema
2012

Atualmente, o uso das bikes fixas superou o uso profissional
e esportivo. Sua popula...
Antecedentes - História do Gênero do Site
Ebay - Site de Comércio Eletrônico

1995

1996

Fundada nos EUA por Pierre Omydi...
Antecedentes - Estado da Arte
Ebay - Site de Comércio Eletrônico

2012

Atualmente, o Ebay é o maior site de compra e vend...
Posicionamento - Público-Alvo

A IGA desenvolvida neste projeto tem
como público-alvo homens e mulheres
de 18 a 30 anos qu...
Posicionamento Estético

24
DEZEMBRO

NOVEMBRO

OUTUBRO

SETEMBRO

AGOSTO

JULHO

JUNHO

MAIO

ABRIL

MARÇO

FEVEREIRO

JANEIRO

Cronograma

25
Análise Estrutural - Site Caloi
http://www.caloi.com/home/

26
Análise Estrutural - Wireframes
http://www.caloi.com/home/

27
Análise Estrutural - Manchas Gráficas
http://www.caloi.com/home/

28
Análise Estrutural - Arquitetura da Informação
http://www.caloi.com/home/

Menu Principal

Menu Superior

Logo Caloi

Busc...
Análise Estrutural - Organograma
http://www.caloi.com/home/
Home
Logo Caloi

Bikes

Fitness

A Caloi

Movimento
Caloi e Vo...
Análise Funcional - Site Do Bem
http://www.dobem.com/
Tarefa - Encontrar locais que vendem o produto
Fechar Janela
Home

O...
Comparativo de Ferramentas
http://caloi.com.br/home/ | http://www.canyon.com/_pt/ | http://www.schwinnbikes.com/

Caloi

C...
Comparativo de Ferramentas
http://caloi.com.br/home/ | http://www.canyon.com/_pt/ | http://www.schwinnbikes.com/

Caloi

C...
Análise Logográfica
http://www.brusselsbikepolo.be/blog/ | http://www.fixedsoldiers.com/ | http://www.caloi.com/home/

Bru...
Análise Cromográfica - Tokyo Fixed Gear
http://www.tokyofixedgear.com/
CMYK: 0 | 0 | 0 | 0
RGB: 0 | 0 | 0
HEX: 000000
CMYK...
Análise Cromográfica - Tag and Juice
http://www.tagandjuice.com.br/
CMYK: 8 | 7 | 14 | 0
RGB: 239 | 234 | 223
HEX: EFEADF
...
Análise Cromográfica - City Grounds
http://www.citygrounds.com/
CMYK: 11 | 8 | 11 | 0
RGB: 232 | 231 | 227
HEX: E8E7E3
CMY...
Análise Tipográfica - Linus Bikes
http://www.linusbike.com/

Menus e Títulos:
Tipografia sem serifa, em caixa alta. Traços...
Análise Tipográfica - Linus Bikes
http://www.linusbike.com/

Menus e Títulos:
Tipografia sem serifa, em caixa alta. Traços...
Análise Tipográfica - City Grounds
http://www.citygrounds.com/

Menus e Destaques:
Tipografia sem serifa, condensada, em
c...
Análise Tipográfica - Schwinn Bikes
http://www.schwinnbikes.com/

Menus e Destaques pequenos:
Tipografia sem serifa, conde...
Análise Pictográfica - Schwinn Bikes
http://www.schwinnbikes.com/

As imagens utilizadas no site sempre
mostram algum prod...
Análise Pictográfica - Linus Bikes
http://www.linusbike.com/

As imagens utilizadas no site focam no
produto, sempre com f...
Análise Pictográfica - State Bicycle Co.
http://www.statebicycle.com/default.asp

As imagens utilizadas no site seguem
doi...
Análise Iconográfica - Oi Rdio
http://www.oirdio.com.br/home/

Os ícones do site seguem as cores
utilizadas na identidade ...
Análise Iconográfica - Caloi
http://www.caloi.com/home/

Os ícones do site possuem formas
simplificadas, e em cada seção h...
Análise Iconográfica - Multishow
http://multishow.globo.com/

Os ícones do site possuem apenas duas
cores, que fazem parte...
Escala de Diferencial Semântico - Linus Bikes
http://www.linusbike.com/

2

1

0

1

2

Atraente

Repulsivo

Objetivo

Con...
Escala de Diferencial Semântico - Caloi
http://www.caloi.com/home/

2

1

0

1

2

Atraente

Repulsivo

Objetivo

Confuso
...
Escala de Diferencial Semântico - Do Bem
http://www.dobem.com/

2

1

0

1

2

Atraente

Repulsivo

Objetivo

Confuso

Pou...
Análise Heurística
http://caloi.com.br/home/ | http://www.canyon.com/_pt/ | http://www.schwinnbikes.com/

Caloi

Canyon

S...
ESCOPO
Requisitos do Projeto

Seguir metodologia do projeto E

Usar malhas estruturais ao construir o layout

Deve haver imagens ...
Requisitos do Produto

O que precisa?
Proporcionar alta interatividade

Preocupar-se com acessibilidade

Resolução adequad...
Organização do Site - Card Sorting

53
Organização do Site - Card Sorting

Home

Busca

Sobre

Quem somos

Loja Virtual

Sobre as
bikes fixas

Bikes

Login

Notí...
Organização do Site - Descrição das Ferramentas

Home - Ferramentas permanentes
Busca: O usuário pode procurar por
palavra...
Organização do Site - Descrição das Ferramentas

Bikes - Comparativo de bikes: Essa
ferramenta auxiliará o usuário quando ...
ESTRUTURA
Organograma do Site
Principal

Busca

Login

Cadastre-se

Versão em
outras línguas

Links para
redes sociais

FAQ

?
Sobre...
Fluxograma - Tarefa 1
Bikes - Comparar Bikes
Imprimir

Sair
Loja Virtual
Não

Não

Salvar e
sair

Comparador
de bikes

Bik...
Fluxograma - Tarefa 2
Acessórios - Comprar Capacete
Imprimir
Loja Virtual

Arquivar

Não

Imprimir?

Sim

Não
Acessórios

...
Fluxograma - Tarefa 3
Inspiração - Buscar vídeo no arquivo

Não
Inspiração

Lista de
vídeos

Vídeos
Buscar
palavras-chave
...
ESQUELETO
Malha Diagramacional

GRID: 960 px

25 px

10 px

65 px

63
Wireframes - Hipótese 1

64
Wireframes - Hipótese 2

65
Wireframes - Hipótese 3

66
Wireframes - Hipótese 4

67
Wireframes - Solução FInal

68
ESTÉTICA
Tipografia

Textos:
Como tipografia base, foi escolhida a Lato, por ter
diversas variações, ser de fácil legibilidade e
ta...
Tipografia

Menus, Títulos e Destaques:
Como tipografia base, foi escolhida a Bebas Neue,
por suas formas retas, que lembr...
Cromografia

As cores predominantes no site são amarelo e
preto, por serem cores fortes, de alto contraste, e
por lembrare...
Iconografia

Conteúdo/página
anterior

Conteúdo/página
seguinte

Visualizar mais
conteúdo

Fechar janela/
excluir produto
...
Pictografia

As imagens utilizadas em banners e destaques
terão fotografias das bikes e acessórios
contextualizados em alg...
Logotipo

O logotipo do site tem como base um dos
componentes de montagem das bikes, a coroa. O
formato circular também re...
EXECUÇÃO
Website Fixie - Metodologia Projeto E
Próximos SlideShares
Carregando em…5
×

Website Fixie - Metodologia Projeto E

820 visualizações

Publicada em

Desenvolvimento de interface gráfica para web, utilizando a Metodologia Projeto E. Projeto desenvolvido durante o 3º ano de graduação em Design - Habilitação em Programação Visual, na disciplina Webdesign.

Publicada em: Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
820
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
25
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Website Fixie - Metodologia Projeto E

  1. 1. UNIVILLE - Universidade da Região de Joinville Webdesign Prof.: Guilherme Zaffari Aluna: Isabela Loepert DESENVOLVIMENTO DE SÍTIO VIRTUAL UTILIZANDO O PROCESSO CRIATIVO PROJETO E Joinville - 2012
  2. 2. Sumário Introdução 3 Posicionamento Estético 24 Estrutura do Projeto E 6 Cronograma 25 Análise Estrutural 26 Análise Funcional 31 Comparativo de Ferramentas 32 ESTRATÉGIA Definição do Tema 8 Análise Logográfica 33 Palavras-Chave 10 Análise Cromográfica 34 Definição de Termos 11 Análise Tipográfica 37 Questões Projetuais 16 Análise Pictográfica 40 Justificativa - Motivo Pessoal 17 Análise Iconográfica 43 Objetivos 18 Escala de Diferencial Semântico 46 Antecedentes - História do Tema 19 Análise Heurística 49 Antecedentes - Situação do Tema 20 Antecedentes - História do Gênero do 21 ESCOPO Antecedentes - Estado da Arte 22 Requisitos do Projeto 51 Posicionamento - Público-Alvo 23 Requisitos do Produto 52 Site
  3. 3. Sumário Organização do Site - Card Sorting 53 Wireframes - Hipótese 4 67 Organização do Site - Descrição das 55 Wireframes - Solução Final 68 Ferramentas ESTÉTICA ESTRUTURA Tipografia 70 Organograma do Site 58 Cromografia 72 Fluxograma - Tarefa 1 59 Iconografia 73 Fluxograma - Tarefa 2 60 Pictografia 74 Fluxograma - Tarefa 3 61 Logotipo 75 ESQUELETO EXECUÇÃO Malha Diagramacional 63 Wireframes - Hipótese 1 64 Wireframes - Hipótese 2 65 Wireframes - Hipótese 3 66 Home 77
  4. 4. Introdução Este relatório consiste no conjunto de todas as análises e pesquisas utilizados ao longo do projeto. A intenção do relatório é apresentar e justificar o resultado final das escolhas projetuais, organizar o pensamento e mostrar as os processos criativos utilizados ao longo do projeto. 3
  5. 5. Introdução O projeto apresentado neste relatório é uma interface gráfica para Web com foco na interação do usuário com a interface. Tem como tema as Bikes Fixas, e servirá como guia/manual sobre as bikes, fórum para usuários e loja virtual de bikes, componentes e acessórios, tendo como público os ciclistas e interessados em bikes fixas. 4
  6. 6. Introdução O Projeto E é uma metodologia projetual desenvolvida para guiar e otimizar projetos de interface gráfica amigável (IGA). Seu uso é ideal para sistemas e produtos interativos dígito-virtuais de média ou alta complexidade. Toda a estrutura do Projeto E tem como base a metodologia de J. J. Garret (2003), com foco na experiência do usuário. Além disso, há a influência de vários autores do design da interação, da arquitetura da informação e de áreas adjacentes a estas, como Venn (2001), Preece et al (2005) e Müller-Brockmann (1996). A estrutura do Projeto E é dividida em seis etapas: Estratégia, Escopo, Estrutura, Esqueleto, Estética e Execução. Todas essas etapas - com exceção da Estratégia - possibilitam inúmeras gerações de alternativas. Além disso, as etapas não são meramente sequenciais. É possível retornar etapas anteriores para beneficio do resultado final. 5
  7. 7. Estrutura do Projeto E Desenho de Novas Experiências Navegação, Interação e Transação Diagramação e Composição Arquitetura da Informação Estratégia Analítica, Desenhística e Linguística Escopo Linguístico Estrutura Esqueleto Estética Execução Desenhístico Identidade Gráfico- Visual Desenho de Superfície Ergonomia Cognitiva (usabilidade e acessibilidade) 6
  8. 8. ESTRATÉGIA
  9. 9. Definição do Tema A IGA desenvolvida neste projeto tem como tema as Bikes Fixas. Dentre as seções abordadas, estarão: História, Notícias, Dicas e Links Úteis, além de outras. Além disso, haverá uma loja virtual de venda de bikes fixas, componentes avulsos e acessórios (chaveiros, camisetas, bottoms, etc) relacionados ao tema. Os usuários também poderão fazer perguntas sobre assuntos relacionados e receber respostas de outros usuários. Então, de modo geral, a IGA funcionará como um Guia/Manual, Fórum e Loja Virtual para os ciclistas ou interessados por bikes fixas. . Todo o conteúdo será exposto de modo objetivo, com interface amigável e interativa. As bikes fixas estão se popularizando no Brasil, e se tornando um objeto de desejo e estilo, por possibilitarem customização. São chamadas de fixas pois possuem um sistema no qual o pinhão é rosqueado diretamente ao cubo da bicicleta, o que faz com que os pedais e as rodas girem juntos. Geralmente não há freios, e a velocidade da bicicleta reduz com a força das pernas. Porém, ainda não há nenhum site específico no assunto atualmente no país e que tenha todas as ferramentas citadas. Assim, a IGA desenvolvida nesse projeto trará novos consumidores e dará um impulso para o crescimento dessa tendência, que se espalha principalmente entre os jovens, maiores usuários da cultura virtual. 8
  10. 10. Definição do Tema 9
  11. 11. Palavras-Chave Bicicleta Consumo Transporte Ciclismo Customização Atividade Física Tendência 10
  12. 12. Definição de Termos Bicicleta: Veículo de duas rodas presas a um quadro, movido pelo esforço do próprio usuário através de pedais que possuem um sistema que movimenta uma corrente transmissora. A palavra bicicleta deriva do latim bi (dois) e do grego kyklos (rodas). Customização: Empregada no sentido de perso-nalização, adaptação. Customizar é adaptar algo de acordo com o gosto ou necessidade de alguém. Customização pode ser entendida como sendo adequação ao gosto do cliente, é dar um caráter original à um objeto fabricado em série. Transporte: É o movimento de pessoas e mercadorias entre localidades. Esse movimento pode ser feito com diversos meios de transporte. O transporte de tração humana é o movimento de pessoas e cargas utilizando-se a força de tração do próprio ser humano. As pessoas, com ou sem cargas, podem se deslocar somente com o próprio movimento do corpo ou tracionando veículos diretamente, individual ou em grupo de pessoas. Esse tipo de transporte por ser realizado tanto em terra, no ar, na água ou até no espaço sideral. 11
  13. 13. Definição de Termos Ferramentas: Recursos que os sítios virtuais construídos nos conceitos da web 2.0 possuem para gerar interatividade, possibilidade de transações, trocam de conteúdo (texto, imagem, vídeo e som). Tarefa: Uma tarefa é caracterizada por um resultado a ser atingido. É definida através de um cenário e é organizada através de uma seqüência lógica de telas da IGA. Toda ferramenta possui uma ou mais tarefas. Toda e qualquer IGA é construída através da definição das tarefas. Exemplo de tarefa: comprar um livro na loja virtual Amazon. Web 2.0: Um simples conceito. Não é somente uma tecnologia, mas sim uma metodologia projetual que usa, de maneira racional e coerente, as tecnologias disponíveis para criar sítios virtuais, sistemas e aplicativos que tenham grande possibilidade de interatividade, maior usabilidade e acessibilidade. Web Standards: É um dos principais conceitos da web 2.0 e que une, através de uma metodologia projetual, tecnologias, padrões, normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico que aumentam substancialmente a acessibilidade de um sitio virtual. O web standards foi elaborado pela W3C (www.w3c.com), um dos principais consórcios fomentadores de diretrizes da www hoje em dia, e é destinado a orientar fabricantes de aplicativos, desenvolvedores, projetistas e desenhadores. As vantagens do desenvolvimento de sítios em webtstandards são várias: (1)Separa o leiaute do conteúdo. Todas as características estético-formais e técnico-estruturais estarão gravadas na folha de estilos. Esta folha de estilos terá linque para todos os arquivos HTML do sítio. No momento em que algum item for alterado na folha de estilos, o reflexo da alteração será instantaneamente atualizado em todos os arqui12
  14. 14. Definição de Termos vos HTML do sítio. Esse tipo de estrutura permite que o leiaute seja totalmente independente do conteúdo. (2)A atividade do desenhador se torna independente da atividade do programador. Ou seja, os dois trabalharão em uma equipe, mas o trabalho de um não influenciará no trabalho do outro. (3)Facilita a vida do programador. Um sítio virtual programado em web standards utiliza código fonte muito mais curto e organizado do que um feito pelo sistema tradicional de programação. (4)Sítios virtuais que carregam de 50 a 80% mais rápidos, pois a complexidade e o tamanho do código são mínimos. (5)Maior usabilidade e acessibilidade. A informação estará disposta de forma seqüencial e coerente, facilitando muito a utilização do sítio virtual por pessoas deficientes visuais ou com problemas de coordenação motora, e por este motivo, impossibilitadas de usar o mause. (6)Além do computador e do laptop, o sítio virtual poderá ser acessado a partir de diferentes dispositivos de acesso a www, tais como, o celular, o palm top, TV digital, etc. Para isso, use-se a técnica do Tableless. Tableless (sem tabelas): Nas antigas técnicas de modelagem HTML, as tabelas eram Tags (etiquetas de atributos) muito utilizadas para estabelecer a estrutura das páginas. Hoje em dia, a tabela foi substituída pela Tag Div, que fornece muito mais facilidade e versatilidade para se estruturar uma página, principalmente quando se busca acessibilidade. 13
  15. 15. Definição de Termos Folha de Estilos (estilos CSS): Uma folha de estilo nada mais é do que o planejamento técnico-estrutural e estético-formal do leiaute das páginas do sítio virtual. A folha de estilo é montada em um arquivo separado e conectada a cada página do sítio, fornecendo a elas todas as propriedades estruturais e estéticas do leiaute. Usando a folha de estilos, o desenhador consegue separar o conteúdo (textos, imagens, vídeos, transações) do leiaute, o que é imprescindível quando o assunto é acessibilidade. Alem disso, consegue-se gerar como maior facilidade, um padrão estrutural e uma identidade gráfico-visual para o sítio, o que aumenta sua usabilidade e sua credibilidade. IGA: Interface Gráfica Amigável. Até 1991, quando Tim Berners-Lee introduziu o protocolo de transferência de hipertexto (http) e criou a www com interface gráfica amigável, os sistemas de rede (Internet) usavam interface caracter. A grande limitação da interface caracter é o uso de códigos alfanuméricos abstratos para executar tarefas. Isso tornava o uso da internet dificultoso para pessoas comuns, pois os códigos tinham que ser pré-aprendidos e decorados. A IGA da www fornece aos usuários a possibilidade de interação metafórica, intuitiva e associativa. Em outras palavras, a maioria das pessoas consegue usar o ambiente sem maiores constrangimentos. Para Meurer (2006), esse é um dos principais motivos para a explosão de usuários na década de 90. 14
  16. 16. Definição de Termos Programação Visual: Compreende o desenho de interação, a arquitetura da informação (organização das transações e do conteúdo), IGV (Identidade Gráfico Visual), diagramação e composição, sinalização e navegação, estético-formal do leiaute, técnica-estrutural e técnica-funcional do Modelo Funcional Navegável (MFN). Arquitetura da Informação: No exemplo de um sítio virtual, a arquitetura da informação é como a informação está organizada “estruturalmente” nas telas da IGA e como estas telas estão organizadas “funcionalmente” dentre si. Uma arquitetura da informação bem resolvida é condição básica para que exista usabilidade. Desenho de interação: Design de produtos interativos que fornecem suporte às atividades cotidianas das pessoas seja no lar ou no trabalho. (Design de Interação). 15
  17. 17. Questões Projetuais 1. O que projetar? 2. Porquê projetar? Uma IGA composta por 12 ferramentas utilizáveis e que tem como tema as bikes fixas. A IGA funcionará como Guia/Manual, Fórum e Loja Virtual sobre o tema. Para fomentar uma cultura que está se tornando cada vez maior atualmente, e proporcionar ao público-alvo (que é o maior consumidor de comunicação virtual), um site de vendas e informações específico sobre o tema. 3. Como projetar? 4. Para quem projetar? 5. Qual será a tecnologia utilizada? Para programadores que dominem linguagem computacional CSS, HTML, XML Javascript, JQuerry. Todos os elementos da IGA serão desenvolvidos no software Adobe Illustrator. Através do processo criativo Projeto E de Meurer e Szabluck (2009), auxiliada por metodologias de projeto, para desenvolver questões projetuais técnico-gráficas e técnico-funcionais. 16
  18. 18. Justificativa - Motivo Pessoal A escolha do tema abordado no projeto justifica-se pelo fato da criadora do mesmo ter um contato maior com as bicicletas em geral nos últimos meses, e um interesse principalmente pelas chamadas “fixas”. O contato com o tema surgiu pela vontade de comprar uma bicicleta para usar como transporte pela cidade. Assim, a pesquisa sobre bicicletas cresceu e a criadora tomou conhecimento das características das bikes fixas, que se diferenciam e se destacam das bicicletas comuns. 17
  19. 19. Objetivos Conscientizar as pessoas no uso da bicicleta como transporte eficiente e ecológico Tornar-se referência sobre o tema Ser visitado Atingir novos públicos Desenvolvimento de IGA sobre bikes fixas com no mínimo 12 ferramentas utilizáveis e que possua de 8 a 16 páginas de interface gráfica atraente e navegável Proporcionar uma experiência agradável e única aos usuários Vender os produtos oferecidos Aumentar o número de ciclistas nas cidades Deve ser atingido Pode ser atingido 18
  20. 20. Antecedentes - História do Tema 1871 1890 A Penny Farthing, inventada pelo engenheiro britânico James Starley, foi uma das primeiras bicicletas eficientes no uso. Tinha o pedal diretamente preso à roda dianteira. O serviço dos ciclistas mensageiros foi comum durante a década de 1890, principalmente nos EUA, contratados por empresas como a Western Union. A grande maioria utilizava bicicletas de roda fixa. http://inventors.about.com/od/bstartinventions/a/ History-Of-The-Bicycle.htm http://pt.wikipedia.org/wiki/Ciclista_mensageiro 1970 1880 - 1900 Entre as modificações feitas nas bicicletas, estava o sistema de roda livre, que existe na maioria das bicicletas atuais. Porém, as bicicletas de corrida continuaram sendo fixas. http://www.vocesabia.net/curiosidades/como-surgiram-as-bicicletas/ A popularidade dos ciclistas mensageiros voltou em grandes centros urbanos, como Londres e Nova Yorque, constituindo uma espécie de comunidade, com reuniões, e um estilo próprio de se vestir., existindo até hoje. http://fixacwb.com/como-assim-roda-fixa 19
  21. 21. Antecedentes - Situação do Tema 2012 Atualmente, o uso das bikes fixas superou o uso profissional e esportivo. Sua popularização atingiu cidades como Tóquio, Madri, Santiago, Varsóvia e Los Angeles, e sua facilidade de manutenção, rapidez e leveza fazem com que seja um ótimo transporte, e que conquista cada vez mais adeptos. O que vem impulsionando ainda mais seu uso é a possibilidade de customização de cada componente da bicicleta, com cores e formatos diferenciados. Assim, o uso entre jovens cresce constantemente, com um estilo próprio e que envolve, além do uso das bikes, moda, música, filmes, e linguagem visual comum entre o grupo. No Brasil, essa cultura chegou há alguns anos em grandes cidades como São Paulo, Rio de Janeiro e Curitiba, e atualmente já há lojas especializadas em bikes fixas, e grupos que se reúnem em certos pontos de encontro, fazem pedaladas noturnas e competições informais. O número total de ciclistas de bike fixa no país não é exato, mas estima-se que já existam mais de mil. 20
  22. 22. Antecedentes - História do Gênero do Site Ebay - Site de Comércio Eletrônico 1995 1996 Fundada nos EUA por Pierre Omydiar, o Ebay foi uma das primeiras empresas de comércio eletrônico do mundo. Antes de se chamar Ebay, seu nome era AuctionWeb. http://www.webdialogos.com/2010/marketing-digital/e-commerce-infografico-da-historia-do-ebay/ 2001 O primeiro funcionário e o primeiro presidente da empresa foram contratados - Chris Agarpao e Jeffrey Skoll respectivamente. Neste ano, cerca de 250 mil itens já estavam à venda no site. O Ebay começa um acordo estratégico com o site de vendas Mercado Livre http://en.wikipedia.org/wiki/EBay http://www.ebayinc.com/history 1997 1995 2002 A primeira venda do Ebay foi uma caneta de laser quebrada, vendida a um colecionador de canetas de laser quebradas por $ 14,83. Foi neste ano que o nome Ebay começou a ser utilizado oficialmente. O número de itens à venda já era de 2 milhões. O Ebay comprou o Ibazar, um site de leilão europeu, e mais tarde no mesmo ano, comprou o PayPal. http://ebay.about.com/od/ebaylifestyle/a/el_history.htm http://workshops.ebay.com/thread.jspa?threadID=410122850 http://en.wikipedia.org/wiki/EBay 21
  23. 23. Antecedentes - Estado da Arte Ebay - Site de Comércio Eletrônico 2012 Atualmente, o Ebay é o maior site de compra e venda de objetos variados do mundo. Possui mais de 97 milhões de usuários, e o valor total dos produtos vendidos em 2011 somou US$ 62 bilhões, o que equivale a US$ 2 mil em vendas por segundo. Os bens mais vendidos no Ebay são computadores e tecnologia, primeiramente. Em segundo lugar estão itens relacionados à casas e jardim, e em terceiro lugar, estão roupas e acessórios. http://www.webdialogos.com/2010/marketing-digital/e-commerce-infografico-da-historia-do-ebay/ 22
  24. 24. Posicionamento - Público-Alvo A IGA desenvolvida neste projeto tem como público-alvo homens e mulheres de 18 a 30 anos que utilizam as bikes fixas como meio de transporte e objeto de valor emocional, por possibilitar customização. São pessoas que se interessam pelo ciclismo em geral, e acreditam no uso da bicicleta como meio de transporte eficiente e ecológico. São ligadas à música, moda e artes, gostam de se diferenciar e de ter sua personalidade inserida na bike fixa. 23
  25. 25. Posicionamento Estético 24
  26. 26. DEZEMBRO NOVEMBRO OUTUBRO SETEMBRO AGOSTO JULHO JUNHO MAIO ABRIL MARÇO FEVEREIRO JANEIRO Cronograma 25
  27. 27. Análise Estrutural - Site Caloi http://www.caloi.com/home/ 26
  28. 28. Análise Estrutural - Wireframes http://www.caloi.com/home/ 27
  29. 29. Análise Estrutural - Manchas Gráficas http://www.caloi.com/home/ 28
  30. 30. Análise Estrutural - Arquitetura da Informação http://www.caloi.com/home/ Menu Principal Menu Superior Logo Caloi Busca Notícias de Destaque Numeração Destaques Atualizações Twitter Atalhos para Seções Diversas Links Redes Sociais FAQ Copyright | Link para Política de Privacidade e Termos de Uso 29
  31. 31. Análise Estrutural - Organograma http://www.caloi.com/home/ Home Logo Caloi Bikes Fitness A Caloi Movimento Caloi e Você Mountain Bike Speed Mobilidade Opção 1 Opção 1 Notícias Eventos Notícia 1 Esteiras Ergométricas Transports Calendário Opção 1 Opção 1 Equipe Caloi Cuide da sua bike Página Twitter Produtos Slide 1 Ass. Técnica Onde Comprar Ciclofaixa Ciclovia Marginal Águas Claras do Rio Pinheiros Opção 1 Na Trilha Empresa Visão 1970 Iniciativas FAQ Remo Opção 1 1898 Atualizações Twitter Opção 1 Vida Saudável Valores Buscar Infanto Juvenil Foto 1 Opção 1 Universos 1980 História Compromisso 1990 2000 Por que Caloi Vídeo 1 2010 Vídeo 2 Bicicleta Transforma Mobilidade Kids Em Forma Imprensa Releases e Clippings 2011 Na Estrada 2010 Imagens de Produtos Categoria Produto 30
  32. 32. Análise Funcional - Site Do Bem http://www.dobem.com/ Tarefa - Encontrar locais que vendem o produto Fechar Janela Home Onde Encontrar Mapa do Brasil Escolher Estado Lista de Locais Link para Site do Local Descrição do Cenário 1. Usuário entra no site; 2. No menu na parte superior, encontra o título “Onde encontrar” e clica; 3. Na nova página, há um texto introdutório e um mapa do brasil, com a legenda “clique nos estados para ver as lojas” ; 4. Usuário clica no estado escolhido e encontra uma lista de lojas e links para seus sites; 5. O usuário clica no link da loja que escolher, ou fecha a janela de lojas do estado escolhido; 6. A tela volta para a página que mostra o mapa do brasil. 31
  33. 33. Comparativo de Ferramentas http://caloi.com.br/home/ | http://www.canyon.com/_pt/ | http://www.schwinnbikes.com/ Caloi Canyon Schwinn Comparador de bikes Busca Filtro de Escolha de Bikes Links para Redes Sociais Contato Blog de Notícias Loja Online 32
  34. 34. Comparativo de Ferramentas http://caloi.com.br/home/ | http://www.canyon.com/_pt/ | http://www.schwinnbikes.com/ Caloi Canyon Schwinn Comparador de bikes Busca Filtro de Escolha de Bikes Links para Redes Sociais Contato Blog de Notícias Loja Online 32
  35. 35. Análise Logográfica http://www.brusselsbikepolo.be/blog/ | http://www.fixedsoldiers.com/ | http://www.caloi.com/home/ Brussels Bike Polo Fixed Soldiers Club Caloi Forma Cor Conteúdo 33
  36. 36. Análise Cromográfica - Tokyo Fixed Gear http://www.tokyofixedgear.com/ CMYK: 0 | 0 | 0 | 0 RGB: 0 | 0 | 0 HEX: 000000 CMYK: 0 | 0 | 0 | 0 RGB: 255 | 255 | 255 HEX: FFFFFF CMYK: 26 | 90 | 91 | 25 RGB: 154 | 46 | 31 HEX: 9A2E1F CMYK: 3 | 1 | 19 | 0 RGB: 251 | 248 | 220 HEX: FBF8DC CMYK: 36 | 44 | 65 | 30 RGB: 140 | 114 | 80 HEX: 8C7250 34
  37. 37. Análise Cromográfica - Tag and Juice http://www.tagandjuice.com.br/ CMYK: 8 | 7 | 14 | 0 RGB: 239 | 234 | 223 HEX: EFEADF CMYK: 40 | 20 | 35 | 4 RGB: 164 | 179 | 166 HEX: A4B3A6 CMYK: 28 | 92 | 85 | 30 RGB: 145 | 41 | 35 HEX: 912923 CMYK: 25 | 52 | 73 | 16 RGB: 176 | 120 | 72 HEX: B07848 CMYK: 0 | 0 | 0 | 100 RGB: 0 | 0 | 0 HEX: 000000 35
  38. 38. Análise Cromográfica - City Grounds http://www.citygrounds.com/ CMYK: 11 | 8 | 11 | 0 RGB: 232 | 231 | 227 HEX: E8E7E3 CMYK: 0 | 0 | 0 | 0 RGB: 255 | 255 | 255 HEX: FFFFFF CMYK: 91 | 79 | 62 | 97 RGB: 0 | 0 | 0 HEX: 000000 CMYK: 2 | 95 | 79 | 0 RGB: 227 | 36 | 49 HEX: E32431 CMYK: 96 | 76 | 6 | 0 RGB: 35 | 72 | 148 HEX: 234894 36
  39. 39. Análise Tipográfica - Linus Bikes http://www.linusbike.com/ Menus e Títulos: Tipografia sem serifa, em caixa alta. Traços geométricos e regulares, sem contraste de linha. Formas derivam do círculo e quadrado. Textos: Palatino, Times, Georgia, serif. Tamanho:12px. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.,:;?! 37
  40. 40. Análise Tipográfica - Linus Bikes http://www.linusbike.com/ Menus e Títulos: Tipografia sem serifa, em caixa alta. Traços geométricos e regulares, sem contraste de linha. Formas derivam do círculo e quadrado. Textos: Palatino, Times, Georgia, serif. Tamanho:12px. abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.,:;?! 37
  41. 41. Análise Tipográfica - City Grounds http://www.citygrounds.com/ Menus e Destaques: Tipografia sem serifa, condensada, em caixa alta. Traços regulares, sem contraste de linha. Textos: Arial, Helvetica, sans-serif. Tamanho:12px abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRST VWXYZ 1234567890.,:;?! 38
  42. 42. Análise Tipográfica - Schwinn Bikes http://www.schwinnbikes.com/ Menus e Destaques pequenos: Tipografia sem serifa, condensada, em caixa alta. Traços regulares, sem contraste de linha. Destaques: Tipografia com serifa, e um leve contraste entre linhas. Maiúscula apenas na primeira letra. Textos: Arial, Helvetica, sans-serif. Tamanho:12px abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890.,:;?! 39
  43. 43. Análise Pictográfica - Schwinn Bikes http://www.schwinnbikes.com/ As imagens utilizadas no site sempre mostram algum produto da marca Schwinn, seja apenas o produto ou contextualizado em alguma cena com pessoas. As seções das bicicletas, que são divididas por local de uso, tem sempre uma foto em destaque, com uma bicicleta característica e um cenário que condiz com o local de uso dela. O nome da bicicleta e seus diferenciais também est!ão descritos na imagem. 40
  44. 44. Análise Pictográfica - Linus Bikes http://www.linusbike.com/ As imagens utilizadas no site focam no produto, sempre com fundo branco. Todas as imagens de bicicletas são mostradas na visão lateral. Na seção dos modelos de bicicleta, há uma paleta de cores que muda a cor da bicicleta ao passar o cursor do mouse, e há imagens de acessórios apropriados para a bicicleta ao lado. 41
  45. 45. Análise Pictográfica - State Bicycle Co. http://www.statebicycle.com/default.asp As imagens utilizadas no site seguem dois estilos: a imagem que mostra só o produto e a que mostra o produto contextualizado em algum lugar. Em todas as fotos há sempre uma moldura preta e o logotipo da State Bicycle Co., que envolvem a imagem. Na descrição de cada bicicleta, há um tipo de ensaio fotográfico da mesma, em várias vistas e contextualizada em locais diferentes, até mesmo sendo utilizadas. 42
  46. 46. Análise Iconográfica - Oi Rdio http://www.oirdio.com.br/home/ Os ícones do site seguem as cores utilizadas na identidade visual da Oi. Possuem formas simplificadas e geométricas, com preenchimento em cores chapadas e saturadas. A maioria dos ícones possuem formas geométricas que os envolve. 43
  47. 47. Análise Iconográfica - Caloi http://www.caloi.com/home/ Os ícones do site possuem formas simplificadas, e em cada seção há uma cor que predomina. As seções que indicam os “universos” das bikes, como Na Trilha, Na Estrada e Mobilidade, possuem ícones de ciclistas e bicicletas característicos de cada universo, todos nas mesmas cores e em forma de pictogramas. O ícone do twitter também foi personalizado para um ciclista, mas com as cores da rede social. 44
  48. 48. Análise Iconográfica - Multishow http://multishow.globo.com/ Os ícones do site possuem apenas duas cores, que fazem parte da paleta cromática do site. Todos tem formas geométricas que envolvem o ícone, que se apresentam com formas simplificadas. 45
  49. 49. Escala de Diferencial Semântico - Linus Bikes http://www.linusbike.com/ 2 1 0 1 2 Atraente Repulsivo Objetivo Confuso Poucas Cores Muitas Cores Interessante Sem Graça Sério Divertido Dinâmico Estático Utilitário Entretenimento Limpo Ilustrativo Agradável Maçante 46
  50. 50. Escala de Diferencial Semântico - Caloi http://www.caloi.com/home/ 2 1 0 1 2 Atraente Repulsivo Objetivo Confuso Poucas Cores Muitas Cores Interessante Sem Graça Sério Divertido Dinâmico Estático Utilitário Entretenimento Limpo Ilustrativo Agradável Maçante 47
  51. 51. Escala de Diferencial Semântico - Do Bem http://www.dobem.com/ 2 1 0 1 2 Atraente Repulsivo Objetivo Confuso Poucas Cores Muitas Cores Interessante Sem Graça Sério Divertido Dinâmico Estático Utilitário Entretenimento Limpo Ilustrativo Agradável Maçante 48
  52. 52. Análise Heurística http://caloi.com.br/home/ | http://www.canyon.com/_pt/ | http://www.schwinnbikes.com/ Caloi Canyon Schwinn Diálogos Simples e naturais Falar a linguagem do usuário Minimizar a sobrecarga de memória Consistência Feedback Saídas claramente demarcadas Atalhos Boas mensagens de erro Prevenir erros Ajuda e documentação Ótimo Bom Razoável Ruim 49
  53. 53. ESCOPO
  54. 54. Requisitos do Projeto Seguir metodologia do projeto E Usar malhas estruturais ao construir o layout Deve haver imagens em 72dpi no mínimo e 96dpi no máximo Apresentar e montar o layout em uma sequencia de imagens, se possível com links funcionais e animações Wireframes podem ser construídos em Illustrator ou InDesign O Modelo Funcional Navegável deve ser feito onde for possível (InDesign, Illustrator ou Photoshop) É mandatório o desenho de no mínimo, 8 telas e no máximo 16 telas no MFN (Modelo Funcional Navegável) 51
  55. 55. Requisitos do Produto O que precisa? Proporcionar alta interatividade Preocupar-se com acessibilidade Resolução adequada ao meio digital Moderar na utilização de recursos estéticos Tirar barra de rolagem, ou ter pouca rolagem Como resolver? Através da criação de ferramentas que estimulem o usuário Utilizando ao maximo recursos de constraste, atalhos, tamanho de fonte, breadcrumb navigation Usando imagens de resolução mínima de 72dpi e, no máximo, de 96dpi Fazendo um layout minimalista, onde cada efeito a ser utilizado é totalmente funcional Estudando as melhores formas de se dispor o site em até três telas 52
  56. 56. Organização do Site - Card Sorting 53
  57. 57. Organização do Site - Card Sorting Home Busca Sobre Quem somos Loja Virtual Sobre as bikes fixas Bikes Login Notícias Fotografia Partes e componentes Cadastre-se Versão em outras línguas Inspiração Cinema Livros Links para redes sociais Fórum FAQ Contato Vídeos Acessórios Comparador de bikes Filtro de escolha de bikes 54
  58. 58. Organização do Site - Descrição das Ferramentas Home - Ferramentas permanentes Busca: O usuário pode procurar por palavras-chave ou frases para achar o conteúdo desejado dentro do site. Login: Um campo de preenchimento para login e senha estará disponível para usuários já cadastrados. Cadastre-se: Os usuários podem se cadastrar no site com o preenchimento de algumas informações básicas. Com o cadastro, o usuário poderá comprar na Loja Virtual e participar do Fórum. Versão em outras línguas: O usuário poderá clicar a qualquer momento nos ícones de outras línguas, para traduzir todas as informações do site na língua escolhida. Links para redes sociais: Ícones de algumas redes sociais estarão disponíveis para o usuário clicar e ser redirecionado até a página principal do site em cada rede social. FAQ: Várias perguntas com respostas referentes ao funcionamento do site estarão disponíveis para usuários, principalmente os novos. Sobre Quem Somos: Esta seção vai descrever o que é o site, quem o desenvolveu, e qual seu objetivo, com uma linguagem fácil e adequada aos usuários. Sobre as bikes fixas: Será contado um breve histórico sobre as bikes fixas, seu uso, e suas características principais. Loja Virtual - Usuários cadastrados poderão comprar na loja virtual. Bikes: A venda de bikes fixas de diversas marcas será o principal atrativo do site. 55
  59. 59. Organização do Site - Descrição das Ferramentas Bikes - Comparativo de bikes: Essa ferramenta auxiliará o usuário quando estiver em dúvida entre 2 ou mais bikes. O comparativo mostrará todas as caracterísitcas das bikes selecionadas simultaneamente. O usuário pode escolher até 4 bikes para comparar. Bikes - Filtro de Escolha de Bikes: Essa ferramenta mostrará vários critérios que o usuário pode escolher (ex.: faixa de preço, material da bike), para filtrar as bikes que serão mostradas. Partes e componentes: Também serão vendidos partes e componentes de bikes fixas, para usuários que já possuem uma bike ou que estão montando uma. Acessórios: Acessórios como Capacete, Bolsa e Squeeze serão vendidos, alguns com a identidade visual do site. Notícias - Esta seção funcionará como um blog, com notícias atualizadas sobre ciclismo, bikes fixas, direitos dos ciclistas, eventos, etc. Inspiração - Esta seção funcionará como um blog de atualizações artísticas e culturais, nas subseções de Fotografia, Cinema, Livros e Vídeos, todos com temática de ciclismo ou com alguma relação com o tema. Fórum - Nesta seção usuários cadastrados poderão fazer perguntas e responder perguntas de outros usuários, sobre as bikes fixas, ciclismo ou qualquer outra coisa relacionada ao tema. As perguntas e respostas serão mediadas para entrar no site. Contato -Será fornecido o e-mail do site, e um campo de mensagem pode ser preenchido, com sugestões, perguntas e busca de informações. 56
  60. 60. ESTRUTURA
  61. 61. Organograma do Site Principal Busca Login Cadastre-se Versão em outras línguas Links para redes sociais FAQ ? Sobre Loja Virtual Notícias Comparador de bikes Quem somos 1 Bikes Filtro de escolha Sobre as bikes fixas Inspiração Fórum Fotografia Contato Arquivo Arquivo Arquivo Cinema Arquivo Arquivo Arquivo Partes e Componentes Livros Arquivo Vídeos Arquivo Acessórios 2 3 58
  62. 62. Fluxograma - Tarefa 1 Bikes - Comparar Bikes Imprimir Sair Loja Virtual Não Não Salvar e sair Comparador de bikes Bikes Selecionar bikes? Sim Alterar bikes? Não Salvar comparação? Sim Salvar e imprimir Sim Descrição do Cenário 1 1. Usuário entra na Loja Virtual do site; 2. Escolhe a sub-seção de Bikes; 3. Na página das bikes, há uma opção para selecionar bikes e compará-las entre si; 4. O usuário seleciona 4 bikes para comparar e entra na página comparativa; 5. O usuário decide colocar uma bike no lugar de outra para comparação; 6. Uma janela com todas as bikes abre novamente e o usuário clica na bike que deseja inserir na comparação; 6. O usuário decide salvar a sua comparação no computador, e já imprime o arquivo da comparação. 59
  63. 63. Fluxograma - Tarefa 2 Acessórios - Comprar Capacete Imprimir Loja Virtual Arquivar Não Imprimir? Sim Não Acessórios Comprar produto Login Confirmar? Forma de Pagamento Boleto Sim Cartão Cartão inválido! Senha incorreta! Descrição do Cenário 2 1. Usuário entra na loja virtual do site; 2. Escolhe a sub-seção de Acessórios; 3. Usuário escolhe um capacete e clica para comprá-lo; 4. Ao confirmar a compra, o usuário precisa digitar seu login, com nome de usuário e senha; 5. O usuário erra a senha e o sistema pede a senha de novo; 6. Com a senha correta, o usuário pode escolher como pagar e clica na opção de Boleto; 7. O boleto aparece na tela mas o usuário não quer imprimir no momento; 8. O boleto é então arquivado na conta do usuário no site, para impressão posterior, dentro do prazo de 3 dias úteis. 60
  64. 64. Fluxograma - Tarefa 3 Inspiração - Buscar vídeo no arquivo Não Inspiração Lista de vídeos Vídeos Buscar palavras-chave Resultados encontrados? Selecionar vídeo Sim Sair da busca Descrição do Cenário 3 1. Usuário entra na seção de Inspirações do site; 2. Escolhe a sub-seção de Vídeos; 3. Usuário quer encontrar um vídeo postado há muito tempo, e por isso, busca por palavras-chave do vídeo; 4. O sistema não encontra nenhum vídeo ; 5. O usuário digita outras palavras-chave; 6. O sistema encontra 5 resultados com as palavras-chave; 7. O usuário acha o vídeo que procurava e clica nele para visualizá-lo. 61
  65. 65. ESQUELETO
  66. 66. Malha Diagramacional GRID: 960 px 25 px 10 px 65 px 63
  67. 67. Wireframes - Hipótese 1 64
  68. 68. Wireframes - Hipótese 2 65
  69. 69. Wireframes - Hipótese 3 66
  70. 70. Wireframes - Hipótese 4 67
  71. 71. Wireframes - Solução FInal 68
  72. 72. ESTÉTICA
  73. 73. Tipografia Textos: Como tipografia base, foi escolhida a Lato, por ter diversas variações, ser de fácil legibilidade e também por estar disponível como Webfont. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%¨&*( ) Textos principais: 10 px Textos auxiliares: 9 px ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%¨&*( ) 70
  74. 74. Tipografia Menus, Títulos e Destaques: Como tipografia base, foi escolhida a Bebas Neue, por suas formas retas, que lembram partes das bicicletas, e pela sua fácil legibilidade. ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$%¨&*( ) Títulos de Menus: 20 px Títulos de Sub-menus: 15px 71
  75. 75. Cromografia As cores predominantes no site são amarelo e preto, por serem cores fortes, de alto contraste, e por lembrarem placas de trânsito. O trânsito remete ao mundo urbano, no qual as bikes fixas estão inseridas. Como cor auxiliar foi escolhido o branco, para dar um equilíbrio visual ao layout, que já tem cores fortes. R: 255 G: 210 B: 0 R: 0 G: 0 B: 0 #FFD200 #000000 R: 255 G: 255 B: 255 #FFFFFF 72
  76. 76. Iconografia Conteúdo/página anterior Conteúdo/página seguinte Visualizar mais conteúdo Fechar janela/ excluir produto Trocar de produto Reproduzir vídeo Os ícones criados para o site possuem um círculo amarelo e um símbolo preto central. Todos possuem cantos arredondados. 73
  77. 77. Pictografia As imagens utilizadas em banners e destaques terão fotografias das bikes e acessórios contextualizados em algum cenário, porém, evidenciando sempre o produto do tema do site. Já em seções de compra, serão utilizadas imagens dos produtos com fundo branco. 74
  78. 78. Logotipo O logotipo do site tem como base um dos componentes de montagem das bikes, a coroa. O formato circular também remete à roda. O nome Fixie é um modo mais “íntimo” de chamar as bikes fixas, sendo um apelido utilizado tanto internacional como nacionalmente. A tipografia utilizada foi a Nilland Regular. Suas formas retas remetem ao quadro das bikes, e o seu peso leve remete à leveza das bikes fixas, tanto na sua aparência, quanto no seu peso literal, comparado com outras bikes. As cores utilizadas seguem o padrão do site, ao remeter ao mundo urbano, onde está inserido o ciclismo em geral, e consequentemente, as bikes fixas. 75
  79. 79. EXECUÇÃO

×