Projeto de Web Sites

Programao para Web I EADDCC023

Prof. Edmar Welington Oliveira

Universidade Federal de Juiz de Fora UFJF
Departamento de Cincia da Computao - DCC

Projeto de Sites

Projetar Web Site

Antes de iniciar a construo de um website importante que haja um
planejamento do projeto. Este planejamento, em geral, dividido em etapas
para melhor organizar a execuo das tarefas. Uma sugesto de metodologia
para este desenvolvimento poderia incluir, por exemplo, as etapas de
Definio, Arquitetura, Design, Implementao. Evidentemente, nem todo
projeto estar pautado nestas etapas (alguns podem ter vrias outras). Alm
disso, a diviso do trabalho nestas etapas no significa a existncia exata de
uma fronteira entre elas. Na verdade, no decorrer do processo as etapas
interagem enquanto so redefinidos detalhes do projeto.

Projeto de Sites

Projetar Web Site

Convm destacar ainda que o trabalho de webdesign, assim como tudo que se
refere Internet, ainda uma novidade. Em se tratando de desenvolvimento
Web, metodologias, tcnicas e tecnologias se encontram sempre em constante
evoluo

Projeto de Sites

Projetar Web Site

Projeto de sites o planejamento necessrio para a elaborao de um web site
qualquer. Para se elaborar um projeto de web site, faz-se necessrio analisar
inmeros fatores. De uma forma geral, o projeto de sites precisa levar em
conta os seguintes itens:
No prximo slide

Projeto de Sites

Caractersticas Tcnicas

Hospedagem. Onde o site ser hospedado e todas as caractersticas do host.

Domnio. Envolve a escolha do nome do site e o seu registro
Web Marketing. Toda a estratgia em torno da promoo do site
Web Analytics. Mensurao ou a anlise das estatsticas do site.
Tecnologia de programao. Que tecnologia ser usada.

Projeto de Sites

Caractersticas do Site
Tipos de site. Outro aspecto relevante considerar o tipo de site que ser
projetado. Em uma definio livre, poderemos classificar os sites em: sites
institucionais, portais de contedo, blogs, hotsites, intranet, sistema web
based, entre outros.
Arquitetura da informao. Como ser a estrutura do site. Aqui podemos
incluir diversos recursos, como: Sistema de busca interno, menu de navegao,
pgina de contato, home do site, formulrio de cadastro, pgina de impresso,
enquetes e pesquisas, mapa de localizao, mapa do site, entre outros.
Layout. Como ser a apresentao do site. Considere: Topo do site, rodap,
tipologia, cores, largura e altura do site, imagens, animaes, etc.

Anlise e Projeto de Sites

Projeto de Sites

Objetivos do Site
A criao de um web site exige a definio clara dos objetivos do mesmo
Algumas perguntas que podem ajudar neste processo
Quais os objetivos do web site a ser projetado?
Quem o pblico (principal e secundrio) ?
Qual o perfil deste pblico?
Etc.

Projeto de Sites

Necessidades dos Usurios

As interfaces dos web sites, independentemente do seu tamanho e dos seus
objetivos, procuram estabelecer relacionamentos personalizados com seus
usurio. Para atender as suas necessidades, preciso conhecer a fundo os
interesses destes usurios
Usurios satisfeitos voltam ao site, recomendam-no aos amigos, solicitam
menos ajuda. Para atender ao seu pblico, os gestores e desenvolvedores de
sites precisam se manter atentos s suas necessidades e expectativas em
relao usabilidade, localizao de informaes, qualidade e natureza do
contedo, experincia de uso.

Projeto de Sites

Necessidades dos Usurios (continuao)

Algumas perguntas que podem ajudar no projeto de um site
Qual o modo de acesso (largura de banda equipamento, local de acesso
escola, trabalho, residncia , idade, gnero, hbitos).
O que leva o pblico a procurar o site, que necessidades procura atender?
O que pode ser oferecido?
Como so os usurios prioritrios? H perfis diferenciados? Em caso
afirmativo, como atend-los, com layout, abordagem editorial
diferenciados?
Se h venda de produtos ou servios, como o processo de aquisio? Que
recursos mobiliza? Prov retorno? Motivar as pessoas a comprar?
Que solues de design podem melhorar o site, ou aperfeioar a
experincia dos visitantes? Como implementar estas ideias?

Projeto de Sites

Requisitos de Contedo de Funcionais

A definio dos requisitos de contedo (como ser estruturado, que tipo de
informao ser disponibilizada, etc.) e funcionais (para que tipo de dispositivo
ser produzido o site, se existe limitaes em termos de largura de banda de
internet, etc.) tambm de suma importncia no desenvolvimento de um site.
Algumas perguntas que devem ser respondidas
Como deve ser a estrutura bsica do contedo?
O site dever ser sempre atualizado?
O contedo (textos, imagens, vdeos, udios) vai ser produzido
especialmente para o site?
O site deve ser visualizado de maneira diferenciada por diferentes
dispositivos ou deve aparecer exatamente igual em todos?
Etc.

Projeto de Sites

Arquitetura da Informao
Arquitetura da informao pode ser descrita como a arte e a cincia de
organizar a informao para ajudar as pessoas a satisfazer suas necessidades
de informao de forma efetiva, o que implica organizar, navegar, marcar e
buscar mecanismos nos sistemas de informao.
A arquitetura da informao deve tornar clara a misso e viso do site,
equilibrando as necessidades da organizao que o patrocina com as
necessidades da audincia. Deve tambm determinar o contedo e as
funcionalidades do site, especificando como os usurios vo encontrar
informaes atravs da sua organizao, rotulagem e sistemas de buscas. E
prever como o site vai mudar e evoluir ao longo do tempo.

Projeto de Sites

Estruturao do Espao Informacional

Compreende
Diagramao
Design/Estruturao da navegao
Ambos so discutidos em material extra (disponvel no Moodle)

Mapa de Pginas

Mapa de Pginas - Formalizao

Projeto de Sites

Design de Interao (Mapa do Site)

fundamental que se projete a estrutura do site em termos das pginas a
serem criadas e do relacionamento entre as mesmas. Uma tcnica interessante
criar essa estrutura no papel, atravs de tcnicas como brainstorming. Isso
possibilita que se tenha uma viso geral inicial do projeto, que pode ser
alterado atravs de discusses entre os interessados.

Projeto de Sites

Design Visual
O design visual de um sie to importante quanto os demais quesitos. A
aparncia do site deve ser atraente para motivar o leitor interessado no
contedo a visitar todo o site e, preferencialmente, com frequncia.
Alguns pontos a considerar
Apresentar um formato original e atraente. A consistncia no alinhamento
dos elementos, no uso de tipologias e estilos, bem como nas cores dos
elementos refora a confiana dos usurios nas informaes publicadas
Mostrar uma tela sem elementos demais, muitas cores, ou fundos
saturados, para no dificultar a localizao dos itens e a sua seleo.

Caractersticas das Pginas

Pgina Inicial (Principal)

Embora tenha a mesma estrutura visual e conceitual do resto do site, uma
pgina Principal bem diferente das pginas internas sinaliza claramente que
contm referncias de acesso para todas as outras. Estudos afirmam que 40%
dos visitantes chegam a um site pelas pginas internas, onde ficam de 25 a 35
segundos. Por isto, a diferenciao da Principal ajuda a orientar os usurios na
estrutura de informaes.

importante manter a aparncia da Principal atraente para motivar o leitor

interessado no contedo a visitar as pginas internas.

Caractersticas das Pginas

Caractersticas a considerar na pgina Principal:

1 - Identificar claramente a localizao do usurio e a atividade/contedo mais
importante do site e o que este pode oferecer (atravs do logotipo e/ou do
smbolo, com breve descrio em local bem visvel, relao direta do layout
com a atividade e clareza dos ttulos das barras de navegao).

Caractersticas das Pginas

Caractersticas a considerar na pgina Principal:

2 - Oferecer suporte aos usurios para encontrar o que procuram, atravs de
ferramentas de busca, contato bem visvel e fcil de usar, arquitetura da
informao clara, atalhos para pginas mais profundas na estrutura.

Caractersticas das Pginas

Caractersticas a considerar na pgina Principal:

3 - Ter mais rea para a navegao do que para contedo. Este o caso em
que a pgina Principal apresenta apenas chamadas e links para o contedo
mais importante. J as pginas internas apresentam textos e imagens que
desenvolvem os assuntos com mais profundidade.

Caractersticas das Pginas

Caractersticas a considerar na pgina Principal:

4 - Informar os assuntos de maneira concisa e direta, para que os leitores no
se dispersem entre as informaes e deixem de encontrar o que esto
procurando.
5 - Ser dividida em diferentes sees de acordo com os objetivos estratgicos
da marca e com a estrutura de informaes.

Caractersticas das Pginas

Pginas Internas
A rigor em um web site todas as pginas so internas, inclusive a Principal, pois
todas fazem parte do canal e a navegao no segue uma ordem linear, como
num livro ou um filme. De qualquer forma, "pginas internas" so aqui
apontadas como as que no incluem a Principal, localizadas na segunda
camada de navegao
Algumas caractersticas devem ser consideradas nas pginas web internas para
facilitar o deslocamento e a realizao de tarefas. Os prximos slides,
destacamos algumas

Caractersticas das Pginas

Caractersticas a considerar
Mostrar o logotipo da empresa ou organizao em local bem visvel, ligado
pgina Principal. Isso ajuda ao usurio na identificao do site em que est.
Isso importante , pois cada vez mais as pginas internas so acessadas
diretamente, sem que o usurio sinta necessidade de passar pela Principal.
Veculos como blogs, ferramentas de busca, e-mails informativos, wikis e
tecnologias como RSS se consolidam como suportes navegao dos leitores
online e os direcionam para as informaes que procuram.

Exemplo

Indicao clara de que o usurio est na

pgina de Ps-Graduao da UFJF

Caractersticas das Pginas

Caractersticas a considerar
Apresentar em destaque o nome da pgina Principal, de preferncia no canto
superior esquerdo. O termo de referncia pode ser tambm Home, e pode ser
substitudo pelo logotipo o site.
Procurar manter o mesmo estilo nas pginas, para contextualizar a
navegao e orientar o usurio
Manter as informaes estruturais de navegao, sobre o site (como
breadcrumb, ferramenta de busca, data de atualizao, links relacionados,
mapa do site) e de auxlio ao usurio sempre em locais de fcil acesso e
visualizao.

Caractersticas das Pginas

Caractersticas a considerar
Se o contedo for muito extenso, dividir o assunto em um resumo geral numa
pgina e detalhar o assunto em outra, de forma que o usurio possa decidir se
quer se aprofundar no assunto.

Exemplo

Link para texto mais detalhado

Caractersticas das Pginas

Caractersticas a considerar
Prover mais informaes sobre o assunto da pgina, como por exemplo imagens
ou fotos ilustrativos, links para pginas do site ou de outros sites ou vdeos
relacionados.

Projeto de Layout

Projetar o Layout
O layout da interface no se relaciona apenas sua aparncia, que contribui
para a experincia subjetiva e emocional de recepo e ao. Na verdade o
estilo visual, com fontes, cores, imagens, composio, parte integrante do
design da informao e da funcionalidade dos aplicativos online.
O layout da interface influencia a primeira impresso, de carter subjetivo, do
usurio que usa uma interface online, especialmente daqueles que o fazem
pela primeira vez. A primeira impresso positiva facilita a compreenso da
estrutura do contedo e do conceito editorial, bem como da funcionalidade da
interface.

Projeto de Layout

Projetar o Layout
Alm de criar empatia imediata com o usurio, o layout da tela influencia a
facilidade de encontrar os fragmentos de informaes de maneira intuitiva.
Uma interface saturada, com muitas instrues, sinais, rtulos, demanda mais
tempo de aprendizado de uso e maior esforo para a localizao das
informaes.
E a falta de pistas visuais, com sinais pouco visveis, logotipos difceis de
localizar ou funcionalidades difceis de decifrar, dificulta a utilizao. O layout
influencia tambm como o visitante do site se posiciona em relao ao seu
contedo. Um layout agradvel inspira confiana e estimula a navegao em
diferentes pginas. Neste aspecto, a questo da diagramao importante,
pois especifica onde e como os elementos de uma pgina ficaro dispostos.

Projeto de Layout

Projetar o Layout
A organizao visual das informaes est tambm relacionada ao
deslocamento entre as pginas e s indicaes do contedo disponvel,
orientando assim a ao do usurio.

Mapa do Site

Definio
Mapa do site a expresso pela qual so conhecidas as pginas que listam as
pginas de um site, ou as pginas principais das principais sees, geralmente
dispostas de maneira hierrquica. Representa visualmente a arquitetura de
informaes com as suas subordinaes internas. Ajuda o usurio a localizar
informaes, bem como a visualizar a localizao de cada rea em relao
estrutura geral.

Mapa do Site

Mapa do Site

Mapa do Site

Algumas Caractersticas
Para evidenciar a relao hierrquica entre as reas de informaes, o mapa
do site enfatiza a importncia das pginas iniciais de cada uma das reas e
facilita a visualizao das subordinaes.

Entre em Contato

Pgina de Contato
Na Pgina Principal, deve ser facilmente encontrado
A pgina de contato deve ser clara e objetiva
As informaes para contato devem ser facilmente visualizadas
interessante oferecer mais de uma opo de contato
Ex: telefone e e-mail

Exemplo

Opo para telefone

Envio de mensagem

Projeto de Web Sites

Programao para Web I EADDCC023

Prof. Edmar Welington Oliveira

Universidade Federal de Juiz de Fora UFJF
Departamento de Cincia da Computao - DCC