IHC aula06 composição

Prévia do material em texto

Interação Humano-Computador
aula 06
aula 01
IHC
Interação Humano-Computador2
IHC
Ciência da Computação
Questões: 
• Como juntar e organizar tamanha quantidade de 
informações numa área limitada ?
• Como manter o interesse do usuário pelo assunto e pela 
obra ?
• Como abordar temas conhecidos de modo cativante e 
original ? 
Técnicas de Composição
Interação Humano-Computador3
IHC
Ciência da Computação
• Aquisição 
• Armazenamento – memória de curta duração
• Recuperação – memória de longa duração
Se as informações são armazenadas de uma maneira mais fácil 
de localizar, serão mais fáceis de recuperar. 
Solução: Combinar vários de sentidos durante a memorização.
Fases de Memorização
Interação Humano-Computador4
IHC
Ciência da Computação
• Estudo feito pelo psicólogo George A. Miller em 1956
• A memória de curta direção pode conter 7 fatos durante 15 a 
30 segundos antes de recorrer ao processo de recordação. 
• O limite para o número de informações e/ou objetos que 
podem ser colocados numa tela é 7 ± 2 (máximo de 9).
• Para cores, o uso não deve ser maior que 7 cores diferentes.
Teorema de Miller
Interação Humano-Computador5
IHC
Ciência da Computação
• Problema: Como projetar uma interface para que o olho 
humano possa mover-se naturalmente?
• Os olhos tendem primeiro a se alinhar próximo ao centro da 
tela e depois fazem um movimento irregular (espiral) em 
torno dos elementos aleatórios da página.
• Arco visual de processamento: Leitura das telas da esquerda 
para direita e de cima para baixo (Cultura ocidental).
• O olho também é atraído para elementos coloridos sobre um 
fundo neutro. 
• Aplicações: separação de elementos de um grupo e 
separação de gráficos sobre textos.
Convenções e Expectativas
Interação Humano-Computador6
IHC
Ciência da Computação
• Podem sugerir uma seqüência lógica e dinâmica na tela;
• Podem atrair a atenção para ou a partir de uma área 
particular da tela;
• Podem servir como uma ferramenta de movimentação.
• Existem expectativas e convenções que podem ser usadas.
Convenções
Interação Humano-Computador7
IHC
Ciência da Computação
• Canto superior esquerdo - é onde as pessoas costumam 
procurar por controles gerais (numa revista seria o preço).
• Canto inferior direito - leva para a próxima tela (ou página no 
caso de revista folheada à maneira ocidental).
• Canto inferior esquerdo - leva para a tela anterior.
• Topo da tela: Barra de Menu, Barra de Ferramentas.
• Parte inferior: Barra de Estado (Status bar).
• Lateral direita: Barra de Rolagem (Scroll Bar).
Expectativas
Interação Humano-Computador8
IHC
Ciência da Computação
• É a definição, disposição e organização dos espaços e 
elementos de uma tela. 
• A posição, localização, tamanho, cor e estrutura dos 
elementos podem levar ou bloquear informações aos 
usuários. 
• Uma coerência inteligente, seguida ou violada 
propositalmente para obter algum efeito, pode atrair a 
atenção dos usuários para determinadas áreas específicas.
Design da Tela
Interação Humano-Computador9
IHC
Ciência da Computação
• Design - é o visual geral e o conceito estético inerente ao 
material apresentado. 
• Em qualquer aplicativo sempre deve-se procurar a harmonia 
entre o funcional e o estético. 
• O elemento estético tem como objetivo organizar o espaço 
da tela com formas e cores de maneira a melhorar as telas 
do aplicativo e a comunicação com o usuário.
• Layout - é a maneira de arranjar objetos, palavras e 
ilustrações dentro do design geral.
• O design é análogo ao projeto de arquitetura e o layout à 
uma planta detalhada.
Design e Layout
Interação Humano-Computador10
IHC
Ciência da Computação
• Tornar as informações mais compreensíveis e visíveis.
• Transmitir a informação com eficiência e enfatizar os 
temas mais importantes. 
• Ajudar a visualização de elementos da tela, organizando 
o espaço e forma que o assunto ocupa.
• Levar a um número menor de textos por tela. 
• Tornar as telas visualmente sedutoras - motivação do 
usuário. 
• Fornecer uma identidade visual para o aplicativo.
• Fazer com que a interface H-M funcione intuitivamente, 
de tal forma que o projeto pareça não ter interface.
Objetivos do Design
Interação Humano-Computador11
IHC
Ciência da Computação
• Objetivo: Fazer com que o observador se sinta 
dentro da obra, ambiente ou aplicativo.
• Associa a imagem vista a uma entidade externa
• Obtida através da padronização das cores, 
formas, frente e fundo, movimento e de todos os 
elementos da composição. 
Identidade Visual
Interação Humano-Computador12
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
• “Se duas sensações ocorrerem juntas várias vezes, e se 
uma sensação ocorrer sozinha, então a imagem da 
memória da outra sensação também ocorrerá.”
Exemplos: 
• Pode-se folhear um jornal lendo-se somente as notícias ou 
anúncios graças a padrões distintos que diferem um 
anúncio de uma notícia.
• Distingue-se só no olhar um aplicativo feito em Windows e 
em outras plataformas, apesar de ambos terem alguns 
elementos comuns.
Princípio da Identidade Visual
Interação Humano-Computador13
IHC
Ciência da Computação
Mecanismos de linguagem gráfica para 
• Tipologia (letras com formas agradáveis aos olhos).
• Formatação dos textos adequados com as ilustrações.
• Lay-out e arte-final.
• Uso de fundos com padrões claros.
• Símbolos e signos.
• Logotipos e logomarcas.
Identidade visual 
Interação Humano-Computador14
IHC
Ciência da Computação
• A maneira como estão dispostos os elementos na tela é 
de grande importância na funcionalidade das interfaces.
• Um bom design de interface depende do contexto do 
aplicativo e da distribuição dos componentes da tela 
(layout). 
• O Lay-out apresenta as opções e as interações 
disponíveis do usuário (teclado, mouse) baseado na 
percepção (retorno visual e atenuação das opções 
inativas). 
• O layout é um canal de informações por si próprio.
Layout de Tela
Interação Humano-Computador15
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Interface Homem-Máquina - Composição - Cap. 4
Elementos da composição
• Distribuição espacial dos componentes
• Relação entre figuras e espaços vazios
• Proporções
• Movimento e organização de tons e cores 
• Equilíbrio e ritmo entre as partes 
Interação Humano-Computador16
IHC
Ciência da Computação
• Os elementos de uma composição devem manifestar de 
forma evidente ou oculta uma mensagem a ser 
transmitida. 
• A mensagem deve chamar a atenção, suscitar o 
interesse e promover uma ação através da disposição 
dos elementos. 
• A mensagem deve ser o centro de interesse.
Mensagem da Composição
Interação Humano-Computador17
IHC
Ciência da Computação
Definição (Platão)
“A composição consiste em encontrar e representar a variedade 
dentro da unidade.”
• Fatores básicos da composição: Unidade e Variedade
Variedade / Diversidade Unidade
Variedade dentro da unidade
Interação Humano-Computador18
IHC
Ciência da Computação
• A variedade intensifica o interesse pela composição.
• A variedade é obtida através de diferenças na cor, 
forma, situação, dimensão, disposição. 
• Quanto maior o número de formas dispares entre si, 
quanto maior a diversidade de cores, quanto maior o 
contraste entre as cores, tanto maior é a variedade.
• A variedade agradável encontra-se no meio entre o 
monótono e o complexo.
Variedade dentro da unidade
Interação Humano-Computador19
IHC
Ciência da Computação
• A contemplação de uma tela pintada de cor cinza absolutamenteuniforme, chapada, sem qualquer variação, forma ou mancha não traz 
nenhum prazer estético. 
Variedade dentro da unidade
Interação Humano-Computador20
IHC
Ciência da Computação
• O mesmo fundo cinza, com um quadrado inscrito no centro também não produz 
nenhum prazer estético: duas formas idênticas continuam a negar o fator 
variedade.
• Em uma superfície retangular, de fundo azul claro, mostrando em cima um 
quadrado vermelho e embaixo, descentrado, um círculo azul, já há um princípio 
de variedade (embora as formas sejam abstratas, isto é, nada representando 
de concreto).
Variedade dentro da unidade
Interação Humano-Computador21
IHC
Ciência da Computação
• Ponto principal destacado pela organização conjunta e dirigida dos 
fatores de variedade e unidade. 
• Elemento mais importante da composição.
• Recomendação: subordinar e condicionar os fatores unidade e 
variedade a um centro de interesse da composição. 
O centro de interesse pode ser obtido através da:
• Direção intencional de linhas e formas;
• Distribuição calculada de espaços e volumes;
• Contraste tonal ou contraste de cor;
• Expressões (gestos, posição, etc.) dos personagens do quadro.
• A norma de criar e destacar um centro de interesse é bastante 
aplicada na ilustração e composição publicitária.
Centro de Interesse
Interação Humano-Computador22
IHC
Ciência da Computação
(Exemplo: "A criação do homem" de Miguel Ângelo (a mão 
de Deus quase tocando a mão do homem para infundir-
lhe vida).
Centro de Interesse
Interação Humano-Computador23
IHC
Ciência da Computação
Objetivo: encontrar e a representar a unidade dentro da 
variedade.
• Proporção espacial - organização da forma e do espaço
• Leis da simetria e assimetria
• Leis de equilíbrio e compensação de volumes
• Estudo da forma
• Esquemas tradicionais de composição
Fatores que influenciam a unidade
Interação Humano-Computador24
IHC
Ciência da Computação
A Proporção espacial - organização do espaço.
Primeiro problema: 
• Encontrar, dentro do espaço disponível, um ou mais pontos (e portanto 
uma ou mais divisões ou situações) cuja posição seja perfeita 
artisticamente.
• Divisão do espaço em duas partes: traçar eixo vertical sobre o qual serão 
estabelecidos os principais elementos do quadro.
1) Vertical no centro do espaço 
=> imagem sem variedade 
=> imagem estática, monótona, sem a menor originalidade.
= +
Proporção espacial
Interação Humano-Computador25
IHC
Ciência da Computação
A Proporção espacial - organização do espaço.
2) Vertical próxima de um lado do quadro 
=> a variedade ficará exagerada 
=> imagem com grande desequilíbrio entre os espaços à esquerda 
e à direita da vertical.
= +
• Conclusão: A linha divisória não deverá estar no centro, nem 
colocada excessivamente para um lado, mas sim numa posição 
média entre essas duas divisões.
Proporção espacial
Interação Humano-Computador26
IHC
Ciência da Computação
Lei da seção dourada (Vitrúvio, arquiteto de Augusto)
• ”Para que um espaço dividido em partes desiguais torne-se agradável e 
estético, deverá haver, entre a parte menor e a maior, a mesma relação 
existente entre esta maior e o todo.”
bc
a = b + c
a b razão média e extrema
b c
=
b + c b
b c
=
Proporção espacial
Interação Humano-Computador27
IHC
Ciência da Computação
Lei da seção dourada (cont.) 
• A expressão aritmética da seção dourada é igual a 1,618, e é obtida 
através da razão entre os termos adjacentes, maiores que 3, da série de 
Fibonacci:
1, 1, 2, 3, 5, 8, 13, 21, 34, ..., n, m, n+m,
isto é:
8 / 5 ≈ 13 / 8 ≈ 21 / 13 ≈ m / n ≈ (n + m) / m ≈ 1,618
Proporção espacial
Interação Humano-Computador28
IHC
Ciência da Computação
Ponto dourado
• É obtido através da intercessão das retas horizontais e verticais 
desenhadas à partir das distâncias obtidas dividindo-se a altura e a 
largura de uma superfície qualquer por 1,618:
a / b = 1,618 logo b = a / 1,618
b = a / 1,618
d = c / 1,618
a 
c 
Ponto 
Dourado 
Proporção espacial
Interação Humano-Computador29
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Ponto dourado (cont)
• Por ser este ponto o centro de máximo interesse da 
superfície, pode-se colocar nele o elemento mais importante 
da tela com a certeza de situa-lo no lugar mais perfeito 
artisticamente falando. 
Observações importantes:
• A lei da seção dourada não é o único fator que intervém no 
valor artístico de um quadro. 
• Ela pode ser modificada, alterada ou compensada por outras 
normas como as do equilíbrio, da expressão, da 
originalidade, etc.
Proporção espacial
Interação Humano-Computador30
IHC
Ciência da Computação
• Proposição1: Várias formas soltas, isoladas entre si no espaço. 
• Proposição2: Podemos manipular estas formas: juntando, 
deslocando, separando, misturando.
• Regra: A superposição de várias formas, situando umas diante 
das outras, para criar uma série de planos ou formas 
sucessivas, conduz ao fator básico da unidade. 
– Ex: Janelas superpostas
Distribuição de formas no espaço
Interação Humano-Computador31
IHC
Ciência da Computação
• Distribuição dos elementos do quadro de ambos os lados de um ponto 
ou eixo central, de modo a que umas partes estejam em 
correspondência com outras. 
• A composição simétrica corresponde em tudo e por tudo ao princípio 
de unidade, de ordem e organização geométrica, quase matemática. 
• Por este motivo é difícil conseguir simultaneamente os fatores básicos 
de unidade e variedade. 
– Princípio básico da composição simétrica - expressão de idéias: 
religiosidade, 
– severidade, 
– solenidade, 
– luxo, 
– força, 
– grandiosidade.
Simetria
Interação Humano-Computador32
IHC
Ciência da Computação
• Composição simétrica rígida - É aquela cujas partes se encontram dispostas 
com absoluta semelhança e correspondência em relação a um eixo quase 
sempre central.
• Composição simétrica variável - É aquela onde a correspondência das 
partes é mais livre e elástica, podendo se traduzir numa mudança das 
posições ou atitudes das figuras ou objetos representados de ambos os lados 
do eixo central.
Simetria
Interação Humano-Computador33
IHC
Ciência da Computação
• É o inverso da simetria: falta de correspondência entre umas 
e outras partes, bem como de um eixo central.
• É a distribuição livre e intuitiva dos elementos na tela, 
equilibrando umas partes com respeito a outras, a fim de 
manter e conseguir uma unidade de conjunto.
• Procura destruir ou esconder a correspondência de umas 
partes com outras.
• Na composição assimétrica estamos expostos a um excesso 
de variedade, com prejuízo da unidade.
Assimetria
Interação Humano-Computador34
IHC
Ciência da Computação
Equilíbrio e compensação de volumes
• Distribuição das formas e cores na busca do equilíbrio
Conceitos
• Linha - contornos
• Mancha - tonalidade isolada.
• Volume - é a situação de uma tonalidade dentro da tela. 
– São blocos de sombra e luzes vistos, sem entrar em gradientes e 
"degradés" (abandonamos os tons muito claros, deixando-os em 
branco, para sintetizar e resumir a valorização dos volumes, 
permitindo estudar os grandes espaços tonais).
– Os volumes determinam a composição da tela. 
Equilíbrio
Interação Humano-Computador35
IHC
Ciência da Computação
Regras do Equilíbrio
• Primeira: Em composição, o equilíbrio baseia-se na 
compensação de uns volumes em relação a outros.
• Segunda: A compensação entre volumes é dada pela 
combinação dos seguintes fatores:
– As dimensões de uns volumes em relação a outros.– A distância que separa uns volumes dos outros.
– O valor total de uns volumes em relação aos outros.
Equilíbrio
Interação Humano-Computador36
IHC
Ciência da Computação
Exemplo 1
• Volume escuro de grandes dimensões é destacado, se 
opondo um volume de tamanho reduzido => Volume maior 
absorve excessivamente nossa atenção, tirando o interesse 
do volume menor => Desequilíbrio entre os dois volumes –
“pesos” ou dimensões diferentes.
Equilíbrio
Interação Humano-Computador37
IHC
Ciência da Computação
Exemplo2
• Do lado direito se encontram reunidos todos os valores formais e tonais 
da composição, representados pelos volumes A, B, E, F, enquanto, do 
lado esquerdo, só existe o contraste do volume C, que não consegue 
obter a compensação necessária para estabelecer o equilíbrio necessário 
=> Todo o peso da composição se inclina para o lado direito.
E
A
B
F
C
D
Equilíbrio
Interação Humano-Computador38
IHC
Ciência da Computação
Fenômenos físicos e psíquicos - Experiência de Fechner
• Quais são as formas mais agradáveis, mais harmoniosas? 
• As melhores formas, aquelas que mais chamam a atenção, 
que melhor se observam e que se recordam com maior 
facilidade são:
– As formas determinadas matematicamente, isto é, as 
formas geométricas (retângulos, triângulos, elipses).
– As formas naturais de animais e plantas (silhuetas de 
folhas, de uma palma da mão, de uma cabeça humana 
de perfil).
– As formas extravagantes, ditadas pela fantasia (ou 
abstratas).
Estudo da Forma
Interação Humano-Computador39
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Princípio do hedonismo (economia muscular, nervosa, 
mental)
• Existe uma preferência pelo simples e o concreto de maneira 
a se obter a máxima satisfação com o mínimo esforço.
• Ex: Cubo visto como um padrão plano (hexágono).
Princípio do hedonismo
Interação Humano-Computador40
IHC
Ciência da Computação
• Esquemas em forma de retângulo - usam o retângulo como elemento 
único ou como figura que se repete dentro do quadro. É corrente na 
pintura moderna (cubismo) e serve de base na arte comercial e 
publicitária. 
– Ex: Cézanne, Picasso, Mondrian
Esquemas tradicionais de composição
Interação Humano-Computador41
IHC
Ciência da Computação
• Esquemas em forma de triângulo retângulo - Tradicional na pintura 
clássica. Variantes:
– Triângulo onde a divisão diagonal é dissimulada pela inclusão de 
formas e tons adicionais.
– Triângulo dividindo o quadro em diagonal através de um efeito 
destacado de luz e sombra;
Exemplo: Corot, Ticiano, El Veronês
Esquemas tradicionais de composição
Interação Humano-Computador42
IHC
Ciência da Computação
• Esquemas em forma de pirâmide - esquema quase sempre ligado à 
composição simétrica. 
Exemplo: Picasso, Velásquez, Tiziano
Esquemas tradicionais de composição
Interação Humano-Computador43
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
• Esquemas em forma de elipse - especialmente usado na 
pintura romântica do século 19. 
– Exemplo: Sisley, Rousseau, El Tintoretto.
• Esquemas baseados em formas tipográficas - as formas 
tipográficas das letras oferecem um desenho 
eminentemente geométrico, baseado na combinação de 
retângulos, triângulos e elipses.
Esquemas tradicionais de composição
Interação Humano-Computador44
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
• Coincidência de Contornos
• Semelhanças 
• Contrastes
• Dramatização
• Ritmo
Fatores que influenciam a variedade
Interação Humano-Computador45
IHC
Ciência da Computação
A Coincidência de Contornos
• Os desenhos formados pelos contornos das curvas dos elementos de 
uma figura, quando demasiado regulares (obedecendo a um cálculo 
premeditado sem variedade) -> monotonia na composição. 
• Podem gerar ilusões, além de reduzir a variedade.
Exemplos:
– Coincidência do perfil de um objeto com a borda de outro objeto.
– Linhas formadas pela posição do eixo dos diferentes objetos fornecendo 
uma inclinação que se repete objeto a objeto.
– Linhas horizontais e verticais obscuras e sem sentido ou utilidade (bordas 
de mesas, paredes e portas), incomodando e chamando a atenção 
desnecessariamente.
Solução: quebrar a monotonia mudando simplesmente a posição desses 
objetos.
Contornos
Interação Humano-Computador46
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
A Coincidência de Contornos
Contornos
Interação Humano-Computador47
IHC
Ciência da Computação
Criando Semelhanças
• Trata-se de repetir e distribuir pela cena as mesmas semelhanças, 
que prolongam as dominantes de cor, de forma e de estilo.
• Lei da repetição - Consegue-se uma melhor harmonia, uma 
ordem melhor dentro da variedade da composição através da 
repetição de cor, de volume, de forma, de execução e estilo.
• "A variedade dentro da unidade também se poderá obter criando 
semelhanças, isto é, pela repetição premeditada de cores, de tons, 
de formas, de linhas." [Jules Brabant]
• Lay-out e Identidade Visual
Semelhanças
Interação Humano-Computador48
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Criando Semelhanças (cont)
• Semelhanças de cor
• Uma cor dominante predomina na paleta e é aplicada nas 
sombras e nas cores escuras.
• Semelhanças de volume 
• Pintar plano, atenuando a sensação de volume da relação luz e 
sombra; 
• Tratar volumes como se fossem superfícies planas, iluminadas 
frontalmente, evitando degradés e contrastes de tom e de cor;
• Preencher de cor e de luz as superfícies dos corpos; 
• Semelhanças de forma 
• Conseguida por meio de traços e padrões, desenhando formas 
que se repetem por todo o quadro.
Semelhanças
Interação Humano-Computador49
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Criando Semelhanças (cont)
• Semelhanças de execução e de estilo - A execução ou o 
modo de pintar também se repetindo de maneira evidente, 
criando um estilo que se repete através de:
– Traços com notáveis espessuras de cor sublinhando os 
contornos com linhas escuras;
– Construindo linearmente perfis externos e formas 
internas com o estilo essencialmente pictórico, baseado 
no desenho (Ex: Van Gogh).
– Oferecendo nas figuras sempre a mesma forma alongada 
(Ex: El Grieco)
Semelhanças
Interação Humano-Computador50
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Criação de contraste
• Conseguir interesse, vitalidade e variedade dentro da unidade
• Diferenças de tom e cor, forma e situação, tamanho, expressão e 
movimento. 
• Os contrastes nascem da oposição entre características:
– asperezas e suavidades
– verticais opostas a horizontais
– retas em relação com curvas
– comparação entre o grande e o pequeno
– simplicidade e a complexidade
– repouso e o movimento
– tristeza e a alegria.
Contraste
Interação Humano-Computador51
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Criação de contraste (cont.)
• As oposições correspondem a um estudo premeditado que 
dê variedade à composição.
• Os contrastes podem ser criados de forma simples:
– colocar um homem e uma mulher, em vez de duas 
pessoas do mesmo sexo,
– opor estruturas orgânicas (ex: uma folhagem, um 
ramalhete com folhas) à estruturas geométricas (ex: 
rua, casas, janelas e portas).
Contraste
Interação Humano-Computador52
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Contrastes de luz, cor e tom
• Luz é o elemento básico na vitalidade e variedade da 
composição.
• Um intenso jogo de luzes e sombras consegue um 
extraordinário volume.
• Acriação de contrastes tonais obtém-se volumes, força e 
interesse. 
Exemplo: violento contraste entre a cor de carne e o azul 
forte do mar (são quase complementares).
• A justaposição de cores complementares gera máximo 
contraste.
Contraste
Interação Humano-Computador53
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Cores complementares
Boats - Van Gogh
Contraste
Interação Humano-Computador54
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Contrastes de forma
• Na oposição de linhas ou formas encontra-se uma fonte 
inesgotável de recursos para dar à tela mais variedade, e 
despertar interesse.
Exemplos de contrastes através de oposição de formas:
• Oposição radical das linhas verticais formadas pelos delgados 
troncos das árvores, com respeito às formas e linhas 
horizontais e inclinadas que figuram na estrutura de uma 
ponte.
• Oposição conseguida com base na inclusão de formas 
circulares nas nuvens, formas horizontais de barcos e formas 
verticais das árvores.
Contraste
Interação Humano-Computador55
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Contrastes por tamanho
• É o recurso de chamar a atenção, de compor e criar 
variedade, comparando na tela o tamanho dos corpos ou 
realçando os planos pelo tamanho.
Exemplos:
• Mostrar árvores de tamanho gigantesco no primeiro plano, 
colocando junto delas um par de figuras humanas (promove 
a variedade e chama a atenção do espectador).
• Realçar o tamanho das figuras no primeiro plano, opondo-
lhes outras figuras humanas mais afastadas
Contraste
Interação Humano-Computador56
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Dramatização das possibilidades expressivas
• Recurso para realçar, enfatizar e despertar interesse.
– enquadramento e dimensão dos corpos;
– Iluminação
– cor;
– forma;
– interesse humano.
• Possibilidades expressivas não se referem unicamente às 
expressões físicas e humanas: riso, choro, ira, etc.
• A luz é um importante meio de expressão: 
– uma iluminação adequada pode enfatizar um estado de 
espírito ou expressar uma determinada idéia.
Dramatização
Interação Humano-Computador57
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Dramatização por enquadramento e tamanho
• Um grande espaço com uma figurinha no centro perde a possibilidade 
de dramatização que a ocupação de espaços pode fornecer.
Princípio: Estudar as possibilidades:
– aproximar-se mais do tema, 
– retratar o busto e a cabeça, em vez do corpo inteiro; 
– cortar por cima a copa de uma árvore, aproximando-se dela, em 
vez de colocá-la inteira.
– Considere o maior tamanho em que pode representar o modelo: 
ampliação.
• Conseqüência: requer mais detalhes, requer que se pormenorize mais 
(casca veludosa do pêssego, plumagem da ave, etc.).
• Determinar o enquadramento mais apropriado analisando que partes 
ficam fora e quais ficam dentro.
Dramatização
Interação Humano-Computador58
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Dramatização através da luz, cor e tom
• Os efeitos luminosos adequadamente dirigidos podem 
expressar alegria ou tristeza, dureza ou suavidade, 
movimento ou repouso, etc.
• A qualidade da luz, seja direta (luz do sol ou de lâmpada 
iluminando diretamente o modelo) ou difusa (dia 
nebuloso, de reflexo) também pode expressar idéias, 
sentimentos ou diversos estados de espírito.
Dramatização
Interação Humano-Computador59
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Dramatização através da luz, cor e tom (cont) 
• A cor representa um meio de expressão concreto. 
• A psicologia da cor nos mostra o simbolismo:
– amarelo = saúde, poder
– vermelho = paixão, energia
– verde = esperança, imortalidade
– azul = repouso, frieza
• O tom também pode dramatizar o conteúdo expressivo: 
– um ambiente de suavidade, passividade, feminilidade -
tom difuso, suave. 
– um ambiente de dureza, energia, dinamismo - tom 
concreto, duro.
Dramatização
Interação Humano-Computador60
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Dramatização através da forma
• É a ação de recorrer à deformação ou estilização da forma 
para dramatizar a possibilidade de expressão.
• Formas alongadas, finas, estendidas são representativas de 
idealismo, de anseios elevados, de coisas de espíritos.
• Figuras ou formas achatadas, gordas, espessas, são símbolos 
de materialidade, de grosseria, de vulgaridade.
Exemplo: D.Quixote e Sancho Panza
Dramatização
Interação Humano-Computador61
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
Dramatização através da matéria
• A variedade dentro da unidade também pode ser obtida pela textura 
ou aparência material.
• Exemplo: mostrar o grão e as linhas do tecido, 
• Dramatização do fator "Interesse Humano"
• Nada interessa tanto o homem quanto o próprio homem.
Exemplos:
– Rosto alegre e sorridente.
– Sorriso enigmático da Mona Lisa
Dramatização
Interação Humano-Computador62
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
• Ritmo é a repetição compassada de tempos ou partes, 
semelhantes no que se refere à sua origem e desiguais 
quanto à sua função.
• A natureza é um exemplo perfeito e perpétuo de ritmo: 
– o dia e a noite, 
– o verão e o inverno, 
– o fluxo e o refluxo da maré, 
– a rotação e a translação da Terra, etc.
Ritmo
Interação Humano-Computador63
IHC
Ciência da Computação
UVA – Universidade Veiga de Almeida
• As funções fisiológicas e psicológicas humanas estão reguladas por um 
ritmo: 
– Ritmo compassado do coração; 
– Ritmo do aparelho respiratório; 
– Movimentos do corpo a andar. 
• Na ordem psicológica, analisemos o ritmo existente entre pensamento 
e sentimento:
– pensa-se alguma coisa e sente-se imediatamente; 
– ocorre uma associação de idéias, um ritmo entre as imagens 
criadas pelo cérebro e os sentidos despertados por essas imagens. 
• Uma obra artística, por ser criação humana e pelo fato do homem 
estar sujeito a um ritmo físico e psíquico, tem de refletir esse ritmo.
• Ritmo é a perfeita harmonia entre a organização do espaço e a criação 
de contrastes, entre a compensação equilibrada de volumes e a busca 
de uma originalidade da composição.
Ritmo