You are on page 1of 59

1

Princípios do Design
Gráfico
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.
22/02/2015 22:13

Prof. Ricardo Pedrosa Macedo

2

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.

22/02/2015 22:13

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 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Proximidade Prof. Ricardo Pedrosa Macedo .

Itens ou conjuntos de informações que não estão relacionados entre si não deveriam estar próximos. para que sejam vistos como um conjunto coeso e não como um emaranhado de partes sem ligação. itens relacionados entre si devem ser agrupados e aproximados uns dos outros. 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .7 Proximidade Alinhamento Repetição Contraste Segundo o princípio da proximidade.

Ricardo Pedrosa Macedo .8 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Prof.

Ricardo Pedrosa Macedo .9 Proximidade Alinhamento Repetição 1 2 Contraste 3 22/02/2015 22:13 Prof.

Ricardo Pedrosa Macedo .10 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Prof.

11 Texto Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

22/02/2015 22:13 Prof. •Onde •Quando •Como •Quem •Horas •Etc.12 •Entediante •Informações difíceis... Ricardo Pedrosa Macedo .

Ricardo Pedrosa Macedo .13 22/02/2015 22:13 Prof.

14 Tudo junto Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

15 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

Ricardo Pedrosa Macedo . para onde seus olhos vão? 22/02/2015 22:13 Prof. eles formarão uma unidade visual e não várias unidades individuais. •Qual é o caminho que eles seguem? •Onde termina a leitura? •Após a leitura.16 Proximidade Alinhamento Repetição Contraste Resumo Quando vários itens estiverem próximos. •Veja para onde seus olhos se dirigem. Os itens relacionados entre si devem ser agrupados.

Ricardo Pedrosa Macedo . automaticamente. mais atrativos (organizados) 22/02/2015 22:13 Prof. uma organização • fácil de ler e de memorizar • cria brancos.17 Proximidade Alinhamento O propósito básico da proximidade é o de organizar. Repetição Contraste O simples agrupamento de elementos relacionados em proximidade cria.

Ricardo Pedrosa Macedo . veja dentre os itens separados quais poderiam ser agrupados em proximidade. Prof.18 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 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. para que se tornem uma unidade visual.

devem estar junto a seu respectivo par. ou seja. • Evite criar qualquer dúvida quanto à relação dos elementos entre si. muitos elementos separados em uma página. a não ser que cada conjunto seja parte de um subgrupo. legenda.19 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 O que evitar. imagem etc. Ricardo Pedrosa Macedo . •Não relacione elementos que não devam estar agrupados! (separe-os) Prof. • 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. cada subtítulo.

20 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Alinhamento Prof. Ricardo Pedrosa Macedo .

Cada item deve ter uma conexão visual com algo na página. Quando os itens são alinhados na página. nada deve ser colocado arbitrariamente em uma página. haverá uma linha invisível conectando-os. mais forte.21 Proximidade Alinhamento Repetição Contraste O princípio do alinhamento. Ricardo Pedrosa Macedo . Prof. há uma unidade coesa. 22/02/2015 22:13 Mesmo quando os elementos estiverem fisicamente separados uns dos outros. se estiverem alinhados.

mesmo não estando próximos.22 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Apesar de posicionar alguns elementos separadamente. é o princípio do alinhamento que avisará ao leitor que. os itens fazem parte do mesmo material. Ricardo Pedrosa Macedo . indicando suas ligações de acordo com o princípio da proximidade. 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 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 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 . é preciso conhecê-la. 22/02/2015 22:13 Prof.26 A regra das regra Há uma regra sobre o descumprimento de regras: Antes de descumprir uma regra.

é preciso conhecê-la.27 Antes de descumprir uma regra. Pablo Picasso e Wassily Kandinsky 22/02/2015 22:13 Prof. Expoentes da Arte Moderna. o holandês Piet Mondrian (1872-1944) Limitando-se apenas ao uso de cores primárias. preto e branco. Ricardo Pedrosa Macedo . ele restringia-se às figuras lineares. Quanto à forma. Suas teorias e sua arte são consideradas por muitos especialistas uma vitória da austeridade.

Ricardo Pedrosa Macedo .28 Antes de descumprir uma regra. 1937 22/02/2015 22:13 Prof. Arte Moderna Pablo Picasso .Guernica. é preciso conhecê-la.

29 Pablo Picasso 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

é preciso que haja "amarras" visuais entre os elementos separados. • A unidade é um conceito muito importante no design. • Cada elemento deveria ter alguma conexão visual com outro. Ricardo Pedrosa Macedo .30 Proximidade Alinhamento Repetição Contraste Resumo • Nada deveria ser colocado arbitrariamente. conectada e interrelacionada. • Para que todos os elementos da página tenham uma estética unificada. 22/02/2015 22:13 Prof.

Encontre sempre algo a mais na página para fazer o alinhamento. mesmo que os dois objetos estejam fisicamente distantes. Ricardo Pedrosa Macedo . formal. engraçada ou séria. O resultado é que cria uma aparência sofisticada. 22/02/2015 22:13 Prof. Como atingir este objetivo Esteja consciente do posicionamento dos elementos na página.31 Proximidade Alinhamento Repetição Contraste O propósito básico do alinhamento é o de unificar e organizar a página.

com todas as suas forças. não centralize um texto e alinhe outro a direita). a não ser que você tenha o objetivo consciente de criar uma apresentação formal. 22/02/2015 22:13 Prof. Repetição Contraste Evite. pacata (que costuma ser comum demais). Escolha o alinhamento centralizado conscientemente e não por automação. Ricardo Pedrosa Macedo .32 Proximidade Alinhamento Evite usar mais de um alinhamento de texto por página (ou seja. o alinhamento centralizado.

Ricardo Pedrosa Macedo .33 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Repetição Prof.

algum formato específico. um fio (linha) grosso. um elemento do design. algum sinal de tópico. • Pode ser qualquer item que o leitor reconheça visualmente. 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo . • O elemento repetitivo pode ser uma fonte em bold (negrito). relações espaciais etc.34 O princípio da repetição afirma que algum aspecto do design deve repetir-se no material inteiro.

Prof.35 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 • 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. Ricardo Pedrosa Macedo .

sua consistência . é justamente a repetição de alguns elementos . Ricardo Pedrosa Macedo .que faz com que cada uma dessas oito páginas pareça pertencer ao mesmo jornal. Ao olhar para um jornal de oito páginas.36 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. 22/02/2015 22:13 Prof. Contraste • A repetição pode ser considerada como "consistência".

a repetição vai além da simples consistência: é um esforço consciente para unificar todos os elementos do design. Contraste 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .37 Proximidade Alinhamento Repetição • Porém.

38 Os títulos e subtítulos são um ótimo lugar para se começar a criar elementos repetitivos. 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

39 Fio duplo Proximidade Alinhamento Repetição Fontes Títulos e Subtítulos Contraste Fio único Números de página 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

Ricardo Pedrosa Macedo .40 22/02/2015 22:13 Prof.

41 Proximidade Alinhamento Repetição Contraste A técnica de repetição de imagens (objetos) é eficaz. Ricardo Pedrosa Macedo . 22/02/2015 22:13 Junte-se a nós 2 de maio. às 3 hs da tarde use seu chapéu Prof.

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). agrupando partes que seriam separadas. Ricardo Pedrosa Macedo . se ela for interessante. O propósito básico da repetição é unificar e acrescentar interesse visual. sua leitura será mais agradável e provavelmente mais lida.42 Proximidade Alinhamento Repetição Contraste Resumo A repetição de elementos visuais no design unifica e fortalece o material. 22/02/2015 22:13 Prof.

Repetir é como dar ênfase.43 Proximidade Alinhamento Repetição Contraste Como atingir este objetivo Considere a repetição como consistência. 22/02/2015 22:13 Prof. Em primeiro lugar. Pense sobre a possibilidade de acrescentar elementos apenas para criar uma repetição. você poderia transformar alguns desses elementos consistentes em parte integrante do design gráfico. Ricardo Pedrosa Macedo . você deve encontrar as repetições que já existem e reforçá-las.

44 Proximidade Alinhamento Repetição •Evite repetir o elemento em demasia. para que ele não se torne enfadonho ou excessivo. se uma mulher usasse um vestido de noite vermelho. Ricardo Pedrosa Macedo . 22/02/2015 22:13 Prof. Contraste •Esteja consciente do valor do contraste... Por exemplo.

45 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Contraste Prof. Ricardo Pedrosa Macedo .

Se eles diferirem um pouco mas não muito. Cria-se o contraste quando dois elementos são diferentes.46 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 O contraste é uma das maneiras mais eficazes de acrescentar algum atrativo visual a uma página. Este é o segredo: se dois itens não forem exatamente os mesmos. Prof. ele deve ser forte. não acontecerá o contraste e sim um conflito. diferencie-os completamente. A "regra" importante que deve ser lembrada é a de que para o contraste ser realmente eficaz. Ricardo Pedrosa Macedo .

um fio fino com um grosso. uma coluna estreita de texto) 22/02/2015 22:13 Prof. Proximidade Alinhamento Repetição Contraste Uma letra grande pode ser contrastada com uma pequena. Ricardo Pedrosa Macedo . uma cor fria com uma mais quente. uma fonte em estilo antigo com uma fonte em bold sem serifa.47 Basta não ser tímido e ousar. uma textura áspera com uma lisa. uma longa linha de texto) com um elemento vertical (por exemplo. um elemento horizontal (por exemplo.

48 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

Ricardo Pedrosa Macedo .49 22/02/2015 22:13 Prof.

Ricardo Pedrosa Macedo .50 22/02/2015 22:13 Prof.

Ricardo Pedrosa Macedo . Para que o contraste cumpra totalmente suas funções. Prof. Se você colocar dois elementos diferentes em uma página. eles não devem ser similares.51 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Resumo O contraste de uma página faz com que seus olhos se virem para ela. os dois elementos devem ser muito diferentes.

52 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Resumo 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. Prof. Ricardo Pedrosa Macedo .

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. Prof. O outro é auxiliar na organização das informações. se ela tiver uma aparência interessante. Um deles é criar interesse sobre uma página.53 O propósito básico do contraste é duplo. Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 1. Ricardo Pedrosa Macedo . Os elementos contrastantes nunca deveriam confundir o leitor ou criar um foco que não seja o correto. 2. atrairá mais a leitura. e seus dois objetivos são unificados.

É fácil descobrir maneiras de contrastar os itens e. Ricardo Pedrosa Macedo . provavelmente. esta é a maneira mais divertida e satisfatória de criar interesse visual. Prof. O importante é criar elementos marcantes. nos tamanhos. nas cores. nas espessuras das linhas. nas formas. nos espaços etc.54 Proximidade Alinhamento Repetição Contraste 22/02/2015 22:13 Como atingir este objetivo Aplique contraste em suas opções de tipologia.

Ricardo Pedrosa Macedo .55 Proximidade O que evitar Alinhamento Repetição Contraste 22/02/2015 22:13 • Ser tímido • Evite contrastes fracos • Se os itens não forem exatamente iguais. diferencie-os! Prof.

56 22/02/2015 22:13 Prof. Ricardo Pedrosa Macedo .

Ricardo Pedrosa Macedo .57 22/02/2015 22:13 Prof.

58 Proximidade Resumo ► itens relacionados entre si devem ser agrupados e aproximados uns dos outros. diferencie-os. 22/02/2015 22:13 Prof. Repetição ► algum aspecto do design deve repetir-se no material inteiro. Alinhamento ► nada deve ser colocado arbitrariamente em uma página. Contraste ► se dois itens não forem exatamente os mesmos. Ricardo Pedrosa Macedo .

59 Proximidade Alinhamento Repetição Contrastes 22/02/2015 22:13 Williams. 1995. Prof. São Paulo: Callis. Robin Design para quem não é designer: noções básicas de planejamento visual / Robin Williams. Tradução Laura Karin Gillon. Ricardo Pedrosa Macedo .

Related Interests