Noções de Design GráficoUnidade I - Introdução ao Design              Gráfico                          Prof. Nécio de Lima...
ObjetivoConhecer os princípios do Design Gráfico.                              Prof. Nécio de Lima Veras               htt...
Leituras recomendadas               Prof. Nécio Veras
Conceitos básicos●   Design    –   Concepção de um projeto ou modelo;        planejamento.●   Designer    –   Indivíduo qu...
O que é Design?• [...] Design pode ser compreendido de várias  formas:  – habilidade, estilo, engenharia, invenção,    pla...
Design• Ver e transmitir experiência visual para  interlocutores.• Levar em conta:  – Dinamismo;  – Legibilidade;  – Equil...
Design• Ser inteligente;• Saber transmitir uma mensagem usando  representações visuais;                                  P...
Traduzindo o outdoor               Prof. Nécio Veras
Design• Saber colecionar referências visuais e como  profissionais do mundo inteiro resolvem  problemas similares.• Aprend...
Design Digital• Computador nas comunicações:  – Desktop Publishing: substitui todo processo de    design gráfico;  – Vídeo...
RISD.EDU           Prof. Nécio Veras
Design Digital• Criação digital não é outra língua, mas sim, outra  forma de comunicação.• Internet não é a última revoluç...
Design para Web• Riqueza da mídia é bem maior do que foi quando  começamos a ver a cor no material impresso.• Web é:  – Ág...
Design para Web• Páginas podem mudar de tamanho e proporção a todo  instante.• Depende totalmente:   – Condições do comput...
Design para a Web• Cada leitor consultará as telas na ordem que  quiser;• Quanto mais rico for o conteúdo, maiores as  cha...
Design em Diagramação• Diagramação:  – Ato ou efeito de criar diagramas ou ordenação    e distribuição de elementos gráfic...
Princípio: ProximidadeItens relacionados entre si, devem ser  agrupados.Quando vários ítens estão próximos, tornam-se uma ...
Exemplo          Prof. Nécio Veras
ExemploAgrupe as informações graficamente.No início de uma criação determine, pela lógica, quais informações devem ser enf...
Exemplo          Prof. Nécio Veras
Princípio: Alinhamento• Dar coesão aos elementos.• Mesmo elementos separados fisicamente  uns dos outros, se estiverem ali...
Exemplo                                 Elementos jogados em qualquer                                 lugar. Nenhum dos el...
Capa com formato padrão, sem brilho.A reação inicial do leitor é negativa.                             Centralizado no blo...
Alinhamento Fantasia               Prof. Nécio Veras
ObservePara que a página fique visualmenteorganizada, encontre uma linha e guie-se através dela.Não centralize o título se...
Se seus alinhamentosestiverembem-delimitados, vocêpoderá interromperconscientemente osalinhamentos e estainterrupção terá ...
Princípio: Repetição• Dar consistência ao material gráfico:  – Através do uso do uso do princípio da    repetição, o mater...
ExemploOs títulos e subtítulos são elementos        repetitivos (TAHOMA BOLD) e  mantém a consistência entre eles.        ...
Exemplo    Repetições:    Fonte bold / Fonte light    Endentações    Espaçamento    Alinhamentos    Sinais de tópicos quad...
Exemplo  Repetições:  Um dos elementos da imagem (o  triângulo) foi repetido na página, dando  unidade ao todo.           ...
Princípio: Contraste• Acrescentar algum atrativo visual à página,  criando uma hierarquia organizacional entre  diferentes...
Exemplo          Prof. Nécio Veras
Exemplo          Prof. Nécio Veras
Exemplo (CRAP)           Prof. Nécio Veras
Exemplo (CRAP)           Prof. Nécio Veras
Exemplo (CRAP)           Prof. Nécio Veras
Exercícios             Prof. Nécio Veras
ReferênciasEsta apresentação foi inspirada e baseada nosmateriais didáticos de:  –   Prof. Wanderlei Paré (Oficina de Prod...
Upcoming SlideShare
Loading in...5
×

Conceitos e princípios de design

8,621

Published on

0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,621
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
235
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Conceitos e princípios de design

  1. 1. Noções de Design GráficoUnidade I - Introdução ao Design Gráfico Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  2. 2. ObjetivoConhecer os princípios do Design Gráfico. Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590
  3. 3. Leituras recomendadas Prof. Nécio Veras
  4. 4. Conceitos básicos● Design – Concepção de um projeto ou modelo; planejamento.● Designer – Indivíduo que planeja ou concebe um projeto ou modelo.● Web design e web designer. Prof. Nécio Veras
  5. 5. O que é Design?• [...] Design pode ser compreendido de várias formas: – habilidade, estilo, engenharia, invenção, planejamento, refinamento, simples exercício de bom gosto.Texto de abertura da exposição “Design fo Life” Cooper-Hewitt National Design Museum, Nova York, EUA Prof. Nécio Veras
  6. 6. Design• Ver e transmitir experiência visual para interlocutores.• Levar em conta: – Dinamismo; – Legibilidade; – Equilíbrio. Prof. Nécio Veras
  7. 7. Design• Ser inteligente;• Saber transmitir uma mensagem usando representações visuais; Prof. Nécio Veras
  8. 8. Traduzindo o outdoor Prof. Nécio Veras
  9. 9. Design• Saber colecionar referências visuais e como profissionais do mundo inteiro resolvem problemas similares.• Aprende a montar as partes para construir um todo;• Requer tempo, paciência e cuidado em cada detalhe;• Talento é só um pré-requisito. Prof. Nécio Veras
  10. 10. Design Digital• Computador nas comunicações: – Desktop Publishing: substitui todo processo de design gráfico; – Vídeo Digital: substitui processo de edição usando fitas magnéticas e gerações; – Internet: chega para deixar todo mundo confuso! :) • Escola de design: www.risd.edu Prof. Nécio Veras
  11. 11. RISD.EDU Prof. Nécio Veras
  12. 12. Design Digital• Criação digital não é outra língua, mas sim, outra forma de comunicação.• Internet não é a última revolução: TV interativa, papel digital, etc.• Revista digital não pode competir com seu equivalente em papel.• Design para web não é fácil! – Cada tela pode se comportar de uma forma diferente. – Não há como projetar documentos que fiquem iguais em todos os sistemas: Só se nivelar por baixo . Prof. Nécio Veras
  13. 13. Design para Web• Riqueza da mídia é bem maior do que foi quando começamos a ver a cor no material impresso.• Web é: – Ágil como o rádio, abrangente como o jornal, rica como o videogame, envolvente como a TV, móvel como o celular.• Pode ser: – Cativante como a correspondência, profunda como uma consulta a um especialista, imprevisível como um papo de boteco. Prof. Nécio Veras
  14. 14. Design para Web• Páginas podem mudar de tamanho e proporção a todo instante.• Depende totalmente: – Condições do computador; – Capacidade de processamento; – Recursos multimídia; – Tamanhos dos monitores e janelas; – Famílias de letras; – Navegadores; – Plug-ins; – Tecnologia; – Velocidade de acesso. Prof. Nécio Veras
  15. 15. Design para a Web• Cada leitor consultará as telas na ordem que quiser;• Quanto mais rico for o conteúdo, maiores as chances de que a experiência de cada visitante seja única;• Internet não é linear. Prof. Nécio Veras
  16. 16. Design em Diagramação• Diagramação: – Ato ou efeito de criar diagramas ou ordenação e distribuição de elementos gráficos para melhor conduzir o fluxo de leitura, de ideias e de conceitos.• Princípios Básicos (CRAP): – Proximidades; – Alinhamento; – Repetição; – Contraste; Prof. Nécio Veras
  17. 17. Princípio: ProximidadeItens relacionados entre si, devem ser agrupados.Quando vários ítens estão próximos, tornam-se uma unidade visual e não várias unidades individualizadas.Isso ajuda a organizar informações e reduz a desordem. Prof. Nécio Veras
  18. 18. Exemplo Prof. Nécio Veras
  19. 19. ExemploAgrupe as informações graficamente.No início de uma criação determine, pela lógica, quais informações devem ser enfatizadas e quais devem ser abrandadas. Prof. Nécio Veras
  20. 20. Exemplo Prof. Nécio Veras
  21. 21. Princípio: Alinhamento• Dar coesão aos elementos.• Mesmo elementos separados fisicamente uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando- os, tanto em relação aos seus olhos quanto a sua mente.• Avisar ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo grupo de elementos. Prof. Nécio Veras
  22. 22. Exemplo Elementos jogados em qualquer lugar. Nenhum dos elementos tem qualquer conexão com outro elemento do cartão. Informações organizadas,além de terem sido agrupadas pelo Princípio da Proximidade Prof. Nécio Veras
  23. 23. Capa com formato padrão, sem brilho.A reação inicial do leitor é negativa. Centralizado no bloco. Bloco descentralizado na página.O alinhamento à esquerda confere força à capa, além deaparência mais sofisticada.O nome do autor, mesmo longe do título, está conectadopelo alinhamento. Prof. Nécio Veras
  24. 24. Alinhamento Fantasia Prof. Nécio Veras
  25. 25. ObservePara que a página fique visualmenteorganizada, encontre uma linha e guie-se através dela.Não centralize o título se o texto foralinhado à esquerda. Como as lateraissão mal-definidas, não é possívelobservar que o título está centralizado.Evite a endentação de parágrafo emcolunas pequenas. Prefira umespaçamento maior entre osparágrafos.Se houver ilustrações ou fotos, alinhepela esquerda ou pela linha base. Prof. Nécio Veras
  26. 26. Se seus alinhamentosestiverembem-delimitados, vocêpoderá interromperconscientemente osalinhamentos e estainterrupção terá umaaparência intencional. Prof. Nécio Veras
  27. 27. Princípio: Repetição• Dar consistência ao material gráfico: – Através do uso do uso do princípio da repetição, o material terá uniformidade, ou seja, uma parte será reconhecida como pertencente ao restante do todo.• É um esforço consciente para unificar todos os elementos do design. Prof. Nécio Veras
  28. 28. ExemploOs títulos e subtítulos são elementos repetitivos (TAHOMA BOLD) e mantém a consistência entre eles. Prof. Nécio Veras
  29. 29. Exemplo Repetições: Fonte bold / Fonte light Endentações Espaçamento Alinhamentos Sinais de tópicos quadrados Prof. Nécio Veras
  30. 30. Exemplo Repetições: Um dos elementos da imagem (o triângulo) foi repetido na página, dando unidade ao todo. Prof. Nécio Veras
  31. 31. Princípio: Contraste• Acrescentar algum atrativo visual à página, criando uma hierarquia organizacional entre diferentes elementos.• Cria-se um contraste quando dois elementos são diferentes. – Se eles diferirem só um pouco, não acontecerá o contraste, mas um conflito.• Se dois elementos não forem exatamente os mesmos, diferencie completamente. Prof. Nécio Veras
  32. 32. Exemplo Prof. Nécio Veras
  33. 33. Exemplo Prof. Nécio Veras
  34. 34. Exemplo (CRAP) Prof. Nécio Veras
  35. 35. Exemplo (CRAP) Prof. Nécio Veras
  36. 36. Exemplo (CRAP) Prof. Nécio Veras
  37. 37. Exercícios Prof. Nécio Veras
  38. 38. ReferênciasEsta apresentação foi inspirada e baseada nosmateriais didáticos de: – Prof. Wanderlei Paré (Oficina de Produção Gráfica); – Graciana Somoni Fischer (Design na Web); – Prof. Régis Pires (Curso de Introdução ao Web Design) Prof. Nécio Veras
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×