planejamento visual os 4 principios basicos
TRANSCRIPT
![Page 1: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/1.jpg)
PLANEJAMENTO VISUAL Os quatros princípios básicos
![Page 2: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/2.jpg)
Os quatro princípios básicos
Proximidade Repetição Alinhamento Contraste
![Page 3: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/3.jpg)
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
![Page 4: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/4.jpg)
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
![Page 5: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/5.jpg)
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
![Page 6: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/6.jpg)
Proximidade
Veja este cartão abaixo:
![Page 7: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/7.jpg)
Proximidade
E agora:
![Page 8: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/8.jpg)
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
![Page 9: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/9.jpg)
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.
![Page 10: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/10.jpg)
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
![Page 11: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/11.jpg)
Alinhamento
Veja o alinhamento dos cartões:
![Page 12: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/12.jpg)
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
![Page 13: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/13.jpg)
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
![Page 14: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/14.jpg)
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
![Page 15: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/15.jpg)
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
![Page 16: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/16.jpg)
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
![Page 17: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/17.jpg)
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
![Page 18: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/18.jpg)
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
![Page 19: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/19.jpg)
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
![Page 20: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/20.jpg)
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
![Page 21: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/21.jpg)
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
![Page 22: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/22.jpg)
Contraste
Um exemplo:
![Page 23: Planejamento visual os 4 principios basicos](https://reader036.vdocuments.net/reader036/viewer/2022082219/55717e18d8b42ae45b8b4aeb/html5/thumbnails/23.jpg)
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