56
Prof. Rui Espírito Santo. 2013/2014 LABORATÓRIO I Tecnologia da Comunicação Multimédia (TCM) 1º ano - 2º semestre PRINCÍPIOS BÁSICOS DE DESIGN DE COMUNICAÇÃO PARA NÃO DESIGNERS PRINCÍPIOS DE COMPOSIÇÃO VISUAL

Princípios Composição Visual

Embed Size (px)

DESCRIPTION

principio da composição visual

Citation preview

Page 1: Princípios Composição Visual

Prof. Rui Espírito Santo.2013/2014

LABORATÓRIO ITecnologia da Comunicação Multimédia (TCM)1º ano - 2º semestre

PRinCíPioS báSiCoS dE dESign dE CoMuniCação PaRa não dESignERS

PrincíPios de comPosição visual

Page 2: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios de comPosição visual

Page 3: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

O processo de composição visual é o processo de planeamento, ordenamento e arranjo dos elementos visuais num plano visual. E dividem-se nas seguintes categorias entre outras:

1. Princípios de cor; 2.Princípiosdetipografia; 3. Princípios de coerência e unidade visual; 4. Princípios de hierarquia; 5. Princípios de legibilidade; 6. Princípios de organização/composição espacial.

Page 4: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

1. Princípios de cor

Page 5: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decor

Quandosecompõevisualmenteelementosgráficosnummesmosuporte,deve existir o cuidado de os combinar, em termos cromáticos, de uma forma que não afecte a sua legibilidade e que, esteticamente, produza uma combinação agradável.

Como?•Usarcombinaçõescomcontraste.•Soluçãofácil-Usarcorescomplementares.•Consultarsistemason-line de combinações cromáticas para ajuda.

A evitar :•Evitarousodedemasiadascores(nem sempre é aplicável).•Evitarusarcombinaçõesquedificultemalegibilidadedatipografia.•Evitarousodegradientescommuitascores.

Nem sempre é aplicável este último princípio, no entanto, numa primeira fase de aprendizagem é de o seguir para evitar composições mal resolvidas.

Page 6: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decor

1. combinações com contraste. 2. combinações sem contraste.

Teste

Teste

Teste

Teste

Teste

Teste

Teste

Page 7: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decor

solução fácil: o uso de cores complementares.

Estas cores, opostas no espectro cromático, complementam-se, dando origem a combinações equilibradas, vibrantes e agradáveis.

Page 8: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decor

outra solução fácil: o uso de cores análogas ou adjacentes.

Estas cores são análogas ou adjacentes no espectro cromático, dando origem a combinações, também elas equilibradas e agradáveis.

Page 9: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decor

ainda outra solução fácil: o uso de monocromia.

Estas combinações resultam da variação de saturação e luminosidade da mesma cor, dando origem a combinações, de novo equilibradas e agradáveis.

Page 10: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decor

ajudas: heis alguns links para consulta, que ajudam a encontrar combinações esteticamente harmoniosas.

https://kuler.adobe.com/create/color-wheel/http://colorschemedesigner.com/http://www.ficml.org/jemimap/style/color/wheel.htmlhttp://colrd.com/create/palette/#dna=7098e5http://meyerweb.com/eric/tools/color-blend/http://www.themaninblue.com/experiment/Technicolor/http://www.colorhunter.com/http://www.colr.org/http://www.colourlovers.com/http://colorschemer.com/schemes/

Page 11: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

2. Princípios de tipografia

Page 12: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios detiPografia

Existemalgunsprincípiostipográficosbásicos,quedevemserrespeitadosparaa obtenção de uma composição mais harmoniosa:

1. Não utilizar demasiadas fontes no mesmo trabalho;2. Evitar o uso de apenas caixa alta;3.Nãojustificarotexto;4. Não variar as dimensões das letras.

Page 13: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios detiPografia

1. não utilizar demasiadas fontes no mesmo trabalho.

Assunto

Título

Este é o texto onde será escrita toda a

informação que se pretende transmitir ao

leitor, por exemplo: não se devem usar várias

fontes no mesmo trabalho.

Aproveitando a oportunidade, peço a vossa

atenção para que leiam e sigam os princípios

transmitidos neste documento.

aconselhado não aconselhado

Assunto

Título

Este é o texto onde será escrita toda a

informação que se pretende transmitir ao

leitor, por exemplo: não se devem usar várias fontes no mesmo trabalho.

Aproveitando a oportunidade, peço a vossa

atenção para que leiam e sigam os princípios

transmitidos neste documento.

Page 14: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios detiPografia

2. evitar o uso de apenas caixa alta.

Assunto

Título

Usarapenascaixaalta,dificultaaleiturado

texto. O mais correcto é o uso de caixa mista.

Aproveitando a oportunidade, peço a vossa

atenção para que leiam e sigam os princípios

transmitidos neste documento.

aconselhado não aconselhado

ASSUNto

TíTulo

USArAPENASCAixAAltA,difiCUltAA

lEitUrAdotExto.omAiSCorrECto

éoUSodECAixAmiStA.

AProvEitANdoAoPortUNidAdE,

PEçoAvoSSAAtENçãoPArA

QUElEiAmESigAmoSPriNCíPioS

trANSmitidoSNEStEdoCUmENto.

Page 15: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios detiPografia

3. Não justificar o texto.

Assunto

Título

Ajustificaçãodotextopodeprovocaro

efeito desagradável conhecido por dentes de

cavalo ou rios. Para evitar este efeito, deve-

se alinhar o texto à esquerda, não sendo de

descorar também o alinhamento à direita.

Aproveitando a oportunidade, peço a vossa

atenção para que leiam e sigam os princípios

transmitidos neste documento.

aconselhado não aconselhado

Assunto

Título

A justificação do texto pode provocar o

efeito desagradável conhecido por dentes de

cavalo ou rios. Para evitar este efeito, deve-

se alinhar o texto à esquerda, não sendo de

descorar também o alinhamento à direita.

Aproveitando a oportunidade, peço a

vossa atenção para que leiam e sigam os

princípios transmitidos neste documento.

Page 16: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios detiPografia

4. não variar a dimensão das letras.

A menos que seja por razões expressivas, não

se aconselha o alargar ou esticar as letras.

Aproveitando a oportunidade, peço a vossa

atenção para que leiam e sigam os princípios

transmitidos neste documento.

aconselhado não aconselhado

A menos que seja por

razões expressivas, não

se aconselha o alargar

ou esticar as letras.

Aproveitando a oportunidade, peço a vossa atenção para que leiam e sigam os princípios transmitidos neste documento.

Page 17: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios detiPografia

Pergunta: nunca se violam estes princípios?

A resposta é sim, mas apenas em determinadas situações e com muita atençãoàeficáciadoresultadoobtido.Porexemplo:quandoháavontadededarexpressãoeacentuarsignificadosatravésdatipografiaouseja,emsituaçõesondesepretendequeatipografiaganhe iconicidade.

Page 18: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

3. Princípios de coerência e unidade visual

Page 19: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

A coerência e a unidade visual de uma composição existe quando, se respeitam,emváriosníveisdalinguagemvisual,oselementosgráficosutilizados:

1.Aoníveldatipografia;2.Aoníveldarelaçãodalinguagemtipográficacomalinguagemdaimagem;3.Aoníveldalinguagemgráficaeformalutilizada;4. Ao nível da relação decoresentretipografia,elementosgráficoseimagens.

Page 20: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

1. Ao nível da tipografia

Emqualquertrabalhodecaráctergráficocomoumgenérico,porexemplo,deveoptar-seporumafonteeusá-ladoprincípioaofim(vergenéricosérie“rome”).variarafonteaolongodotrabalhoquebraaunidadevisual,oquedivideodiscurso,dificultandoaleituraeacompreensão.Por outro lado, a mudança de fonte e a consequente quebra de unidade, podeserusadaparacriardoisoutrêsmomentosdistintos(vergenéricofilme“Snatch.”).

vergenéricodasérie“rome”http://www.youtube.com/watch?v=eddPdldiH_E

vergenéricodofilme“Snatch.”http://www.youtube.com/watch?v=mpgtn-Z6WbA

Page 21: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

2. Ao nível da relação da linguagem tipográfica com a linguagem da imagem

Quando num videoclip,porexemplo,seusamelementosgráficoscomumalinguagemmuitoespecífica,adequaratipografiaaessalinguageméumaforma de fazer com que a composição visual seja mais coerente no seu todo, reforçando a sua identidade visual.

vervideoclip“moveyourfeet”http://www.youtube.com/watch?v=SPlQpgetbiE

Page 22: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

2. Ao nível da relação da linguagem tipográfica com a linguagem da imagem

Outra forma de adaptar as duas linguagens, é analisando o aspecto formal doselementosgráficoseprocurarfontescujodesenhotenhaasmesmascaracterísticas formais, visuais e cromáticas.

Texto

Texto

Texto

Texto

Page 23: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

3. Ao nível da linguagem gráfica e formal utilizada

Nãosedevemmisturarelementosgráficosquetenhamdiferentestratamentosou linguagens visuais.A ilustração é uma boa forma de perceber esta coerência que deverá existir nas composições que se realizam.

Page 24: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

3. Ao nível da linguagem gráfica e formal utilizada

osSimpsons,ofamilyguyeofuturama,sãosériesdeanimaçãoqueutilizamlinguagensvisuaisegráficassemelhantes.

Page 25: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

3. Ao nível da linguagem gráfica e formal utilizada

oNaruto,oSpongeBob,oAmericaneasPowerPufgrils,sãosériesdeanimaçãoqueutilizamlinguagensvisuaisegráficasdiferentes.

Page 26: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

4. ao nível da relação de cores entre tipografia, elementos gráficos e imagens

A cor é outro dos elementos da linguagem visual que pode contribuir para umacoerênciaentreatipografiaeaimagem,criandoumaunidadevisualnacomposição resultante.

Texto+ texto

Page 27: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decoerÊnciAe UnidAde

VisUAL

4. ao nível da relação de cores entre tipografia, elementos gráficos e imagens

Numacomposiçãográficapode-serecorreràsprópriasimagensparaobtençãode uma paleta de cores. Pode-se também fazer o contrário, usar nas imagens a paletadecoresdoselementosgráficos.

Noiteestrelada-vincentvangogh Cabeça-Kasimirmalevich

imagemoriginaleaaplicaçãodapaletadecoresobtidaemelementosgráficos.

Page 28: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

3. Princípios de hierarquia visual

Page 29: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

Ashierarquiasdosvárioselementosgráficosestabelecem-seatravésdecaracterísticas como:

1.tamanhorelativodoselementosgráficos;2.Posiçãorelativadoselementosgráficos;3.destaquecromáticorelativodeumelementográfico;4.Pesorelativodoselementostipográficosentresi;5. Tamanho relativo doselementostipográficosentre si;6.valorcromáticorelativodoselementostipográficosentre si.

Page 30: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

1. Tamanho relativo dos elementos gráficos

O elemento com maior tamanho, tende a ter maior destaque pelo seu peso visualacrescido,mesmoemformasdiferenciadas(exemplo1).

Page 31: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

1. Tamanho relativo dos elementos gráficos

(exemplo2).

Page 32: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

1. Tamanho relativo dos elementos gráficos

(exemplo3).

Page 33: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

1. Tamanho relativo dos elementos gráficos

(exemplo4).

Page 34: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

2. Posição relativa dos elementos gráficos

oelementoqueseencontramaispertodocentroópticodoenquadramentotendeatermaisdestaquedoqueaquelequeestámaisafastado(exemplo1).

Page 35: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

2. Posição relativa dos elementos gráficos

(exemplo2).

Page 36: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

2. Posição relativa dos elementos gráficos

Cartazes exemplo.

Page 37: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

2. Posição relativa dos elementos gráficos

Cartazes exemplo.

Page 38: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

2. Posição relativa dos elementos gráficos

Cartazes exemplo.

Page 39: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

3. Destaque cromático relativo de um elemento gráfico

Umelementoqueseapresentenumacordiferente,saindodanormadacordominante nos elementos, destaca-se adquirindo maior importância visual.

Page 40: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

3. Destaque cromático relativo de um elemento gráfico

Cartazes exemplo.

Page 41: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

3. Destaque cromático relativo de um elemento gráfico

Cartazes exemplo.

Page 42: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

4. Peso relativo dos elementos tipográficos entre si

ousocombinadodeváriospesosdeumafamíliatipográficaresultanumahierarquiaemqueodestaqueficanoelementocommaispeso.

Pesotipográfico

Peso tipográfico

Peso tipográfico

Page 43: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

5. Tamanho relativo dos elementos tipográficos entre si

ousocombinadodeváriostamanhosdatipografia,resultanumahierarquiadetamanho,emqueodestaqueficanoelementodemaiordimensão(verexemplos de capas de livros).

Page 44: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

(maisexemplosdecapasdelivros).

Page 45: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios dehierarquia

VisuaL

6. valor cromático relativo dos elementos tipográficos entre si

ousocombinadodecoresdiferentesemtipografia,determinaigualmenteum destaque visual e uma hierarquia de importância relativa entre elementos tipográficos(verexemplosdelogótipos).

Page 46: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

5. Princípios de legibilidade

Page 47: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deLeGiBiLidAde

Relação tipografia fundo

Porvezesexistemrelaçõesentretipografiaefundoquenãofuncionam,criandoproblemasdelegibilidadeàtipografia.Nosexemplosaseguir,paraalém da solução não aconselhada, apresentam-se algumas soluções possíveis.

aconselhadonão aconselhado

Texto Texto

Page 48: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deLeGiBiLidAde

aconselhado aconselhado

Texto

Texto Texto

Page 49: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios decomPosição

visual

6. Princípios de organização/ composição espacial

Page 50: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deorganização/comPosição

esPacial

organização/composição espacial

Quandosecolocamelementosgráficossobreumsuporte,estesnãodevemestaraleatoriamentedistribuídossobreomesmo.Háumaordem,maisdinâmicaoumenosdinâmica,derelaçãoentreelementosgráficosquedeveserprocurada.

Esta procura é um acto de composição visual e para conseguir que ela seja mais harmoniosa devem ser tidos em conta dois princípios:

1. Concordâncias visuais;2. Concordâncias espaciais.

Page 51: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deorganização/comPosição

esPacial

1. concordâncias visuais

Naimagemexemplo,chama-seaatençãoparaotipografiaqueseencontraem concordância perpendicular com a inclinação da haste direita da letra A

Page 52: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deorganização/comPosição

esPacial

1. concordâncias visuais

Nas imagens exemplo, chama-se a atenção para a distribuição de toda a tipografiaeformasgráficas,numjogodeconcordânciasperpendiculares.

Page 53: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deorganização/comPosição

esPacial

1. concordâncias visuais

Outro exemplo de concordância visual acontece quando os elementos tipográficosacompanhamasformasdeelementosnãotipográficos.

Page 54: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deorganização/comPosição

esPacial

1. concordâncias estruturais

As concordâncias estruturais referem-se a relações de alinhamentos entre diferentes elementos de uma composição. Este tipo de relações de alinhamento são particularmente evidentes no contexto impresso e editorial, como se pode ver na imagem.

Page 55: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

PrincíPios deorganização/comPosição

esPacial

1. concordâncias estruturais

Numa composição, os elementos obedecem a regras de composição assentes emgrelhasesquemáticasquejustificamalocalizaçãoerelaçãoentretodososelementosgráficos.

Page 56: Princípios Composição Visual

Laboratório I - 2013/2014Prof. Rui Espírito Santo.

[email protected]

Conclusão

Todos estes princípios podem e devem ser aplicados no vosso contexto detrabalho.Usem-nosparaobtermelhores resultados ao nível da

composição visual.

obrigadoaodr.leonardoPereirapeladisponibilizaçãodosseusapontamentoseàautorizaçãoparaseremalterados.