Universidade Federal de Gois

Faculdade de Artes Visuais

Trabalho de Concluso de Curso
Alex Martins Arnaldo
Lucas Nascimento Peixoto
Murillo Martins de Campos
Simonides Garcia Mendes
Orientador: Prof. Ms. Mrcio Alves Rocha
Goinia
2009
Estudo Terico-prtico para Desenvolvimento de Interfaces
Web Adaptativas para Dispositivos Mveis
Alex Martins Arnaldo
Lucas Nascimento Peixoto
Murillo Martins de Campos
Simonides Garcia Mendes
Trabalho apresentado banca de Artes Vi-
suais - Habilitao em Design Grfico da
Universidade Federal de Gois, como parte
para aprovao na disciplina de Trabalho
de Concluso de Curso.
rea de Concentrao: Design de Interao.
Orientador: Prof. Ms. Mrcio Alves Rocha
Goinia
2009
Estudo Terico-prtico para Desenvolvimento de Interfaces
Web Adaptativas para Dispositivos Mveis
Sumrio
Apresentao
Objetivos
Definio do Projeto
Metodologia
Fase Analtica
Planejamento
Distribuio de tarefas
Cronograma
Avaliao de similares
Benchmarking
Arquitetura da informao
Prototipao de baixa fidelidade
Fase Criativa
Prototipao de mdia fidelidade
Anteprojeto feito com Axure-pr
Propostas de layout
Refinamento e escolha do layout
Fase Executiva
Criao de layout final
Execuo
Adaptao para mobile
Layout final mobile
Concluso
Bibliografia
07
09
11
13
14
14
15
16
19
22
24
25
26
27
29
30
31
32
34
35
36
lista d - trabalho de concluso de curso
7
Apresentao
O grupo envolvido neste trabalho, iniciou suas pesquisas na rea de
mdias locativas, que logo foi descartada, e interfaces mveis com
a inteno de desenvolver um projeto que viabilizasse a elaborao
de um website que reunisse trabalhos acadmicos e dados profis-
sionais de membros cadastrados. Tudo feito com caractersticas vol-
tadas para posterior adaptao para dispositivos mveis (celulares).
Interface simples e minimalista com poucos nveis de navegao.
lista d - trabalho de concluso de curso
9
Objetivos
Este trabalho tem como finalidade o estudo terico-prtico do
desenvolvimento de um website adaptvel e que possa servir como
ferramenta acadmica no ambiente da Faculdade de Artes Visu-
ais F.A.V. O site ser desenvolvido com caractersticas especficas
que possibilitem sua posterior adaptao para dispositivos mveis,
seguindo processos metodolgicos de organizao e estruturao,
previstos e executados pelo grupo por meio de pesquisas referentes
a etapas de desenvolvimento de projeto.
lista d - trabalho de concluso de curso
11
Definio do projeto
O website que o grupo se props a desenvolver tem como alicerce
motivacional a criao de um sistema que facilite integrar, socializar
e divulgar trabalhos e informaes acadmicas ou profissionais dos
estudantes da F.A.V. (pblico-alvo), visando a posterior adaptao
para dispositivos mveis provendo acesso somente s ferramentas
de busca de informaes cadastrais e contedo institucional.
importante ressaltar que sites construdos originalmente para telas
convencionais no devem ser adotados para uso em dispositivos
mveis sem adaptaes de contedo e interface, devido as
limitaes de dimenses de tela, de largura de banda,
limitaes de processamento do prprio aparelho e a possibilidade
da consulta ser realizada pelo usurio em movimento. Devido
a estas restries a adaptao ser feita apenas para algumas
ferramentas do site, como busca por perfis.
A partir da definio deste propsito, foi iniciado pelo grupo o
levantamento de uma lista de todos os alunos com situao de
matrcula regular no curso de Artes Visuais Habilitao em
Design Grfico no ano de 2009 que pudesse viabilizar a reunio de
trabalhos e informaes profissionais e acadmicas dos alunos.
Praticamente todo o contedo do site ser alimentado pelos
prprios usurios, previamente cadastrados. Apenas usurios que
constam nesta relao sero aceitos pelo sistema. Os usurios
cadastrados que estiverem logados no sistema tero acesso
completo ao contedo e funcionalidades do site, podendo criar
perfil, postar trabalhos e gerar lista de contatos. Usurios no
cadastrados podero utilizar o sistema de busca e visualizar
os perfis e portfolio dos usurios cadastrados. O restante das
funcionalidades do site - Informao sobre o projeto, Contato com
os autores do projeto e Ajuda tero acesso irrestrito para todos
usurios. A navegao foi projetada para ser simples e fluda, com
poucos nveis para serem percorridos durante a navegao. Sua
interface minimalista pretende viabilizar a transposio para telas
de tamanho reduzido, alm de contribuir com a melhor visualizao
das informaes textuais e imagticas contidas no site.
lista d - trabalho de concluso de curso
13
Para organizao inicial e realizao das tarefas definidas no projeto
adotamos como referncia o mtodo difundido por Bruce Archer,
que consiste em dividir o projeto em trs fases:
1 Fase analtica
planejamento;
distribuio de tarefas;
cronograma;
avaliao de similares;
benchmarking;
arquitetura da informao e
prototipao de baixa fidelidade.
2 Fase criativa
prototipao de mdia fidelidade;
anteprojeto feito com Axure-Pr;
proposta de layout e
refinamento e escolha de layout.
3 Fase executiva
criao de layout final e
execuo.
Metodologia
lista d - trabalho de concluso de curso
14
Nesta etapa, todo o trabalho foi previamente discutido entre o
grupo para que no ocorressem surpresas com eventuais problemas
de projeto, que poderiam resultar em retrocessos ou abandono
de resultados. Foram tambm definidos os mtodos e formas de
avaliao de similares que auxiliaram o desenvolvimento do site. A
forma de avaliao adotada foi baseada nos princpios de design e
as heursticas de Nielsen (2001).
Cada integrante do grupo ficou encarregado de pesquisar e
executar tarefas que foram distribudas aps o levantamento das
necessidades do projeto. Este levantamento foi feito na etapa de
planejamento e facilitou de forma considervel a distribuio de
todo o material a ser trabalhado.
Fase Executiva Fase Criativa Fase Analtica
Planejamento
Distribuio de tarefas
lista d - trabalho de concluso de curso
15
Cronograma
A entrega dos resultados de pesquisa e execuo de tarefas de
cada membro do grupo foram controladas por um cronograma,
disponibilizado para acesso em comum, postado em um frum de
discusses on-line, criado exclusivamente para o projeto.
Cronograma para realizao de TCC
Alunos
Alex Martins
Lucas Peixoto
Murillo Martins
Simonides Garcia
Legendas Reunio com orientador Apresentao Prvia Apresentao Final
TCC 1
MARO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Todos Pesquisa bibliogrfica e escolha do tema
ABRIL 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Todos
MAIO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Todos Problematizao e nova pesquisa bibliogrfica
JUNHO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Todos Escolha do objeto e Definio dos objetivos Cardsorting, fluxograma e Layout de baixa fidelidade
Alex Benchmarking - Avaliao heurstica Deviantart
Lucas Benchmarking - Avaliao heurstica Designup
Murillo Benchmarking - Avaliao heurstica Carbonmade
Simonides Benchmarking - Avaliao heurstica Facebook
JULHO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Alex Wire Frame com Axure-Pro Frias acadmicas
Lucas Escolha do nome Frias acadmicas
Murillo Escolha do nome Frias acadmicas
Simonides Escolha do nome Frias acadmicas
TCC 2
AGOSTO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Alex ltimas correes do wireframe
Lucas Pesquisa Tipogrfica para marca Identidade visual
Murillo Avaliao do Wire Frame
Simonides Avaliao do Wire Frame
SETEMBRO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Alex
Lucas Finalizao da marca
Murillo Propostas para Layout
Simonides Propostas para Layout
OUTUBRO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
Alex Refinamento e escolha de Layout Execuo
Lucas Refinamento e escolha de Layout Criao do Layout final Testes de Uso
Murillo Refinamento e escolha de Layout Criao do Layout final Testes de Uso
Simonides Refinamento e escolha de Layout Criao do Layout final Testes de Uso
NOVEMBRO 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
Alex Adaptao Reviso de todo processo
Lucas Testes de uso e reviso
Murillo Relatrio
Simonides Relatrio
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
16
Avaliao de Similares
A avaliao feita inicialmente foi baseada apenas na percepo
e conhecimento tcnico na rea de design de interao de cada
integrante do grupo, foi uma avaliao preliminar, informal e
exploratria que buscava checar alguns aspectos relacionados ao
uso dos produtos. Os sites anlisados foram:
www.designup.pro.com
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
17
www.carbonmade.com
www.facebook.com
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
18
www.deviantart.com
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
19
Benchmarking
A avaliao informal deu sequncia ao diagnstico por
benchmarking destes sites, que oferecem um suporte semelhante
ao do projeto ainda em fase embrionria, desta forma foi possvel
avaliar pontos positivos e possveis melhorias, com a finalidade de
aperfeioar o processo de navegao e usabilidade.
Avaliao heurstica A avaliao heurstica foi realizada nos
mesmos sites que foram avaliados por benchmarking, de acordo
com os critrios estabelecidos na literatura de Jacob Nielsen. Os dez
princpios bsicos que foram avaliados neste ponto foram:
1) Feedback - O sistema deve
sempre manter o usurio
informado sobre o que ocorre
durante sua navegao.
2) Falar a linguagem do usurio
- Terminologias e expresses
devem ser voltadas para os
modelos mentais do usurio e
sua linguagem habitual, evitando
uma comunicao voltada para o
sistema.
3) Sadas claramente demarcadas
- O usurio deve ter o controle
de abortar tarefas, desfazer
comandos e retornar a estados
anteriores de navegao.
No permitir ou minimizar a
incidncia destes erros.
Fase Executiva Fase Criativa Fase Analtica
1
2
3
O sistema informa o usurio de
forma clara quando o mouse est
sobre o boto do menu navegvel.
Com uma linguagem amigvel o
sistema passa mensagens para o
usurio de forma simples e direta.
Aps clicar no link o sistema
oferece ao usurio opes de
controle como enviar ou cancelar.
lista d - trabalho de concluso de curso
20
4) Consistncia - Uma
padronizao para as formas de
realizar um comando ou acessar
uma informao necessria
para facilitar o reconhecimento.
Formataes, apresentaes e
metforas devem ser coerentes
entre si.
5) Prevenir erros - Evitar
situaes de erro. Conhecer as
situaes que mais provocam
erros e modificar a interface para
que estes erros no ocorram.
As situaoes que geralmente
induzem ao erro devem ser
mapeadas para modificaes na
interface, para no permitir ou
minimizar a incidncia destes
erros.
6) Minimizar a sobrecarga de
memria do usurio - O sistema
deve mostrar os elementos
de dilogo e permitir que o
usurio faa suas escolhas, sem
a necessidade de lembrar um
comando especfico.
7) Atalhos -O sistema deve
oferecer maneiras de acelerar
acessos e processos para usurios
mais experientes, por meio de
atalhos, abreviaes e funes de
duplo clique. Os atalhos tambm
permitem recuperar informaes
que esto em profundidade na
rvore navegacional a partir da
interface principal.
Fase Executiva Fase Criativa Fase Analtica
4
5
6
7
Neste exemplo as mesmas
expresses so utilizadas para
identificar as reas.
Lista que no permite insero de
texto pelo usurio e previne erros
sem restringir a usabilidade.
De forma simples e coerente o
sistema indica onde o usurio pode
encontrar seus amigos.
Elemento que est no subnvel
vagas tambm pode ser
acessado pela pgina inicial.
lista d - trabalho de concluso de curso
21
8) Dilogos simples e naturais -
Deve-se apresentar exatamente
a informao que o usurio
precisa no momento, nem mais
nem menos. A sequncia da
interao e o acesso aos objetos e
operaes devem ser compatveis
com o modo pelo qual o usurio
realiza suas tarefas.
9) Boas mensagens de erro -
Linguagem clara e sem cdigos.
Devem ajudar o usurio a
entender e resolver o problema.
No devem culpar ou intimidar o
usurio.
10) Documentao - O ideal
que um software seja to fcil de
usar (intuitivo) que no necessite
de ajuda ou documentao. Se
for necessria a ajuda deve estar
facilmente acessvel on-line.
Fase Executiva Fase Criativa Fase Analtica
8
9
10
Tela exclusiva para esclarecimento
de dvidas e problemas de
navegao.
O sistema apenas informa qual o
problema encontrado sem cdigos
ou linguagem tcnica.
A tela de cadastro no possui
informaes desnecessrias ou que
no fazem referncia tarefa.
lista d - trabalho de concluso de curso
22
Arquitetura da Informao
Feita a avaliao dos sites similares, o grupo comea a levantar,
organizar e priorizar as informaes que o site ir conter. Segundo
Rosenfield e Morville em Information Architeture for the world wide
web: Designing Large-Scale Web Sites, 2002, o trabalho do arquiteto
de informao balancear as caractersticas e as necessidades
dos usurios, do contedo e do contexto. Neste processo alguns
mtodos especficos foram adotados para melhor estruturao.
Estes mtodos foram:
Consiste na distribuio de
cartes para possveis usurios
do sistema. Estes devem ento
organizar e at mesmo renomear
categorias que iro existir no site,
alm de apontar as taxonomias
mais coerentes. Este teste foi
realizado com um grupo de
cinco alunos do 8 perodo
de design grfico da F.A.V. e
possibilitou juntamente com os
outros mtodos de organizao
adotados, a construo de uma
prototipao de baixa fidelidade
voltada para o usurio final.
Cardsorting
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
23
Fase Executiva Fase Criativa Fase Analtica
Este mtodo serviu como uma
representao esquemtica
do fluxo de navegao do site.
Cada passo para navegao
previsto para se obter a
melhor forma de transio das
informaes e aes, com o
intuito de estabelecer o melhor
direcionamento do usurio.
No livro Design para a internet
- Projetanto a experincia
perfeita, 2005, Felipe Memria
cita Nielsen quando aborda
o assunto sobre prticas
recomendadas para projetos
de navegao dizendo que uma
prtica simples e tradicional de
criar uma navegao satisfatria
respondendo as trs principais
questes dos usurios:
Onde estou?
Onde estive?
Onde posso ir?
Fluxograma
lista d - trabalho de concluso de curso
24
Fase Executiva Fase Criativa Fase Analtica
A prototipao foi feita com roughs manuais em discusses entre
o grupo, tendo como referncia os resultados obtidos na fase de
anlise.
Prototipao de baixa fidelidade
Prottipo de baixa fidelidade
lista d - trabalho de concluso de curso
25
Seguindo a organizao obtida com o prottipo de baixa fidelidade,
o de mdia foi construdo com a definio de grid, resoluo
mxima e mnima a serem utilizadas e distribuio de contedo.
Prototipao de mdia fidelidade
Prottipo de mdia fidelidade
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
26
Com o uso do software Axure- Pr, foi construdo o anteprojeto
navegvel, que permitiu o diagnstico e consequentes solues para
deficincias na usabilidade. Pequenos ajustes para otimizao de
navegao e busca de informaes.
Fase Executiva Fase Criativa Fase Analtica
Anteprojeto feito com Axure-Pr
Prottipo de Mdia fidelidade
lista d - trabalho de concluso de curso
27
Propostas de Layout
Com toda a navegao definida, caminhos estabelecidos e contedo
organizado o layout passa a ser o novo foco. Vrias possibilidades
so testadas, tendo como variveis cores, fontes, grids, botes,
boxes, listas e uma srie de pequenos detalhes que somam e
formam resultados diversos. Todo o grupo discute as melhores
opes a serem adotadas. Para servir como ponto inicial e
tambm como forma de tornar coerentes as opes de layout, foi
desenvolvida uma marca para o site sem grandes preocupaes
com aplicaes diversas ou qualquer outro tipo de estudo mais
aprofundado, dado que a funo desta criao visa apenas orientar
o grupo na escolha da paleta de cores e caractersticas estticas
do layout. A construo desta marca foi feita a partir do nome
escolhido Lista D, utilizando apenas a tipografia Sansation com
ajuste ptico de kerning. O domnio criado para a hospedagem do
site foi www.listad.com.br.
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
28
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
29
Refinamento e escolha do layout
Para chegar a melhor proposta todos os resultados obtidos at
o momento so reunidos e passam pela avaliao do grupo,
que opina, soma detalhes e faz consideraes importantes que
determinam o que permanece e o que retirado do layout.
Fase Executiva Fase Criativa Fase Analtica
lista d - trabalho de concluso de curso
30
Fase Executiva Fase Criativa Fase Analtica
Na ltima fase de todo o processo o grupo passa para a etapa de
construo do layout final, usando como referncias as anlises,
avaliaes e refinamento do estudo de layouts desenhados at
este momento. Os resultados escolhidos foram:
usurio logado
Criao do layout final
lista d - trabalho de concluso de curso
31
Fase Executiva Fase Criativa Fase Analtica
Com todo este material definido foi iniciada a etapa de execuo
do site. As tecnologias implementadas para o desenvolvimento do
site foram - HTML, CSS, Linguagem de programao PHP e banco
de dados MySql que foram necessrias para o funcionamento do
site com a esttica predefinida no layout escolhido. O banco de
dados foi alimentado com os dados dos alunos pr-cadastrados
e os primeiros testes foram feitos para criao de cadastro entre
outras funcionalidades do sistema. Com todo o processo revisado
e o produto final validado pelo grupo feita ento a avaliao
heurstica do sistema funcionando.
Execuo
lista d - trabalho de concluso de curso
32
Fase Executiva Fase Criativa Fase Analtica
Adaptao para mobile
Fluxograma mobile
Visando o acesso s informaes cadastrais dos usurios do site a
qualquer instante e em qualquer lugar, nesta etapa do projeto o
layout final adaptado para pequenas telas de celular tendo como
prioridade a maior compatibilidade possvel de navegadores com
suporte HTML, de preferncia smartphones.
Para que a esttica visual do site original no se perca ou se
desvincule desta adaptao, detalhes como a verificao da
compatibilidade de cada pgina com os testes em W3C so
nescessrios.
Devido a restries destes aparelhos j descritas anteriormente,
apenas parte do site adaptada, especificamente as ferramentas de
login e busca por usurios cadastrados.
lista d - trabalho de concluso de curso
33
Fase Executiva Fase Criativa Fase Analtica
pgina inicial: busca
perfil (resultado da busca)
perfil detalhado
projeto
contato
Prototipao de baixa fidelidade
TEM
TEM
TEM
TEM
TEM
TEM

LOGOTPO

MENU

BUSCAR

TEXTO DO RODAP
SELEO DE TEM
TEM

BUSCA

BUSCA

PROJETO

PROJETO

PROJETO

CONTATO

CONTATO

CONTATO

VOLTAR

VOLTAR

VER PERFL

VER PERFL

VER PERFL

VER PERFL

VER PERFL
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO

LOGOTPO

TEXTO DO RODAP

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL
DADOS PESSOAS
NOME: JOO SLVA
END: AV. ANHANGUERA
DADOS PROFSSONAS
STATUS: ACADMCO
REA: WEB DESGN
EXPERNCA PROFSSONAL
EMPRESA: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO

LOGOTPO

FOTO
DO PERFL

TEXTO DO RODAP

BUSCA

BUSCA

CONTATO

CONTATO

VOLTAR

VOLTAR
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX

LOGOTPO

PROJETO

TEXTO DO RODAP

BUSCA

BUSCA

PROJETO

PROJETO

VOLTAR

VOLTAR
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

LOGOTPO

CONTATO

TEXTO DO RODAP
1
2
3
4
5
TEM
TEM
TEM
TEM
TEM
TEM

LOGOTPO

MENU

BUSCAR

TEXTO DO RODAP
SELEO DE TEM
TEM

BUSCA

BUSCA

PROJETO

PROJETO

PROJETO

CONTATO

CONTATO

CONTATO

VOLTAR

VOLTAR

VER PERFL

VER PERFL

VER PERFL

VER PERFL

VER PERFL
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO

LOGOTPO

TEXTO DO RODAP

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL
DADOS PESSOAS
NOME: JOO SLVA
END: AV. ANHANGUERA
DADOS PROFSSONAS
STATUS: ACADMCO
REA: WEB DESGN
EXPERNCA PROFSSONAL
EMPRESA: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO

LOGOTPO

FOTO
DO PERFL

TEXTO DO RODAP

BUSCA

BUSCA

CONTATO

CONTATO

VOLTAR

VOLTAR
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX

LOGOTPO

PROJETO

TEXTO DO RODAP

BUSCA

BUSCA

PROJETO

PROJETO

VOLTAR

VOLTAR
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

LOGOTPO

CONTATO

TEXTO DO RODAP
TEM
TEM
TEM
TEM
TEM
TEM

LOGOTPO

MENU

BUSCAR

TEXTO DO RODAP
SELEO DE TEM
TEM

BUSCA

BUSCA

PROJETO

PROJETO

PROJETO

CONTATO

CONTATO

CONTATO

VOLTAR

VOLTAR

VER PERFL

VER PERFL

VER PERFL

VER PERFL

VER PERFL
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO

LOGOTPO

TEXTO DO RODAP

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL
DADOS PESSOAS
NOME: JOO SLVA
END: AV. ANHANGUERA
DADOS PROFSSONAS
STATUS: ACADMCO
REA: WEB DESGN
EXPERNCA PROFSSONAL
EMPRESA: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO

LOGOTPO

FOTO
DO PERFL

TEXTO DO RODAP

BUSCA

BUSCA

CONTATO

CONTATO

VOLTAR

VOLTAR
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX

LOGOTPO

PROJETO

TEXTO DO RODAP

BUSCA

BUSCA

PROJETO

PROJETO

VOLTAR

VOLTAR
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

LOGOTPO

CONTATO

TEXTO DO RODAP
TEM
TEM
TEM
TEM
TEM
TEM

LOGOTPO

MENU

BUSCAR

TEXTO DO RODAP
SELEO DE TEM
TEM

BUSCA

BUSCA

PROJETO

PROJETO

PROJETO

CONTATO

CONTATO

CONTATO

VOLTAR

VOLTAR

VER PERFL

VER PERFL

VER PERFL

VER PERFL

VER PERFL
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO

LOGOTPO

TEXTO DO RODAP

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL
DADOS PESSOAS
NOME: JOO SLVA
END: AV. ANHANGUERA
DADOS PROFSSONAS
STATUS: ACADMCO
REA: WEB DESGN
EXPERNCA PROFSSONAL
EMPRESA: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO

LOGOTPO

FOTO
DO PERFL

TEXTO DO RODAP

BUSCA

BUSCA

CONTATO

CONTATO

VOLTAR

VOLTAR
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX

LOGOTPO

PROJETO

TEXTO DO RODAP

BUSCA

BUSCA

PROJETO

PROJETO

VOLTAR

VOLTAR
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

LOGOTPO

CONTATO

TEXTO DO RODAP
TEM
TEM
TEM
TEM
TEM
TEM

LOGOTPO

MENU

BUSCAR

TEXTO DO RODAP
SELEO DE TEM
TEM

BUSCA

BUSCA

PROJETO

PROJETO

PROJETO

CONTATO

CONTATO

CONTATO

VOLTAR

VOLTAR

VER PERFL

VER PERFL

VER PERFL

VER PERFL

VER PERFL
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DADOS
NOME: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO
DSPONVEL
PARA TRABALHO

LOGOTPO

TEXTO DO RODAP

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL

FOTO
DO PERFL
DADOS PESSOAS
NOME: JOO SLVA
END: AV. ANHANGUERA
DADOS PROFSSONAS
STATUS: ACADMCO
REA: WEB DESGN
EXPERNCA PROFSSONAL
EMPRESA: JOO SLVA
REA: WEB DESGN
DSPONVEL
PARA TRABALHO

LOGOTPO

FOTO
DO PERFL

TEXTO DO RODAP

BUSCA

BUSCA

CONTATO

CONTATO

VOLTAR

VOLTAR
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX
TEXTO EXPLCATVO SOBRE O PROJETO LSTA D TEXTO EX

LOGOTPO

PROJETO

TEXTO DO RODAP

BUSCA

BUSCA

PROJETO

PROJETO

VOLTAR

VOLTAR
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO
TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO TEXTO

LOGOTPO

CONTATO

TEXTO DO RODAP
lista d - trabalho de concluso de curso
34
Fase Executiva Fase Criativa Fase Analtica
Layout final mobile
lista d - trabalho de concluso de curso
35
Durante as fases transpostas na concluso deste trabalho vrios
pontos puderam ser analisados por cada integrante do grupo,
somando um proveitoso fluxo de trabalho e conhecimento na rea
de design de interao. Alguns pontos que devem ser ressaltados:
A importncia de analisar e avaliar produtos semelhantes ao que se
pretende desenvolver crucial para se obter um resultado prximo
do desejado, esta foi a etapa que levou grande parte do tempo
como descrito no cronograma devido a necessidade de conhecer
bem o que seria feito a seguir.
Com anlises e referncias em mos outro ponto de grande
importncia foi o empenho geral do grupo para desenvolver lgicas
de navegao eficientes que deram origem aos fluxogramas,
prottipos de baixa fidelidade at chegar no layout final.
A soma de diferentes perfis de estudantes de design com
habilidades diferenciadas dentro do grupo envolvido no projeto
certamente influiu para que possveis lacunas tcnicas ou referentes
a tempo fossem fechadas, grupos heterogneos contam com um
leque de possibilidades muito maior que viabiliza a execuo de
trabalhos de qualidade com poucos recursos.
O estudo terico-prtico para desenvolvimento de website
adaptativo foi concludo de acordo com o projeto e estimativa de
tempo prevista no cronograma criado.
Os mtodos adotados se mostraram satisfatrios para o bom
andamento das atividades que foram desenvolvidas ao longo da
criao de todo o material necessrio.
O resultado final se encontra de acordo com as expectativas
geradas pela proposta inicial, conta com interface simples,
minimalista que pode ter suas principais ferramentas transpostas
para telas de tamanho reduzido como celulares, sem perca de
usabilidade.
* Imagens e arquivos complementares esto disponveis no CD-Rom
que acompanha este relatrio.
Concluso
lista d - trabalho de concluso de curso
36
JOHNSON,Steven. Cultura da Interface. Rio de Janeiro: Jorge Zahar
Editor, 2001.
LVY.Pierre. As tecnologias de inteligncias: o futuro do pensamento
na era da informtica. Rio de Janeiro: Ed.34, 1993.
___-. O que virtual? Rio de Janeiro: Ed. 34, 1996.
___-.Cibercultura.Trad.Carlos Irineu da Costa. So Paulo: Editora 34,
1999.
MEMRIA, Felipe. Design Para a Internet: projetando a experincia
perfeita. Rio de Janeiro: Elsevier, 2005.
MORAES, Anamaria de. Ergodesign de Interfaces: Interao
Humano-Computador, Comrcio, Eletrnico, Celulares. Rio de
Janeiro: Anamaria de Moraes, 2006.
___-.(org). Design e avaliao de interface. Rio de Janeiro: IusEr,
2002.
PREECE, J.; ROGERS, Y; SHARP, H. Design de interao: Alm da
interao homem-computador. 1..Edio. Porto Alegre: Bookman,
2005.
CENTRO PORTUGUS DE DESIGN. Manual de Gesto do Design.
Porto Editora, 1997.
NIELSEN, Jakob. Projetando Websites. Rio de Janeiro: Elsevier, 2000.
NIELSEN, Jakob. Projetando Websites com Usabilidade. Rio de
Janeiro: Elsevier, 2007.
Rosenfield, Louis; MORVILLE, Peter. Information Architeture for
the world wide web: Designing Large-Scale Web Sites. Sebastopol:
OReilly, 2002.
REIS, Guilhermo Almeida dos. Arquitetura de Informao de
Websites. Disponvel em:
HTTP://www.guilhermo.com/apresentacoes/arquiteturainformacao-
fesa-guilhermo.pdf.Acesso em: 28 mai.2009, 16:30:30
Referncias bibliogrficas