princÍpios bÁsicos de design de comunic aÇÃo para … · princÍpios bÁsicos de design de...
TRANSCRIPT
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios de comPosição visual
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decomPosição
visual
1. Princípios de cor
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decor
1. combinações com contraste. 2. combinações sem contraste.
Teste
Teste
Teste
Teste
Teste
Teste
Teste
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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/
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decomPosição
visual
2. Princípios de tipografia
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decomPosição
visual
3. Princípios de coerência e unidade visual
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decoerÊnciAe UnidAde
VisUAL
3. Ao nível da linguagem gráfica e formal utilizada
osSimpsons,ofamilyguyeofuturama,sãosériesdeanimaçãoqueutilizamlinguagensvisuaisegráficassemelhantes.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decomPosição
visual
3. Princípios de hierarquia visual
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
1. Tamanho relativo dos elementos gráficos
(exemplo2).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
1. Tamanho relativo dos elementos gráficos
(exemplo3).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
1. Tamanho relativo dos elementos gráficos
(exemplo4).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
2. Posição relativa dos elementos gráficos
oelementoqueseencontramaispertodocentroópticodoenquadramentotendeatermaisdestaquedoqueaquelequeestámaisafastado(exemplo1).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
2. Posição relativa dos elementos gráficos
(exemplo2).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
2. Posição relativa dos elementos gráficos
Cartazes exemplo.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
2. Posição relativa dos elementos gráficos
Cartazes exemplo.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
2. Posição relativa dos elementos gráficos
Cartazes exemplo.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
3. Destaque cromático relativo de um elemento gráfico
Cartazes exemplo.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
3. Destaque cromático relativo de um elemento gráfico
Cartazes exemplo.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
5. Tamanho relativo dos elementos tipográficos entre si
ousocombinadodeváriostamanhosdatipografia,resultanumahierarquiadetamanho,emqueodestaqueficanoelementodemaiordimensão(verexemplos de capas de livros).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios dehierarquia
VisuaL
(maisexemplosdecapasdelivros).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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).
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decomPosição
visual
5. Princípios de legibilidade
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios deLeGiBiLidAde
aconselhado aconselhado
Texto
Texto Texto
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
PrincíPios decomPosição
visual
6. Princípios de organização/ composição espacial
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.
Laboratório I - 2013/2014Prof. Rui Espírito Santo.
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.