website fixie - metodologia projeto e

UNIVILLE - Universidade da Região de Joinville

Webdesign

Prof.: Guilherme Za�ari

Aluna: Isabela Loepert

DESENVOLVIMENTO DE SÍTIO VIRTUAL UTILIZANDO

O PROCESSO CRIATIVO PROJETO E

Joinville - 2012

Sumário

Introdução

Estrutura do Projeto E

ESTRATÉGIA

De�nição do Tema

Palavras-Chave

De�nição de Termos

Questões Projetuais

Justi�cativa - Motivo Pessoal

Objetivos

Antecedentes - História do Tema

Antecedentes - Situação do Tema

Antecedentes - História do Gênero do

Site

Antecedentes - Estado da Arte

Posicionamento - Público-Alvo

Posicionamento Estético

Cronograma

Análise Estrutural

Análise Funcional

Comparativo de Ferramentas

Análise Logográ�ca

Análise Cromográ�ca

Análise Tipográ�ca

Análise Pictográ�ca

Análise Iconográ�ca

Escala de Diferencial Semântico

Análise Heurística

ESCOPO

Requisitos do Projeto

Requisitos do Produto

3

6

8

10

11

16

17

18

19

20

21

22

23

24

25

26

31

32

33

34

37

40

43

46

49

51

52

Sumário

Organização do Site - Card Sorting

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

Ferramentas

ESTRUTURA

Organograma do Site

Fluxograma - Tarefa 1



ESQUELETO

Malha Diagramacional

Wireframes - Hipótese 1




Wireframes - Solução Final

ESTÉTICA

Tipogra�a

Cromogra�a

Iconogra�a

Pictogra�a

Logotipo

EXECUÇÃO

Home

53

55

58

59

60

61

63

64

65

66

67

68

70

72

73

74

75

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 justi�car o resultado �nal das escolhas projetuais, organizar o pensamento e mostrar as os processos criativos utilizados ao longo do projeto.

33

O projeto apresentado neste relatório é uma interface grá�ca 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 �xas.

Introdução

4

O Projeto E é uma metodologia projetual desenvolvida para guiar e otimizar projetos de interface grá�ca 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 in�uê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 bene�cio do resultado �nal.

Introdução

5

Desenho de Novas Experiências

Arquitetura da Informação

Navegação, Interação e Transação

Diagramação e Composição

Estratégia

Analítica, Desenhística e Linguística

Linguístico Desenhístico

Desenho de Superfície

Ergonomia Cognitiva (usabilidade e acessibilidade)

Identidade Grá�co- Visual

Escopo Estrutura Esqueleto Estética Execução

Estrutura do Projeto E

6

ESTRATÉGIA

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 �xas, 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 �xas. . Todo o conteúdo será exposto de modo objetivo, com interface amigável e interativa.

As bikes �xas estão se popularizando no Brasil, e se tornando um objeto de desejo e estilo, por possibilitarem customização. São chamadas de �xas 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í�co 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


9

Bicicleta

Ciclismo Atividade FísicaConsumo

TendênciaCustomização

Transporte

Palavras-Chave

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).

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.

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.


11

Ferramentas: Recursos que os sítios virtuais cons-truí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 resulta-do a ser atingido. É de�nida 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 de�niçã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 proje-tual que usa, de maneira racional e coerente, as tecnologias disponíveis para criar sítios virtuais, sistemas e aplicativos que tenham grande possibi-lidade 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 a�ns de caráter técnico que aumentam substancialmente a acessibilidade de um sitio virtual. O web stan-dards foi elaborado pela W3C (www.w3c.com), um dos principais consórcios fomentadores de diretri-zes 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 caracte-rísticas estético-formais e técnico-estruturais esta-rã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 altera-do na folha de estilos, o re�exo da alteração será instantaneamente atualizado em todos os arqui-


12

(6)Além do computador e do laptop, o sítio virtual poderá ser acessado a partir de diferentes disposi-tivos 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 esta-belecer 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 estru-turar uma página, principalmente quando se busca acessibilidade.

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 indepen-dente da atividade do programador. Ou seja, os dois trabalharão em uma equipe, mas o trabalho de um não in�uenciará 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 coeren-te, facilitando muito a utilização do sítio virtual por pessoas de�cientes visuais ou com problemas de coordenação motora, e por este motivo, impossibilitadas de usar o mause.


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á�co-visual para o sítio, o que aumenta sua usabilidade e sua credibilidade.

IGA: Interface Grá�ca Amigável. Até 1991, quando Tim Berners-Lee introduziu o protocolo de transferência de hipertexto (http) e criou a www com interface grá�ca 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 di�cultoso 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á�co Visual), diagramação e com-posiçã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 inte-rativos que fornecem suporte às atividades cotidianas das pessoas seja no lar ou no trabalho. (Design de Interação).


15

1. O que projetar? 2. Porquê projetar?Uma IGA composta por 12 ferramen-tas utilizáveis e que tem como tema as bikes �xas. 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í�co sobre o tema.

3. Como projetar? 4. Para quem projetar?

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á�cas e técnico-funcionais.

Para programadores que dominem linguagem com-putacional CSS, HTML, XML Javascript, JQuerry.

5. Qual será a tecnologia utilizada?Todos os elementos da IGA serão desenvolvidos no software Adobe Illustrator.

Questões Projetuais

16

A escolha do tema abordado no projeto justi�ca-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 “�xas”. 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 �xas, que se diferenciam e se destacam das bicicletas comuns.

Justi�cativa - Motivo Pessoal

17

Desenvolvimento de IGA sobre bikes �xas com no mínimo 12 ferramentas utilizáveis e que possua de 8 a 16 páginas de interface grá�ca atraente e

navegável

Atingir novos públicos

Vender os produtosoferecidos

Proporcionar uma experiência agradável e única aos usuários

Ser visitado

Aumentar o número de ciclistasnas cidades

Tornar-se referência sobreo tema

Conscientizar as pessoasno uso da bicicleta como transporte

e�ciente e ecológico

Deve ser atingido

Pode ser atingido

Objetivos

18

Antecedentes - História do Tema

http://inventors.about.com/od/bstartinventions/a/History-Of-The-Bicycle.htm

http://www.vocesabia.net/curiosidades/como--surgiram-as-bicicletas/

A Penny Farthing, inventada pelo engenheiro britânico James Starley, foi uma das primeiras bicicletas e�cientes no uso. Tinha o pedal diretamente preso à roda dianteira.

Entre as modi�cações feitas nas bicicletas, estava o sistema de roda livre, que existe na maioria das bicicle-tas atuais. Porém, as bicicletas de corrida continuaram sendo �xas.

1871

http://pt.wikipedia.org/wiki/Ciclista_mensageiro

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 �xa.

1890

1880 - 1900

http://�xacwb.com/como-assim-roda-�xa

A popularidade dos ciclistas mensa-geiros voltou em grandes centros urbanos, como Londres e Nova Yorque, constituindo uma espécie de comuni-dade, com reuniões, e um estilo próprio de se vestir., existindo até hoje.

1970

19

Atualmente, o uso das bikes �xas superou o uso pro�ssional 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, �lmes,

2012

Antecedentes - Situação do Tema

20

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 �xas, 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 �xa no país não é exato, mas estima-se que já existam mais de mil.

21

Antecedentes - História do Gênero do SiteEbay - Site de Comércio Eletrônico

http://www.webdialogos.com/2010/marketing-digital/e--commerce-infogra�co-da-historia-do-ebay/

http://ebay.about.com/od/ebaylifestyle/a/el_history.htm

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.

A primeira venda do Ebay foi uma caneta de laser quebrada, vendida a um colecionador de canetas de laser quebradas por $ 14,83.

1995

http://en.wikipedia.org/wiki/EBay

O primeiro funcionário e o primeiro presidente da empresa foram contratados - Chris Agarpao e Je�rey Skoll respectivamente. Neste ano, cerca de 250 mil itens já estavam à venda no site.

1996

http://workshops.ebay.com/thread.jspa?threadID=410122850

Foi neste ano que o nome Ebay começou a ser utilizado o�cialmente. O número de itens à venda já era de 2 milhões.

19971995

http://en.wikipedia.org/wiki/EBay

O Ebay comprou o Ibazar, um site de leilão europeu, e mais tarde no mesmo ano, comprou o PayPal.

2002

http://www.ebayinc.com/history

O Ebay começa um acordo estratégico com o site de vendas Mercado Livre

2001

22

http://www.webdialogos.com/2010/marketing-digital/e-commerce-infogra�co-da-historia-do-ebay/

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.

2012

Antecedentes - Estado da ArteEbay - Site de Comércio Eletrônico

23

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 �xas 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 e�ciente e ecológico. São ligadas à música, moda e artes, gostam de se diferenciar e de ter sua personalidade inserida na bike �xa.

24

Posicionamento Estético

25

Cronograma

JAN

EIRO

FEVE

REIR

O

MA

RÇO

ABR

IL

MA

IO

JUN

HO

JULH

O

AGO

STO

SETE

MBR

O

OU

TUBR

O

NO

VEM

BRO

DEZ

EMBR

O

26

Análise Estrutural - Site Caloihttp://www.caloi.com/home/

27

Análise Estrutural - Wireframeshttp://www.caloi.com/home/

28

Análise Estrutural - Manchas Grá�cashttp://www.caloi.com/home/

Menu Principal

Atualizações Twitter

Links Redes Sociais

Copyright | Link para Política de Privacidade e Termos de Uso

Logo Caloi

Menu Superior

Notícias de Destaque

Busca

Numeração Destaques

Atalhos para Seções Diversas

FAQ

Logo Caloi

Notícias de Destaque

Numeração Destaques

Atalhos para Seções Diversas

29

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

30

Análise Estrutural - Organogramahttp://www.caloi.com/home/

Home

Logo Caloi Bikes

Speed

Opção 1

Opção 1 Opção 1 Opção 1 Opção 1

Opção 1 Opção 1 Opção 1

Esteiras Ergométricas Transports Remo

MountainBike

InfantoJuvenil

Mobilidade

Caloi e Você

Foto 1 Notícia 1 Slide 1Calendário

Equipe Caloi

Na Trilha Na Estrada Mobilidade Em FormaKids

Ciclofaixa CicloviaMarginal

Águas Clarasdo Rio Pinheiros

Vida Saudável

Notícias Eventos

Produtos Ass. Técnica Onde Comprar

Iniciativas Página TwitterCuide dasua bike

Fitness A Caloi Movimento Universos Buscar FAQAtualizações Twitter

Valores

1898 1970 1980 1990 2000 20102011 2010

Visão Compromisso Releases e Clippings Imagens de ProdutosVídeo 1 Vídeo 2

Categoria Produto

Empresa História Por que Caloi BicicletaTransforma

Imprensa

31

Análise Funcional - Site Do Bemhttp://www.dobem.com/

Tarefa - Encontrar locais que vendem o produto

Descrição do Cenário

Home Onde Encontrar Mapa do Brasil Escolher Estado Lista de Locais

Link para Site do Local

Fechar Janela

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.

32

Comparativo de Ferramentashttp://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

33

Análise Logográ�cahttp://www.brusselsbikepolo.be/blog/ | http://www.�xedsoldiers.com/ | http://www.caloi.com/home/

Forma

Brussels Bike Polo Fixed Soldiers Club Caloi

Cor

Conteúdo

CMYK: 0 | 0 | 0 | 0RGB: 0 | 0 | 0HEX: 000000

CMYK: 0 | 0 | 0 | 0RGB: 255 | 255 | 255HEX: FFFFFF

34

Análise Cromográ�ca - Tokyo Fixed Gearhttp://www.tokyo�xedgear.com/

CMYK: 26 | 90 | 91 | 25RGB: 154 | 46 | 31HEX: 9A2E1F

CMYK: 3 | 1 | 19 | 0RGB: 251 | 248 | 220HEX: FBF8DC

CMYK: 36 | 44 | 65 | 30RGB: 140 | 114 | 80HEX: 8C7250

CMYK: 8 | 7 | 14 | 0RGB: 239 | 234 | 223HEX: EFEADF

CMYK: 40 | 20 | 35 | 4RGB: 164 | 179 | 166HEX: A4B3A6

35

Análise Cromográ�ca - Tag and Juicehttp://www.tagandjuice.com.br/

CMYK: 28 | 92 | 85 | 30RGB: 145 | 41 | 35HEX: 912923

CMYK: 25 | 52 | 73 | 16RGB: 176 | 120 | 72HEX: B07848

CMYK: 0 | 0 | 0 | 100RGB: 0 | 0 | 0HEX: 000000

CMYK: 11 | 8 | 11 | 0RGB: 232 | 231 | 227HEX: E8E7E3

CMYK: 0 | 0 | 0 | 0RGB: 255 | 255 | 255HEX: FFFFFF

36

Análise Cromográ�ca - City Groundshttp://www.citygrounds.com/

CMYK: 91 | 79 | 62 | 97RGB: 0 | 0 | 0HEX: 000000

CMYK: 2 | 95 | 79 | 0RGB: 227 | 36 | 49HEX: E32431

CMYK: 96 | 76 | 6 | 0RGB: 35 | 72 | 148HEX: 234894

37

Análise Tipográ�ca - Linus Bikeshttp://www.linusbike.com/

Menus e Títulos:Tipogra�a 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.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890.,:;?!

38

Análise Tipográ�ca - City Groundshttp://www.citygrounds.com/

Menus e Destaques:Tipogra�a sem serifa, condensada, em caixa alta. Traços regulares, sem contraste de linha.

Textos:Arial, Helvetica, sans-serif.Tamanho:12pxabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRST VWXYZ1234567890.,:;?!

39

Análise Tipográ�ca - Schwinn Bikeshttp://www.schwinnbikes.com/

Menus e Destaques pequenos:Tipogra�a sem serifa, condensada, em caixa alta. Traços regulares, sem contraste de linha.

Destaques:Tipogra�a com serifa, e um leve contraste entre linhas. Maiúscula apenas na primeira letra.

Textos:Arial, Helvetica, sans-serif.Tamanho:12pxabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890.,:;?!

40

Análise Pictográ�ca - Schwinn Bikeshttp://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.

41

Análise Pictográ�ca - Linus Bikeshttp://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.

42

Análise Pictográ�ca - 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á�co da mesma, em várias vistas e contextualizada em locais diferentes, até mesmo sendo utilizadas.

43

Análise Iconográ�ca - Oi Rdiohttp://www.oirdio.com.br/home/

Os ícones do site seguem as cores utilizadas na identidade visual da Oi. Possuem formas simpli�cadas e geométricas, com preenchimento em cores chapadas e saturadas. A maioria dos ícones possuem formas geométricas que os envolve.

44

Análise Iconográ�ca - Caloihttp://www.caloi.com/home/

Os ícones do site possuem formas simpli�cadas, 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.

45

Análise Iconográ�ca - Multishowhttp://multishow.globo.com/

Os ícones do site possuem apenas duas cores, que fazem parte da paleta cromá-tica do site. Todos tem formas geométri-cas que envolvem o ícone, que se apre-sentam com formas simpli�cadas.

46

Escala de Diferencial Semântico - Linus Bikeshttp://www.linusbike.com/

Atraente

2 21 10

Objetivo

Poucas Cores

Interessante

Sério

Dinâmico

Utilitário

Limpo

Agradável

Repulsivo

Confuso

Muitas Cores

Sem Graça

Divertido

Estático

Entretenimento

Ilustrativo

Maçante

47

Escala de Diferencial Semântico - Caloihttp://www.caloi.com/home/

Atraente

2 21 10

Objetivo

Poucas Cores

Interessante

Sério

Dinâmico

Utilitário

Limpo

Agradável

Repulsivo

Confuso

Muitas Cores

Sem Graça

Divertido

Estático

Entretenimento

Ilustrativo

Maçante

48

Escala de Diferencial Semântico - Do Bemhttp://www.dobem.com/

Atraente

2 21 10

Objetivo

Poucas Cores

Interessante

Sério

Dinâmico

Utilitário

Limpo

Agradável

Repulsivo

Confuso

Muitas Cores

Sem Graça

Divertido

Estático

Entretenimento

Ilustrativo

Maçante

49

Análise Heurísticahttp://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

ESCOPO

Requisitos do Projeto

51

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)

Requisitos do Produto

52

O que precisa? Como resolver?

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

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

53


54


LivrosFotogra�a

Home Busca

Sobre Loja Virtual

Cinema

Comparadorde bikes

Filtro deescolha de bikes

Notícias Inspiração Fórum Contato

Login Cadastre-se FAQVersão emoutras línguas

Links pararedes sociais

Quem somos Sobre as bikes �xas

Bikes AcessóriosPartes ecomponentes

Vídeos

55

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 algu-mas 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 refe-rentes 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 obje-tivo, com uma linguagem fácil e adequada aos usuários. Sobre as bikes �xas: Será contado um breve histórico sobre as bikes �xas, seu uso, e suas características principais.

Loja Virtual - Usuários cadastrados poderão comprar na loja virtual.

Bikes: A venda de bikes �xas de diversas marcas será o principal atrativo do site.

56

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 �ltrar as bikes que serão mostradas. Partes e componentes: Também serão vendidos partes e componentes de bikes �xas, 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 �xas, 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 Fotogra�a, 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 �xas, 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.

ESTRUTURA

58

Organograma do Site

Principal

Sobre Loja Virtual

Bikes

Comparadorde bikes

Filtro deescolha

Acessórios

Partes e Componentes

Sobre asbikes �xas

Quem somos

Busca Login Cadastre-se FAQLinks para

redes sociaisVersão em

outras línguas

Inspiração

Fotogra�a Arquivo

Livros Arquivo

Notícias

Arquivo

Fórum

Arquivo

ArquivoCinema Arquivo Arquivo

Vídeos Arquivo

Contato

?

1

2 3

59

Fluxograma - Tarefa 1Bikes - Comparar Bikes

Loja Virtual

BikesComparador

de bikes

Salvar eimprimir

Salvar esair

Sair

Selecionarbikes?

Sim

Não

Alterarbikes?

Não

Sim

Salvarcomparação?

Sim

Não

Imprimir

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.

60

Fluxograma - Tarefa 2Acessórios - Comprar Capacete

LoginForma de

Pagamento

Loja Virtual

AcessóriosComprarproduto

Boleto

Cartão

Arquivar

Con�rmar?

Senhaincorreta!

Sim

Não

Imprimir?SimNão

Cartãoinválido!

Imprimir


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 con�rmar 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.

61

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

VídeosLista devídeosInspiração

Buscarpalavras-chave

Selecionarvídeo

Sair da busca

Não

Resultadosencontrados?

Sim


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.

ESQUELETO

63

Malha Diagramacional

GRID: 960 px

25 px 10 px 65 px

64


65


66


67


68

Wireframes - Solução FInal

ESTÉTICA

70

Tipogra�a

Textos:Como tipogra�a base, foi escolhida a Lato, por ter diversas variações, ser de fácil legibilidade e também por estar disponível como Webfont.

Textos principais: 10 pxTextos auxiliares: 9 px

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%¨&*( )

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%¨&*( )

71

Menus, Títulos e Destaques:Como tipogra�a base, foi escolhida a Bebas Neue, por suas formas retas, que lembram partes das bicicletas, e pela sua fácil legibilidade.

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

Tipogra�a

ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%¨&*( )

72

Cromogra�a

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 �xas 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: 255 B: 255

#FFFFFF

R: 255 G: 210 B: 0

#FFD200

R: 0 G: 0 B: 0

#000000

73

Iconogra�a

Os ícones criados para o site possuem um círculo amarelo e um símbolo preto central. Todos possuem cantos arredondados.

Conteúdo/páginaanterior

Fechar janela/excluir produto

Trocar de produto Reproduzir vídeo

Conteúdo/páginaseguinte

Visualizar mais conteúdo

74

Pictogra�a

As imagens utilizadas em banners e destaques terão fotogra�as 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.

75

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 �xas, sendo um apelido utilizado tanto internacional como nacionalmente.A tipogra�a utilizada foi a Nilland Regular. Suas formas retas remetem ao quadro das bikes, e o seu peso leve remete à leveza das bikes �xas, 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 �xas.

EXECUÇÃO