PRINCÍPIOS BÁSICOS DE DESIGN 4 PRINCÍPIOS BÁSICOS DE DESIGN

PRINCÍPIOS BÁSICOS DE DESIGN PROXIMIDADE ALINHAMENTO REPETIÇÃO CONTRASTE

1 PROXIMIDADE

1 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.

Minha lista de flores Minha lista de flores Proximidade Amor-perfeito Rosa Margarida Prímula Cravo Primavera Violeta Cravina Minha lista de flores Amor-perfeito Rosa Margarida Prímula Cravo Primavera Violeta Cravina

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

Taberna da Sereia 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 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? Rafael Ribeiro (11)5555-1212 Taberna da Sereia Rua dos Passos, 916 São Paulo - SP

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 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.

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.

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.

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).

Na criação de qualquer material de comunicação visual, como: anúncios; 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: 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 Qual o maior problema de visualização desta lista?

E agora, ficou mais fácil de entender a 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 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...

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...

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).

quando e onde a venda acontece? 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?

A renda será revertida em prol do Fundo de Educação Mary Sidney Café gratis  Família vende Donuts grátis Equipamentos de salão de beleza dos anos 50 tudo Gaiola Grande brinquedos Instrumentos odontológicos semi-novos Roupas da moda Sacos de 2 Kg para pássaros Pássaro grande Sofá vitoriano Rádio Motorola de 1942 A renda será revertida em prol do Fundo de Educação Mary Sidney Rua dos acontecimentos, 527 ...e muito mais!!! Sábado, 9 de setembro

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...

A renda será revertida em prol do Fundo de Educação Mary Sidney  Família vende tudo Sábado, 9 de setembro Rua dos acontecimentos, 527 Instrumentos odontológicos semi-novos Sacos de 2 Kg para pássaros brinquedos Pássaro grande Sofá vitoriano Equipamentos de salão de beleza dos anos 50 Rádio Motorola de 1942 Gaiola Grande Roupas da moda ...e muito mais!!! Café e Donuts grátis A renda será revertida em prol do Fundo de Educação Mary Sidney

 O QUE VOCÊ ACHA, PARCEIRO? Você gostaria de... Você já imaginou... 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? 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 queroser@vaqueiro.com.br 

 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? 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 queroser@vaqueiro.com.br

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.

2 ALINHAMENTO

2 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.

2 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:

Blocos de textos agrupados em proximidade lógica 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

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.

3 CONTRASTE

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!

REPETIÇÃO REPETIÇÃO REPETIÇÃO REPETIÇÃO REPETIÇÃO 4 REPETIÇÃ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.