Upload
michael-weigert
View
7
Download
1
Embed Size (px)
DESCRIPTION
Aula de Design
Citation preview
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
Prof. Ricardo Pedrosa Macedo
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.
Prof. Ricardo Pedrosa Macedo
3
22/02/2015 22:13
Prof. Ricardo Pedrosa Macedo
4
22/02/2015 22:13
Prof. Ricardo Pedrosa Macedo
5
22/02/2015 22:13
@%#$
Prof. Ricardo Pedrosa Macedo
6
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste Proximidade
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
8
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
9
22/02/2015 22:13
12
3
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
10
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
11
22/02/2015 22:13
Texto
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
12
22/02/2015 22:13
EntedianteInformaes difceis.
OndeQuandoComoQuemHorasEtc...
Prof. Ricardo Pedrosa Macedo
13
22/02/2015 22:13
Prof. Ricardo Pedrosa Macedo
14
22/02/2015 22:13
Tudo junto
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
15
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
20
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste Alinhamento
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
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
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
Prof. Ricardo Pedrosa Macedo
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.
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
28
22/02/2015 22:13
Antes de descumprir uma
regra, preciso conhec-la.
Arte ModernaPablo Picasso - Guernica, 1937
Prof. Ricardo Pedrosa Macedo
29
22/02/2015 22:13
Pablo Picasso
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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.
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.
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
33
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste Repetio
Prof. Ricardo Pedrosa Macedo
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.
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
38
22/02/2015 22:13
Os ttulos e subttulos so um timo lugar para
se comear a criar elementos repetitivos.
Prof. Ricardo Pedrosa Macedo
39
22/02/2015 22:13
Fio duplo
Fontes
Ttulos e
Subttulos
Fio nico
Nmeros de
pgina
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
40
22/02/2015 22:13
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
43
22/02/2015 22:13
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.
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
45
22/02/2015 22:13
Proximidade
Alinhamento
Repetio
Contraste Contraste
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
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
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
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
Prof. Ricardo Pedrosa Macedo
54
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.
Proximidade
Alinhamento
Repetio
Contraste
Prof. Ricardo Pedrosa Macedo
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
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
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
Prof. Ricardo Pedrosa Macedo
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.