Nesta aula voc aprendera:

Plano de planejar seu Site

Estilos de Pginas
Atividade

Desenho de Interface

 Na Web, passados alguns anos, certas convenes

j so utilizadas e respeitadas em uma srie de
websites. Algumas pesquisas j tratam desta questo.

 Marca da empresa: Geralmente localizada no topo

esquerdo da pgina. Este foi um padro 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
padro, recomendado tambm que a marca da
empresa possua um link para a homepage do
website em todas as telas, menos na prpria
homepage.

 Em seu livro Projetando Websites, Jakob Nielsen mostra

que 55% dos websites disponibilizam as informaes
institucionais em links "About (nome da empresa)",
21% como "About Us (Sobre Ns)", 7% como
"Company Information (Informaes da Empresa)" e
5% como "Who We Are (Quem Somos)".

A combinao das informaes

levantadas por vrios autores leva
a um wireframe que pode ser
considerado como padro para o
posicionamento de elementos de
interface de websites.

Elemento de Interface

Posicionamento

Pesquisador

Marca da empresa

Canto superior
esquerdo

Nielsen, Adkisson e
Bernard

Busca

Parte superior

Nielsen, Adkisson e
Bernard

Navegao global

Parte superior com links

na horizontal

Nielsen, Adkisson e
Krug

Navegao local

Coluna da esquerda

Nielsen, Adkisson e
Bernard

Breadcrumbs

Parte superior, abaixo

da marca da
empresa

Adkisson, Lida e
Chaparro e Krug

Contedo global e
contextual

rea central

Bernard

Navegao de rodap

Parte inferior

Nielsen, Krug e Lynch e

Horton

Marca (Link p/ a Home)

Navegao global

Navegao
local

Breadcrumbs

Contedo global e contextual

Navegao de rodap

Buscar

Marca

Ferramentas

(Link p/ a Home)

Buscar

Navegao global
Navegao
local

Breadcrumbs

Contedo global e contextual

Navegao de rodap

Login
Senha

OK

Marca

Ferramentas

(Link p/ a Home)
Navegao
global

Buscar

Login
Senha

OK

Navegao local
Breadcrumbs

Contedo global e contextual

Navegao de rodap

Destaques e ou
Contedo
Relacionado

Marca (Link p/ a Home)

Navegao
global

Navegao local
Breadcrumbs

Contedo global e contextual

Navegao de rodap

Buscar

Resoluo do monitor

rea grfica segura em telas de 1024 x 768 pixels de resoluo:

Largura mxima: 960 pixels;
Altura mxima: 570 pixels (visvel sem precisar utilizar a barra de
rolagem).

Dimenses vlidas para o Netscape Navigator e Internet Explorer

Deslocamento da
pgina em relao
ao browser: 8
pixels.

rea grfica segura

em 960 X 570

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