Upload
elida-tavares
View
501
Download
2
Embed Size (px)
Citation preview
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