LINGUAGEM VISUAL

AULA 06

Princípios de Diagramação

Prof. Ms. Elizeu N. Silva

A boa diagramação observa quatro princípios gerais:

Contraste

Visa organizar a informação e elevar o poder de atração visual

do layout. Evita a ocorrência de elementos similares no layout.

Se os elementos não forem equivalentes, diferencie-os

completamente.

Contraste

O contraste ajuda a estabelecer uma hierarquia interna no

projeto, que organiza e acrescenta interesse. A regra geral é

que para ser eficaz, o contraste deve ser suficientemente

forte.

Se os elementos diferirem um pouco apenas, não haverá

contraste, mas conflito. Se dois itens não forem iguais,

diferencie-os completamente.

Contraste

O contraste pode ser obtido por meio de variações de escala,

peso, desenho, cor, intensidade.

Letras grandes contrastam com pequenas;

Fontes bold contrastam com fontes light;

Cores frias contrastam com cores quentes;

Textura lisa contrasta com textura áspera;

Elementos verticais contrastam com elementos horizontais;

Linhas espaçadas contrastam com entrelinhamento apertado;

Imagens pequenas contrastam com imagens grandes.

Contraste

Contraste

O contraste é um ponto

crítico na organização das

informações. O leitor deve

ser sempre capaz de

compreender o que ele

representa à primeira vista,

sem necessidade de

observar detidamente o

material.

Combine o contraste com a

repetição para criar uma

identidade visual forte e

unificada para o projeto

inteiro.

Contraste

Contraste

Estabeleça conscientemente qual deve ser o item principal do

layout e se necessário reforce este item para que o contraste

seja plenamente perceptível. Use o contraste para criar

enfoque.

Não tenha medo de reduzir a importância de alguns itens para

obter melhor contraste com algum outro. Depois de atrair o

olhar do leitor para o ponto principal, ele percorrerá satisfeito

todo o restante do projeto pelo sentido de ordem e hierarquia

facilmente identificáveis.

É o contraste que inicialmente atrai o interesse do leitor, que

deve ser capaz de compreender instantaneamente a maneira

como as informações estão estruturadas.

Contraste

O contraste jamais deve confundir o leitor ou estabelecer um

foco equivocado.

Não economize na hora de criar contrastes. Faça-o de maneira

marcante. Se os itens não forem exatamente iguais, diferencie-

os.

Repetição

Cor, forma, tipologias, textura, relações espaciais podem (e

devem) ser repetidos no layout. A repetição ajuda a definir a

identidade do projeto.

Repetição

O elemento repetitivo pode ser uma fonte em bold, algum

elemento gráfico, relações espaciais, cores etc. Pode ser

qualquer item que o leitor perceba facilmente.

A repetição deve ser adotada conscientemente como

elemento-chave unificador do projeto. É por meio dela que

cada parte pode ser percebida como pertencente ao projeto.

Trata-se de um esforço para unificar todos os elementos que

compõem o design.

Repetição

A repetição ajuda a organizar a informação. Ela orienta o leitor

pelas páginas ou decoração unificando partes distintas do

projeto. Mesmo que o projeto se constitua de uma parte

apenas, a repetição estabelece uma continuidade sofisticada.

Se, ao contrário, o projeto envolve várias páginas ou

ambientes que precisam ser vistos como conjunto, a repetição

torna-se ainda mais importante.

Repetição

Identifique algum elemento que se destaque positivamente no

projeto e trabalhe com ele. Sinta-se livre para inserir

elementos não funcionais visando unicamente a repetição.

Ou então, utilize elementos simples e funcionais para repetir.

Varie na repetição, adotando diferentes tamanhos, cores,

posição e ângulos.

Às vezes os elementos de repetição não são exatamente

iguais, mas são tão interligados (semântica) que sua conexão

se mostra óbvia.

O propósito básico da repetição é unificar e acrescentar

interesse visual tornando os projetos mais agradáveis e

apreciados.

Repetição

Evite usar excessivamente o elemento de repetição para que

ele não se torne enfadonho. Saiba trabalhar com os

contrastes.

Alinhamento

Nada deve se posicionado aleatoriamente no layout. Cada

elemento precisa estabelecer relação visual com outro

elemento da página, garantindo uma aparência limpa,

organizada, sofisticada e suave.

Alinhamento

Quando os itens da página ou do ambiente mantém relação

de alinhamento, surge coesão mais forte. Mesmo quando

estão fisicamente distantes, se estiverem alinhados serão

unidos por uma linha invisível percebida pelos olhos e sentida

mentalmente. Sempre que um novo item é adicionado ao

layout, é importante que se estabeleça o alinhamento com

outros elementos. Nada deve ser posicionado arbitrariamente.

Alinhamento

Os olhos gostam da ordem proporcionada pelo alinhamento,

pois isso transmite calma e segurança.

Se os alinhamentos estiverem bem definidos, você poderá

interrompê-los intencionalmente com algum elemento e esta

interrupção será percebida como intencional.

Esteja consciente do posicionamento dos elementos na

página ou no ambiente. Mesmo que os objetos estejam

fisicamente distante, encontre uma forma de estabelecer o

alinhamento entre eles.

Proximidade

Itens relacionados entre si devem ser agrupados, de forma

que sejam percebidos como unidades visuais. A proximidade

ajuda a organizar a informação e resulta num sentido de

ordem e harmonia.

Proximidade

O propósito básico da “proximidade” é organizar. O simples

agrupamento de elementos relacionados cria a organização

automaticamente. Com elementos organizados, a leitura do

layout ou do ambiente se torna mais fácil, proporcionando

segurança e bem-estar.

A organização de elementos-chave também favorece o

surgimento de “brancos”, que são áreas livres de estímulos –

portanto, neutras.

Pisque os olhos e conte o número de elementos visuais pelas

vezes que os olhos param para perceber os objetos.

Identifique, entre as várias formas, quais devem ser

agrupadas para compor unidades visuais.

Proximidade

Evite criar qualquer dúvida quanto à relação dos elementos

entre si.

Não relacione objetos que não devem ser agrupados. Se não

são relacionados, separe-os.

Evite muitos conjuntos de elementos na página ou no

ambiente. Lembre-se que “less is more” (Ludwig vans der

Rohe).