SlideShare uma empresa Scribd logo
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 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).
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.
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.
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.
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
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.
Exemplo




          Indicação clara de que o usuário está na
             página de Pós-Graduação da UFJF
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.
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.
Exemplo




          Link para texto mais detalhado
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.
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

Mais conteúdo relacionado

Mais procurados

01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Aula 3 - Introdução a cloud computing
Aula 3 - Introdução a cloud computingAula 3 - Introdução a cloud computing
Aula 3 - Introdução a cloud computing
Eduardo de Lucena Falcão
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
andreluizlc
 
Introdução CSS
Introdução CSSIntrodução CSS
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Computação em Nuvem
Computação em NuvemComputação em Nuvem
Computação em Nuvem
Ricardo Martins ☁
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
pospipoca
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
Tersis Zonato
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
Victor Adriel Oliveira
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
arturramisio
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
Aula 01 - Ms PowerPoint
Aula 01 - Ms  PowerPointAula 01 - Ms  PowerPoint
Aula 01 - Ms PowerPoint
Roney Sousa
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
Ana Luisa Vieira
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
Rodrigo Bueno Santa Maria, BS, MBA
 
Aplicações web parte 1
Aplicações web parte 1Aplicações web parte 1
Aplicações web parte 1
Elaine Cecília Gatto
 
Pacote office
Pacote officePacote office
Pacote office
Eduardo Braga Jr
 
Criação de Sites web Tutorial
Criação de Sites web TutorialCriação de Sites web Tutorial
Criação de Sites web Tutorial
Jose De Almeida Batista
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
Fabio Moura Pereira
 

Mais procurados (20)

01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Aula 3 - Introdução a cloud computing
Aula 3 - Introdução a cloud computingAula 3 - Introdução a cloud computing
Aula 3 - Introdução a cloud computing
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Computação em Nuvem
Computação em NuvemComputação em Nuvem
Computação em Nuvem
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
Wireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveisWireframes para sites e dispositivos móveis
Wireframes para sites e dispositivos móveis
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Criação de páginas web
Criação de páginas webCriação de páginas web
Criação de páginas web
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 
Aula 01 - Ms PowerPoint
Aula 01 - Ms  PowerPointAula 01 - Ms  PowerPoint
Aula 01 - Ms PowerPoint
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Aplicações web parte 1
Aplicações web parte 1Aplicações web parte 1
Aplicações web parte 1
 
Pacote office
Pacote officePacote office
Pacote office
 
Criação de Sites web Tutorial
Criação de Sites web TutorialCriação de Sites web Tutorial
Criação de Sites web Tutorial
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 

Semelhante a Projeto de WEB Site

DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
Andrea Dalforno
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
ssuser595b1e1
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
Jonathan Prateat
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
Web Pixel - Agência Criativa
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
Alvaro Gomes
 
Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13
tecampinasoeste
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
Rio Info
 
Web Standards
Web StandardsWeb Standards
Web Standards
Pedro Tavares
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
Carla Suelen
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
Israel Degasperi
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
Claudio Toldo
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
Jose Claudio Terra
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
Carlos Franco
 
Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
Rafael Marinho
 
Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
Odair Cavichioli
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Luiz da Silveira
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
Sergio Silva
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
icajai
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
Suzana Viana Mota
 
La arquitectura de información del Portal BVS
La arquitectura de información del Portal BVSLa arquitectura de información del Portal BVS
La arquitectura de información del Portal BVS
ComunidadRedDes
 

Semelhante a Projeto de WEB Site (20)

DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
Aula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdfAula 1 - Desenvolvimento do leiaute (1).pdf
Aula 1 - Desenvolvimento do leiaute (1).pdf
 
Artigo papel do web designer
Artigo papel do web designerArtigo papel do web designer
Artigo papel do web designer
 
O que é Web Designer?
O que é Web Designer?O que é Web Designer?
O que é Web Designer?
 
Html - capitulo 04
Html - capitulo 04Html - capitulo 04
Html - capitulo 04
 
Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13Webnode - Revisado 26/10/13
Webnode - Revisado 26/10/13
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Etapas Produtivas Website
Etapas Produtivas WebsiteEtapas Produtivas Website
Etapas Produtivas Website
 
Design e Usabilidade
Design e UsabilidadeDesign e Usabilidade
Design e Usabilidade
 
Usabilidade Conceitos Centrais
Usabilidade Conceitos CentraisUsabilidade Conceitos Centrais
Usabilidade Conceitos Centrais
 
Usabilidade Conceitos Centrais
Usabilidade  Conceitos CentraisUsabilidade  Conceitos Centrais
Usabilidade Conceitos Centrais
 
Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
 
Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Aula 01 layout
Aula 01   layoutAula 01   layout
Aula 01 layout
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Como tornar seu site atraente
Como tornar seu site atraenteComo tornar seu site atraente
Como tornar seu site atraente
 
La arquitectura de información del Portal BVS
La arquitectura de información del Portal BVSLa arquitectura de información del Portal BVS
La arquitectura de información del Portal BVS
 

Mais de Ailton Adriano

Plano de Aula: Matemática usando as TICs
Plano de Aula: Matemática usando as TICsPlano de Aula: Matemática usando as TICs
Plano de Aula: Matemática usando as TICs
Ailton Adriano
 
Midia educacionais tv video
Midia educacionais tv videoMidia educacionais tv video
Midia educacionais tv video
Ailton Adriano
 
Guia do professor - Uso de Novas Tecnologias em sala de aula
Guia do professor - Uso de Novas Tecnologias em sala de aulaGuia do professor - Uso de Novas Tecnologias em sala de aula
Guia do professor - Uso de Novas Tecnologias em sala de aula
Ailton Adriano
 
E book pesquisa-de-palavras-chave1
E book pesquisa-de-palavras-chave1E book pesquisa-de-palavras-chave1
E book pesquisa-de-palavras-chave1
Ailton Adriano
 
Paulo Freire
Paulo FreirePaulo Freire
Paulo Freire
Ailton Adriano
 
Introducao ao estudo_da_psicologia
Introducao ao estudo_da_psicologiaIntroducao ao estudo_da_psicologia
Introducao ao estudo_da_psicologia
Ailton Adriano
 

Mais de Ailton Adriano (6)

Plano de Aula: Matemática usando as TICs
Plano de Aula: Matemática usando as TICsPlano de Aula: Matemática usando as TICs
Plano de Aula: Matemática usando as TICs
 
Midia educacionais tv video
Midia educacionais tv videoMidia educacionais tv video
Midia educacionais tv video
 
Guia do professor - Uso de Novas Tecnologias em sala de aula
Guia do professor - Uso de Novas Tecnologias em sala de aulaGuia do professor - Uso de Novas Tecnologias em sala de aula
Guia do professor - Uso de Novas Tecnologias em sala de aula
 
E book pesquisa-de-palavras-chave1
E book pesquisa-de-palavras-chave1E book pesquisa-de-palavras-chave1
E book pesquisa-de-palavras-chave1
 
Paulo Freire
Paulo FreirePaulo Freire
Paulo Freire
 
Introducao ao estudo_da_psicologia
Introducao ao estudo_da_psicologiaIntroducao ao estudo_da_psicologia
Introducao ao estudo_da_psicologia
 

Último

Redação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptxRedação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptx
DECIOMAURINARAMOS
 
D20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua PortuguesaD20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua Portuguesa
eaiprofpolly
 
Fernão Lopes. pptx
Fernão Lopes.                       pptxFernão Lopes.                       pptx
Fernão Lopes. pptx
TomasSousa7
 
Livro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo FreireLivro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo Freire
WelberMerlinCardoso
 
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
LeticiaRochaCupaiol
 
slides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentarslides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentar
JoeteCarvalho
 
Leonardo da Vinci .pptx
Leonardo da Vinci                  .pptxLeonardo da Vinci                  .pptx
Leonardo da Vinci .pptx
TomasSousa7
 
Pintura Romana .pptx
Pintura Romana                     .pptxPintura Romana                     .pptx
Pintura Romana .pptx
TomasSousa7
 
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
Eró Cunha
 
05-os-pre-socraticos sociologia-28-slides.pptx
05-os-pre-socraticos sociologia-28-slides.pptx05-os-pre-socraticos sociologia-28-slides.pptx
05-os-pre-socraticos sociologia-28-slides.pptx
ValdineyRodriguesBez1
 
A SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIAS
A SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIASA SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIAS
A SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIAS
HisrelBlog
 
Reino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptxReino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptx
CarinaSantos916505
 
Leis de Mendel - as ervilhas e a maneira simples de entender.ppt
Leis de Mendel - as ervilhas e a maneira simples de entender.pptLeis de Mendel - as ervilhas e a maneira simples de entender.ppt
Leis de Mendel - as ervilhas e a maneira simples de entender.ppt
PatriciaZanoli
 
Rimas, Luís Vaz de Camões. pptx
Rimas, Luís Vaz de Camões.          pptxRimas, Luís Vaz de Camões.          pptx
Rimas, Luís Vaz de Camões. pptx
TomasSousa7
 
347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf
347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf
347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf
AntnioManuelAgdoma
 
epidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).pptepidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).ppt
MarceloMonteiro213738
 
GÊNERO TEXTUAL - POEMA.pptx
GÊNERO      TEXTUAL     -     POEMA.pptxGÊNERO      TEXTUAL     -     POEMA.pptx
GÊNERO TEXTUAL - POEMA.pptx
Marlene Cunhada
 
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptxPP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
LuizHenriquedeAlmeid6
 
Aula 1 do livro de Ciências do aluno - sons
Aula 1 do livro de Ciências do aluno - sonsAula 1 do livro de Ciências do aluno - sons
Aula 1 do livro de Ciências do aluno - sons
Érika Rufo
 
Introdução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escolaIntrodução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escola
Professor Belinaso
 

Último (20)

Redação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptxRedação e Leitura_7º ano_58_Produção de cordel .pptx
Redação e Leitura_7º ano_58_Produção de cordel .pptx
 
D20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua PortuguesaD20 - Descritores SAEB de Língua Portuguesa
D20 - Descritores SAEB de Língua Portuguesa
 
Fernão Lopes. pptx
Fernão Lopes.                       pptxFernão Lopes.                       pptx
Fernão Lopes. pptx
 
Livro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo FreireLivro: Pedagogia do Oprimido - Paulo Freire
Livro: Pedagogia do Oprimido - Paulo Freire
 
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
1ª LEI DE OHN, CARACTERISTICAS IMPORTANTES.
 
slides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentarslides de Didática 2.pdf para apresentar
slides de Didática 2.pdf para apresentar
 
Leonardo da Vinci .pptx
Leonardo da Vinci                  .pptxLeonardo da Vinci                  .pptx
Leonardo da Vinci .pptx
 
Pintura Romana .pptx
Pintura Romana                     .pptxPintura Romana                     .pptx
Pintura Romana .pptx
 
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...REGULAMENTO  DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
REGULAMENTO DO CONCURSO DESENHOS AFRO/2024 - 14ª edição - CEIRI /UREI (ficha...
 
05-os-pre-socraticos sociologia-28-slides.pptx
05-os-pre-socraticos sociologia-28-slides.pptx05-os-pre-socraticos sociologia-28-slides.pptx
05-os-pre-socraticos sociologia-28-slides.pptx
 
A SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIAS
A SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIASA SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIAS
A SOCIOLOGIA E O TRABALHO: ANÁLISES E VIVÊNCIAS
 
Reino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptxReino-Vegetal plantas e demais conceitos .pptx
Reino-Vegetal plantas e demais conceitos .pptx
 
Leis de Mendel - as ervilhas e a maneira simples de entender.ppt
Leis de Mendel - as ervilhas e a maneira simples de entender.pptLeis de Mendel - as ervilhas e a maneira simples de entender.ppt
Leis de Mendel - as ervilhas e a maneira simples de entender.ppt
 
Rimas, Luís Vaz de Camões. pptx
Rimas, Luís Vaz de Camões.          pptxRimas, Luís Vaz de Camões.          pptx
Rimas, Luís Vaz de Camões. pptx
 
347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf
347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf
347018542-PAULINA-CHIZIANE-Balada-de-Amor-ao-Vento-pdf.pdf
 
epidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).pptepidemias endemia-pandemia-e-epidemia (1).ppt
epidemias endemia-pandemia-e-epidemia (1).ppt
 
GÊNERO TEXTUAL - POEMA.pptx
GÊNERO      TEXTUAL     -     POEMA.pptxGÊNERO      TEXTUAL     -     POEMA.pptx
GÊNERO TEXTUAL - POEMA.pptx
 
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptxPP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
PP Slides Lição 11, Betel, Ordenança para exercer a fé, 2Tr24.pptx
 
Aula 1 do livro de Ciências do aluno - sons
Aula 1 do livro de Ciências do aluno - sonsAula 1 do livro de Ciências do aluno - sons
Aula 1 do livro de Ciências do aluno - sons
 
Introdução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escolaIntrodução à Sociologia: caça-palavras na escola
Introdução à Sociologia: caça-palavras na escola
 

Projeto de WEB Site

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