estrutura e estética: organização, layout, cores e tiposjair/webdesign/webpresent.pdf · design...
TRANSCRIPT
Design Web
Estrutura e estética: Organização, layout, cores e tipos
������������� �������� �������� ����� � !�"
Apresentação: Estrutura e Estética
z Organização z Navegação
z Layoutz Cores e Tipografia
������������� �������� ���� ��� ������� ���
Representação e Apresentação
�Representação– Utilizar algo para se referir a outro– O signo tem o papel de representar– O código é o instrumento que facilita a produção de signos e
representações�
Apresentação– Utilizar o canal ou meio para veicular uma representação (signo ou
mensagem)– O meio é a mensagem [Marshall McLuhan]
tempoposicionamento
�!�"�"�#$�%�& '�(�)�*�& +�*, *�- .�*�/�& 0�1
Organização
z Define a estrutura de organização das informações e elementos de interface
z Por que organizar?– Limitação cognitiva: Usuários precisam trabalhar por
partes– Limitação computacional: precisam ser adequados ao
meio
z Interfaces de usuário na Web são estruturadas de acordo com o modelo de hipertexto
������������� �������� ���� ��� ������� ���
Organização hierárquica
z É a estrutura mais utilizadaz Usuário memoriza melhor e perde-se menos
Profunda Larga
Home Page
������������� �������� ���� ��� ������� ���
Organização linear
z Usada para tarefas que requerem seqüência de atividadesz Livros, revistas e manuais normalmente são organizados
de forma linear
Linear Pura
Linear com alternativas
������������� �������� ���� ��� ������� ���
Organização em rede
z Não muito recomendada. Usuário pode ficar perdido.z Apenas com boas metáforas
������������� �������� ���� ��� ������� ���
Organização – Exemplo
z A organização refletida no layout
������������� �������� ���� ��� ������� ���
Organização – Exemplo
z Mapa do site
������������� �������� ���� ��� ������� ���
Organização e acesso
z Técnica de visualização da informação para navegar no site
������������� �������� ���� ��� ������� ���
Organização: Diretrizes
z Analise a especificação e verifique se a organização está balanceada
z Evite que o usuário navegue muito de uma página para outra numa mesma tarefa
z Verifique se o usuário memoriza facilmente a organização do site
z Use o modelo conceitual do domínio como base para a organização
z Utilize as categorias do domínio para organizar as informações e serviços do sistema
z Evite que serviços muito utilizados fiquem em partes muito “profundas” de uma organização
z Coloque um mapa disponível em todos os pontos da organização. Use mapas mais abstratos
������������� �������� ���� ��� ������� ���
Organização: Diretrizes para Home Page
z Home page é a página de entrada do sitez Deve refletir o propósito do sitez Deve indicar quais os objetivos, as informações
e/ou serviços do sitez Deve indicar como interagir com o site para ter
acesso aos recursosz Deve conter elos para acesso aos recursosz Deve indicar o responsável pelo site e como entrar
em contato
������������� �������� ���� ��� ������� ���
Navegação
z Metáfora utilizada para indicar o carregamento dos diversos arquivos de um hipertexto
z O termo indica que o usuário percorreu um elo do hipertexto
z A navegação pode ser:– Para um outro trecho da mesma página– Para uma outra página do mesmo site– Para um outro site ou sistema
������������� �������� ���� ��� ������� ���
Navegação: Exemplo
z A organização serve de base para o modelo de navegação
Links do site
Links externos
Links namesmapágina
������������� �������� ���� ��� ������� ���
Navegação: orientação
z Uma boa navegação deve indicar:
–Onde estou?
–De onde vim?
–Para onde posso ir?
������������� �������� ���� ��� ������� ���
Navegação: antecipação
z Pode-se antecipar o conteúdo do destino– Texto pop-up sobre quando passa o mouse sobre o elo– Preview da página
������������� �������� ���� ��� ������� ���
Navegação: metáfora
z Metáforas podem facilitar a navegação
������������� �������� ���� ��� ������� ���
Navegação: atalhos
z Uma outra forma de implementar a navegação é utilizando botões ou menus pulldown
z Podem confundir o usuário:– Botões são usados preferencialmente para comandos
– Menus são usados preferencialmente para escolha de informações
������������� �������� ���� ��� ������� ���
Navegação: Diretrizes
z A navegação deve refletir a organizaçãoz Os elos devem indicar qual o conteúdo do destinoz Indique os diferentes tipos de elosz O usuário deve identificar os elos facilmentez O usuário não deve ficar perdidoz Atalhos facilitam a navegaçãoz É importante o acesso direto à home page a partir
de qualquer ponto do sitez Permita que o usuário volte sempre para a página
inicial
������������� �������� ���� ��� ������� ���
Navegação: Avaliação
z Quantas páginas são necessárias para se chegar a uma informação ou função?
z E para sair de uma função para outra?z Existe possibilidade de voltar para a anterior?z Existe possibilidade de voltar para o início?z O usuário consegue identificar todos os elos?z É fácil clicar em todos os elos?
������������� �������� ���� ��� ������� ���
Layout: Conceito
z Organização do texto e demais elementos na página
z Facilita a compreensão das informações e serviços
z É essencialmente um fator de comunicabilidadez A área de design gráfico desenvolveu diversas
técnicas que podem ser empregadas– Proximidade e Alinhamento– Simetria e Balanceamento– Escala e proporção
������������� �������� ���� ��� ������� ���
Layout: Exemplo
z Layout distingue categorias de informações e serviços
z Muitas informações, mas layout padrão deste site facilita a leitura. O usuário sabe onde achar a informação
������������� �������� ���� ��� ������� ���
Layout de Informações do do mínio�
Diversas técnicas de Visualização da Informação podem ser empregadas
������������� �������� ���� ��� ������� ���
Layout de informações do do mínio
������������� �������� ���� ��� ������� ���
Layout de Formulários
z O layout da página ajuda ao usuário entender a seqüência de ações
z Agrupamento, alinhamento, balanceamento, repetição, contraste e subordinação são técnicas de diagramação que orientam o usuário
Ruim Boa
������������� �������� ���� ��� ������� ���
Layout de Formulários
������������� �������� ���� ��� ������� ���
Layout sem técnica
������������� �������� ���� ��� ������� ���
Design g ráfico: 4 princípios básicos
z Proximidade– A proximidade implica em uma relação– Itens relacionados entre si deve ser agrupados
z Alinhamento– Nada deve ser colocado arbitrariamente em uma página– Cada item deve ter uma conexão visual com algo na página
z Repetição– Algum aspecto do design deve repetir-se no material inteiro.– Cria uma identidade. Situa o elemento no contexto.
z Contraste– Se dois itens não têm relação ou são opostors, diferencie-os
completamente.– O contraste atrai o leitor.
Robin Williams, 94
������������� �������� ���� ��� ������� ���
Aplicando os princípios
ProximidadeAlinhamento Contraste
������������� �������� ���� ��� ������� ���
Resultado
Repetição
������������� �������� ���� ��� ������� ���
Layout de FormuláriosAlinhamento
Agrupamento
������������� �������� ���� ��� ������� ���
Especificando o layout
z O Layout pode ser especificado através de esquemas
Nome:
Sobrenome:
CPF:
Cartão:
������������� �������� ���� ��� ������� ���
Layout: Diretrizes
z Organize a página de acordo com informações e serviços
z Evite poluição da informação: “Menos é Mais”
z Páginas com muita informação dificultam encontrar o que se procura
z Um bom espaçamento atrai o leitorz Informações relacionadas devem estar agrupadas
������������� �������� ���� ��� ������� ���
Exercício
z Refazer o layout da página abaixo
������������� �������� ���� ��� ������� ���
Tipologia e cores
z Cores e tipos podem ser usados para deixar o sitemais atrativo
z Oferecem uma identidade ao sistema
z A legibilidade pode ser melhorada com cores e tipo adequados
z Consistência de cores e tipos facilitam a organização
������������� �������� ���� ��� ������� ���
Tipografia e cores: Exemplo 1
������������� �������� ���� ��� ������� ���
Tipografia e cores: Exemplo 2
������������� �������� ���� ��� ������� ���
Tipografia e cores: Exemplo 3�
Estas são as cores da empresa�
Não ficam bem num site, dificulta a leitura�
Os tipo de fontes também ficam ilegíveis na tela.
Empresa.com•Conheça-nos•Conheça-nos
•Consultor •Consultor
•Serviços •Serviços
•Informações •Informações
•Cadastro •Cadastro
•Vendas •Vendas
������������� �������� ���� ��� ������� ���
Percepção de Cores
�O espectro da luz
�Cores Primárias (cores-luz)– Vermelho, Verde, Azul– Soma: Branco. Ausência: Preto
�Elementos fundamentais da cor– Matiz
É a característica que define e distingue uma cor. Vermelho, verde ou azul, pôr exemplo, são 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 é vívido e saturado, enquanto o de intensidade baixa ou fraca caracteriza cores fracas ou "pastel".
!�"�#�#�$%�&�' (�)�*�+�' ,�+- +�. /�+�0�' 1�2
Cores sec und árias, terciárias e complementares
z Cores secundárias– Combinação das primárias
z Cores terciárias– Combinação das
secundárias
z Cores complementares– A é complementar a B se B
é combinação de duas cores nas quais A não está presente
– Aparecem em lados oposto no círculo cromático
P
P P
S S
S
T
T
T T
T
T
������������� �������� ���� ��� ������� ���
Harmonia Cromática
�Com uma cor– Escala de tons e valores –
utiliza o índice de luminosidade na variação para o preto ou branco
– Cinzas coloridos – mistura da cor com o cinza.
�Com duas cores– Acordes consonantes – utiliza-
se cores vizinhas– Acordes dissonantes – utiliza-se
cores complementares (opostas)
�Com três cores– Consonantes, Dissonantes e
Assonantes– Assonantes – tríades primárias
consonantes
dissonantes
������������� �������� ���� ��� ������� ���
Cores: Exemplo de Harmonia
�Segue a programação visual do evento– Cartazes, folders, capas
– Elaborado por um artista gráfico�
Utiliza harmonia com duas cores dissonantes
������������� �������� ���� ��� ������� ���
Tipografia
�Variáveis– Fonte, Estilos, Tamanho, Cor
�Fonte– Com serifa: adequado para papel – maior definição – leitura mais intensiva
em textos densos– Sem serifa: adequado para meios eletrônicos ou cartazes – leitura mais
rápida e pouca densidade de texto�
Estilos: – Negrito, itálico, sublinhado
Negrito e itálico permitem contrastes
Nunca use o sublinhado – apenas para links
– Não confunda com as cores dos links. Padrão: azul indica link�
Explore contrastes adequadamente�
Mantenha a consistência de todas as variáveis
Sem serifa Com serifa
������������� �������� ���� ��� ������� ���
Tipografia e cores: Diretrizes
z Evite muita variedade de cores e tiposz Use-os adequadamente para deixar o site
agradável
z Use-os com precisão quando quiser comunicar categorias de informação ou serviço
z Coloque as cores e tipo adequadas ao tipo do monitor e tamanho da tela
z Não use as cores da empresa se elas afetarem a legibilidade
z Seja consistente
������������� �������� ���� ��� ������� ���
Imagens
z Utilizadas para a representação– Desenhos, gráficos, figuras, fotografias, ...
z Visão da semióticaz Modelo de McCloud
René Margrite(Isto não é um cachimbo)
������������� �������� ���� ��� ������� ���
O que significa?
(Obra de Leo Vila)
������������� �������� ���� ��� ������� ���
Exemplo de imagens
z Problemas de Significação– Imagens não correspondem aos significados interpretados
z Problemas de Organização– Os grupos não fazem sentido.
Escrever Pastas Endereços Filtros BuscarmensagensPOP3
Pesquisa Avançada
Atualizar Compromissos
Disco Web Terminal SSH
Perfis Sair
������������� �������� ���� ��� ������� ���
Representação: O triângu lo de McCloud
Compromissocom a
realidade
Plano dasFiguras
Mais detalhes:Semelhança
Significado
Plano da Linguagem
Menos detalhes
Sem compromissocom a realidade
������������� �������� ���� ��� ������� ���
Semiótica
z Ciência que estuda os processo de significação e comunicação
z Signos – qualquer coisa que significa algo para alguém
ícones
índices
símbolos
������������� �������� ���� ��� ������� ���
Imagens: diretrizes
z Os significados variam de uma cultura para outraz Use imagens de qualidade: nitidez, resolução e
tamanhoz Imagens devem ser produzidas por profissionais
competentes– Fotógrafos– Designers de ícones
z Cuidado com direitos autoraisz Usa ferramentas de tratamento de imagens
adequadas
������������� �������� ���� ��� ������� ���
Exemplo de design g ráfico de baixa qualidade
�Uso excessivo de cores e tipos
�Falta de compromisso com a identidade visual da empresa
�Imagens desnecessárias
�Imagens de baixa qualidade
�Serviços indisponíveis
������������� �������� ���� ��� ������� ���
Acess ibilidade: Conceito e recomendações
z Conceito que indica que a interface pode ser utilizada por pessoas com deficiências
z O W3C apresenta recomendações para acessibilidade
z Use HTML apenas para estruturar o documento
z Use texto como alternativa a figuras
z Não use tabelas ou frames para estruturar a páginaz Permita que as letras sejam aumentadas sem prejuízo do
layout
z Não utilize elementos de interação muito pequenos
z Ofereça alternativas