Escolar Documentos
Profissional Documentos
Cultura Documentos
Estrutura e esttica:
Organizao, layout,
cores e tipos
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
Organizao hierrquica
z
z
Larga
Profunda
Organizao linear
z
z
Linear Pura
Organizao em rede
z
z
Organizao Exemplo
z
Organizao Exemplo
z
Mapa do site
Organizao e acesso
z
Tcnica de
visualizao da
informao para
navegar no site
Organizao: Diretrizes
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
Navegao: Exemplo
z
Links externos
Links na
mesma
pgina
Navegao: orientao
z
Onde estou?
De onde vim?
Para onde posso ir?
Navegao: antecipao
z
Navegao: metfora
z
Navegao: atalhos
z
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 Formulrios
z
Ruim
Boa
Layout de Formulrios
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
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
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
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
Matiz
Tom
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
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
consonantes
dissonantes
Consonantes, Dissonantes e
Assonantes
Assonantes trades primrias
Tipografia
Variveis
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:
Sem serifa
Com serifa
Imagens
z
Viso da semitica
z Modelo de McCloud
z
Ren Margrite
(Isto no um cachimbo)
O que significa?
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.
Plano da
Linguagem
Compromisso
com a
realidade
Mais detalhes:
Semelhana
Menos detalhes
Significado
Semitica
z
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
z
z
z
z
z
z
z