You are on page 1of 59

1

Princpios do Design
Grfico
Proximidade

Alinhamento
Repetio
Contraste
Williams, Robin
Design para quem no designer: noes bsicas de
planejamento visual / Robin Williams; Traduo Laura
Karin Gillon. So Paulo: Callis, 1995.
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

Williams, Robin
Design para quem no designer:
noes bsicas de planejamento
visual / Robin Williams; Traduo
Laura Karin Gillon. So Paulo:
Callis, 1995.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

22/02/2015 22:13

@%#$

Prof. Ricardo Pedrosa Macedo

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Proximidade

Prof. Ricardo Pedrosa Macedo

Proximidade
Alinhamento
Repetio
Contraste

Segundo o princpio da proximidade, itens


relacionados entre si devem ser
agrupados e aproximados uns dos
outros, para que sejam vistos como um
conjunto coeso e no como um
emaranhado de partes sem ligao.
Itens ou conjuntos de informaes que no
esto relacionados entre si no deveriam
estar prximos.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

Proximidade
Alinhamento
Repetio

1
2

Contraste

3
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

10

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

11

Texto

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

12

Entediante
Informaes difceis.
Onde
Quando
Como
Quem
Horas
Etc...

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

13

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

14

Tudo junto

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

15

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

16

Proximidade
Alinhamento
Repetio
Contraste

Resumo

Quando vrios itens estiverem prximos,


eles formaro uma unidade visual e no
vrias unidades individuais. Os itens
relacionados entre si devem ser agrupados.
Veja para onde seus olhos se dirigem.
Qual o caminho que eles seguem?
Onde termina a leitura?
Aps a leitura, para onde seus olhos
vo?

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

17

Proximidade
Alinhamento

O propsito bsico
da proximidade o de organizar.

Repetio
Contraste

O simples agrupamento de elementos


relacionados em proximidade cria,
automaticamente, uma organizao
fcil de ler e de memorizar
cria brancos, mais atrativos (organizados)

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

18

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Como atingir este objetivo


Conte o n de elementos visuais da pgina
pelo n de paradas dos seus olhos. Mais de
3-5 itens na pgina, veja dentre os itens
separados quais poderiam ser agrupados em
proximidade, para que se tornem uma
unidade visual.

Prof. Ricardo Pedrosa Macedo

19

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

O que evitar, muitos elementos separados


em uma pgina.
No coloque os itens somente nos cantos e
no meio da pgina.
Evite deixar quantidades iguais de espaos
em branco entre os elementos, a no ser que
cada conjunto seja parte de um subgrupo.
Evite criar qualquer dvida quanto
relao dos elementos entre si, ou seja, cada
subttulo, legenda, imagem etc. devem estar
junto a seu respectivo par.
No relacione elementos que no devam
estar agrupados! (separe-os)

Prof. Ricardo Pedrosa Macedo

20

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Alinhamento

Prof. Ricardo Pedrosa Macedo

21

Proximidade
Alinhamento
Repetio
Contraste

O princpio do alinhamento, nada deve ser


colocado arbitrariamente em uma pgina.
Cada item deve ter uma conexo visual com
algo na pgina.
Quando os itens so alinhados na pgina, h
uma unidade coesa, mais forte.

22/02/2015 22:13

Mesmo quando os elementos estiverem


fisicamente separados uns dos outros, se
estiverem alinhados, haver uma linha
invisvel conectando-os.

Prof. Ricardo Pedrosa Macedo

22

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Apesar de posicionar alguns elementos


separadamente, indicando suas ligaes de
acordo com o princpio da proximidade, o
princpio do alinhamento que avisar ao leitor
que, mesmo no estando prximos, os itens
fazem parte do mesmo material.

Prof. Ricardo Pedrosa Macedo

23

22/02/2015 22:13

O que evitar

Prof. Ricardo Pedrosa Macedo

24

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

25

Nonono Onono
Proximidade
Alinhamento
Repetio

Nonnoon no n on nonon nono


non non on onon on on noon on
Nonono Onoon Nonnoon no n
on nonon nono non non on onon
on on noon onNonono Onoono
onon onon ono
Nonono Onoono nno nononno n
Ononon nono non onoon

Contraste

Nonono Onono
Nonnoon no n on nonon nono
non non on onon on on noon on
Nonono Onoon Nonnoon no n
on nonon nono non non on onon
on on noon onNonono Onoono
onon onon ono
Nonono Onoono nno nononno n
Ononon nono non onoon

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

26

A regra das regra


H uma regra sobre o
descumprimento de
regras:
Antes de descumprir
uma regra, preciso
conhec-la.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

27

Antes de descumprir uma


regra, preciso conhec-la.

Expoentes da Arte Moderna, o holands


Piet Mondrian
(1872-1944)

Limitando-se apenas ao uso de cores


primrias, preto e branco. Quanto forma,
ele restringia-se s figuras lineares. Suas
teorias e sua arte so consideradas por
muitos especialistas uma vitria da
austeridade.

Pablo Picasso e Wassily Kandinsky

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

28

Antes de descumprir uma


regra, preciso conhec-la.

Arte Moderna
Pablo Picasso - Guernica, 1937

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

29

Pablo Picasso
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

30

Proximidade
Alinhamento
Repetio
Contraste

Resumo

Nada deveria ser colocado arbitrariamente.


Cada elemento deveria ter alguma conexo
visual com outro.
A unidade um conceito muito importante
no design.
Para que todos os elementos da pgina
tenham uma esttica unificada, conectada e
interrelacionada, preciso que haja
"amarras" visuais entre os elementos
separados.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

31

Proximidade
Alinhamento
Repetio
Contraste

O propsito bsico do alinhamento o de


unificar e organizar a pgina.
O resultado que cria uma aparncia
sofisticada, formal, engraada ou sria.
Como atingir este objetivo
Esteja consciente do posicionamento dos
elementos na pgina. Encontre sempre algo
a mais na pgina para fazer o alinhamento,
mesmo que os dois objetos estejam
fisicamente distantes.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

32

Proximidade
Alinhamento

Evite usar mais de um alinhamento de texto


por pgina (ou seja, no centralize um texto
e alinhe outro a direita).

Repetio
Contraste

Evite, com todas as suas foras, o


alinhamento centralizado, a no ser que voc
tenha o objetivo consciente de criar uma
apresentao formal, pacata (que costuma
ser comum demais).
Escolha o alinhamento centralizado
conscientemente e no por automao.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

33

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Repetio

Prof. Ricardo Pedrosa Macedo

34

O princpio da repetio afirma que algum


aspecto do design deve repetir-se no
material inteiro.
O elemento repetitivo pode ser uma fonte
em bold (negrito), um fio (linha) grosso,
algum sinal de tpico, um elemento do
design, algum formato especfico, relaes
espaciais etc.
Pode ser qualquer item que o leitor
reconhea visualmente.
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

35

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Quando cria ttulos com mesmo tamanho e


mesmo peso, quando coloca um fio a meia
polegada do final de cada pgina, quando
usa o mesmo sinal de tpico em cada
listagem referente ao mesmo trabalho.

Prof. Ricardo Pedrosa Macedo

36

Proximidade
Alinhamento
Repetio

O que os iniciantes precisam fazer


transformar a repetio imperceptvel em um
elemento-chave visual que unifica o material.

Contraste

A repetio pode ser considerada como


"consistncia". Ao olhar para um jornal de
oito pginas, justamente a repetio de
alguns elementos - sua consistncia - que
faz com que cada uma dessas oito pginas
parea pertencer ao mesmo jornal.
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

37

Proximidade
Alinhamento
Repetio

Porm, a repetio vai alm da simples


consistncia: um esforo consciente para
unificar todos os elementos do design.

Contraste

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

38

Os ttulos e subttulos so um timo lugar para


se comear a criar elementos repetitivos.
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

39

Fio duplo
Proximidade
Alinhamento
Repetio

Fontes
Ttulos e
Subttulos

Contraste

Fio nico

Nmeros de
pgina
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

40

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

41

Proximidade
Alinhamento
Repetio
Contraste

A tcnica de
repetio de
imagens (objetos)
eficaz.

22/02/2015 22:13

Junte-se
a ns
2 de maio,
s 3 hs
da tarde
use
seu
chapu

Prof. Ricardo Pedrosa Macedo

42

Proximidade
Alinhamento
Repetio
Contraste

Resumo
A repetio de elementos visuais no design
unifica e fortalece o material, agrupando
partes que seriam separadas.
O recurso da repetio muito til em peas
de uma s pgina e essencial em
documentos de muitas pginas
(consistncia).

O propsito bsico da repetio unificar e


acrescentar interesse visual, se ela for
interessante, sua leitura ser mais agradvel
e provavelmente mais lida.
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

43

Proximidade
Alinhamento
Repetio
Contraste

Como atingir este objetivo


Considere a repetio como consistncia,
voc poderia transformar alguns desses
elementos consistentes em parte integrante
do design grfico.
Pense sobre a possibilidade de acrescentar
elementos apenas para criar uma repetio.
Em primeiro lugar, voc deve encontrar as
repeties que j existem e refor-las.
Repetir como dar nfase.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

44

Proximidade
Alinhamento
Repetio

Evite repetir o elemento em demasia, para


que ele no se torne enfadonho ou
excessivo.

Contraste

Esteja consciente do valor do contraste.


Por exemplo, se uma mulher usasse um
vestido de noite vermelho...

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

45

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Contraste

Prof. Ricardo Pedrosa Macedo

46

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

O contraste uma das maneiras mais


eficazes de acrescentar algum atrativo visual
a uma pgina.
A "regra" importante que deve ser lembrada
a de que para o contraste ser realmente
eficaz, ele deve ser forte. Cria-se o contraste
quando dois elementos so diferentes. Se
eles diferirem um pouco mas no muito, no
acontecer o contraste e sim um conflito.
Este o segredo: se dois itens no forem
exatamente os mesmos, diferencie-os
completamente.
Prof. Ricardo Pedrosa Macedo

47

Basta no ser tmido e ousar.


Proximidade
Alinhamento
Repetio
Contraste

Uma letra grande pode ser contrastada com


uma pequena; uma fonte em estilo antigo
com uma fonte em bold sem serifa; um fio
fino com um grosso; uma cor fria com uma
mais quente; uma textura spera com
uma lisa; um elemento horizontal (por
exemplo, uma longa linha de texto) com um
elemento vertical (por exemplo, uma coluna
estreita de texto)

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

48

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

49

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

50

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

51

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Resumo

O contraste de uma pgina faz com que seus


olhos se virem para ela. Se voc colocar dois
elementos diferentes em uma pgina, eles
no devem ser similares.
Para que o contraste cumpra totalmente
suas funes, os dois elementos devem ser
muito diferentes.

Prof. Ricardo Pedrosa Macedo

52

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Resumo

Utilizar o princpio do contraste como fazer


o retoque em uma parede: no se pode
combinar mais ou menos a cor; ou voc
encontra a cor exata ou precisar pintar a
parede inteira.

Prof. Ricardo Pedrosa Macedo

53

O propsito bsico do contraste duplo, e


seus dois objetivos so unificados.
Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

1. Um deles criar interesse sobre uma


pgina; se ela tiver uma aparncia
interessante, atrair mais a leitura.
2. O outro auxiliar na organizao das
informaes. O leitor deveria ser capaz de
compreender instantaneamente a maneira
atravs da qual as informaes so
estruturadas, o fluxo lgico de um item
para outro. Os elementos contrastantes
nunca deveriam confundir o leitor ou criar
um foco que no seja o correto.
Prof. Ricardo Pedrosa Macedo

54

Proximidade
Alinhamento
Repetio
Contraste

22/02/2015 22:13

Como atingir este objetivo


Aplique contraste em suas opes de
tipologia, nas espessuras das linhas, nas
cores, nas formas, nos tamanhos, nos
espaos etc. fcil descobrir maneiras de
contrastar os itens e, provavelmente, esta
a maneira mais divertida e satisfatria de
criar interesse visual. O importante criar
elementos marcantes.

Prof. Ricardo Pedrosa Macedo

55

Proximidade

O que evitar

Alinhamento
Repetio
Contraste

22/02/2015 22:13

Ser tmido
Evite contrastes fracos
Se os itens no forem exatamente iguais,
diferencie-os!

Prof. Ricardo Pedrosa Macedo

56

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

57

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

58

Proximidade

Resumo

itens relacionados entre si devem ser agrupados e aproximados


uns dos outros.

Alinhamento

nada deve ser colocado arbitrariamente em uma pgina.

Repetio
algum aspecto do design deve repetir-se no material inteiro.

Contraste

se dois itens no forem exatamente os mesmos, diferencie-os.

22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

59

Proximidade

Alinhamento
Repetio
Contrastes
22/02/2015 22:13

Williams, Robin
Design para quem no designer: noes
bsicas de planejamento visual / Robin
Williams; Traduo Laura Karin Gillon. So
Paulo: Callis, 1995.
Prof. Ricardo Pedrosa Macedo

Related Interests