1. PLANEJAMENTO VISUAL
Os quatros princípios básicos

2. Os quatro princípios básicos
 Proximidade
 Repetição
 Alinhamento
 Contraste

3. Proximidade
 Itens relacionados entre si devem ser agrupados
 Quando vários itens estão próximos tornam-se uma
unidade visual, e não várias unidades
individualizadas.
 Ajuda a organizar as informações e reduz a
desordem

4. Proximidade
 Fique atento!
 Na leitura, veja para onde seus olhos se dirigem.
 Qual o caminho que eles seguem?
 Onde termina a leitura?
 Após a leitura, para onde os olhos vão?
 Você deve seguir uma progressão lógica durante a
leitura da página, partindo de um início bem-
definido para um final bem-definido

5. Proximidade
 Propósito básico é organizar
 O simples agrupamento de elementos relacionados
em proximidade cria uma organização
 Informação organizada = leitura fácil e
memorização

6. Proximidade
 Veja este cartão abaixo:

7. Proximidade
 E agora:

8. Proximidade
 Como conseguir isto:
 Veja quantos elementos visuais tem sua página
 Veja quais podem ser agrupados num mesmo elemento,
para que se tornem uma unidade visual

9. Proximidade
 O que evitar:
 Evite muitos elementos separados em uma página
 Não coloque os itens somente nos cantos ou no meio da
página
 Evite criar dúvida em relação aos elementos, ou seja,
cada subtítulo, legenda, imagem, etc. devem estar junto
a seu respectivo par
 Não relacione elementos que não devem ser
agrupados.

10. Alinhamento
 Não deve ser colocado arbitrariamente numa
página
 Cada elemento deve ter uma ligação visual com
outro elemento da página
 Cria uma aparência limpa, sofisticada e suave

11. Alinhamento
 Veja o alinhamento dos cartões:

12. Alinhamento
 A unidade é um conceito muito importante
 Para que todos os elementos da página tenham uma
estética unificada, conectada e inter-relacionada, é
preciso que haja “amarras” visuais entre os elementos
separados
 Mesmo que eles não sejam próximos, eles podem estar
unificados simplesmente devido ao seu posicionamento
 Não importa se a aparência inicial da página seja
caótica e selvagem: você sempre encontrará os
alinhamentos correspondentes

13. Alinhamento
 Esteja consciente do posicionamento dos elementos
da página
 Encontre sempre algo a mais na página para fazer
o alinhamento, mesmo que os dois objetos estejam
fisicamente distantes

14. Alinhamento
 O que evitar:
 Evite usar mais de um alinhamento de texto por
página, ou seja, não centralize um texto e alinhe outro
à direita
 Evite o alinhamento centralizado, a não ser que você
tenha o objetivo de criar uma apresentação formal,
pacata
 Escolha o alinhamento centralizado consciente e não
por automação

15. Repetição
 Algum aspecto do design deve repetir-se no
material inteiro
 Repita os elementos visuais do design e espalhe-os
pelo material
 Você pode repetir a cor, a forma, a textura e as
relações espaciais como a espessura, os tamanhos,
etc.
 Ajuda a criar uma organização e fortalece a
unidade

16. Repetição
 Repetição dos elementos visuais unifica e fortalece
o material
 É essencial em documentos de muitas páginas
 É considerada, neste último caso, consistência

17. Repetição
 Considere a repetição como consistência
 O elemento repetitivo pode ser uma fonte em negrito,
um fio (linha) para destacar uma seção, algum sinal de
tópico, um elemento gráfico
 Pode ser qualquer item que o leitor reconheça
visualmente
 Repetir é como dar ênfase às suas roupas
 Por exemplo, se uma mulher usar um vestido preto de
noite maravilhoso com um chapéu, ela poderá enfatizar
sua roupa usando sapatos e bolsa de outra cor, para
realçar a composição

18. Repetição
 O que evitar:
 Repetir elemento em demasia, para que ele não se
torne excessivo e cansativo
 Pense na roupa da mulher de preto, se ela usar
chapéu, brincos, sapatos, batom vermelho e ainda,
acrescentar um casaco vermelho, a repetição criaria um
efeito espalhafatoso e confuso

19. Contraste
 O objetivo do contraste é evitar elementos
meramente similares em uma página
 Se os elementos (tipo, cor, tamanho, espessura da
linha, forma, espaço, etc.) não forem os mesmos,
diferencie-os completamente
 Costuma ser a mais importante atração visual de
uma página

20. Contraste
 O contraste de uma página chama a atenção
 Se você colocar dois elementos diferentes em uma
página (como duas fontes ou duas espessuras de
fio), eles não devem ser similares
 Para que o contraste cumpra seu papel, os dois
elementos devem ser diferentes
 Utilizar o contraste é como retocar a parede: não
se pode combinar mais ou menos a cor; ou você
encontra a cor exata ou precisará pintar a parede
inteira

21. Contraste
 Aplique contraste em suas opções de tipologia, nas
espessuras das linhas, nas cores, nas formas, nos
tamanhos, nos espaços, etc.
 É fácil descobrir maneiras de contrastar os itens e,
provavelmente, esta é a maneira mais divertida e
satisfatória de criar interesse visual
 O importante é criar elementos marcantes

22. Contraste
 Um exemplo:

23. Contraste
 O que evitar:
 Se você criar contrastes, faça-os de maneira forte
 Evite contrastar uma linha um pouco espessa com uma
linha um pouco mais espessa
 Evite contrastar um texto em marrom com títulos em
preto, por exemplo.
 Evite usar duas ou mais fontes similares
 Se os itens forem exatamente iguais, diferencie-os