DiagramaçãoOrganizando o sistema de informação do site

2

Composição de Páginas webOdair Cavichioli Jr.Roger Blanck – 17/11/1997

“O design não deve ser apenas uma mera decoração, ele precisa comunicar. O leitor nunca deve ter de passar por florestas de botões para obter uma simples notícia.”

3

Composição de Páginas webOdair Cavichioli Jr.O que é a diagramação ?

É a distribuição de elementos gráficos em um espaço limitado, buscando a clareza, a organização e a confiabilidade das informações;

Lógica visual, criando um perfeito equilíbrio entre a sensação visual e as informações gráficas;

Informações relevantes para elaborar uma diagramação:

Público alvo; Relação entre a página e o tamanho da tela; Conteúdo das informações; Largura de banda utilizada pelos usuários.

4

Composição de Páginas webOdair Cavichioli Jr.Processo de interpretação da informação

As páginas são lidas como grandes massas de formatos e cores, com elementos do primeiro plano contrastando com a área de fundo;

Título

As páginas são lidas

como grandes massas de

formatos e cores, com

elementos do primeiro

plano contrastando com a

área de fundo.

Identificação de

informações específicas,

iniciando pelos gráficos.

Analise gramatical do

texto e leitura das frases.

A primeira leitura identifica as informações específicas, iniciando pelos gráficos;

Depois é realizada uma analise gramatical do texto e leitura das frases.

5

Composição de Páginas webOdair Cavichioli Jr.Simplicidade e coerência

Usuários não se impressionam com a complexidade gratuita;

Metáforas de interface devem ser simples, familiares e lógicas. Devem seguir convenções de navegação usuais;

Os melhores designs tornam-se invisíveis durante a navegação, gerando uma adaptação ao seus recursos;

O usuário deve se sentir confortável ao navegar pelo site;

A identidade gráfica deve fornecer “pistas” para a continuidade das informações, utilizando elementos de repetição.

6

Composição de Páginas webOdair Cavichioli Jr.Contraste

Impacto visual que deixa a página graficamente mais interessante, visando a motivação de sua leitura;

Recurso de narrativa que orienta a leitura do usuário, atraindo sua atenção para uma determinada informação;

Cuidados relevantes:

Elementos muito pesados ou abuso de negrito podem distrair ou repelir o olhar do

usuário; Excesso de elementos podem desapontar ou confundir o usuário; Atenção com a limitação tecnológica de acessibilidade: código (HTML, CSS, etc) e

conexão.

7

Composição de Páginas webOdair Cavichioli Jr.Respiro

Espaço reservado para o alívio visual que permitirá ao usuário assimilar as informações obtidas até o momento.

8

Composição de Páginas webOdair Cavichioli Jr.Narrativa

Controle sobre a leitura do usuário;

A diagramação deve ser criada para dar mais ênfase a informação ou recurso principal do site.

9

Composição de Páginas webOdair Cavichioli Jr.Área gráfica segura

Exibição em uma tela 800x600 (com borda de 8 pixels no browser).

760 pixels de largura

410 pixels de altura

10

Composição de Páginas webOdair Cavichioli Jr.Área gráfica segura

Impressão de uma tela 800x600 (com borda de 8 pixels no browser).

760 pixels de largura

410 pixels de altura

560 pixels de largura

11

Composição de Páginas webOdair Cavichioli Jr.Regras “convencionais” de diagramação

1. O design não deve ser meramente decorativo ou alegórico, apresente conteúdo em todas as páginas;

2. Branco, preto e vermelho são as cores que chamam mais atenção (Construtivismo Russo): fundo branco, texto preto e destaques em vermelho;

3. Não distancie as letras minúsculas, pois quebra o ritmo da leitura e a integridade das letras.

4. Nunca use uma grande quantidade de texto em maiúsculo. Lembre-se de que existem outros recursos tipológicos para facilitar a leitura.

5. Use apenas uma ou duas famílias de tipos, combinando uma leve e a outra em negrito.

6. A capa deve ser como um pôster. Uma simples imagem transmite muito mais informações do que várias imagens ou somente texto.

7. Uma imagem parece melhor quando ampliada, principalmente quando é de mal gosto.

8. Seja criativo!

12

Composição de Páginas webOdair Cavichioli Jr.Não faça isso !

1. Não altere o propósito do site. Não basta transpor o conteúdo para um ambiente digital, é preciso tirar proveito dele, explorando todas as suas possibilidades;

2. Não confunda o usuário. Crie um design coerente, nas seções e páginas diferentes. As imagens e ferramentas de navegação devem ter o mesmo aspecto para evitar que o usuário se perca;

3. Organize as informações de forma simples e clara. Não utilize links inúteis;

4. Cuidado com o tamanho fixo (pixel) da página;

5. Não utilize imagens “pesadas”, que demorem para carregar;

6. Evite a tentação tecnológicas. Muitas cores, sombras e efeitos esfumaçados só atrapalham;

7. Não use textos extensos. Com certeza, o único que lerá tudo será seu chefe;

8. Cuidado com o tamanho dos textos. Tipos muito pequenos ou muito grandes incomodam;

9. Lembre-se sempre de que, quando um usuário fica incomodado com um site, ele nunca mais o acessará.

DiagramaçãoOrganizando o sistema de informação do site