1
2
Princípios do Design Gráfico
Williams, Robin Design para quem não é designer : noções básicas de planejamento visual / R o b i n Williams ; Tradução Laura Karin Gillon . São Paulo : Callis , 1995.
Proximidade Alinhamento Repetição Contraste Williams, Robin Design para quem não é designer : noções básicas de planejamento visual / Robin Williams ; Tradução Laura Karin Gillon . São Paulo : Callis, 1995. 29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
3
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
4
Proximidade Proximidade Alinhamento Repetição Contraste
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
5
Proximidade Proximidade Alinhamento Repetição Contraste
Proximidade
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
6
Segundo o princípio da proximidade, itens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação.
Proximidade Proximidade Alinhamento Repetição Contraste
Itens ou conjuntos de informações que não estão relacionados entre si não deveriam estar próximos. 29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 1
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
7
8
Proximidade Proximidade Alinhamento Repetição
Proximidade Proximidade
1
Alinhamento Repetição
2
Contraste
Contraste
3 Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
9
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
10
Texto
•Entediante •Informações difíceis.
Proximidade Proximidade Alinhamento
•Onde •Quando •Como •Quem •Horas •Etc...
Repetição Contraste
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
11
12
Tudo junto
Proximidade Proximidade Alinhamento Repetição Contraste
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 2
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
13
14
Proximidade Proximidade
Proximidade Proximidade
Alinhamento
Alinhamento
Repetição
Repetição
Contraste
Contraste
Resumo
Quando vários itens estiverem próximos, eles formarão uma unidade visual e não várias 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? •Após a leitura, para onde seus olhos vão?
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
15
Proximidade Proximidade Alinhamento
16
O propósito básico da proximidade é o de organizar.
Proximidade Proximidade Alinhamento
Repetição Contraste
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Repetição
O simples agrupamento de elementos relacionados em proximidade cria, automaticamente, uma organização
Contraste
Como atingir este objetivo Conte o nº de elementos visuais da página pelo nº de paradas dos seus olhos. Mais de 3-5 itens na página, veja dentre os itens separados quais poderiam ser agrupados em proximidade, para que se tornem uma unidade visual.
• fácil de ler e de memorizar • cria brancos, mais atrativos (organizados)
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
17
Proximidade Proximidade Alinhamento Repetição Contraste
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
18
O que evitar, muitos elementos separados em uma página. • Não coloque os itens somente nos cantos e no meio da página. • Evite deixar quantidades iguais de espaços em branco entre os elementos, a não ser que cada conjunto seja parte de um subgrupo. • Evite criar qualquer dúvida quanto à relação dos elementos entre si, ou seja, cada subtítulo, legenda, imagem etc. devem estar junto a seu respectivo par. •Não relacione elementos que não devam estar agrupados! (separe-os)
Proximidade Proximidade Alinhamento Repetição Contraste
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 3
29/2/2004 02:16
Alinhamento
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
19
Proximidade Proximidade Alinhamento Repetição Contraste
20
O princípio do alinhamento, nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página.
Proximidade Proximidade Alinhamento Repetição Contraste
Quando os itens são alinhados na página, há uma unidade coesa, mais forte.
29/2/2004 02:16
21
Mesmo quando os elementos estiverem fisicamente separados uns dos outros, se estiverem alinhados, haverá uma linha invisível conectando-os.
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
22
O que evitar
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
Apesar de posicionar alguns elementos separadamente, indicando suas ligações de acordo com o princípio da proximidade, é o princípio do alinhamento que avisará ao leitor que, mesmo não estando próximos, os itens fazem parte do mesmo material.
29/2/2004 02:16
23
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
24
Nonono Onono Proximidade Proximidade Alinhamento Repetição
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
A regra das regra Há uma regra sobre o descumprimento de regras:
Nonono Onoono nno nononno n Onononnono n o n 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
Antes de descumprir uma regra, é preciso conhecê-la Nonono Onoono nno nononno n Onononnono n o n onoon
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 4
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
25
26
Antes de descumprir uma regra, é preciso conhecê-la. Proximidade Proximidade Expoentes da Arte Moderna, o holandês Piet Mondrian
Alinhamento Repetição
(1872-1944)
Contraste Limitando-se apenas ao uso de cores primárias, preto e branco. Quanto à forma, ele restringia-se às figuras lineares. Suas teorias e sua arte são consideradas por muitos especialistas uma vitória da austeridade.
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
27
Proximidade Proximidade Alinhamento Repetição Contraste
Proximidade Proximidade
O propósito básico do alinhamento é o de unificar e organizar a página. O resultado é que cria uma aparência sofisticada, formal, engraçada ou séria.
Alinhamento Repetição
Evite, com todas as suas forças, o alinhamento centralizado, a não ser que você tenha o objetivo consciente de criar uma apresentação formal, pacata (que costuma ser comum demais).
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
Contraste
Escolha o alinhamento centralizado conscientemente e não por automação.
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
30
Proximidade Proximidade
Repetição
Evite usar mais de um alinhamento de texto por página (ou seja, não centralize um texto e alinhe outro à direita).
Contraste
29
Alinhamento
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
28
Como atingir este objetivo Esteja consciente do posicionamento dos elementos na página. Encontre sempre algo a mais na página para fazer o alinhamento, mesmo que os dois objetos estejam fisicamente distantes. 29/2/2004 02:16
• Nada deveria ser colocado arbitrariamente. • Cada elemento deveria ter alguma conexão visual com outro. • A unidade é um conceito muito importante no design. • Para que todos os elementos da página tenham uma estética unificada, conectada e interrelacionada, é preciso que haja "amarras" visuais entre os elementos separados.
Pablo Picasso e Wassily Kandinsky
29/2/2004 02:16
Resumo
O princípio da repetição 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 tópico, um elemento do design, algum formato específico, relações espaciais etc.
Repetição
• Pode ser qualquer item que o leitor reconheça visualmente. 29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 5
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
31
Proximidade Proximidade Alinhamento Repetição Contraste
32
• Quando cria títulos com mesmo tamanho e mesmo peso, quando coloca um fio a meia polegada do final de cada página, quando usa o mesmo sinal de tópico em cada listagem referente ao mesmo trabalho.
Proximidade Proximidade Alinhamento Repetição Contraste
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
33
Proximidade Proximidade Alinhamento Repetição
• O que os iniciantes precisam fazer é transformar a repetição imperceptível em um elemento-chave visual que unifica o material. • A repetição pode ser considerada como "consistência". Ao olhar para um jornal de oito páginas, é justamente a repetição de alguns elementos - sua consistência - que faz com que cada uma dessas oito páginas pareça pertencer ao mesmo jornal.
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
34
• Porém, a repetição vai além da simples consistência: é um esforço consciente para unificar todos os elementos do design.
Contraste
Os títulos e subtítulos são um ótimo lugar para se começar a criar elementos repetitivos Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
35
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
36
Fio duplo Proximidade Proximidade Alinhamento Repetição
Fontes Títulos e Subtítulos
Contraste
Fio único
Os n°. Pág. 29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 6
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
37
38
Proximidade Proximidade
Proximidade Proximidade
Alinhamento
Alinhamento
Repetição
Repetição
Contraste
Contraste
A técnica de repetição de imagens (objetos) é eficazes
Junte-se a nós 2 de maio, às 3 hs da tarde use seu chapéu Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
29/2/2004 02:16
39
Proximidade Proximidade Alinhamento Repetição Contraste
Como atingir este objetivo Considere a repetição como consistência, você poderia transformar alguns desses elementos consistentes em parte integrante do design gráfico.
Proximidade Proximidade Alinhamento Repetição
•Evite repetir o elemento em demasia, para que ele não se torne enfadonho ou excessivo.
Por exemplo, se uma mulher usasse um vestido de noite vermelho...
Em primeiro lugar, você deve encontrar as repetições que já existem e reforçá-las. Repetir é como dar ênfase.
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
42
Proximidade Proximidade
Alinhamento
Alinhamento
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
•Esteja consciente do valor do contraste.
Proximidade Proximidade
Contraste
O propósito básico da repetição é unificar e acrescentar interesse visual, se ela for interessante, sua leitura será mais agradável e provavelmente mais lida.
Contraste
41
Repetição
A repetição de elementos visuais no design unifica e fortalece o material, agrupando partes que seriam separadas. O recurso da repetição é muito útil em peças de uma só página e é essencial em documentos de muitas páginas (consistência).
40
Pense sobre a possibilidade'de acrescentar elementos apenas para criar uma repetição.
29/2/2004 02:16
Resumo
Contraste
Repetição Contraste
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 7
29/2/2004 02:16
O contraste é uma das maneiras mais eficazes de acrescentar algum atrativo visual a uma página. 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 são diferentes. Se eles diferirem um pouco mas não muito, não acontecerá o contraste e sim um conflito. Este é o segredo: se dois itens não forem exatamente os mesmos, diferencie-os completamente.
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
43
44
Basta não ser tímido e ousar. Proximidade Proximidade Alinhamento Repetição 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)
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
45
29/2/2004 02:16
46
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
47
48
Proximidade Proximidade Alinhamento Repetição Contraste
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 8
29/2/2004 02:16
Resumo
O contraste de uma página faz com que seus olhos se virem para ela. Se você colocar dois elementos diferentes em uma página, eles não devem ser similares. Para que o contraste cumpra totalmente suas funções, os dois elementos devem ser muito diferentes.
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
49
Proximidade Proximidade Alinhamento Repetição Contraste
29/2/2004 02:16
Resumo
50
O propósito básico do contraste é duplo, e seus dois objetivos são unificados.
Utilizar o princípio do contraste é como fazer o retoque em uma parede: não se pode combinar mais ou menos a cor; ou você encontra a cor exata ou precisará pintar a parede inteira.
Proximidade Proximidade Alinhamento Repetição Contraste
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
1. Um deles é criar interesse sobre uma página; se ela tiver uma aparência interessante, atrairá mais a leitura. 2. O outro é auxiliar na organização das informações. O leitor deveria ser capaz de compreender instantaneamente a maneira através da qual as informações são estruturadas, o fluxo lógico de um item para outro. Os elementos contrastantes nunca deveriam confundir o leitor ou criar um foco que não seja o correto.
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Resumo Proximidade ? itens relacionados entre si devem ser agrupados e aproximados
51
52
uns dos outros.
Proximidade Proximidade Alinhamento Repetição Contraste
Como atingir este objetivo Aplique contraste em suas opções de tipologia, nas espessuras das linhas, nas cores, nas formas, nos tamanhos, nos espaços etc. É fácil descobrir maneiras de contrastar os itens e, provavelmente, esta é a maneira mais divertida e satisfatória de criar interesse visual. O importante é criar elementos marcantes.
Alinhamento ? nada deve ser colocado arbitrariamente em uma página. Repetição ? algum aspecto do design deve repetir-se no material inteiro.
Contraste
? se dois itens não forem exatamente os mesmos, diferencie -os.
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004
Page 9
29/2/2004 02:16
Prof. Ricardo Pedrosa Macedo - copyrihgt2004