PLANEJAMENTO VISUAL
Os quatros princípios básicos
Os quatro princípios básicos
  Proximidade
  Repetição

  Alinhamento

  Contraste
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
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
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
Proximidade
    Veja este cartão abaixo:
Proximidade
    E agora:
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
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.
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
Alinhamento
    Veja o alinhamento dos cartões:
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
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
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
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
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
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
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
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
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
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
Contraste
    Um exemplo:
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

Planej Visual Os Quatros PrincíPios BáSicos

  • 1.
    PLANEJAMENTO VISUAL Os quatrosprincípios básicos
  • 2.
    Os quatro princípiosbásicos   Proximidade   Repetição   Alinhamento   Contraste
  • 3.
    Proximidade   Itens relacionadosentre 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.
  • 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 deveser 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 conscientedo 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 aspectodo 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 doselementos visuais unifica e fortalece o material   É essencial em documentos de muitas páginas   É considerada, neste último caso, consistência
  • 17.
    Repetição   Considere arepetiçã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 objetivodo 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 contrastede 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 contrasteem 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