1) O documento discute a importância do planejamento no projeto de sites, incluindo etapas como definição, arquitetura, design e implementação. 2) É necessário considerar aspectos técnicos, características do site, objetivos, necessidades dos usuários, requisitos de conteúdo e funcionalidade, arquitetura da informação e estruturação do espaço informacional no projeto. 3) O design visual e de interação, como o mapa do site, é fundamental para orientar os usuários e facilitar a navegação.

1. Projeto de Web Sites
Programação para Web I – EADDCC023
Prof. Edmar Welington Oliveira
Universidade Federal de Juiz de Fora – UFJF
Departamento de Ciência da Computação - DCC

2. Projeto de Sites
 Projetar Web Site
 Antes de iniciar a construção de um website é importante que haja um
planejamento do projeto. Este planejamento, em geral, é dividido em etapas
para melhor organizar a execução das tarefas. Uma sugestão de metodologia
para este desenvolvimento poderia incluir, por exemplo, as etapas de
Definição, Arquitetura, Design, Implementação. Evidentemente, nem todo
projeto estará pautado nestas etapas (alguns podem ter várias outras). Além
disso, a divisão do trabalho nestas etapas não significa a existência exata de
uma fronteira entre elas. Na verdade, no decorrer do processo as etapas
interagem enquanto são redefinidos detalhes do projeto.

3. Projeto de Sites
 Projetar Web Site
 Convém destacar ainda que o trabalho de webdesign, assim como tudo que se
refere à Internet, ainda é uma novidade. Em se tratando de desenvolvimento
Web, metodologias, técnicas e tecnologias se encontram sempre em constante
evolução

4. Projeto de Sites
 Projetar Web Site
 Projeto de sites é o planejamento necessário para a elaboração de um web site
qualquer. Para se elaborar um projeto de web site, faz-se necessário analisar
inúmeros fatores. De uma forma geral, o projeto de sites precisa levar em
conta os seguintes itens:
 No próximo slide

5. Projeto de Sites
 Características Técnicas
 Hospedagem. Onde o site será hospedado e todas as características do host.
 Domínio. Envolve a escolha do nome do site e o seu registro
 Web Marketing. Toda a estratégia em torno da promoção do site
 Web Analytics. Mensuração ou a análise das estatísticas do site.
 Tecnologia de programação. Que tecnologia será usada.

6. Projeto de Sites
 Características do Site
 Tipos de site. Outro aspecto relevante é considerar o tipo de site que será
projetado. Em uma definição livre, poderemos classificar os sites em: sites
institucionais, portais de conteúdo, blogs, hotsites, intranet, sistema web
based, entre outros.
 Arquitetura da informação. Como será a estrutura do site. Aqui podemos
incluir diversos recursos, como: Sistema de busca interno, menu de navegação,
página de contato, home do site, formulário de cadastro, página de impressão,
enquetes e pesquisas, mapa de localização, mapa do site, entre outros.
 Layout. Como será a apresentação do site. Considere: Topo do site, rodapé,
tipologia, cores, largura e altura do site, imagens, animações, etc.

7. Análise e Projeto de Sites

8. Projeto de Sites
 Objetivos do Site
 A criação de um web site exige a definição clara dos objetivos do mesmo
 Algumas perguntas que podem ajudar neste processo
 Quais os objetivos do web site a ser projetado?
 Quem é o público (principal e secundário) ?
 Qual o perfil deste público?
 Etc.

9. Projeto de Sites
 Necessidades dos Usuários
 As interfaces dos web sites, independentemente do seu tamanho e dos seus
objetivos, procuram estabelecer relacionamentos personalizados com seus
usuário. Para atender as suas necessidades, é preciso conhecer a fundo os
interesses destes usuários
 Usuários satisfeitos voltam ao site, recomendam-no aos amigos, solicitam
menos ajuda. Para atender ao seu público, os gestores e desenvolvedores de
sites precisam se manter atentos às suas necessidades e expectativas em
relação à usabilidade, à localização de informações, à qualidade e natureza do
conteúdo, à experiência de uso.

10. Projeto de Sites
 Necessidades dos Usuários (continuação)
 Algumas perguntas que podem ajudar no projeto de um site
 Qual o modo de acesso (largura de banda equipamento, local de acesso –
escola, trabalho, residência –, idade, gênero, hábitos).
 O que leva o público a procurar o site, que necessidades procura atender?
O que pode ser oferecido?
 Como são os usuários prioritários? Há perfis diferenciados? Em caso
afirmativo, como atendê-los, com layout, abordagem editorial
diferenciados?
 Se há venda de produtos ou serviços, como é o processo de aquisição? Que
recursos mobiliza? Provê retorno? Motivar as pessoas a comprar?
 Que soluções de design podem melhorar o site, ou aperfeiçoar a
experiência dos visitantes? Como implementar estas ideias?

11. Projeto de Sites
 Requisitos de Conteúdo de Funcionais
 A definição dos requisitos de conteúdo (como será estruturado, que tipo de
informação será disponibilizada, etc.) e funcionais (para que tipo de dispositivo
será produzido o site, se existe limitações em termos de largura de banda de
internet, etc.) também é de suma importância no desenvolvimento de um site.
 Algumas perguntas que devem ser respondidas
 Como deve ser a estrutura básica do conteúdo?
 O site deverá ser sempre atualizado?
 O conteúdo (textos, imagens, vídeos, á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.

12. Projeto de Sites
 Arquitetura da Informação
 Arquitetura da informação pode ser descrita como a arte e a ciência de
organizar a informação para ajudar as pessoas a satisfazer suas necessidades
de informação de forma efetiva, o que implica organizar, navegar, marcar e
buscar mecanismos nos sistemas de informação.
 A arquitetura da informação deve tornar clara a missão e visão do site,
equilibrando as necessidades da organização que o patrocina com as
necessidades da audiência. Deve também determinar o conteúdo e as
funcionalidades do site, especificando como os usuários vão encontrar
informações através da sua organização, rotulagem e sistemas de buscas. E
prever como o site vai mudar e evoluir ao longo do tempo.

13. Projeto de Sites
 Estruturação do Espaço Informacional
 Compreende
 Diagramação
 Design/Estruturação da navegação
 Ambos são discutidos em material extra (disponível no Moodle)

14. Mapa de Páginas

15. Mapa de Páginas - Formalização

16. Projeto de Sites
 Design de Interação (Mapa do Site)
 É fundamental que se projete a estrutura do site em termos das páginas a
serem criadas e do relacionamento entre as mesmas. Uma técnica interessante
é criar essa estrutura no papel, através de técnicas como brainstorming. Isso
possibilita que se tenha uma visão geral inicial do projeto, que pode ser
alterado através de discussões entre os interessados.

17. Projeto de Sites
 Design Visual
 O design visual de um sie é tão importante quanto os demais quesitos. A
aparência do site deve ser atraente para motivar o leitor interessado no
conteúdo a visitar todo o site e, preferencialmente, com frequência.
 Alguns pontos a considerar
 Apresentar um formato original e atraente. A consistência no alinhamento
dos elementos, no uso de tipologias e estilos, bem como nas cores dos
elementos reforça a confiança dos usuários nas informações publicadas
 Mostrar uma tela sem elementos demais, muitas cores, ou fundos
saturados, para não dificultar a localização dos itens e a sua seleção.

18. Características das Páginas
 Página Inicial (Principal)
 Embora tenha a mesma estrutura visual e conceitual do resto do site, uma
página Principal bem diferente das páginas internas sinaliza claramente que
contém referências de acesso para todas as outras. Estudos afirmam que 40%
dos visitantes chegam a um site pelas páginas internas, onde ficam de 25 a 35
segundos. Por isto, a diferenciação da Principal ajuda a orientar os usuários na
estrutura de informações.
 É importante manter a aparência da Principal atraente para motivar o leitor
interessado no conteúdo a visitar as páginas internas.

19. Características das Páginas
 Características a considerar na página Principal:
 1 - Identificar claramente a localização do usuário e a atividade/conteúdo mais
importante do site e o que este pode oferecer (através do logotipo e/ou do
símbolo, com breve descrição em local bem visível, relação direta do layout
com a atividade e clareza dos títulos das barras de navegação).

20. Características das Páginas
 Características a considerar na página Principal:
 2 - Oferecer suporte aos usuários para encontrar o que procuram, através de
ferramentas de busca, contato bem visível e fácil de usar, arquitetura da
informação clara, atalhos para páginas mais profundas na estrutura.

21. Características das Páginas
 Características a considerar na página Principal:
 3 - Ter mais área para a navegação do que para conteúdo. Este é o caso em
que a página Principal apresenta apenas chamadas e links para o conteúdo
mais importante. Já as páginas internas apresentam textos e imagens que
desenvolvem os assuntos com mais profundidade.

22. Características das Páginas
 Características a considerar na página Principal:
 4 - Informar os assuntos de maneira concisa e direta, para que os leitores não
se dispersem entre as informações e deixem de encontrar o que estão
procurando.
 5 - Ser dividida em diferentes seções de acordo com os objetivos estratégicos
da marca e com a estrutura de informações.

23. Características das Páginas
 Páginas Internas
 A rigor em um web site todas as páginas são internas, inclusive a Principal, pois
todas fazem parte do canal e a navegação não segue uma ordem linear, como
num livro ou um filme. De qualquer forma, "páginas internas" são aqui
apontadas como as que não incluem a Principal, localizadas na segunda
camada de navegação
 Algumas características devem ser consideradas nas páginas web internas para
facilitar o deslocamento e a realização de tarefas. Os próximos slides,
destacamos algumas

24. Características das Páginas
 Características a considerar
 Mostrar o logotipo da empresa ou organização em local bem visível, ligado à
página Principal. Isso ajuda ao usuário na identificação do site em que está.
Isso é importante , pois cada vez mais as páginas internas são acessadas
diretamente, sem que o usuário sinta necessidade de passar pela Principal.
Veículos como blogs, ferramentas de busca, e-mails informativos, wikis e
tecnologias como RSS se consolidam como suportes à navegação dos leitores
online e os direcionam para as informações que procuram.

25. Exemplo
Indicação clara de que o usuário está na
página de Pós-Graduação da UFJF

26. Características das Páginas
 Características a considerar
 Apresentar em destaque o nome da página Principal, de preferência no canto
superior esquerdo. O termo de referência pode ser também Home, e pode ser
substituído pelo logotipo o site.
 Procurar manter o mesmo estilo nas páginas, para contextualizar a
navegação e orientar o usuário
 Manter as informações estruturais de navegação, sobre o site (como
breadcrumb, ferramenta de busca, data de atualização, links relacionados,
mapa do site) e de auxílio ao usuário sempre em locais de fácil acesso e
visualização.

27. Características das Páginas
 Características a considerar
 Se o conteúdo for muito extenso, dividir o assunto em um resumo geral numa
página e detalhar o assunto em outra, de forma que o usuário possa decidir se
quer se aprofundar no assunto.

28. Exemplo
Link para texto mais detalhado

29. Características das Páginas
 Características a considerar
 Prover mais informações sobre o assunto da página, como por exemplo imagens
ou fotos ilustrativos, links para páginas do site ou de outros sites ou vídeos
relacionados.

30. Projeto de Layout
 Projetar o Layout
 O layout da interface não se relaciona apenas à sua aparência, que contribui
para a experiência subjetiva e emocional de recepção e ação. Na verdade o
estilo visual, com fontes, cores, imagens, composição, é parte integrante do
design da informação e da funcionalidade dos aplicativos online.
 O layout da interface influencia a primeira impressão, de caráter subjetivo, do
usuário que usa uma interface online, especialmente daqueles que o fazem
pela primeira vez. A primeira impressão positiva facilita a compreensão da
estrutura do conteúdo e do conceito editorial, bem como da funcionalidade da
interface.

31. Projeto de Layout
 Projetar o Layout
 Além de criar empatia imediata com o usuário, o layout da tela influencia a
facilidade de encontrar os fragmentos de informações de maneira intuitiva.
Uma interface saturada, com muitas instruções, sinais, rótulos, demanda mais
tempo de aprendizado de uso e maior esforço para a localização das
informações.
 E a falta de pistas visuais, com sinais pouco visíveis, logotipos difíceis de
localizar ou funcionalidades difíceis de decifrar, dificulta a utilização. O layout
influencia também como o visitante do site se posiciona em relação ao seu
conteúdo. Um layout agradável inspira confiança e estimula a navegação em
diferentes páginas. Neste aspecto, a questão da diagramação é importante,
pois especifica onde e como os elementos de uma página ficarão dispostos.

32. Projeto de Layout
 Projetar o Layout
 A organização visual das informações está também relacionada ao
deslocamento entre as páginas e às indicações do conteúdo disponível,
orientando assim a ação do usuário.

33. Mapa do Site
 Definição
 Mapa do site é a expressão pela qual são conhecidas as páginas que listam as
páginas de um site, ou as páginas principais das principais seções, geralmente
dispostas de maneira hierárquica. Representa visualmente a arquitetura de
informações com as suas subordinações internas. Ajuda o usuário a localizar
informações, bem como a visualizar a localização de cada área em relação à
estrutura geral.

34. Mapa do Site

35. Mapa do Site

36. Mapa do Site
 Algumas Características
 Para evidenciar a relação hierárquica entre as áreas de informações, o mapa
do site enfatiza a importância das páginas iniciais de cada uma das áreas e
facilita a visualização das subordinações.

37. Entre em Contato
 Página de Contato
 Na Página Principal, deve ser facilmente encontrado
 A página de contato deve ser clara e objetiva
 As informações para contato devem ser facilmente visualizadas
 É interessante oferecer mais de uma opção de contato
 Ex: telefone e e-mail

38. Exemplo
Opção para telefone
Envio de mensagem

39. Projeto de Web Sites
Programação para Web I – EADDCC023
Prof. Edmar Welington Oliveira
Universidade Federal de Juiz de Fora – UFJF
Departamento de Ciência da Computação - DCC