O documento apresenta os conceitos básicos de design gráfico e princípios de diagramação, como proximidade, alinhamento, repetição e contraste. O objetivo é introduzir os alunos aos princípios do design para que possam criar projetos visuais organizados e de fácil compreensão.

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. Prof. Nécio de Lima Veras
http://lattes.cnpq.br/8284657916723590
Objetivo
Conhecer os princípios do Design Gráfico.

3. Prof. Nécio Veras
Leituras recomendadasLeituras recomendadas

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. 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. Prof. Nécio Veras
DesignDesign
• Ver e transmitir experiência visual para
interlocutores.
• Levar em conta:
– Dinamismo;
– Legibilidade;
– Equilíbrio.

7. Prof. Nécio Veras
DesignDesign
• Ser inteligente;
• Saber transmitir uma mensagem usando
representações visuais;

8. Prof. Nécio Veras
Traduzindo o outdoorTraduzindo o outdoor

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. 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. Prof. Nécio Veras
RISD.EDURISD.EDU

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. 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. 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. 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. 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. 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. Prof. Nécio Veras
ExemploExemplo

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. Prof. Nécio Veras
ExemploExemplo

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. 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. 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. Prof. Nécio Veras
Alinhamento FantasiaAlinhamento Fantasia

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. 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. 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. 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. Prof. Nécio Veras
ExemploExemplo
Repetições:
Fonte bold / Fonte light
Endentações
Espaçamento
Alinhamentos
Sinais de tópicos quadrados

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. 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. Prof. Nécio Veras
ExemploExemplo

33. Prof. Nécio Veras
ExemploExemplo

34. Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)

35. Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)

36. Prof. Nécio Veras
Exemplo (CRAP)Exemplo (CRAP)

37. Prof. Nécio Veras
ExercíciosExercícios

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)