Design Web

Estrutura e esttica:
Organizao, layout,
cores e tipos

Apresentao: Estrutura e Esttica

Organizao
z Navegao
z Layout
z Cores e Tipografia
z

Representao e Apresentao

Representao
Utilizar algo para se referir a outro
O signo tem o papel de representar
O cdigo o instrumento que facilita a produo de signos e
representaes

Apresentao
Utilizar o canal ou meio para veicular uma representao (signo ou
mensagem)
O meio a mensagem [Marshall McLuhan]

tempo
posicionamento

Organizao
Define a estrutura de organizao das
informaes e elementos de interface
z Por que organizar?
z

Limitao cognitiva: Usurios precisam trabalhar por

partes
Limitao computacional: precisam ser adequados ao
meio
z

Interfaces de usurio na Web so estruturadas de

acordo com o modelo de hipertexto

Organizao hierrquica
z
z

a estrutura mais utilizada

Usurio memoriza melhor e perde-se menos
Home Page

Larga

Profunda

Organizao linear
z
z

Usada para tarefas que requerem seqncia de atividades

Livros, revistas e manuais normalmente so organizados
de forma linear

Linear Pura

Linear com alternativas

Organizao em rede
z
z

No muito recomendada. Usurio pode ficar perdido.

Apenas com boas metforas

Organizao Exemplo
z

A organizao refletida no layout

Organizao Exemplo
z

Mapa do site

Organizao e acesso
z

Tcnica de
visualizao da
informao para
navegar no site

Organizao: Diretrizes
z

Analise a especificao e verifique se a organizao est

balanceada
Evite que o usurio navegue muito de uma pgina para
outra numa mesma tarefa
Verifique se o usurio memoriza facilmente a organizao
do site
Use o modelo conceitual do domnio como base para a
organizao
Utilize as categorias do domnio para organizar as
informaes e servios do sistema
Evite que servios muito utilizados fiquem em partes muito
profundas de uma organizao
Coloque um mapa disponvel em todos os pontos da
organizao. Use mapas mais abstratos

Organizao: Diretrizes para Home Page

Home page a pgina de entrada do site
z Deve refletir o propsito do site
z Deve indicar quais os objetivos, as informaes
e/ou servios do site
z Deve indicar como interagir com o site para ter
acesso aos recursos
z Deve conter elos para acesso aos recursos
z Deve indicar o responsvel pelo site e como entrar
em contato
z

Navegao
Metfora utilizada para indicar o carregamento dos
diversos arquivos de um hipertexto
z O termo indica que o usurio percorreu um elo do
hipertexto
z A navegao pode ser:
z

Para um outro trecho da mesma pgina

Para uma outra pgina do mesmo site
Para um outro site ou sistema

Navegao: Exemplo
z

A organizao serve de base para o modelo de navegao

Links do site

Links externos
Links na
mesma
pgina

Navegao: orientao
z

Uma boa navegao deve indicar:

Onde estou?
De onde vim?
Para onde posso ir?

Navegao: antecipao
z

Pode-se antecipar o contedo do destino

Texto pop-up sobre quando passa o mouse sobre o elo
Preview da pgina

Navegao: metfora
z

Metforas podem facilitar a navegao

Navegao: atalhos
z

Uma outra forma de implementar a navegao utilizando

botes ou menus pulldown
Podem confundir o usurio:
Botes so usados preferencialmente para comandos
Menus so usados preferencialmente para escolha de informaes

Navegao: Diretrizes
A navegao deve refletir a organizao
z Os elos devem indicar qual o contedo do destino
z Indique os diferentes tipos de elos
z O usurio deve identificar os elos facilmente
z O usurio no deve ficar perdido
z Atalhos facilitam a navegao
z importante o acesso direto home page a partir
de qualquer ponto do site
z Permita que o usurio volte sempre para a pgina
inicial
z

Navegao: Avaliao
Quantas pginas so necessrias para se chegar
a uma informao ou funo?
z E para sair de uma funo para outra?
z Existe possibilidade de voltar para a anterior?
z Existe possibilidade de voltar para o incio?
z O usurio consegue identificar todos os elos?
z fcil clicar em todos os elos?
z

Layout: Conceito
Organizao do texto e demais elementos na
pgina
z Facilita a compreenso das informaes e
servios
z essencialmente um fator de comunicabilidade
z A rea de design grfico desenvolveu diversas
tcnicas que podem ser empregadas
z

Proximidade e Alinhamento
Simetria e Balanceamento
Escala e proporo

Layout: Exemplo
z

Layout distingue
categorias de
informaes e
servios
Muitas
informaes,
mas layout
padro deste
site facilita a
leitura. O
usurio sabe
onde achar a
informao

Layout de Informaes do domnio

Diversas tcnicas de Visualizao da Informao podem ser
empregadas

Layout de informaes do domnio

Layout de Formulrios
z

O layout da pgina ajuda ao usurio entender a seqncia

de aes
Agrupamento, alinhamento, balanceamento, repetio,
contraste e subordinao so tcnicas de diagramao
que orientam o usurio

Ruim

Boa

Layout de Formulrios

Layout sem tcnica

Design grfico: 4 princpios bsicos

Robin Williams, 94
z

Proximidade
A proximidade implica em uma relao
Itens relacionados entre si deve ser agrupados

Alinhamento
Nada deve ser colocado arbitrariamente em uma pgina
Cada item deve ter uma conexo visual com algo na pgina

Repetio
Algum aspecto do design deve repetir-se no material inteiro.
Cria uma identidade. Situa o elemento no contexto.

Contraste
Se dois itens no tm relao ou so opostors, diferencie-os
completamente.
O contraste atrai o leitor.

Aplicando os princpios

Alinhamento
Proximidade

Contraste

Resultado

Repetio

Layout de Formulrios
Alinhamento

Agrupamento

Especificando o layout
z

O Layout pode ser especificado atravs de esquemas

Nome:
Sobrenome:
CPF:
Carto:

Layout: Diretrizes
Organize a pgina de acordo com informaes e
servios
z Evite poluio da informao: Menos Mais
z Pginas com muita informao dificultam
encontrar o que se procura
z Um bom espaamento atrai o leitor
z Informaes relacionadas devem estar agrupadas
z

Exerccio
z

Refazer o layout da pgina abaixo

Tipologia e cores
Cores e tipos podem ser usados para deixar o site
mais atrativo
z Oferecem uma identidade ao sistema
z A legibilidade pode ser melhorada com cores e
tipo adequados
z Consistncia de cores e tipos facilitam a
organizao
z

Tipografia e cores: Exemplo 1

Tipografia e cores: Exemplo 2

Tipografia e cores: Exemplo 3

Estas so as cores da empresa
No ficam bem num site, dificulta a leitura
Os tipo de fontes tambm ficam ilegveis na tela.

Empresa.com
Conhea-nos
Conhea-nos
Consultor
Consultor
Servios
Servios
Informaes
Informaes
Cadastro
Cadastro
Vendas
Vendas

Percepo de Cores

O espectro da luz
Cores Primrias (cores-luz)
Vermelho, Verde, Azul
Soma: Branco. Ausncia: Preto

Elementos fundamentais da cor

Matiz

a caracterstica que define e distingue uma cor. Vermelho, verde ou azul, pr

exemplo, so matizes

Tom

Refere-se a maior ou menor quantidade de luz presente na cor.

Intensidade
Diz respeito ao brilho da cor. Um matiz de intensidade alta ou forte vvido e
saturado, enquanto o de intensidade baixa ou fraca caracteriza cores fracas ou
"pastel".

Cores secundrias, tercirias e complementares

z

Cores secundrias
Combinao das primrias

Cores tercirias

Combinao das
secundrias
z

Cores complementares
A complementar a B se B
combinao de duas cores
nas quais A no est
presente
Aparecem em lados oposto
no crculo cromtico

P
T

T
S

Harmonia Cromtica
Com uma cor

Escala de tons e valores

utiliza o ndice de luminosidade
na variao para o preto ou
branco
Cinzas coloridos mistura da
cor com o cinza.

Com duas cores

consonantes

Acordes consonantes utilizase cores vizinhas

Acordes dissonantes utiliza-se
cores complementares
(opostas)

Com trs cores

dissonantes

Consonantes, Dissonantes e
Assonantes
Assonantes trades primrias

Cores: Exemplo de Harmonia

Segue a programao visual do evento

Cartazes, folders, capas
Elaborado por um artista grfico

Utiliza harmonia com duas cores dissonantes

Tipografia

Variveis

Fonte, Estilos, Tamanho, Cor

Fonte
Com serifa: adequado para papel maior definio leitura mais intensiva
em textos densos
Sem serifa: adequado para meios eletrnicos ou cartazes leitura mais
rpida e pouca densidade de texto

Estilos:

Negrito, itlico, sublinhado

Negrito e itlico permitem contrastes

Nunca use o sublinhado apenas para links

No confunda com as cores dos links. Padro: azul indica link

Explore contrastes adequadamente

Mantenha a consistncia de todas as variveis

Sem serifa

Com serifa

Tipografia e cores: Diretrizes

Evite muita variedade de cores e tipos
z Use-os adequadamente para deixar o site
agradvel
z Use-os com preciso quando quiser comunicar
categorias de informao ou servio
z Coloque as cores e tipo adequadas ao tipo do
monitor e tamanho da tela
z No use as cores da empresa se elas afetarem a
legibilidade
z Seja consistente
z

Imagens
z

Utilizadas para a representao

Desenhos, grficos, figuras, fotografias, ...

Viso da semitica
z Modelo de McCloud
z

Ren Margrite
(Isto no um cachimbo)

O que significa?

(Obra de Leo Vila)

Exemplo de imagens
Pesquisa
Avanada

Escrever

Disco Web

Terminal SSH

Atualizar Compromissos
Pastas Endereos Filtros Buscar
mensagens
POP3

Perfis

Sair

Problemas de Significao
Imagens no correspondem aos significados interpretados

Problemas de Organizao
Os grupos no fazem sentido.

Representao: O tringulo de McCloud

Plano das
compromisso
Figuras Sem
com a realidade

Plano da
Linguagem

Compromisso
com a
realidade

Mais detalhes:
Semelhana

Menos detalhes

Significado

Semitica
z

Cincia que estuda os processo de significao e

comunicao
Signos qualquer coisa que significa algo para algum

cones

smbolos

ndices

Imagens: diretrizes
Os significados variam de uma cultura para outra
z Use imagens de qualidade: nitidez, resoluo e
tamanho
z Imagens devem ser produzidas por profissionais
competentes
z

Fotgrafos
Designers de cones

Cuidado com direitos autorais

z Usa ferramentas de tratamento de imagens
adequadas
z

Exemplo de design grfico de baixa qualidade

Uso excessivo de cores

e tipos
Falta de compromisso
com a identidade visual
da empresa
Imagens
desnecessrias
Imagens de baixa
qualidade
Servios indisponveis

Acessibilidade: Conceito e recomendaes

z

z
z
z
z
z

z
z

Conceito que indica que a interface pode ser utilizada por

pessoas com deficincias
O W3C apresenta recomendaes para acessibilidade
Use HTML apenas para estruturar o documento
Use texto como alternativa a figuras
No use tabelas ou frames para estruturar a pgina
Permita que as letras sejam aumentadas sem prejuzo do
layout
No utilize elementos de interao muito pequenos
Oferea alternativas