Projeto de WEB Site

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

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.

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

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

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.

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.

Análise e Projeto de Sites

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.

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.

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?

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.

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.

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)

Mapa de Páginas

Mapa de Páginas - Formalização

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.

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.

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.


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



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.



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.



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.


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


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.

Exemplo

Indicação clara de que o usuário está na

página de Pós-Graduação da UFJF



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.



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.

Exemplo

Link para texto mais detalhado



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.

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.

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.

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.

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.

Mapa do Site

Mapa do Site

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.

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

Exemplo

Opção para telefone

Envio de mensagem

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

Education

Projeto de WEB Site