Conceitos e princípios de design

15.586 visualizações

Publicada em

0 comentários
12 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
15.586
No SlideShare
0
A partir de incorporações
0
Número de incorporações
3
Ações
Compartilhamentos
0
Downloads
402
Comentários
0
Gostaram
12
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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

×