Princípios de Composição Visual

Prévia do material em texto

DISCIPLINA DE DESIGN E 
MULTIMÍDIA
Sistemas de informação
PRINCÍPIOS DE 
COMPOSIÇÃO VISUAL
PRINCÍPIOS DE COMPOSIÇÃ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ípios de tipografia; 
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.
1. PRINCÍPIOS DE COR
• Quando se compõe visualmente elementos gráficos num mesmo supor te, 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? 
• Usar combinações com contraste. 
• Solução fácil - Usar cores complementares. 
• Consultar sistemas on-line de combinações cromáticas para ajuda. 
• A evitar: 
• Evitar o uso de demasiadas cores (nem sempre é aplicável). 
• Evitar usar combinações que dificultem a legibilidade da tipografia. 
• Evitar o uso de gradientes com muitas cores. Nem sempre é aplicável este último 
princípio, no entanto, numa primeira fase de aprendizagem é de o seguir para 
evitar composições mal resolvidas.
• Combinações com contrastes • Combinações Sem contrastes
• 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.
• 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.
• 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.
• Ajudas: Eis 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.html 
http://colrd.com/create/palette/#dna=7098e5 
http://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/
2. PRINCÍPIOS DE TIPOGRAFIA
• Existem alguns princípios tipográficos básicos, que devem ser respeitados 
para a 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ão justificar o texto; 
4. Não variar as dimensões das letras.
1. NÃO UTILIZAR DEMASIADAS FONTES 
NO MESMO TRABALHO.
2. EVITAR O USO DE APENAS 
CAIXA ALTA.
3. NÃO JUSTIFICAR O TEXTO.
4. NÃO VARIAR A DIMENSÃO DAS 
LETRAS.
PERGUNTA: NUNCA SE VIOLAM 
ESTES PRINCÍPIOS?
• A resposta é sim, mas apenas em determinadas situações e com muita 
atenção à eficácia do resultado obtido. Por exemplo: quando há a 
vontade de dar expressão e acentuar significados através da tipografia ou 
seja, em situações onde se pretende que a tipografia ganhe iconicidade.
3. PRINCÍPIOS DE COERÊNCIA E 
UNIDADE VISUAL
• A coerência e a unidade visual de uma composição existe quando, se 
respeitam, em vários níveis da linguagem visual, os elementos gráficos 
utilizados: 
1. Ao nível da tipografia; 
2. Ao nível da relação da linguagem tipográfica com a linguagem da 
imagem; 
3. Ao nível da linguagem gráfica e formal utilizada; 
4. Ao nível da relação de cores entre tipografia, elementos gráficos e 
imagens.
1. AO NÍVEL DA TIPOGRAFIA
• Em qualquer trabalho de carácter gráfico como um genérico, por exemplo, 
deve optar-se por uma fonte e usá-la do princípio ao fim 
• Variar a fonte ao longo do trabalho quebra a unidade visual, o que divide o 
discurso, dificultando a leitura e a compreensão. 
• Por outro lado, a mudança de fonte e a consequente quebra de unidade, 
pode ser usada para criar dois ou três momentos distintos.
2. AO NÍVEL DA RELAÇÃO DA 
LINGUAGEM TIPOGRÁFICA COM A 
LINGUAGEM DA IMAGEM
• Quando num videoclip, por exemplo, se usam elementos gráficos com uma 
linguagem muito específica, adequar a tipografia a essa linguagem é uma 
forma de fazer com que a composição visual seja mais coerente no seu 
todo, reforçando a sua identidade 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 
dos elementos gráficos e procurar fontes cujo desenho tenha as mesmas 
características formais, visuais e cromáticas.
3. AO NÍVEL DA LINGUAGEM 
GRÁFICA E FORMAL UTILIZADA
• Não se devem misturar elementos gráficos que tenham diferentes 
tratamentos ou linguagens visuais. A ilustração é uma boa forma de 
perceber esta coerência que deverá existir nas composições que se 
realizam.
3. AO NÍVEL DA LINGUAGEM 
GRÁFICA E FORMAL UTILIZADA
• Os Simpsons, o Family Guy e o Futurama, são séries de animação que 
utilizam linguagens visuais e gráficas semelhantes.
3. AO NÍVEL DA LINGUAGEM 
GRÁFICA E FORMAL UTILIZADA
• O Naruto, o Sponge Bob, o American e as Power Puf Grils, são séries de 
animação que utilizam linguagens visuais e gráficas diferentes.
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 
uma coerência entre a tipografia e a imagem, criando uma unidade visual 
na composição resultante.
• 4. Ao nível da relação de cores entre tipografia, elementos gráficos e 
imagens Numa composição gráfica pode-se recorrer às próprias imagens 
para obtenção de uma paleta de cores. Pode-se também fazer o contrário, 
usar nas imagens a paleta de cores dos elementos gráficos.
3. PRINCÍPIOS DE HIERARQUIA 
VISUAL
• As hierarquias dos vários elementos gráficos estabelecem-se através de 
características como: 
1. Tamanho relativo dos elementos gráficos; 
2. Posição relativa dos elementos gráficos; 
3. Destaque cromático relativo de um elemento gráfico; 
4. Peso relativo dos elementos tipográficos entre si; 5. 
5. Tamanho relativo dos elementos tipográficos entre si; 6. 
6. Valor cromático relativo dos elementos tipográficos entre si.
1. TAMANHO RELATIVO DOS 
ELEMENTOS GRÁFICOS
• O elemento com maior tamanho, tende a ter maior destaque pelo seu peso 
visual acrescido, mesmo em formas diferenciadas
2. POSIÇÃO RELATIVA DOS 
ELEMENTOS GRÁFICOS
• O elemento que se encontra mais perto do centro óptico do 
enquadramento tende a ter mais destaque do que aquele que está mais 
afastado
2. POSIÇÃO RELATIVA DOS 
ELEMENTOS GRÁFICOS
3. DESTAQUE CROMÁTICO RELATIVO 
DE UM ELEMENTO GRÁFICO
• Um elemento que se apresente numa cor diferente, saindo da norma da 
cor dominante nos elementos, destaca-se adquirindo maior importância 
visual.
4. PESO RELATIVO DOS ELEMENTOS 
TIPOGRÁFICOS ENTRE SI
• O uso combinado de vários pesos de uma família tipográfica resulta numa 
hierarquia em que o destaque fica no elemento com mais peso.
5. TAMANHO RELATIVO DOS 
ELEMENTOS TIPOGRÁFICOS ENTRE SI
• O uso combinado de vários tamanhos da tipografia, resulta numa 
hierarquia de tamanho, em que o destaque fica no elemento de maior 
dimensão (ver exemplos de capas de livros).
6. VALOR CROMÁTICO RELATIVO DOS 
ELEMENTOS TIPOGRÁFICOS ENTRE SI
• O uso combinado de cores diferentes em tipografia, determina igualmente 
um destaque visual e uma hierarquia de importância relativa entre 
elementos tipográficos (ver exemplos de logótipos).
5. PRINCÍPIOS DE LEGIBILIDADE
• Relação tipografia fundo 
• Por vezes existem relações entre tipografia e fundo que não funcionam, criando 
problemas de legibilidade à tipografia. Nos exemplos a seguir, para além da 
solução não aconselhada, apresentam-se algumas soluções possíveis
6. PRINCÍPIOS DE ORGANIZAÇÃO/ 
COMPOSIÇÃOESPACIAL
• Organização/composição espacial 
• Quando se colocam elementos gráficos sobre um supor te, estes não devem 
estar aleatoriamente distribuídos sobre o mesmo. Há uma ordem, mais dinâmica 
ou menos dinâmica, de relação entre elementos gráficos que deve ser 
procurada. 
• 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. Espaciais.
1. CONCORDÂNCIAS VISUAIS
• Na imagem exemplo, chama-se a atenção para o tipografia que se 
encontra em concordância perpendicular com a inclinação da haste 
direita da letra A
1. CONCORDÂNCIAS VISUAIS
• Nas imagens exemplo, chama-se a atenção para a distribuição de toda a 
tipografia e formas gráficas, num jogo de concordâncias perpendiculares.
1. CONCORDÂNCIAS VISUAIS
• Outro exemplo de concordância visual acontece quando os elementos 
tipográficos acompanham as formas de elementos não tipográficos.
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.
1. CONCORDÂNCIAS ESTRUTURAIS
• Numa composição, os elementos obedecem a regras de composição 
assentes em grelhas esquemáticas que justificam a localização e relação 
entre todos os elementos gráficos.
CONCLUSÃO
• Todos estes princípios podem e devem ser aplicados no vosso contexto de 
trabalho. 
• Usem-nos para obter melhores resultados ao nível da composição visual.
	Slide 1: Disciplina de Design e multimídia
	Slide 2: Princípios de composição visual
	Slide 3: Princípios de composição visual
	Slide 4: 1. Princípios de cor
	Slide 5
	Slide 6
	Slide 7
	Slide 8
	Slide 9
	Slide 10: 2. Princípios de tipografia
	Slide 11: 1. Não utilizar demasiadas fontes no mesmo trabalho. 
	Slide 12: 2. Evitar o uso de apenas caixa alta.
	Slide 13: 3. Não justificar o texto.
	Slide 14: 4. Não variar a dimensão das letras.
	Slide 15: Pergunta: Nunca se violam estes princípios?
	Slide 16: 3. Princípios de coerência e unidade visual
	Slide 17: 1. Ao nível da tipografia
	Slide 18: 2. Ao nível da relação da linguagem tipográfica com a linguagem da imagem
	Slide 19: 2. Ao nível da relação da linguagem tipográfica com a linguagem da imagem
	Slide 20: 3. Ao nível da linguagem gráfica e formal utilizada
	Slide 21: 3. Ao nível da linguagem gráfica e formal utilizada
	Slide 22: 3. Ao nível da linguagem gráfica e formal utilizada
	Slide 23: 4. Ao nível da relação de cores entre tipografia, elementos gráficos e imagens
	Slide 24
	Slide 25: 3. Princípios de hierarquia visual
	Slide 26: 1. Tamanho relativo dos elementos gráficos
	Slide 27: 2. Posição relativa dos elementos gráficos
	Slide 28: 2. Posição relativa dos elementos gráficos
	Slide 29: 3. Destaque cromático relativo de um elemento gráfico
	Slide 30: 4. Peso relativo dos elementos tipográficos entre si
	Slide 31: 5. Tamanho relativo dos elementos tipográficos entre si
	Slide 32: 6. Valor cromático relativo dos elementos tipográficos entre si
	Slide 33: 5. Princípios de legibilidade
	Slide 34
	Slide 35: 6. Princípios de organização/ composição espacial
	Slide 36: 1. Concordâncias visuais
	Slide 37: 1. Concordâncias visuais
	Slide 38: 1. Concordâncias visuais
	Slide 39: 1. Concordâncias estruturais
	Slide 40: 1. Concordâncias estruturais
	Slide 41: Conclusão