Embed Size (px)
Citation preview
4PRINCÍPIOS BÁSICOS DE
DESIGN
PRINCÍPIOS BÁSICOS DE DESIGN
PROXIMIDADE
ALINHAMENTO
REPETIÇÃO
CONTRASTE
1PROXIMIDADE
1PROXIMIDADE
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.
Proximidade
Minha lista de floresAmor-perfeito
Rosa
Margarida
Prímula
Cravo
Primavera
Violeta
Cravina
Minha lista de floresAmor-perfeito
Rosa
Margarida
Prímula
Cravo
Primavera
Violeta
Cravina
Proximidade
Numa página, assim como na vida a proximidade implica uma relação.
Rafael Ribeiro (11)5555-1212
Taberna da Sereia
Rua dos Passos, 916 São Paulo - SP
Olhe o layout deste cartão de visita.
Rafael Ribeiro (11)5555-1212
Taberna da Sereia
Rua dos Passos, 916 São Paulo - SP
• Quantos elementos individuais pode ver neste pequeno espaço?
• Por acaso os seus olhos pararam cinco vezes?
• 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?
Rafael Ribeiro (11)5555-1212
Taberna da Sereia
Rua dos Passos, 916 São Paulo - SP
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 ?
É fácil determinar o fim da leitura?
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:
Taberna da SereiaRafael 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.
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.
ASSOCIAÇÃO FEMININA DE PILOTOS AÉREOS AS ÚLTIMAS NOTÍCIAS...
Vol. 26,Nº9
DIRETAMENTE DO COCKPIT
Outubro de 2006
Observe este cabeçalho de jornal:
Quantos elementos separados se encontram neste material?
De Acordo com o posicionamento, que itens estão relacionados?
Pense um pouco para decidir quais os elementos que deveriam ser agrupados e quais deveriam ficar separados.
Diretamente do Cockpit
Vol. 26 Nº9 Outubro de 2006
As últimas nótícias...
Associação Feminina de Pilotos Aéreos
Melhorou?
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).
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.
Tente organizar / formatar a lista abaixo:CDsCDs para criançasCDs EducacionaisCds de lazerEducacionalAprendizado inicialIdiomasCiênciasMatemáticaMaterial do ProfessorLivrosVídeosHardware e SoftwareCabosDispositivos de entradaArmazenamento MemóriaModemsImpressoras e acessórios
Qual o maior problema de visualização desta lista?
E agora, ficou mais fácil de entender a lista? CDsCDs para crianças
CDs Educacionais
Cds de lazer
EducacionalAprendizado inicial
Idiomas
Ciências
Matemática
Material do ProfessorLivros
Vídeos
Hardware e SoftwareCabos
Dispositivos de entrada
Armazenamento
Memória
Modems
Impressoras e acessórios
Agora, a mesma lista foi criada através de grupos visuais.
Também foram acrescentados contrastes nos títulos.
À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...
Séries de Concertos de CâmaraEscola Egley Júnior
6ª feira, 3 de fevereiro, às 20h00Quarteto de Cordas Alexander
Mozart, K387, Batork nº3, Opus 59, nº1Sam Pritchert & Ethel Libitz, violinos
Sandra Yarbrough, viola; Mark Wilson, violoncelo6ª feira, 1º de março, 20h00
Trio ArtariaTrio “Archduke” de Beethoven e trios Haydn,
Schoenberg e MagnardRichard Samson Norartz, violino
Recepção e concerto na Galeria de Arte Egley6ª feira, 26 de abril, às 20h00Orquestra de Câmara Egley
Quarteto para piano em sol menor de BrahmsSonata de Schubert
Polly Hollyfield, violino,; Linda Battcioli,viola;Norinne antiqua - Tempestat, violoncelo
Margaret Park-Raynolds, flauta; Robim Plantz, pianoTodos os concertos acontecerão no Audiório Newman,
Hall Emeritus, Educação Comunitária
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...
Séries de Concertos de CâmaraEscola Egley Júnior
Quarteto de Cordas Alexander
Trio Artaria
Mozart, K387, Batork nº3, Opus 59, nº1
Sam Pritchert & Ethel Libitz, violinos
Sandra Yarbrough, viola; Mark Wilson, violoncelo
Trio “Archduke” de Beethoven e trios Haydn,
Schoenberg e Magnard
Richard Samson Norartz, violino
Recepção e concerto na Galeria de Arte 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
6ª feira, 3 de fevereiro, às 20h00
6ª feira, 1º de março, 20h00
Orquestra de Câmra Egley
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).
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?
Donuts
grátis
brinquedos
Pássaro grande
Sofá vitoriano
Rua dos acontecimentos, 527
Instrumentos odontológicos semi-novos
...e muito
mais!!!
Sacos de 2 Kg
para pássaros
Rádio Motorola de 1942
Gaiola
Grande
Equipamentos de
salão de beleza
dos anos 50
Café gratis
Roupas da moda
Sábado, 9 de setembroA renda será
revertida em prol
do Fundo de
Educação Mary
Sidney
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...
brinquedos
Pássaro grande
Sofá vitoriano
Rua dos acontecimentos, 527
Instrumentos odontológicos semi-novos
...e muito mais!!!
Sacos de 2 Kg para pássaros
Rádio Motorola de 1942
Gaiola Grande
Equipamentos de salão de beleza dos anos 50
Café e Donuts grátis
Roupas da moda
Sábado, 9 de setembro
A renda será revertida em prol do Fundo de Educação Mary Sidney
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]
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]
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.
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).
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.
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.
2ALINHAMENTO
2ALINHAMENTO• 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.
2ALINHAMENTO• 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:
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.
ALINHAMENTO
ALINHAMENTO
• Exemplos de alinhamento centralizado.
• São muito utilizados para convites mais formais, como os de casamentos.
ALINHAMENTO
ALINHAMENTO
Às vezes é possível utilizar os
alinhamentos à direita e à esquerda
da página, mas é preciso que os
elementos fiquem alinhados de
alguma forma.
3CONTRASTE
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.
CONTRASTE
CONTRASTE
CONTRASTE
CONTRASTE
CONTRASTE
CONTRASTE
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.
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!
4REPETIÇÃO REPETIÇÃO REPETIÇÃO REPETIÇÃO REPETIÇÃO
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.
REPETIÇÃO
REPETIÇÃO
REPETIÇÃO
REPETIÇÃO
Repetições:Font Bold
Font light
Sinais de tópico
Quadrados
Espaçamentos
Alinhamentos
REPETIÇÃO
Repetições:
Alinhamento
Elementos visuais: triângulos
REPETIÇÃO
REPETIÇÃO
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.
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.
