Conceitos de Design Grfico

Disciplina de Design Grfico

ndice
Projeto de Design Grfico
Layouts Efetivos
Elementos de Design
Princpios de Design
Referncias Bibliogrficas

2
 Projeto de Design Grfico

3
Projeto de Design Grfico
Definio

Processo de criar a aparncia de uma publicao,

apresentao ou Web site de uma forma lgica e
atrativa.

4
Projeto de Design Grfico
Objetivos
atrair ateno
agregar valor a uma
mensagem
aumentar nmero de
leitores
simplificar, organizar,
fornecer nfase, e
criar unidade para a
leitura

5
Projeto de Design Grfico
Etapas
Analisar o pblico
Determinar o propsito de sua mensagem
Decidir onde e como sua mensagem aparecer
Estabelear metas
Organizar texto e grficos
Escolhar um formato adequado e layout
Selecionar fontes adequadas
Adicionar e manipular grficos
Organizar texto e grficos
Corrigir provas
Refinar e afinar
6
 Layouts Efetivos

7
Layout
Definio
O arranjo de textos e grficos em uma publicao
impressa, apresentao ou Web site.

Deve servir ao objetivo pretendido pelo designer,

organizar as informaes e grficos, a fim de criar um
caminho visual para os leitores a seguir, e atrair a
ateno dos leitores.

No h um caminho certo para criar um bom layout.

8
Layout
Diretrizes Gerais
determinar o propsito da sua publicao
estabelecer a mensagem principal
planejar o seu layout em torno da mensagem
escolher o tipo de mdia adequada
identificar o pblico-alvo
layoutar mantendo este pblico em mente

9
Layout
Diretrizes Organizacionais
tamanhos diferentes para diferentes elementos
hierarquia e coerncia na formatao
linhas para separar as informaes em grupos
pesos diferentes em fontes
espao em branco para fins de design
informaes importantes no canto superior esquerdo
caixa em torno de informaes importantes
chamar a ateno para as listas de itens
cores ou contraste para separar ou enfatizar

10
Layout
Capturando a Ateno
ampliar uma imagem ou foto de algo pequeno
inclinar uma imagem ou um bloco de texto em um ngulo
cercar um elemento pequeno com espaos em branco
cores vivas para ambientes cinzentos ou escuros
reas pretas slidas ou uma grande rea branca
cortar uma imagem de uma forma incomum
informaes importantes apresentadas de forma atpica

11
 Elementos de Design

12
Elementos de Design
Linhas
Formas
Texturas
Espao em branco
Tamanho
Contraste
Cor

13
Linhas
Qualquer marca a ligao entre dois pontos.
Diferentes de linhas aparecem em toda parte.
Linhas retas, curvas sinuosas, finas, grossas, slidas e
pontilhadas.

14
Linhas
Utilizao
organizar as informaes
destacar elementos
conectar ou separar informaes
circular uma imagem ou criar
uma borda
criao de grades
criao de grficos de dados
criao de padres
direcionar o olho do leitor ou
criar uma sensao de
movimento
15
Linhas
Exemplos de Utilizao

16
Linhas
Exemplos de Utilizao

17
Linhas
Exemplos de Utilizao

18
Formas
Qualquer coisa que tenha altura e largura tem a forma.

Formas geomtricas so regulares e estruturadas. Funcionam

muito bem como blocos de construo para o projeto grfico.
Formas naturais so irregulares e fludas.
Formas abstratas so verses simplificadas de formas
naturais.

19
Formas
Psicologia das Formas
Formas Atribudas a: Exemplos

Angulares fora, estabilidade, equilbrio, quadrados, retngulos e

confiana tringulos

Circulares harmonia, suavidade, proteo, crculos e elipses

afeto

Verticais conflito, dinamismo, poder

Horizontais tranquilidade, calma, descanso,

silncio

Retas masculinidade, agudez, pressa

Curvilneas ritmo, movimento, prazer,

generosidade

Grandes poder, fora

Pequenas delicadeza, fraqueza,

simplicidade
Formas
Utilizao
cortar uma foto de uma
forma incomum
simbolizar uma idia
tornar um bloco de
texto mais interessante,
definindo o texto em
uma forma
destacar informaes

21
Texturas
Aparncia ou sensao de uma superfcie.
Adiciona riqueza e dimenso aos layouts.
Tambm contempla padres de formas.

22
Texturas
Utilizao
fornecer humor ou personalidade ao layout
criar contraste entre elementos
desviar o olhar
provocar emoes
criar uma sensao de riqueza e profundidade

23
Texturas
Exemplo de Uso

24
Espao
Distncia ou rea entre ou em torno de coisas.
Separa ou une, destaca, e d ao olhar um descanso visual.

25
Espao
O espao em branco (a ausncia de
texto e grficos) fundamental para
o design grfico. A chave a de
adicionar apenas bastante espao
em branco para que o olho sabe
para onde ir e pode descansar um
pouco quando chega l.

26
Espaos
Utilizao
fornecer um descanso visual
criar laos entre elementos
destacar um elemento
tornar o texto mais legvel
muito espao em branco em torno de um elemento
importante chama a ateno para ele

27
Espao
Exemplo de Uso
Tamanho
Muito importante em manter um layout funcional, atraente
e organizado.
Mostra que mais importante, atrai a ateno, e ajuda a
ajustar o foco.

29
Tamanho
Utilizao
mostrar importncia de um elemento
torna os elementos de fcil percepo
atrair a ateno
contraste de tamanho cria interesse
estabelecer uma aparncia
consistente

30
Tamanho
Exemplo de Uso

31
Contraste
Valor de brilho ou escurido de uma rea.
Cada sombra sobre o espectro de cores tem um contraste,
de muito mais claro ao mais escuro.

Separa, sugere humor, acrescenta drama, e cria a iluso de

profundidade.

32
Contraste
Utilizao
dar a iluso de volume e profundidade
criar uma imagem de leveza ou escurido
tornar um layout dramtico com grandes reas de luz ou
sombra
enfatizar um elemento
objetos parecerem estar na frente ou atrs de outros

33
Contraste
Exemplo de Uso

34
Cor
Confere humor, cria imagens, atrai a ateno, e identifica
objetos.
Ao selecionar cores para uma publicao ou uma pgina
web, pense no que voc quer que a cor faa e o que
apropriado para o seu propsito.

35
Cor
Utilizao
destaque para elementos
importantes
atrair os olhos
sinaliza onde olhar
primeiro
criar um estado de
esprito
organizar elementos em
conjunto ou isol-los
provocar emoo

36
Cor
Espectro de Cores
So divididas em primrias, secundrias e tercirias:

37
Cor
RGB x CMYK
RGB: luz emitida CMYK: luz refletida
reproduo de cores em cores subtrativas para
dispositivos eletrnicos meios impressos

38
Cor
Temperatura
Cores quentes: representam as cores do fogo, das folhas
de outono, e do pr do sol; so energizantes, apaixonados,
e positivas.

Cores frias: mais moderadas do que as cores quentes;

representam a noite, a gua, a natureza; so calmantes,
relaxantes, e um pouco reservadas.

Cores neutras: servem como pano de fundo no projeto

grfico, combinados com cores mais viva; o significado
associado s cores que as cercam.

39
Cor
Harmonia - Cores Anlogas
pertencem a mesma famlia
de tons
usadas para dar a sensao de
uniformidade
geralmente tornam o layout
elegante, porm deve-se
tomar o cuidado para no
deix-lo montona

40
Cor
Harmonia - Cores Complementares
so opostas umas s outras
cada cor primria tem uma
secundria por complementar
e vice-versa
ao juntar-se obtm-se alguma
tonalidade de cinza
utilizadas para valorizar o
contraste

41
Harmonia - Cores Anlogas

42
Cor
Psicologia das Cores
Cor Associado a:
Vermelho paixo, fora, amor, perigo

Laranja energia, criatividade, equilbrio, entusiasmo

Amarelo riqueza, diverso, satisfao, otimismo

Verde natureza, juventude, sorte, esperana

Azul harmonia, confidncia, tecnologia, liberdade

Violeta espiritualidade, realeza, sabedoria, dor

Branco pureza, inocncia, paz, simplicidade

Preto sofisticao, formalidade, morte, mistrio

Cor
Paleta de Cores

44
45
 Princpios de Design

46
Princpios de Design
Equilbrio
nfase
Ritmo
Unidade

47
Equilbrio
Distribuio igual de peso, volume ou importncia.

Equilbrio simtrico um arranjo de

elementos para que eles sejam distribudos
uniformemente esquerda e direita.
Equilbrio assimtrico um arranjo de
objetos de igual peso em cada lado da pgina.
Cor, contraste, tamanho, e forma podem ser usados.

48
Equilbrio
Utilizao
repetio de forma a intervalos regulares
centralizar elementos
vrias ilustraes em uma rea pequena para equilibrar
uma imagem ou bloco de texto grande
uma ou duas formas incomuns e o resto formas regulares
amenizar um texto pesado com uma ilustrao vibrante
muito espao em branco em torno de grandes blocos de
texto ou imagens escuras

49
50
Ritmo
Padro criado por elementos repetitivos variados.
Repetio e variao so as chaves para o ritmo visual.

Elementos em intervalos regulares criam um ritmo suave e

uma sensao relaxante.
Mudanas bruscas no tamanho e espaamento dos
elementos cria um ritmo mais vivo e um clima animado.

51
Ritmo
Utilizao
srie de elementos de forma semelhante com espaos
em branco entre si para um ritmo regular
srie de elementos progressivamente maiores com
maiores espaos em branco para um ritmo progressivo
alternar fontes em negrito e padro, claro e escuro
repetir uma forma semelhante em vrias reas
repitir um elemento na mesma posio em cada pgina

52
RITMO
nfase
O que se destaca ou se faz notar.
Necessrio um ponto focal para chamar a ateno dos
leitores. Geralmente, um ponto focal criado quando
um elemento diferente do resto.
Cuidado: muitos pontos focais anulam o efeito.

54
nfase
Utilizao
srie de ilustraes quadradas ao lado de uma delineada
em uma forma incomum
parte importante do texto em uma curva ou um ngulo
negrito para ttulos e subttulos e um peso mais leve para
todos os outros contedos
imagem grande ao lado de um pequeno pedao de texto
inverso: letras claras contra fundo escuro
cor ou formato de fonte inusitada
listas destacadas em uma barra lateral sombreada

55
nfase
Exemplo de Uso
Unidade
Ajuda os elementos a encaixarem-se ao layout.
Os leitores precisam pistas visuais para que eles
percebam o layout como uma unidade.
Pode-se utilizar a repetio de cores, formas e texturas,
ou uma estrutura de grade com margens, colunas, e
espaamento proporcionais.

57
Unidade
Utilizao
apenas um ou dois estilos de fonte e varie suas
caractersticas (tamanho, cor e contraste)
coerncia com o tipo de fonte, tamanhos e estilos para
ttulos, subttulos, legendas, cabealhos, rodaps
use a mesma paleta de cores
repita cores, formas ou texturas em diferentes reas
elementos visuais que compartilham cores, temtica ou
forma semelhante.
alinhe imagens e texto com as linhas de grade

58
Unidade
Exemplos de Uso

59
 Referncias

60
Referncias
Color in Motion
www.mariaclaudiacortes.com

Design Smashing Magazine

www.smashingmagazine.com/category/design

Design with Lines Design Shack

www.designshack.co.uk/articles/graphics/6-tips-for-designing-with-lines

The Basic of Graphic Design

www.online.tusc.k12.al.us/tutorials/grdesign/grdesign.htm

Whitespace A List Apart

www.alistapart.com/articles/whitespace

61