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