Nesta aula você aprendera:

•Plano de planejar seu Site

•Estilos de Páginas

•Atividade

Desenho de Interface

• Na Web, passados alguns anos, certas convenções já são utilizadas e respeitadas em uma série de websites. Algumas pesquisas já tratam desta questão.

• Marca da empresa: Geralmente localizada no topo esquerdo da página. Este foi um padrão que surgiu derivado da cultura ocidental de leitura da esquerda para a direita, de cima para baixo.

• Por ser um comportamento repetido que se tornou um padrão, é recomendado também que a marca da empresa possua um link para a homepage do website em todas as telas, menos na própria homepage.

• Em seu livro Projetando Websites, Jakob Nielsen mostra que 55% dos websites disponibilizam as informações institucionais em links "About (nome da empresa)", 21% como "About Us (Sobre Nós)", 7% como "Company Information (Informações da Empresa)" e 5% como "Who We Are (Quem Somos)".

• A combinação das informações levantadas por vários autores leva a um wireframe que pode ser considerado como padrão para o posicionamento de elementos de interface de websites.

Elemento de Interface Posicionamento Pesquisador

Marca da empresaCanto superior

esquerdoNielsen, Adkisson e

Bernard

Busca Parte superiorNielsen, Adkisson e

Bernard

Navegação globalParte superior com links

na horizontalNielsen, Adkisson e

Krug

Navegação local Coluna da esquerdaNielsen, Adkisson e

Bernard

BreadcrumbsParte superior, abaixo

da marca da empresa

Adkisson, Lida e Chaparro e Krug

Conteúdo global e contextual

Área central Bernard

Navegação de rodapé Parte inferiorNielsen, Krug e Lynch e

Horton

Marca (Link p/ a Home) Buscar

Navegação global

Navegação de rodapé

Navegação local

Breadcrumbs

Conteúdo global e contextual

Navegação de rodapé

Navegação local

Breadcrumbs

Conteúdo global e contextual

Navegação global

Ferramentas

Buscar

Login

OKSenha

Marca

(Link p/ a Home)

Navegação

global

Navegação de rodapé

Navegação local

Breadcrumbs

Conteúdo global e contextual

Ferramentas

Buscar

Login

OKSenha

Marca

(Link p/ a Home)

Destaques e ouConteúdo Relacionado

Marca (Link p/ a Home) Buscar

Navegação

global

Navegação de rodapé

Navegação local

Breadcrumbs

Conteúdo global e contextual

Resolução do monitor

• “Área gráfica segura” em telas de 1024 x 768 pixels de resolução:– Largura máxima: 960 pixels;– Altura máxima: 570 pixels (visível sem precisar utilizar a barra de

rolagem).

Dimensões válidas para o Netscape Navigator e Internet Explorer

Área gráfica segura

em 960 X 570

Deslocamento da página em relação

ao browser: 8 pixels.

Atividade

• Criar a Interface do Seu site usando os conhecimento em aula