Princípios de Design Proximidade, repetição, alinhamento e contraste. Linguagem visual.

1. LINGUAGEM VISUAL
AULA 06
Princípios de Diagramação
Prof. Ms. Elizeu N. Silva

2. 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.

4. 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.

5. 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.

6. Contraste

7. 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.

8. Contraste

9. 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.

10. 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.

11. 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.

13. 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.

14. 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.

15. 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.

16. Repetição
Evite usar excessivamente o elemento de repetição para que
ele não se torne enfadonho. Saiba trabalhar com os
contrastes.

17. 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.

19. 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.

20. 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.

21. 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.

23. 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.

24. 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).