PRINCÍPIOS BÁSICOS DE DESIGN

download PRINCÍPIOS BÁSICOS DE DESIGN

If you can't read please download the document

description

4. PRINCÍPIOS BÁSICOS DE DESIGN. PRINCÍPIOS BÁSICOS DE DESIGN PROXIMIDADE ALINHAMENTO REPETIÇÃO CONTRASTE. 1. PROXIMIDADE. 1. PROXIMIDADE. - PowerPoint PPT Presentation

Transcript of PRINCÍPIOS BÁSICOS DE DESIGN

PRINCPIOS BSICOS DE DESIGN

4PRINCPIOS BSICOS DE DESIGN PRINCPIOS BSICOS DE DESIGN

PROXIMIDADEALINHAMENTOREPETIOCONTRASTE1PROXIMIDADE1PROXIMIDADEItens relacionados entre si devem ser agrupados e aproximados uns dos outros, para que sejam vistos como um grupo coeso e no como um emaranhado de partes sem ligao.

Itens ou conjuntos de informaes que no esto relacionados entre si no deveriam estar prximos.

Isto oferece uma pista visual imediata da organizao do contedo da pgina.ProximidadeMinha lista de floresAmor-perfeitoRosaMargaridaPrmulaCravoPrimaveraVioletaCravina

Minha lista de floresAmor-perfeitoRosaMargaridaPrmula Cravo Primavera Violeta Cravina

ProximidadeNuma pgina, assim como na vida a proximidade implica uma relao.Rafael Ribeiro (11)5555-1212

Taberna da Sereia

Rua dos Passos, 916 So Paulo - SPOlhe o layout deste carto de visita. Rafael Ribeiro (11)5555-1212

Taberna da Sereia

Rua dos Passos, 916 So Paulo - SPQuantos elementos individuais pode ver neste pequeno espao?

Por acaso os seus olhos pararam cinco vezes?

Por onde comeou a leitura?

O que leu a seguir?

O que aconteceu quando alcanou o canto inferior direito?

Ele ficou vagando para certificar-se de que no perdeu alguma informao espalhada pelos cantos?Rafael Ribeiro (11)5555-1212

Taberna da Sereia

Rua dos Passos, 916 So Paulo - SPE agora? Por onde comear a leitura? Pelo canto superior esquerdo ou pelo texto central?

Aps ler os dois itens que esto em negrito, para onde se direciona o seu olhar ?

fcil determinar o fim da leitura?O problema com os cartes anteriores que nenhum dos itens parecem estar relacionados. No est claro por onde a leitura deve comear e terminar.

Veja a seguir o que acontece quando agrupamos os elementos relacionados do carto em estudo:Taberna da SereiaRafael Ribeiro

Rua dos Passos, 916 So Paulo SP(11) 5555-1212

Ser que ainda existe alguma dvida de por onde comear a leitura deste carto? Para onde vai o seu olhar a seguir? E sobre o final da leitura?Agora o carto est organizado tanto lgica quanto visualmente transmitindo a mensagem com mais clareza.Quando vrios elementos esto prximos entre si, tornam-se uma unidade visual, e no vrias unidades separadas.

Vrias coisas acontecem quando elementos similares esto agrupados em uma unidade: A pgina fica mais organizada; possvel saber por onde comear a leitura e onde termin-la;O espao em branco (espao ao redor das letras) tambm fica mais organizado.

Observe este cabealho de jornal: Quantos elementos separados se encontram neste material? De Acordo com o posicionamento, que itens esto 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 maisculas para maisculas e minsculas, o que proporcionou mais espao, deixando o ttulo mais evidente e com leitura mais fcil;Os cantos arredondados foram substitudos por cantos retos, criando uma aparncia mais clara e forte;O tamanho do avio aumentou, ultrapassando o contorno (truque muito utilizado para ampliar o espao).

ProximidadeNa criao de qualquer material de comunicao visual, como:anncios; sites;folhetos; cartes de visitas; outdoors; desde o incio de sua elaborao deve-se saber: QUAIS AS INFORMAES que ESTO CONECTADAS, QUAIS as INFORMAES que DEVEM SER ENFATIZADAS E O QUE PODE SER ABRANDADO. Expresse as informaes graficamente agrupando-as. Tente organizar / formatar a lista abaixo:CDsCDs para crianasCDs EducacionaisCds de lazerEducacionalAprendizado inicialIdiomasCinciasMatemticaMaterial do ProfessorLivrosVdeosHardware e SoftwareCabosDispositivos de entradaArmazenamento MemriaModemsImpressoras e acessriosQual o maior problema de visualizao desta lista?E agora, ficou mais fcil de entender a lista?CDsCDs para crianasCDs EducacionaisCds de lazer

EducacionalAprendizado inicialIdiomasCinciasMatemtica

Material do ProfessorLivrosVdeos

Hardware e SoftwareCabosDispositivos de entradaArmazenamento MemriaModemsImpressoras e acessriosAgora, a mesma lista foi criada atravs de grupos visuais. Tambm foram acrescentados contrastes nos ttulos.s vezes, ao agrupar itens relacionados, torna-se necessrio fazer algumas alteraes, como de tamanho, posicionamento de texto e de figuras.Veja o exemplo a seguir...

Foi Fcil encontrar estas informaes: os eventos os horriosonde eles acontecem?

alm disso...achou a leitura do texto aborrecida?

...Olhe agora...

Quantos concertos constam?

Veja o que mudou...As informaes foram agrupadas por assunto (mentalmente ou em rascunho) depois foram agrupadas no texto;

Observe que o espao entre as trs apresentaes o mesmo, o que indica que estes trs grupos esto ligados de alguma forma;

As informaes subordinadas (local, preo do ingresso..) esto mais distanciadas, diferenciando-as das performances (concertos). Agora...observe o folheto que ser apresentado na prxima pgina...

A inteno era a de se criar algo engraado e cheio de energia,mas, dando uma olhada rpida, voc consegue responder...

quando e onde a venda acontece?Famlia vendetudoDonuts grtisbrinquedosPssaro grandeSof vitorianoRua dos acontecimentos, 527Instrumentos odontolgicos semi-novos...e muito mais!!!Sacos de 2 Kg para pssarosRdio Motorola de 1942Gaiola GrandeEquipamentos de salo de beleza dos anos 50Caf gratisRoupas da modaSbado, 9 de setembroA renda ser revertida em prol do Fundo de Educao Mary SidneyUsando o princpio da proximidade para organizar as informaes, possvel informar imediatamente:

QUEMO QUE ONDE

Com a nova disposio os provveis clientes no desistiro de ler o material, pois no precisam mais procurar as informaes nos diversos blocos de textos inclinados.

Veja... brinquedosPssaro grandeSof vitorianoRua dos acontecimentos, 527Instrumentos odontolgicos semi-novos...e muito mais!!!Sacos de 2 Kg para pssarosRdio Motorola de 1942Gaiola GrandeEquipamentos de salo de beleza dos anos 50Caf e Donuts grtisRoupas da modaSbado, 9 de setembroA renda ser revertida em prol do Fundo de Educao Mary SidneyFamlia vende tudoO QUE VOC ACHA, PARCEIRO?Voc gostaria de...Despertar com o nascer do sol, tomar uma boa xcara 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 cu sem nuvens, trabalhando na terra?

E se voc pudesse...Trabalhar galopando, com seu cavalo como companheiro mais prximo e parceiro de confiana?

Voc j quis...Saborear a melhor comida no final de um dia de cavalgadas, laadas e construo 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 informaes sobre como galopar rumo sua profisso 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 xcara 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 cu sem nuvens, trabalhando na terra?E se voc pudesse...Trabalhar galopando, com seu cavalo como companheiro mais prximo e parceiro de confiana?Voc j quis...Saborear a melhor comida no final de um dia de cavalgadas, laadas e construo 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 informaes sobre como galopar rumo sua profisso de vaqueiro, contate-nos agora:telefone- 0800-125678 e-mail [email protected]

O QUE MUDOU:

Os elementos foram agrupados / relacionadosOs conjuntos de informaes foram organizadosTambm foram utilizados elementos de alinhamento e contrasteForam criados espaos em branco para que os descansemAs letras passaram de MAISCULAS para MAISCULAS e minsculasO tamanho das letras foram diminudos.RESUMO / PROPSITO BSICOQuando vrios itens estiverem prximos, eles formaro uma unidade visual e no vrias unidades individuais.O propsito bsico da proximidade o de organizar. O simples agrupamento de elementos relacionados cria, automaticamente, uma organizao.Se as informaes estiverem organizadas, o texto ser mais fcil de ler e memorizar.Como resultado da organizao da comunicao, tambm se criam brancos mais atrativos (mais organizados).Como atingir esse objetivoPisque os olhos e conte o nmero de elementos visuais da pgina pelo nmero de parada dos olhos.Se houver mais de 3-5 itens na pgina (dependendo do material) Veja dentre os itens separados quais poderia ser agrupados em proximidade, para que se tornem uma unidade visual. O que evitarEvite muitos elementos separados na pgina.No coloque os itens somente nos cantos e no meio da pgina.Evite deixar quantidades iguais de espaos em branco entre os elementos, a no ser que cada conjunto seja parte de um subgrupo.Evite criar qualquer dvida quanto relao dos elementos entre si, ou seja, cada subttulo, legenda, imagem, etc. deve estar junto do seu respectivo par. Crie uma relao de elementos por meio de proximidade. No relacione elementos que no devam estar agrupados! Se eles no estiverem relacionados, separe-os. 2ALINHAMENTO2ALINHAMENTONada deve ser colocado arbitrariamente em uma pgina.

Cada elemento deve conter uma conexo visual com outro elemento da pgina.

A unidade um conceito muito importante no design.2ALINHAMENTOPara que todos os elementos da pgina tenham uma esttica 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 lgicaTexto centralizadoApresenta a mesma organizao visualO texto alinhado direita, conecta os dois conjuntos de texto, dando peso ao layout. ALINHAMENTO

ALINHAMENTO

Exemplos de alinhamento centralizado.

So muito utilizados para convites mais formais, como os de casamentos.ALINHAMENTO

ALINHAMENTO

s vezes possvel utilizar os alinhamentos direita e esquerda da pgina, mas preciso que os elementos fiquem alinhados de alguma forma.3CONTRASTERESUMO / PROPSITO BSICOO contraste de uma pgina faz com que os seus olhos se virem para ela.

Para se fazer o contraste os elementos devem ser muito diferentes.

O propsito bsico do contraste duplo:Criar interesse sobre uma pgina;Organizar as informaes.

CONTRASTE

CONTRASTE

CONTRASTE

CONTRASTECONTRASTE

CONTRASTE

Como atingir esse objetivo Aplique contrastes nas suas opes de tipologias, tais como:nas espessuras de linhas;Nas cores Nas formasNos tamanhosNas formas...

Crie elementos marcantes.O que evitar Os elementos contrastantes nunca devem confundir o leitor ou criar um foco que no seja o correto.No seja tmido. Se os criar, faa-os de maneira forte, marcante.Evite contrastar uma linha pouco espessa com outra um pouco levemente mais espessa.Evite contrastar um texto castanho com ttulos em preto.Evite usar duas ou mais fontes similares.Se os itens no forem exatamente iguais, diferencie-os!4REPETIO REPETIO REPETIO REPETIO REPETIORESUMO / PROPSITO BSICOA repetio de elementos visuais no design unifica e fortalece o material, agrupando partes que seriam separadas.

O propsito bsico da Repetio UNIFFICAR o material e acrescentar INTERESSE VISUAL.

Quando a pgina interessante visualmente, a sua leitura mais agradvel e provavelmente ser mais lida.

REPETIO

REPETIO

REPETIO

REPETIO

Repeties:Font BoldFont lightSinais de tpicoQuadradosEspaamentos AlinhamentosREPETIO

Repeties:AlinhamentoElementos visuais: tringulosREPETIO

REPETIO

Como atingir esse objetivo Considere repetio como consistncia.Os elementos consistentes podem se tornar parte do design de forma consciente. Como?aumentando a espessura de um fio para sublinhar ttulos,acrescentando elementos cuja funo seja exclusivamente de criar repetio, etc.O que evitar Evite repetir um elemento em demasia, para que ele no se torno cansativo ou excessivo.

Esteja consciente do valor do contraste.