26
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 Layout z Cores e Tipografia

Estrutura e estética: Organização, layout, cores e tiposjair/webdesign/webpresent.pdf · Design Web Estrutura e estética: Organização, layout, cores e tipos !" Apresentação:

Embed Size (px)

Citation preview

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