PRINCÍPIOS BÁSICOS DE DESIGN

Download Report

Transcript PRINCÍPIOS BÁSICOS DE DESIGN

Slide 1

PRINCÍPIOS BÁSICOS DE
DESIGN


Slide 2

PRINCÍPIOS BÁSICOS DE DESIGN

PROXIMIDADE

ALINHAMENTO
REPETIÇÃO

CONTRASTE


Slide 3

PROXIMIDADE


Slide 4

PROXIMIDADE
Itens relacionados entre si devem ser agrupados
e aproximados uns dos outros, para que sejam
vistos como um grupo coeso e não como um
emaranhado de partes sem ligação.

Itens ou conjuntos de informações que não estão
relacionados entre si não deveriam estar
próximos.
Isto oferece uma pista visual imediata da
organização do conteúdo da página.


Slide 5

Proximidade

Minha lista de flores

Minha lista de flores

Amor-perfeito

Amor-perfeito

Rosa

Rosa

Margarida

Margarida

Prímula

Prímula

Cravo

Cravo

Primavera

Primavera

Violeta

Violeta

Cravina

Cravina


Slide 6

Proximidade

Numa página, assim como na vida a
proximidade implica uma relação.


Slide 7

Olhe o layout deste cartão de visita.

Rafael Ribeiro

(11)5555-1212

Taberna da Sereia
Rua dos Passos, 916

São Paulo - SP


Slide 8

•Quantos elementos
individuais pode ver neste
pequeno espaço?
•Por acaso os seus olhos
pararam cinco vezes?

Rafael Ribeiro

(11)5555-1212

Taberna da Sereia
Rua dos Passos, 916

São Paulo - SP

•Por onde começou a leitura?
•O que leu a seguir?

•O que aconteceu quando
alcançou o canto inferior
direito?
•Ele ficou vagando para
certificar-se de que não
perdeu alguma informação
espalhada pelos cantos?


Slide 9

Rafael Ribeiro

(11)5555-1212

Taberna da Sereia
Rua dos Passos, 916

E agora? Por onde começar a
leitura? Pelo canto superior
esquerdo ou pelo texto
central?

Após ler os dois itens que
estão em negrito, para onde
se direciona o seu olhar ?

São Paulo - SP

É fácil determinar o fim da
leitura?


Slide 10

O problema com os cartões anteriores é
que nenhum dos itens parecem estar
relacionados. Não está claro por onde a
leitura deve começar e terminar.

Veja a seguir o que acontece quando agrupamos os elementos
relacionados do cartão em estudo:


Slide 11

Taberna da Sereia
Rafael Ribeiro
Rua dos Passos, 916
São Paulo – SP
(11) 5555-1212

Será que ainda existe alguma dúvida de por onde começar a leitura
deste cartão? Para onde vai o seu olhar a seguir? E sobre o final da
leitura?

Agora o cartão está organizado tanto lógica quanto visualmente
transmitindo a mensagem com mais clareza.


Slide 12

Quando vários elementos estão próximos entre
si, tornam-se uma unidade visual, e não várias
unidades separadas.

Várias coisas acontecem quando elementos similares
estão agrupados em uma unidade:
•A página fica mais organizada;
•É possível saber por onde começar a leitura e
onde terminá-la;

•O espaço em branco (espaço ao redor das letras)
também fica mais organizado.


Slide 13

Observe este cabeçalho de jornal:
Quantos elementos separados se encontram neste material?

De Acordo com o posicionamento, que itens estão relacionados?

ASSOCIAÇÃO FEMININA DE PILOTOS AÉREOS
AS ÚLTIMAS NOTÍCIAS...

Vol. 26,Nº9

DIRETAMENTE DO COCKPIT
Outubro de 2006

Pense um pouco para decidir quais os elementos que deveriam ser agrupados
e quais deveriam ficar separados.


Slide 14

Melhorou?

As últimas nótícias...

Diretamente do Cockpit
Associação Feminina de Pilotos Aéreos
Vol. 26 Nº9 Outubro de 2006


Slide 15

Observe o que foi feito:
– As letras foram mudadas de maiúsculas para maiúsculas
e minúsculas, o que proporcionou mais espaço, deixando
o título mais evidente e com leitura mais fácil;

– Os cantos arredondados foram substituídos por cantos
retos, criando uma aparência mais clara e forte;
– O tamanho do avião aumentou, ultrapassando o contorno
(truque muito utilizado para ampliar o espaço).


Slide 16

Proximidade

Na criação de qualquer material de comunicação visual,
como:
anúncios;

•sites;
•folhetos;
•cartões de visitas;
•outdoors;
desde o início de sua elaboração deve-se saber:
•QUAIS AS INFORMAÇÕES que ESTÃO CONECTADAS,
•QUAIS as INFORMAÇÕES que DEVEM SER ENFATIZADAS E

•O QUE PODE SER ABRANDADO.

Expresse as informações graficamente agrupando-as.


Slide 17

Tente organizar / formatar a lista abaixo:

Qual o maior problema de visualização
desta lista?

CDs
CDs para crianças
CDs Educacionais
Cds de lazer
Educacional
Aprendizado inicial
Idiomas
Ciências
Matemática
Material do Professor
Livros
Vídeos
Hardware e Software
Cabos
Dispositivos de entrada
Armazenamento
Memória
Modems
Impressoras e acessórios


Slide 18

E agora, ficou mais fácil de entender a lista?

CDs
CDs para crianças
CDs Educacionais
Cds de lazer

Educacional

Agora, a mesma lista foi criada através
de grupos visuais.

Também
foram
acrescentados
contrastes nos títulos.

Aprendizado inicial
Idiomas
Ciências
Matemática

Material do Professor
Livros
Vídeos

Hardware e Software
Cabos
Dispositivos de entrada
Armazenamento
Memória
Modems
Impressoras e
acessórios


Slide 19

À

s vezes, ao agrupar itens relacionados,

torna-se necessário fazer algumas alterações,
como de tamanho, posicionamento de texto e
de figuras.

Veja o exemplo a seguir...


Slide 20

Séries de Concertos de Câmara
Escola Egley Júnior
6ª feira, 3 de fevereiro, às 20h00
Quarteto de Cordas Alexander
Mozart, K387, Batork nº3, Opus 59, nº1
Sam Pritchert & Ethel Libitz, violinos
Sandra Yarbrough, viola; Mark Wilson, violoncelo
6ª feira, 1º de março, 20h00
Trio Artaria
Trio “Archduke” de Beethoven e trios Haydn,
Schoenberg e Magnard
Richard Samson Norartz, violino
Recepção e concerto na Galeria de Arte Egley
6ª feira, 26 de abril, às 20h00
Orquestra de Câmara Egley
Quarteto para piano em sol menor de Brahms
Sonata de Schubert
Polly Hollyfield, violino,; Linda Battcioli,viola;
Norinne antiqua - Tempestat, violoncelo
Margaret Park-Raynolds, flauta; Robim Plantz, piano
Todos os concertos acontecerão no Audiório Newman,
Hall Emeritus, Educação Comunitária


Slide 21

Foi Fácil encontrar estas informações:
•os eventos
•os horários
•onde eles acontecem?

além disso...
achou a leitura do texto aborrecida?

...Olhe agora...


Slide 22

Séries de Concertos de Câmara
Escola Egley Júnior
Quarteto de Cordas Alexander
Mozart, K387, Batork nº3, Opus 59, nº1
Sam Pritchert & Ethel Libitz, violinos
Sandra Yarbrough, viola; Mark Wilson, violoncelo
6ª feira, 3 de fevereiro, às 20h00

Trio Artaria
Trio “Archduke” de Beethoven e trios Haydn,
Schoenberg e Magnard
Richard Samson Norartz, violino
Recepção e concerto na Galeria de Arte Egley
6ª feira, 1º de março, 20h00

Orquestra de Câmra Egley
Quarteto para piano em sol menor de Brahms
Sonata de Schubert
Polly Hollyfield, violino,; Linda Battcioli,viola;
Norinne antiqua - Tempestat, violoncelo
Margaret Park-Raynolds, flauta; Robim Plantz, piano
6ª feira, 26 de abril, às 20h00

Escola Egley Junior
Todos os concertos acontecerão no Audiório Newman, Hall Emeritus,
Educação Comunitária
Ingressos a R$10,00 e R$8,00
Telefone para informações (012)555-1212


Slide 23

Quantos concertos constam?

Veja o que mudou...
•As informações foram agrupadas por assunto (mentalmente
ou em rascunho) depois foram agrupadas no texto;
•Observe que o espaço entre as três apresentações é o
mesmo, o que indica que estes três grupos estão ligados de
alguma forma;
•As informações subordinadas (local, preço do ingresso..)
estão mais distanciadas, diferenciando-as das performances
(concertos).


Slide 24

Agora...
observe o folheto que será apresentado na próxima página...

A intenção era a de se criar algo engraçado e cheio de energia,
mas, dando uma olhada rápida, você consegue responder...

quando e onde a venda acontece?


Slide 25


Roupas da moda

brinquedos

Pássaro grande
Rádio Motorola
de 1942


Slide 26

Usando o princípio da proximidade para organizar as informações, é
possível informar imediatamente:

QUEM
O QUE
ONDE

Com a nova disposição os prováveis clientes não desistirão de ler o
material, pois não precisam mais procurar as informações nos diversos
blocos de textos inclinados.

Veja...


Slide 27



Sábado, 9 de setembro

Instrumentos
odontológicos
semi-novos
Sofá vitoriano
Roupas da moda

Café e Donuts grátis

Sacos de 2 Kg
para pássaros

Rua dos acontecimentos, 527

brinquedos

Pássaro grande
Equipamentos de
salão de beleza
dos anos 50

Rádio Motorola de 1942

Gaiola Grande
...e muito mais!!!

A renda será revertida em prol do Fundo de Educação Mary Sidney


Slide 28

O QUE VOCÊ ACHA,
PARCEIRO?
Você gostaria de...
Despertar com o nascer do sol, tomar uma boa xícara de café e sair
para contemplar a linda paisagem na porta do seu bangalô?

Você já imaginou...
Passar o dia ao ar livre, sob um céu sem nuvens, trabalhando na
terra?

E se você pudesse...
Trabalhar galopando, com seu cavalo como companheiro mais
próximo e parceiro de confiança?

Você já quis...
Saborear a melhor comida no final de um dia de cavalgadas,
laçadas e construção de cercas?

Você gostaria de...
Levar uma vida que a maioria das pessoas só viu nos filmes?

Isso pode acontecer,

Viva como sempre sonhou!
Seja um vaqueiro!



Para mais informações sobre como galopar rumo à sua profissão
de vaqueiro, contate-nos agora:
telefone- 0800-125678, e-mail [email protected]


Slide 29

O QUE VOCÊ ACHA,
PARCEIRO?
Você gostaria de...
Despertar com o nascer do sol, tomar uma boa xícara
de café e sair para contemplar a linda paisagem na
porta do seu bangalô?
Você já imaginou...
Passar o dia ao ar livre, sob um céu sem nuvens,
trabalhando na terra?
E se você pudesse...
Trabalhar galopando, com seu cavalo como
companheiro mais próximo e parceiro de confiança?
Você já quis...

Saborear a melhor comida no final de um dia de
cavalgadas, laçadas e construção de cercas?
Você gostaria de...
Levar uma vida que a maioria das pessoas só viu nos
filmes?
Isso pode acontecer.
Viva como sempre sonhou!
Seja um vaqueiro!
Para mais informações sobre como galopar rumo à sua
profissão de vaqueiro, contate-nos agora:

telefone- 0800-125678
e-mail [email protected]








Slide 30


Slide 31


Slide 32

O QUE MUDOU:

•Os elementos foram agrupados / relacionados
•Os conjuntos de informações foram organizados

•Também foram utilizados elementos de alinhamento e
contraste
•Foram criados “espaços em branco” para que os

descansem
•As letras passaram de MAIÚSCULAS para
MAIÚSCULAS e minúsculas
•O tamanho das letras foram diminuídos.


Slide 33

RESUMO / PROPÓSITO BÁSICO
Quando vários itens estiverem próximos, eles
formarão uma unidade visual e não várias unidades
individuais.

O propósito básico da proximidade é o de organizar. O
simples agrupamento de elementos relacionados cria,
automaticamente, uma organização.
Se as informações estiverem organizadas, o texto será
mais fácil de ler e memorizar.
Como resultado da organização da comunicação,
também se criam brancos mais atrativos (mais
organizados).


Slide 34

Como atingir esse objetivo
Pisque os olhos e conte o número de elementos
visuais da página pelo número de parada dos olhos.
Se houver mais de 3-5 itens na página (dependendo
do material)

Veja dentre os itens separados quais poderia ser
agrupados em proximidade, para que se tornem uma
unidade visual.


Slide 35

O que evitar
Evite muitos elementos separados na 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. deve estar junto do seu respectivo par.
Crie uma relação de elementos por meio de
proximidade.
Não relacione elementos que não devam estar
agrupados! Se eles não estiverem relacionados,
separe-os.


Slide 36

ALINHAMENTO


Slide 37

ALINHAMENTO
•Nada deve ser colocado arbitrariamente em
uma página.
•Cada elemento deve conter uma conexão
visual com outro elemento da página.
•A unidade é um conceito muito importante no
design.


Slide 38

ALINHAMENTO
•Para que todos os elementos da página
tenham uma estética unificada, conectada e
inter-relacionada, é preciso que hajam,
“ancoras” visuais entre os elementos
separados.

•Para isso, basta o simples posicionamento
dos elementos.
•Vejam os exemplos a seguir:


Slide 39

ALINHAMENTO

•Blocos de textos
agrupados em
proximidade lógica
•Texto centralizado

•Apresenta a
mesma
organização visual
•O texto alinhado à
direita, conecta os
dois conjuntos de
texto, dando peso
ao layout.


Slide 40

ALINHAMENTO


Slide 41

ALINHAMENTO

•Exemplos de
alinhamento
centralizado.
•São muito
utilizados para
convites mais
formais, como
os de
casamentos.


Slide 42

ALINHAMENTO


Slide 43

ALINHAMENTO

Às vezes é possível
utilizar os
alinhamentos à
direita e à esquerda
da página, mas é
preciso que os
elementos fiquem
alinhados de
alguma forma.


Slide 44

CONTRASTE


Slide 45

RESUMO / PROPÓSITO BÁSICO
•O contraste de uma página faz com que os
seus olhos se virem para ela.
•Para se fazer o contraste os elementos
devem ser muito diferentes.
•O propósito básico do contraste é duplo:

•Criar interesse sobre uma página;
•Organizar as informações.


Slide 46

CONTRASTE


Slide 47

CONTRASTE


Slide 48

CONTRASTE


Slide 49

CONTRASTE


Slide 50

CONTRASTE


Slide 51

CONTRASTE


Slide 52

Como atingir esse objetivo
Aplique contrastes nas suas opções de tipologias, tais como:
•nas espessuras de linhas;

•Nas cores
•Nas formas
•Nos tamanhos
•Nas formas...

Crie elementos marcantes.


Slide 53

O que evitar

•Os elementos contrastantes nunca devem confundir o leitor
ou criar um foco que não seja o correto.

•Não seja tímido. Se os criar, faça-os de maneira forte,
marcante.
•Evite contrastar uma linha pouco espessa com outra um
pouco levemente mais espessa.
•Evite contrastar um texto castanho com títulos em preto.
•Evite usar duas ou mais fontes similares.
•Se os itens não forem exatamente iguais, diferencie-os!


Slide 54

REPETIÇÃO
REPETIÇÃO
REPETIÇÃO
REPETIÇÃO
REPETIÇÃO


Slide 55

RESUMO / PROPÓSITO BÁSICO

A repetição de elementos visuais no design unifica e
fortalece o material, agrupando partes que seriam
separadas.

O propósito básico da Repetição é UNIFFICAR o
material e acrescentar INTERESSE VISUAL.

Quando a página é interessante visualmente, a sua
leitura é mais agradável e provavelmente será mais
lida.


Slide 56

REPETIÇÃO


Slide 57

REPETIÇÃO


Slide 58

REPETIÇÃO


Slide 59

REPETIÇÃO

Repetições:
Font Bold
Font light
Sinais de tópico
Quadrados
Espaçamentos
Alinhamentos


Slide 60

REPETIÇÃO

Repetições:
Alinhamento
Elementos visuais:
triângulos


Slide 61

REPETIÇÃO


Slide 62

REPETIÇÃO


Slide 63

Como atingir esse objetivo
Considere repetição como consistência.
Os elementos consistentes podem se tornar parte do design
de forma consciente.
Como?
•aumentando a espessura de um fio para sublinhar títulos,
•acrescentando elementos cuja função seja exclusivamente
de criar repetição, etc.


Slide 64

O que evitar
Evite repetir um elemento em demasia,
para que ele não se torno cansativo ou
excessivo.

Esteja consciente do valor do
contraste.