aula 03 principios do design 2015

Prof. Ricardo Pedrosa Macedo

1

22/02/2015 22:13

Princpios do Design

Grfico

Williams, Robin

Design para quem no designer: noes bsicas de

planejamento visual / Robin Williams; Traduo Laura

Karin Gillon. So Paulo: Callis, 1995.

Proximidade

Alinhamento

Repetio

Contraste


2

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.


3

22/02/2015 22:13


4

22/02/2015 22:13


5

22/02/2015 22:13

@%#$


6

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste Proximidade


7

22/02/2015 22:13

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.

Proximidade

Alinhamento

Repetio

Contraste


8

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste


9

22/02/2015 22:13

12

3

Proximidade

Alinhamento

Repetio

Contraste


10

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste


11

22/02/2015 22:13

Texto

Proximidade

Alinhamento

Repetio

Contraste


12

22/02/2015 22:13

EntedianteInformaes difceis.

OndeQuandoComoQuemHorasEtc...


13

22/02/2015 22:13


14

22/02/2015 22:13

Tudo junto

Proximidade

Alinhamento

Repetio

Contraste


15

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste


16

22/02/2015 22:13

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?

Proximidade

Alinhamento

Repetio

Contraste

Resumo


17

22/02/2015 22:13

O propsito bsico

da proximidade o de organizar.

O simples agrupamento de elementos

relacionados em proximidade cria,

automaticamente, uma organizao

fcil de ler e de memorizar cria brancos, mais atrativos (organizados)

Proximidade

Alinhamento

Repetio

Contraste


18

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.

Proximidade

Alinhamento

Repetio

Contraste


19

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)

Proximidade

Alinhamento

Repetio

Contraste


20

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste Alinhamento


21

22/02/2015 22:13

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.

Mesmo quando os elementos estiverem

fisicamente separados uns dos outros, se

estiverem alinhados, haver uma linha

invisvel conectando-os.

Proximidade

Alinhamento

Repetio

Contraste


22

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.

Proximidade

Alinhamento

Repetio

Contraste


23

22/02/2015 22:13

O que evitar


24

22/02/2015 22:13


25

22/02/2015 22:13

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

Nonono OnonoNonnoon 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

Proximidade

Alinhamento

Repetio

Contraste


26

22/02/2015 22:13

A regra das regra

H uma regra sobre o

descumprimento de

regras:

Antes de descumprir

uma regra, preciso

conhec-la.


27

22/02/2015 22:13

Antes de descumprir uma

regra, preciso conhec-la.

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.

Expoentes da Arte Moderna, o holands Piet Mondrian

(1872-1944)

Pablo Picasso e Wassily Kandinsky


28

22/02/2015 22:13

Antes de descumprir uma

regra, preciso conhec-la.

Arte ModernaPablo Picasso - Guernica, 1937


29

22/02/2015 22:13

Pablo Picasso


30

22/02/2015 22:13

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.

Proximidade

Alinhamento

Repetio

Contraste

Resumo


31

22/02/2015 22:13

O propsito bsico do alinhamento o de

unificar e organizar a pgina.

O resultado que cria uma aparncia

sofisticada, formal, engraada ou sria.


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.

Proximidade

Alinhamento

Repetio

Contraste


32

22/02/2015 22:13

Evite usar mais de um alinhamento de texto

por pgina (ou seja, no centralize um texto

e alinhe outro a direita).

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.

Proximidade

Alinhamento

Repetio

Contraste


33

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste Repetio


34

22/02/2015 22:13

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.


35

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.

Proximidade

Alinhamento

Repetio

Contraste


36

22/02/2015 22:13

O que os iniciantes precisam fazer transformar a repetio imperceptvel em um

elemento-chave visual que unifica o material.

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.

Proximidade

Alinhamento

Repetio

Contraste


37

22/02/2015 22:13

Porm, a repetio vai alm da simples consistncia: um esforo consciente para

unificar todos os elementos do design.

Proximidade

Alinhamento

Repetio

Contraste


38

22/02/2015 22:13

Os ttulos e subttulos so um timo lugar para

se comear a criar elementos repetitivos.


39

22/02/2015 22:13

Fio duplo

Fontes

Ttulos e

Subttulos

Fio nico

Nmeros de

pgina

Proximidade

Alinhamento

Repetio

Contraste


40

22/02/2015 22:13


41

22/02/2015 22:13

A tcnica de

repetio de

imagens (objetos)

eficaz.

Junte-se

a ns

2 de maio,

s 3 hs

da tarde

use

seu

chapu

Proximidade

Alinhamento

Repetio

Contraste


42

22/02/2015 22:13

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.

Proximidade

Alinhamento

Repetio

Contraste

Resumo


43

22/02/2015 22:13


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.

Proximidade

Alinhamento

Repetio

Contraste


44

22/02/2015 22:13

Evite repetir o elemento em demasia, para que ele no se torne enfadonho ou

excessivo.

Esteja consciente do valor do contraste.

Por exemplo, se uma mulher usasse um

vestido de noite vermelho...

Proximidade

Alinhamento

Repetio

Contraste


45

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contraste Contraste


46

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.

Proximidade

Alinhamento

Repetio

Contraste


47

22/02/2015 22:13

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)

Basta no ser tmido e ousar.

Proximidade

Alinhamento

Repetio

Contraste


48

22/02/2015 22:13


49

22/02/2015 22:13


50

22/02/2015 22:13


51

22/02/2015 22:13

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.

Resumo

Proximidade

Alinhamento

Repetio

Contraste


52

22/02/2015 22:13

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.

Resumo

Proximidade

Alinhamento

Repetio

Contraste


53

22/02/2015 22:13

O propsito bsico do contraste duplo, e

seus dois objetivos so unificados.

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.

Proximidade

Alinhamento

Repetio

Contraste


54

22/02/2015 22:13


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.

Proximidade

Alinhamento

Repetio

Contraste


55

22/02/2015 22:13

O que evitar

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

Proximidade

Alinhamento

Repetio

Contraste


56

22/02/2015 22:13


57

22/02/2015 22:13


58

22/02/2015 22:13

itens relacionados entre si devem ser agrupados e aproximados uns dos outros.

Proximidade

nada deve ser colocado arbitrariamente em uma pgina.

Alinhamento

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

Repetio

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

Contraste

Resumo


59

22/02/2015 22:13

Proximidade

Alinhamento

Repetio

Contrastes

Williams, Robin

Design para quem no designer: noes

bsicas de planejamento visual / Robin

Williams; Traduo Laura Karin Gillon. So

Paulo: Callis, 1995.

aula 03 principios do design 2015

Documents