Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590
Noções de Design Gráfico
Unidade I - Introdução ao Design...
Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590
Objetivo
Conhecer os princípios do Design Gráfico.
Prof. Nécio Veras
Leituras recomendadasLeituras recomendadas
Prof. Nécio Veras
Conceitos básicosConceitos básicos
● Design
– Concepção de um projeto ou modelo;
planejamento.
● Designe...
Prof. Nécio Veras
O que é Design?O que é Design?
• [...] Design pode ser compreendido de várias
formas:
– habilidade, esti...
Prof. Nécio Veras
DesignDesign
• Ver e transmitir experiência visual para
interlocutores.
• Levar em conta:
– Dinamismo;
–...
Prof. Nécio Veras
DesignDesign
• Ser inteligente;
• Saber transmitir uma mensagem usando
representações visuais;
Prof. Nécio Veras
Traduzindo o outdoorTraduzindo o outdoor
Prof. Nécio Veras
DesignDesign
• Saber colecionar referências visuais e como
profissionais do mundo inteiro resolvem
probl...
Prof. Nécio Veras
Design DigitalDesign Digital
• Computador nas comunicações:
– Desktop Publishing: substitui todo process...
Prof. Nécio Veras
RISD.EDURISD.EDU
Prof. Nécio Veras
Design DigitalDesign Digital
• Criação digital não é outra língua, mas sim, outra
forma de comunicação.
...
Prof. Nécio Veras
Design para WebDesign para Web
• Riqueza da mídia é bem maior do que foi quando
começamos a ver a cor no...
Prof. Nécio Veras
Design para WebDesign para Web
• Páginas podem mudar de tamanho e proporção a todo
instante.
• Depende t...
Prof. Nécio Veras
Design para a WebDesign para a Web
• Cada leitor consultará as telas na ordem que
quiser;
• Quanto mais ...
Prof. Nécio Veras
Design em DiagramaDesign em Diagramaççãoão
• Diagramação:
– Ato ou efeito de criar diagramas ou ordenaçã...
Prof. Nécio Veras
Princípio: ProximidadePrincípio: Proximidade
Itens relacionados entre si, devem ser
agrupados.
Quando vá...
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
ExemploExemplo
Agrupe as
informações
graficamente.
No início de uma
criação determine,
pela lógica, quai...
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
Princípio: AlinhamentoPrincípio: Alinhamento
• Dar coesão aos elementos.
• Mesmo elementos separados fis...
Prof. Nécio Veras
ExemploExemplo
Elementos jogados em qualquer
lugar. Nenhum dos elementos
tem qualquer conexão com outro
...
Prof. Nécio Veras
Capa com formato padrão, sem brilho.
A reação inicial do leitor é negativa.
O alinhamento à esquerda con...
Prof. Nécio Veras
Alinhamento FantasiaAlinhamento Fantasia
Prof. Nécio Veras
Para que a página fique visualmente
organizada, encontre uma linha e guie-
se através dela.
Não centrali...
Prof. Nécio Veras
Se seus alinhamentos
estiverem
bem-delimitados, você
poderá interromper
conscientemente os
alinhamentos ...
Prof. Nécio Veras
Princípio: RepetiPrincípio: Repetiççãoão
• Dar consistência ao material gráfico:
– Através do uso do uso...
Prof. Nécio Veras
Os títulos e subtítulos são elementos
repetitivos (TAHOMA BOLD) e
mantém a consistência entre eles.
Exem...
Prof. Nécio Veras
ExemploExemplo
Repetições:
Fonte bold / Fonte light
Endentações
Espaçamento
Alinhamentos
Sinais de tópic...
Prof. Nécio Veras
ExemploExemplo
Repetições:
Um dos elementos da imagem (o
triângulo) foi repetido na página, dando
unidad...
Prof. Nécio Veras
Princípio: ContrastePrincípio: Contraste
• Acrescentar algum atrativo visual à página,
criando uma hiera...
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
ExemploExemplo
Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)
Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)
Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)
Prof. Nécio Veras
ExercíciosExercícios
Prof. Nécio Veras
ReferênciasReferências
Esta apresentação foi inspirada e baseada nos
materiais didáticos de:
– Prof. Wan...
Próximos SlideShares
Carregando em…5
×

Desing

0 visualizações

Publicada em

Desing

Publicada em: Educação
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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

Nenhuma nota no slide

Desing

  1. 1. Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590 Noções de Design Gráfico Unidade I - Introdução ao Design Gráfico
  2. 2. Prof. Nécio de Lima Veras http://lattes.cnpq.br/8284657916723590 Objetivo Conhecer os princípios do Design Gráfico.
  3. 3. Prof. Nécio Veras Leituras recomendadasLeituras recomendadas
  4. 4. Prof. Nécio Veras Conceitos básicosConceitos 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.
  5. 5. Prof. Nécio Veras O que é Design?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
  6. 6. Prof. Nécio Veras DesignDesign • Ver e transmitir experiência visual para interlocutores. • Levar em conta: – Dinamismo; – Legibilidade; – Equilíbrio.
  7. 7. Prof. Nécio Veras DesignDesign • Ser inteligente; • Saber transmitir uma mensagem usando representações visuais;
  8. 8. Prof. Nécio Veras Traduzindo o outdoorTraduzindo o outdoor
  9. 9. Prof. Nécio Veras DesignDesign • 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.
  10. 10. Prof. Nécio Veras Design DigitalDesign 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
  11. 11. Prof. Nécio Veras RISD.EDURISD.EDU
  12. 12. Prof. Nécio Veras Design DigitalDesign 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 .
  13. 13. Prof. Nécio Veras Design para WebDesign 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.
  14. 14. Prof. Nécio Veras Design para WebDesign 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.
  15. 15. Prof. Nécio Veras Design para a WebDesign 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.
  16. 16. Prof. Nécio Veras Design em DiagramaDesign em Diagramaççãoã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;
  17. 17. Prof. Nécio Veras Princípio: ProximidadePrincípio: Proximidade Itens 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.
  18. 18. Prof. Nécio Veras ExemploExemplo
  19. 19. Prof. Nécio Veras ExemploExemplo Agrupe 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.
  20. 20. Prof. Nécio Veras ExemploExemplo
  21. 21. Prof. Nécio Veras Princípio: AlinhamentoPrincí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.
  22. 22. Prof. Nécio Veras ExemploExemplo 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
  23. 23. Prof. Nécio Veras Capa com formato padrão, sem brilho. A reação inicial do leitor é negativa. O alinhamento à esquerda confere força à capa, além de aparência mais sofisticada. O nome do autor, mesmo longe do título, está conectado pelo alinhamento. Centralizado no bloco. Bloco descentralizado na página.
  24. 24. Prof. Nécio Veras Alinhamento FantasiaAlinhamento Fantasia
  25. 25. Prof. Nécio Veras Para que a página fique visualmente organizada, encontre uma linha e guie- se através dela. Não centralize o título se o texto for alinhado à esquerda. Como as laterais são mal-definidas, não é possível observar que o título está centralizado. Evite a endentação de parágrafo em colunas pequenas. Prefira um espaçamento maior entre os parágrafos. Se houver ilustrações ou fotos, alinhe pela esquerda ou pela linha base. ObserveObserve
  26. 26. Prof. Nécio Veras Se seus alinhamentos estiverem bem-delimitados, você poderá interromper conscientemente os alinhamentos e esta interrupção terá uma aparência intencional.
  27. 27. Prof. Nécio Veras Princípio: RepetiPrincípio: Repetiççãoã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.
  28. 28. Prof. Nécio Veras Os títulos e subtítulos são elementos repetitivos (TAHOMA BOLD) e mantém a consistência entre eles. ExemploExemplo
  29. 29. Prof. Nécio Veras ExemploExemplo Repetições: Fonte bold / Fonte light Endentações Espaçamento Alinhamentos Sinais de tópicos quadrados
  30. 30. Prof. Nécio Veras ExemploExemplo Repetições: Um dos elementos da imagem (o triângulo) foi repetido na página, dando unidade ao todo.
  31. 31. Prof. Nécio Veras Princípio: ContrastePrincí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.
  32. 32. Prof. Nécio Veras ExemploExemplo
  33. 33. Prof. Nécio Veras ExemploExemplo
  34. 34. Prof. Nécio Veras Exemplo (CRAP)Exemplo (CRAP)
  35. 35. Prof. Nécio Veras Exemplo (CRAP)Exemplo (CRAP)
  36. 36. Prof. Nécio Veras Exemplo (CRAP)Exemplo (CRAP)
  37. 37. Prof. Nécio Veras ExercíciosExercícios
  38. 38. Prof. Nécio Veras ReferênciasReferências Esta apresentação foi inspirada e baseada nos materiais 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)

×