Princípios de composição visual

LABORATÓRIO I 2013/2014 Tecnologia da Comunicação Multimédia (TCM) 1º ano - 2º semestre princípios básicos de Design de comunicação para Não Designers composição visual

composição visual

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. cor; 2. tipografia; 3. coerência e unidade visual; 4. hierarquia; 5. legibilidade; 6. organização/composição espacial.

composição visual 1. cor

cor Quando se compõe visualmente elementos gráficos num mesmo suporte, 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.

cor 1. Combinações com contraste. 2. Combinações sem contraste. Teste Teste Teste Teste Teste Teste Teste

cor 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.

cor 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.

cor 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.

cor 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.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/

composição visual 2. tipografia

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.

tipografia 1. Não utilizar demasiadas fontes no mesmo trabalho. Aconselhado Não aconselhado Assunto Título 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. 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.

tipografia 2. Evitar o uso de apenas caixa alta. Aconselhado Não aconselhado Assunto Título Assunto Título Usar apenas caixa alta, dificulta a leitura do 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. Usar apenas caixa alta, dificulta a leitura do 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.

tipografia 3. Não justificar o texto. Aconselhado Não aconselhado Assunto Título 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, devese 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. A justificação do texto pode provocar o efeito desagradável conhecido por dentes de cavalo ou rios. Para evitar este efeito, devese 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.

tipografia 4. Não variar a dimensão das letras. 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. 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.

tipografia 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.

composição visual 3. coerência e unidade visual

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.

COERÊNCIA E UNIDADE VISUAL 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 (ver genérico série Rome ). 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 (ver genérico filme Snatch. ). Ver genérico da série Rome http://www.youtube.com/watch?v=eddpdldih_e Ver genérico do filme Snatch. http://www.youtube.com/watch?v=mpgtn-z6wba

COERÊNCIA E UNIDADE VISUAL 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. Ver videoclip Move your feet http://www.youtube.com/watch?v=splqpgetbie

COERÊNCIA E 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 dos elementos gráficos e procurar fontes cujo desenho tenha as mesmas características formais, visuais e cromáticas. Texto Texto Texto Texto

COERÊNCIA E UNIDADE VISUAL 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.

COERÊNCIA E UNIDADE VISUAL 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.

COERÊNCIA E UNIDADE VISUAL 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.

COERÊNCIA E 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 uma coerência entre a tipografia e a imagem, criando uma unidade visual na composição resultante. Texto + texto

COERÊNCIA E UNIDADE VISUAL 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. Imagem original e a aplicação da paleta de cores obtida em elementos gráficos. Noite estrelada - Vincent Van Gogh Cabeça - Kasimir Malevich

composição visual 3. hierarquia visual

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. Tamanho relativo dos elementos tipográficos entre si; 6. Valor cromático relativo dos elementos tipográficos entre si.

hierarquia VISUAL 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 (exemplo 1).

hierarquia VISUAL 1. Tamanho relativo dos elementos gráficos (exemplo 2).

hierarquia VISUAL 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 (exemplo 1).

hierarquia VISUAL 2. Posição relativa dos elementos gráficos (exemplo 2).

hierarquia VISUAL 2. Posição relativa dos elementos gráficos Cartazes exemplo.

hierarquia VISUAL 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.

hierarquia VISUAL 3. Destaque cromático relativo de um elemento gráfico Cartazes exemplo.

hierarquia 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. Peso tipográfico Peso tipográfico Peso tipográfico

hierarquia VISUAL 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).

hierarquia VISUAL (mais exemplos de capas de livros).

hierarquia VISUAL 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).

composição visual 5. legibilidade

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. Não aconselhado Aconselhado Texto Texto

LEGIBILIDADE Aconselhado Aconselhado Texto Texto Texto

composição visual 6. organização/ composição espacial

organização /composição espacial Organização/composição espacial Quando se colocam elementos gráficos sobre um suporte, 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. Concordâncias espaciais.

organização /composição espacial 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

organização /composição espacial 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.

organização /composição espacial 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.

organizaçã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.

organização /composição espacial 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. Obrigado ao Dr. Leonardo Pereira pela disponibilização dos seus apontamentos e à autorização para serem alterados.