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.

Composição gráfica

31,744 views

Published on

Elementos básicos da comunicação visual

Published in: Design, Technology, Education

Composição gráfica

  1. 1. Composição gráfica Elementos básicos da comunicação visual
  2. 2. Grafismos <ul><li>São elementos visuais que ajudam a comunicar uma mensagem. </li></ul><ul><ul><li>Elementos gráficos simples: pontos e linhas de todo tipo (livres, retas, quebradas curvas, etc.) </li></ul></ul><ul><ul><li>Elementos geométricos, com ou sem contorno: polígonos, círculos, elipses, ovais, etc. </li></ul></ul><ul><ul><li>Tipos: letras de diferentes formas e estrutura, utilizadas para apresentar mensagens textuais. </li></ul></ul><ul><ul><li>Gráficos: logotipos, ícones, etc. </li></ul></ul><ul><ul><li>Ilustrações </li></ul></ul><ul><ul><li>Fotografias </li></ul></ul>
  3. 3. Grafismos <ul><li>O elementos combinados em um grafismo surge o resultado final com uma série de conceitos próprios </li></ul>
  4. 4. Design invisível <ul><li>Um bom projeto editorial é aquele que conduz os olhos dos leitores sem se tornar o elemento principal. </li></ul><ul><li>Deve existir um equilíbrio entre a informação visual e a informação textual. </li></ul>
  5. 5. Geometrização <ul><li>Ênfase nos pontos de visão direta e visão periférica com as informações principais da matéria. </li></ul><ul><li>A fotografia tem uma grande importância no traçado geométrico de uma página. </li></ul><ul><li>Os olhos das pessoas caminham pela página de acordo com a força visual de cada elemento apresentado na diagramação. </li></ul><ul><li>Esse traçado geométrico feito, inconscientemente, pelos olhos transmite ao cérebro informações de caráter sinestésico, além de facilitar ou dificultar o entendimento geral. </li></ul>
  6. 6. Geometrização
  7. 7. Geometrização
  8. 8. Geometrização
  9. 9. Agrupamento <ul><li>Conjuntos de elementos relacionados mediante sua hierarquia de informação, levando em consideração os seguintes critérios: </li></ul><ul><ul><li>Proximidade: Tendemos a agrupar aqueles objetos que estão próximos, mais pertos entre si. </li></ul></ul><ul><ul><li>Semelhança: Tendemos a agrupar os elementos iguais ou parecidos. </li></ul></ul><ul><ul><li>Continuidade: Nossa mente tende a agrupar aqueles elementos que têm uma continuidade significativa. </li></ul></ul><ul><ul><li>Simetria: Tendemos a agrupar os elementos para que apareçam ordenados formando figuras conhecidas. </li></ul></ul>
  10. 10. Agrupamento
  11. 11. Agrupamento CD ROMs Multimídia CDS para crianças CDS educacionais Educacional Aprendizado inicial Idiomas Material do Professor Livros Maerial do professor Vídeos Hardware & Acessórios Cabos Dispositivos Memória Modems CD ROMs Multimídia CDS para crianças CDS educacionais Educacional Aprendizado inicial Idiomas Material do Professor Livros Maerial do professor Vídeos Hardware & Acessórios Cabos Dispositivos Modems
  12. 12. Agrupamento
  13. 13. Agrupamento
  14. 14. Contraste <ul><li>Intensidade de visualização de cada elemento com relação aos que lhe rodeiam e ao grafismo completo. </li></ul>
  15. 15. Contraste
  16. 16. Contraste
  17. 17. Equilíbrio <ul><li>A assimetria ou simetria excessiva pode afastar o interesse e dificultar a leitura. </li></ul><ul><li>Leve em conta o perfil do público para determinar se simétrico ou o assimétrico é o melhor. </li></ul>
  18. 18. Equilíbrio <ul><li>Alinhamento esquerdo </li></ul><ul><ul><li>Padrão de leitura ocidental </li></ul></ul><ul><ul><li>As pessoas reconhecem com mais naturalidade </li></ul></ul><ul><li>Alinhamento Direito </li></ul><ul><ul><li>Algumas pessoas interpretam como irregular </li></ul></ul><ul><li>Alinhamento Centralizado </li></ul><ul><ul><li>Se for para centralizar, faça com que seja óbvio </li></ul></ul><ul><li>Alinhamento Justificado </li></ul><ul><ul><li>Algumas pessoas tendem a ter uma visualização blocada do conteúdo, forçando o enquadramento de forma geométrica. </li></ul></ul><ul><ul><li>Só utilize esse tipo de alinhamento se a distância entre as palavras obedecerem a regra da entrelinha, evitando gerar espaços vazios entre as palavras. </li></ul></ul>
  19. 19. Equilíbrio
  20. 20. Equilíbrio
  21. 21. Equilíbrio
  22. 22. Equilíbrio em ênfase no contraste
  23. 23. Equilíbrio assimétrico
  24. 24. Proporção <ul><li>Para manter o equilíbrio, é importante que as áreas com conteúdos tenham o mesmo volume visual de informação. </li></ul>
  25. 25. Harmonia <ul><li>O cérebro tende a perceber mais rápido e fácil as formas organizadas (Pregnância, Leis da Gestalt). </li></ul><ul><li>A pregnância de uma forma pode ser medida de acordo com sua: </li></ul><ul><ul><li>Legibilidade </li></ul></ul><ul><ul><li>Compreensão </li></ul></ul><ul><ul><li>Máximo de clareza possível </li></ul></ul><ul><li>Sua utilização pode ser aplicada estrategicamente como recurso de narrativa para controlar a leitura </li></ul>
  26. 26. Harmonia
  27. 27. Harmonia
  28. 28. Direção Visual <ul><li>Diagramação que conduz a leitura de um conteúdo de forma controlada como elemento de narrativa. </li></ul><ul><li>O intuito é direcionar o olho da pessoas para pontos estratégicos e dar uma sensação de movimento. </li></ul>
  29. 29. Direção Visual
  30. 30. Direção Visual Magazine Spread Yedilat (mantric) http://mantric.deviantart.com/
  31. 31. Direção Visual <ul><li>Diagramação que conduz a leitura de um conteúdo </li></ul><ul><li>Diagonal </li></ul><ul><li>Triangular ou pirâmide </li></ul><ul><li>S </li></ul><ul><li>Z </li></ul><ul><li>L ou Ângulo reto </li></ul><ul><li>Circulo </li></ul><ul><li>Cruz </li></ul>
  32. 32. Movimentos óbvios de narrativa visual <ul><li>Diagonal </li></ul><ul><ul><li>Os olhos seguem uma vértice por pontos opostos </li></ul></ul><ul><ul><li>Gera uma linha imaginária que divide a composição </li></ul></ul><ul><ul><li>Deve-se evitar a igualdade excessiva </li></ul></ul>
  33. 33. Movimentos óbvios de narrativa visual <ul><li>Triangular ou pirâmide </li></ul><ul><ul><li>Aplicada em composições simétricas, com peso e solidez marcados na base </li></ul></ul><ul><ul><li>Assegura unidade do conjunto </li></ul></ul><ul><ul><li>Estabiliza o equilíbrio </li></ul></ul>
  34. 34. Movimentos óbvios de narrativa visual <ul><li>S </li></ul><ul><ul><li>Sugere ação e graça </li></ul></ul><ul><ul><li>Permite uma leitura em etapas </li></ul></ul><ul><ul><li>Se houver massas muito concentradas e distantes (sem unidade) provoca uma dispersão visual na leitura. </li></ul></ul>
  35. 35. Movimentos óbvios de narrativa visual <ul><li>Z </li></ul><ul><ul><li>Possui um movimento vigoroso e definitivo </li></ul></ul><ul><ul><li>Similar a movimentação em S, mas com mais intensidade e velocidade na leitura </li></ul></ul>
  36. 36. Movimentos óbvios de narrativa visual <ul><li>L ou Ângulo reto </li></ul><ul><ul><li>Utilizadas para indicar algo </li></ul></ul><ul><ul><li>Relaciona diretamente um objeto para a informação </li></ul></ul><ul><ul><li>O movimento é muito mais vigoroso, por isso, deve-se tomar muito cuidado com a unidade, pois a leitura pode conduzir para fora da comunciação </li></ul></ul>
  37. 37. Movimentos óbvios de narrativa visual <ul><li>Cruz </li></ul><ul><ul><li>Utilizada para separar poucos elementos, aproveitando melhor o espaço </li></ul></ul><ul><ul><li>Sugere dinamismo e modernidade </li></ul></ul>Ad layout - 3 Dennis Wang (dennisong) http://dennisong.deviantart.com/
  38. 38. Movimentos óbvios de narrativa visual <ul><li>Círculo </li></ul><ul><ul><li>Cria uma sensação de fluxo </li></ul></ul><ul><ul><li>Possibilita uma sequência de leitura </li></ul></ul><ul><ul><li>Relaciona elementos a um tema central </li></ul></ul>magazine-converse Derrick Fong (derrickfong) http://derrickfong.deviantart.com/
  39. 39. Ritmo <ul><li>Movimento, massa e harmonia podem sugerir ritmo, tornando a leitura de alguns elementos mais rápidos ou lentos. </li></ul><ul><li>Podem ser pontuados por: </li></ul><ul><ul><li>Linha </li></ul></ul><ul><ul><li>Massa </li></ul></ul><ul><ul><li>Tom </li></ul></ul><ul><ul><li>Cor </li></ul></ul><ul><ul><li>Texto </li></ul></ul><ul><li>É utilizado para manipular a leitura, oferecendo um “caminho” confortável e racional, orientando os olhos pelos pontos de interesse. </li></ul>
  40. 40. Impressões do ritmo <ul><li>Quando traçam uma linha imaginária linear, podem sugerir sensações durante a leitura. </li></ul><ul><ul><li>Retas sugerem força </li></ul></ul><ul><ul><li>Linhas horizontais sugerem calma ou harmonia </li></ul></ul><ul><ul><li>Linhas verticais sugerem elevação ou sublimidade </li></ul></ul><ul><ul><li>Curvas sugerem ação, energia, sensualidade e graça </li></ul></ul><ul><li>Essas sensação são importantes porque impressionam e ajudam a fixar a comunicação na memória. </li></ul>
  41. 41. Ritmo linear
  42. 42. Ritmo dinâmico <ul><li>Composição que impõem um ritmo diferenciado combinando cores, linhas ou formas. </li></ul><ul><li>O tempo de leitura varia de acordo com a ênfase desejada. </li></ul>Workshop PTK Undiksha 2011 Herry Sucahya (herryC) http://herryc.deviantart.com/
  43. 43. Ritmo estacionário <ul><li>Relacionada as leis fundamentais da decoração. </li></ul><ul><li>O objetivo é fazer com que o olho fixe em um conteúdo, aumentando seu tempo de leitura de forma estratégica. </li></ul>Visual Magazine Cover Cristhian (burnsflipper) http://burnsflipper.deviantart.com/
  44. 44. Tipografia <ul><li>Usar uma fonte inadequada para o conteúdo pode provocar a falta de vontade de terminar a leitura de uma matéria. </li></ul><ul><li>Algumas características gráficas das letras podem dificultar muito a leitura e, conseqüentemente, a assimilação do conteúdo. </li></ul><ul><li>Existe uma sinestesia tipológica que deveria ser pensada, analisada, pesquisada e usada. </li></ul><ul><li>Infelizmente a preocupação com o conjunto tipográfico de uma publicação é uma questão pouco valorizada pela grande maioria dos impressos nacionais. </li></ul>
  45. 45. Cores <ul><li>A cor tem um impacto na quantidade de segundos necessários para o cérebro assimilar, fazendo uma pessoa ficar com seus olhos fixos nela. </li></ul><ul><li>Um detalhe colorido pode destruir a linha de leitura de uma página. </li></ul><ul><li>As cores devem ser usadas para localização das editorias, ajudando na seqüência de leitura desejada pelo editor. </li></ul><ul><li>Também deve tomar cuidado com as sensações que as cores podem transmitir junto com a leitura. </li></ul>
  46. 46. Cores
  47. 47. Respiro <ul><li>Equilíbrio entre áreas com e sem informação deve ser bem observado. </li></ul><ul><li>Esses espaços em branco funcionam como área de respiro para uma página ajudando o ritmo de leitura. </li></ul><ul><li>Essas áreas de descanso visual devem ser usadas de acordo com a necessidade editorial de um assunto, além de representar os anseios estéticos de um determinado público. </li></ul>
  48. 48. Respiro
  49. 49. Respiro
  50. 50. Referência bibliográfica <ul><li>As informações contidas nessa apresentação foram elaboradas com base na minha experiência profissional que, em algum momento, podem contradizer o que é explicado na teoria. </li></ul><ul><li>Existem algumas informações que são encontradas na Wikipédia. Porém, como seu conteúdo pode ser alterado por qualquer pessoa, sua credibilidade é questionável. Só utilize informações da Wikipédia se você já conhece o assunto e concorda com as definições. </li></ul><ul><li>O design gráfico como elemento de linguagem editorial </li></ul><ul><ul><li>Márcia Okida </li></ul></ul><ul><ul><li>http://www.designgrafico.art.br/comapalavra/linguagemeditorial.htm </li></ul></ul><ul><li>Criaçao Visual e Multimidia </li></ul><ul><ul><li>João Vicente Cegato Bertomeu </li></ul></ul><ul><ul><li>Editora Cengage </li></ul></ul><ul><ul><li>2009 </li></ul></ul><ul><li>Projeto Gráfico: Teoria e Prática da Diagramação </li></ul><ul><ul><li>Antônio Celso Collaro </li></ul></ul><ul><ul><li>Editora Summus Editorial </li></ul></ul><ul><ul><li>2006 </li></ul></ul><ul><li>Planejamento Visual Gráfico </li></ul><ul><ul><li>Milton Ribeiro </li></ul></ul><ul><ul><li>Editora LGE </li></ul></ul><ul><ul><li>2007 </li></ul></ul>
  51. 51. Para pesquisa <ul><li>Gestalt </li></ul><ul><li>Minimalismo </li></ul><ul><li>Art Nouveau </li></ul><ul><li>Construtivismo Russo </li></ul>
  52. 52. Composição gráfica Elementos básicos da comunicação visual Odair Cavichioli Júnior www.odaircavichioli.com.br

×