Website Fixie - Metodologia Projeto E

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

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

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


60

Pictografia

74


61

Logotipo

75

ESQUELETO

EXECUÇÃO

Malha Diagramacional

63


64


65


66

Home

77

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

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

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

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

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

Palavras-Chave

Bicicleta

Consumo

Transporte

Ciclismo

Customização

Atividade Física

Tendência

10


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


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


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


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


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

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

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

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

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

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

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

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

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

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

27

Análise Estrutural - Manchas Gráficas

28

Análise Estrutural - Arquitetura da Informação

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

Análise Estrutural - Organograma
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

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

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

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

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

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

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

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

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
ABCDEFGHIJKLMNOPQRST VWXYZ
1234567890.,:;?!

38

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
1234567890.,:;?!

39

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

Análise Pictográfica - Linus Bikes

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

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

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

Análise Iconográfica - Caloi

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

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

Escala de Diferencial Semântico - Linus Bikes

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

Escala de Diferencial Semântico - Caloi

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

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

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

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

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


53


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

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

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

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

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

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!

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

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

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

Malha Diagramacional

GRID: 960 px

25 px

10 px

65 px

63

Wireframes - Solução FInal

68

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.

1234567890
!@#$%¨&*( )

Textos principais: 10 px
Textos auxiliares: 9 px

1234567890
!@#$%¨&*( )

70

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.

1234567890
!@#$%¨&*( )

Títulos de Menus: 20 px
Títulos de Sub-menus: 15px

71

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

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

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

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

Website Fixie - Metodologia Projeto E

Website Fixie - Metodologia Projeto E

Recommended

Recommended

More Related Content

Similar to Website Fixie - Metodologia Projeto E

Similar to Website Fixie - Metodologia Projeto E (20)

Website Fixie - Metodologia Projeto E