Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design - Layout

28,396 views

Published on

Conceitos e processo de criação de layout

Published in: Technology
  • adorei vcs são muitos bom...obrigada me ajudou bastante......
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Design - Layout

  1. 1. Layout Conceitos e processo de criação
  2. 2. Van Gogh - 1880 <ul><li>&quot;Há leis de proporção, de luz, de sombra e de perspectiva, que é preciso conhecer para desenhar um motivo; se essa ciência nos falha, arriscamos travar eternamente uma luta estéril e não conseguimos nunca criar.&quot; </li></ul>
  3. 3. O que é um layout ? <ul><li>Um plano ou peça com diferentes elementos organizados para transmitir uma mensagem intencionada (princípios de design ); </li></ul><ul><li>A interpretação do layout é realizada pela leitura do: </li></ul><ul><ul><li>Registro visual </li></ul></ul><ul><ul><li>Registro gráfico </li></ul></ul><ul><ul><li>Registro escrito </li></ul></ul><ul><li>Textos e ilustrações (fotos ou desenhos) devem ser elementos de destaque; </li></ul><ul><li>O processo de criação dividi-se em: </li></ul><ul><ul><li>Identificação </li></ul></ul><ul><ul><li>Seleção </li></ul></ul><ul><ul><li>Natureza dos elementos </li></ul></ul><ul><ul><li>Posicionamento dos elementos </li></ul></ul>
  4. 4. Princípios de um layout <ul><li>Unidade; </li></ul><ul><li>Ênfase; </li></ul><ul><li>Harmonia, equilíbrio e proporção; </li></ul><ul><li>Movimento e ritmo (narrativa). </li></ul>
  5. 5. Unidade <ul><li>Os elementos devem interagir entre si de acordo com a natureza temática ou visual, mantendo a coerência e o equilíbrio do layout ; </li></ul><ul><li>Todos os objetos se apropriam de características do elemento principal; </li></ul><ul><li>A unidade pode ser criada por meio de: </li></ul><ul><ul><li>Repetição </li></ul></ul><ul><ul><li>Variância </li></ul></ul><ul><ul><li>Similaridade </li></ul></ul><ul><ul><li>Continuidade </li></ul></ul><ul><ul><li>Proximidade </li></ul></ul>
  6. 6. Unidade <ul><li>Repetição </li></ul><ul><ul><li>Repetição de elementos gráficos visando “educar” o olhar humano (leitura) para reconhecer objetos semelhantes, reforçando a interpretação da mensagem; </li></ul></ul><ul><ul><li>Exemplos de elementos de repetição: </li></ul></ul><ul><ul><ul><li>Linhas </li></ul></ul></ul><ul><ul><ul><li>Formas </li></ul></ul></ul><ul><ul><ul><li>Figuras geométricas </li></ul></ul></ul><ul><ul><ul><li>Cores </li></ul></ul></ul><ul><ul><ul><li>Texturas </li></ul></ul></ul><ul><ul><ul><li>Valores </li></ul></ul></ul>
  7. 7. Unidade <ul><li>Variância </li></ul><ul><ul><li>Repetição dando ênfase em APENAS UM elemento do layout ; </li></ul></ul><ul><ul><li>Possibilita mais dinamismo a repetição de elementos. </li></ul></ul><ul><li>Similaridade </li></ul><ul><ul><li>Agrupamento de elementos semelhantes; </li></ul></ul><ul><ul><li>Esse recurso é mais seguro mantendo a harmonia simétrica dos elementos. </li></ul></ul>
  8. 8. Unidade <ul><li>Continuidade </li></ul><ul><ul><li>Ordenação de elementos que permite a interpretação simples e direta da página. </li></ul></ul><ul><li>Proximidade </li></ul><ul><ul><li>Forma de organizar os elementos como se estivessem agrupados, orientando a leitura em “blocos”. </li></ul></ul>
  9. 9. Ênfase <ul><li>Dar mais foco a uma determinada composição, elevando sua importância; </li></ul><ul><li>Reforça o tema da mensagem; </li></ul><ul><li>A ênfase pode ser criada por meio de: </li></ul><ul><ul><li>Contraste </li></ul></ul><ul><ul><li>Isolamento </li></ul></ul><ul><ul><li>Direção </li></ul></ul>
  10. 10. Ênfase <ul><li>Contraste </li></ul><ul><ul><li>O ponto focal é direcionado para o elemento que possui mais peso no layout , em relação aos demais elementos; </li></ul></ul><ul><ul><li>O contraste pode ser marcado por: </li></ul></ul><ul><ul><ul><li>Cor </li></ul></ul></ul><ul><ul><ul><li>Textura </li></ul></ul></ul><ul><ul><ul><li>Dimensão </li></ul></ul></ul><ul><ul><ul><li>Proporção </li></ul></ul></ul><ul><li>Isolamento </li></ul><ul><ul><li>A distância direciona o ponto focal, possibilitando que a leitura de um bloco seja independente do outro, gerando uma não-linearidade. </li></ul></ul><ul><li>Direção </li></ul><ul><ul><li>Utilização de elementos para guiar a leitura do usuário, construindo uma narrativa. </li></ul></ul>
  11. 11. Harmonia <ul><li>É a distribuição equilibrada e balanceada entre os elementos, mantendo um “peso” estético no layout ; </li></ul><ul><li>Harmonia simétrica: </li></ul><ul><ul><li>É o equilíbrio perfeito entre os elementos do layout . </li></ul></ul><ul><li>Harmonia assimétrica: </li></ul><ul><ul><li>Posicionamento de elementos com peso diferenciado. </li></ul></ul>
  12. 12. Movimento e ritmo <ul><li>É a forma como a informação é organizada no layout , possibilitando direcionar a leitura e controlar a intensidade da percepção; </li></ul><ul><li>Gradação de movimento: </li></ul><ul><ul><li>Transição lógica que leva a leitura até o ponto focal. </li></ul></ul><ul><li>Movimento diagonal: </li></ul><ul><ul><li>É o controle da leitura em uma determinada direção, dando a idéia de movimento ou seqüência. </li></ul></ul><ul><li>Ritmo alternado: </li></ul><ul><ul><li>Controle da velocidade de leitura por meio de respiros. </li></ul></ul><ul><li>Ritmo progressivo: </li></ul><ul><ul><li>Controle da velocidade pelas características dos elementos (cor, textura, valor, distância e proporção). </li></ul></ul>
  13. 13. Leitura fotográfica <ul><li>Técnica em que se apropria de elementos de uma fotografia para criar elementos estéticos no layout ; </li></ul><ul><li>1º - Análise da fotografia: </li></ul><ul><ul><li>Quem é o sujeito (elemento ou tema principal) na foto? </li></ul></ul><ul><ul><li>O sujeito está na vertical ou na horizontal? </li></ul></ul><ul><ul><li>Qual é o tipo de enquadramento? </li></ul></ul><ul><ul><li>O sujeito está em movimento? </li></ul></ul><ul><ul><li>Onde ocorre a ação (predicado)? </li></ul></ul><ul><ul><li>Existe alguma textura na foto? </li></ul></ul><ul><ul><li>Existem linhas, curvas e figuras geométricas? </li></ul></ul><ul><li>2º - Estudo sobre as cores (aula sobre cores). </li></ul>
  14. 14. Layout Conceitos e processo de criação

×