Download
1 / 64
650 likes | 814 Views
4. PRINCÍPIOS BÁSICOS DE DESIGN. PRINCÍPIOS BÁSICOS DE DESIGN PROXIMIDADE ALINHAMENTO REPETIÇÃO CONTRASTE. 1. PROXIMIDADE. 1. PROXIMIDADE.
E N D
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 agrupadose 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 flores Amor-perfeito Rosa Margarida Prímula Cravo Primavera Violeta Cravina Minha lista de flores Amor-perfeito Rosa Margarida Prímula Cravo Primavera Violeta Cravina
Proximidade Numa página, assim como na vida a proximidade implica uma relação.
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? 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.
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: 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).
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?
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 Rua dos acontecimentos, 527 A renda será revertida em prol do Fundo de Educação Mary Sidney ...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...
Família vende tudo Rua dos acontecimentos, 527 Sábado, 9 de setembro Instrumentos odontológicos semi-novos Sacos de 2 Kg para pássaros brinquedos Pássaro grande Sofá vitoriano Rádio Motorola de 1942 Equipamentos de salão de beleza dos anos 50 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... 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 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? 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 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:
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 À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.
