Projeto de WEB Site

22.477 visualizações

Publicada em

Projeto sobre as etapas de criação de Web-Sites.

Documento enviado pelo Prof° da UFJF da disciplina de Prigramação Web I do curso de Computação.

Publicada em: Educação

Projeto de WEB Site

  1. 1. Projeto de Web SitesProgramaçã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. 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. 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. 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. 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. 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. 7. Análise e Projeto de Sites
  8. 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. 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. 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. 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. 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. 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. 14. Mapa de Páginas
  15. 15. Mapa de Páginas - Formalização
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. Exemplo Indicação clara de que o usuário está na página de Pós-Graduação da UFJF
  26. 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. 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. 28. Exemplo Link para texto mais detalhado
  29. 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. 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. 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. 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. 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. 34. Mapa do Site
  35. 35. Mapa do Site
  36. 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. 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. 38. Exemplo Opção para telefone Envio de mensagem
  39. 39. Projeto de Web SitesProgramação para Web I – EADDCC023 Prof. Edmar Welington Oliveira Universidade Federal de Juiz de Fora – UFJF Departamento de Ciência da Computação - DCC

×