SlideShare ist ein Scribd-Unternehmen logo
1 von 76
Downloaden Sie, um offline zu lesen
Elementos relacionais
          Comunicação Visual - 8.11




sexta-feira, 26 de agosto de 11
Nas aulas anteriores, vimos elementos Básicos e Visuais.
          Hoje, veremos os elementos que necessitam de outros
          para comporem um layout, por isso, chamados de
          Elementos Relacionais (escala, equilíbrio, gravidade,
          direção e posição).




sexta-feira, 26 de agosto de 11
Escala




sexta-feira, 26 de agosto de 11
O que chamamos de escala? Escala pode ser objetiva e
          se referir às dimensões exatas de um objeto físico.




sexta-feira, 26 de agosto de 11
Em um mapa, a escala faz relação da imagem com um objeto real
          (Google, 2011)


sexta-feira, 26 de agosto de 11
Subjetivamente, ela alude à impressão que alguém tem
          do tamanho de um objeto.




sexta-feira, 26 de agosto de 11
Em Shadow of Colossus, a escala é muito utilizada para demonstrar
          a diferença descomunal entre o protagonista e os colossos
          enfrentados. E aí, vai encarar? (Team Ico, 2005)
sexta-feira, 26 de agosto de 11
Dizemos que algo está fora de escala quando não há
          indícios que conectem a imagem a uma experiência
          vivida.




sexta-feira, 26 de agosto de 11
Como falamos antes, a escala é relativa, isso significa
          dizer que um objeto é maior ou menor dependendo do
          tamanho, da localização e da cor dos elementos ao
          redor.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
A ideia de profundidade está ligada à de escala. Quando
          temos um elemento na tela, não temos noção do quão
          profundo tal objeto está. No momento que adicionamos
          um outro elemento referencial, já podemos começar a
          explorar sua profundidade.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Pink Floyd (1969)

sexta-feira, 26 de agosto de 11
A falta de referenciais faz com que a escala de um objeto
          seja difícil de determinar, gerando confusão, mas
          também atraíndo olhares.




sexta-feira, 26 de agosto de 11
Fotografar pequenos objetos de muito perto e de um
          ângulo baixo cria a ilusão de monumentalidade.




sexta-feira, 26 de agosto de 11
O edifício desta estação elétrica em Utrecht, na Holanda, não tem
          janelas, nem portas para indicar sua escala em relação aos seres
          humanos ou tipos familiares de edifícios. (NL Architecs, 1998)
sexta-feira, 26 de agosto de 11
Cuidado ao escalonar!




sexta-feira, 26 de agosto de 11
Escalonar objetos pode transformar seu impacto na
          página ou tela. Cuidado! É fácil distorcer um elemento
          por escaloná-lo desproporcionalmente.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
A            A   A
sexta-feira, 26 de agosto de 11
AAAAA   A


sexta-feira, 26 de agosto de 11
Ritmo e Equilíbrio




sexta-feira, 26 de agosto de 11
Equilíbrio é uma condição humana. É um conforto
          estimado em nossa cultura e que acabamos por
          perceber em coisas que vemos, ouvimos, cheiramos,
          provamos, tocamos.




sexta-feira, 26 de agosto de 11
O equilíbrio age como uma baliza para a forma, a ancora
          e ativa elementos do espaço. Ele acontece quando o
          peso de uma ou mais coisas está distribuído igualmente
          ou proporcionalmente no espaço.




sexta-feira, 26 de agosto de 11
Equilíbrio simétrico
          Acontece quando os elementos de uma composição são
          os mesmos em ambos os lados de uma linha axial.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Contemplation - David Lanham

sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
A inércia inerente à simetria pode ser problemática
          quanto aos objetivos da comunicação desejada. O
          observador normalmente evitará o material e fugirá
          rapidamente uma reflexão intelectual aprofundada.




sexta-feira, 26 de agosto de 11
Equilíbrio assimétrico
          Em vez de preocupar-se com imagens reflexas em
          ambos os lados do layout, o balanço assimétrico envolve
          objetos de diferentes tamanhos, formas, tonalidades ou
          posicionamento.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Starry Night - Van Gogh (1889)
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Composições assimétricas provocam maior
          envolvimento, exigem que o olho se mova mais. Tornar
          diferentes todas as proporções entre e em volta de
          elementos minimiza a possibilidade de simetria.




sexta-feira, 26 de agosto de 11
Gravidade




sexta-feira, 26 de agosto de 11
Como já falado, as experiências humanas são
          comumente levadas às telas e páginas para criar
          sensações diversas. A gravidade é uma delas.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Direção




sexta-feira, 26 de agosto de 11
A ideia de direção, como vimos quando estudamos
          retas, ajuda a criar ritmo nas composições.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Posição




sexta-feira, 26 de agosto de 11
Dependendo da forma em que o objeto é posicionado na
          tela, ele assume um significa diferente, criando ou
          reforçando determinados sentidos.




sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
sexta-feira, 26 de agosto de 11
Bibliografia




sexta-feira, 26 de agosto de 11
BEAIRD, Jason. Princípios do Web Design Maravilhoso. Alta Books:
                Rio de Janeiro, 2008.

                Lupton, Ellen. Novos Fundamentos do Design. São Paulo: Cosac
                Naify, 2008.

                Samara, Timothy. Elementos do Design: guia do estilo gráfico. Porto
                Alegre: Bookman, 2010.




sexta-feira, 26 de agosto de 11
Elementos relacionais
          eduardonovais@virtual.ufc.br




sexta-feira, 26 de agosto de 11

Weitere ähnliche Inhalte

Was ist angesagt? (20)

Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2Alfabetismo visual elementos_sintaticos2
Alfabetismo visual elementos_sintaticos2
 
A cor
A corA cor
A cor
 
1. Aula Teoria das Cores
1. Aula Teoria das Cores1. Aula Teoria das Cores
1. Aula Teoria das Cores
 
Perspectiva
PerspectivaPerspectiva
Perspectiva
 
Teoria das Cores: natureza, classificação e características.
Teoria das Cores: natureza, classificação e características.Teoria das Cores: natureza, classificação e características.
Teoria das Cores: natureza, classificação e características.
 
A linguagem visual
A linguagem visualA linguagem visual
A linguagem visual
 
Aula 2 composição visual
Aula  2 composição visualAula  2 composição visual
Aula 2 composição visual
 
Planos e ângulos
Planos e ângulosPlanos e ângulos
Planos e ângulos
 
Arte e corpo
Arte e corpoArte e corpo
Arte e corpo
 
Elementos visuais I
Elementos visuais IElementos visuais I
Elementos visuais I
 
Conceito de Ponto, Linha e Plano
Conceito de Ponto, Linha e PlanoConceito de Ponto, Linha e Plano
Conceito de Ponto, Linha e Plano
 
Módulo 1 - Design gráfico
Módulo 1 - Design gráficoMódulo 1 - Design gráfico
Módulo 1 - Design gráfico
 
Percepção visual
Percepção visualPercepção visual
Percepção visual
 
Fundamentos design grafico | Insper
Fundamentos design grafico | InsperFundamentos design grafico | Insper
Fundamentos design grafico | Insper
 
Fotografia elementos visuais
Fotografia   elementos visuaisFotografia   elementos visuais
Fotografia elementos visuais
 
Gestalt - Teoria do Design
Gestalt - Teoria do DesignGestalt - Teoria do Design
Gestalt - Teoria do Design
 
Teoria das cores
Teoria das coresTeoria das cores
Teoria das cores
 
Perspectiva
PerspectivaPerspectiva
Perspectiva
 
Módulo 1 | Fotografia Digital | 4. Composição
Módulo 1 | Fotografia Digital | 4. ComposiçãoMódulo 1 | Fotografia Digital | 4. Composição
Módulo 1 | Fotografia Digital | 4. Composição
 
Direção de arte
Direção de arteDireção de arte
Direção de arte
 

Andere mochten auch

Mkt de serviços e necessidades relacionais
Mkt de serviços e necessidades relacionaisMkt de serviços e necessidades relacionais
Mkt de serviços e necessidades relacionaisDaniel Antunes
 
Ferramenta de Apoio a UML e Modelo de Bases Relacionais
Ferramenta de Apoio a UML e Modelo de Bases RelacionaisFerramenta de Apoio a UML e Modelo de Bases Relacionais
Ferramenta de Apoio a UML e Modelo de Bases RelacionaisCapgemini
 
UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1
UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1
UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1EvelinePrado
 
Estética Aplicada ao Design - Aula 6
Estética Aplicada ao Design - Aula 6Estética Aplicada ao Design - Aula 6
Estética Aplicada ao Design - Aula 6José Pirauá
 
Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...
Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...
Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...Rafael Tedesco
 
Fundamentos da linguagem visual
Fundamentos da linguagem visualFundamentos da linguagem visual
Fundamentos da linguagem visualItamir Beserra
 
Fatores que influenciam o comportamento do consumidor
Fatores que influenciam o comportamento do consumidorFatores que influenciam o comportamento do consumidor
Fatores que influenciam o comportamento do consumidorCésar William
 
Teorias da Aprendizagem e Modelos Pedagógicos
Teorias da Aprendizagem e Modelos PedagógicosTeorias da Aprendizagem e Modelos Pedagógicos
Teorias da Aprendizagem e Modelos PedagógicosInstituto Consciência GO
 
Comunicação Institucional
Comunicação InstitucionalComunicação Institucional
Comunicação InstitucionalClaudio Toldo
 

Andere mochten auch (10)

Mkt de serviços e necessidades relacionais
Mkt de serviços e necessidades relacionaisMkt de serviços e necessidades relacionais
Mkt de serviços e necessidades relacionais
 
Ferramenta de Apoio a UML e Modelo de Bases Relacionais
Ferramenta de Apoio a UML e Modelo de Bases RelacionaisFerramenta de Apoio a UML e Modelo de Bases Relacionais
Ferramenta de Apoio a UML e Modelo de Bases Relacionais
 
UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1
UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1
UNIESP 2010_Aula 2 _Comportamento Do Consumidor Parte 1
 
Estética Aplicada ao Design - Aula 6
Estética Aplicada ao Design - Aula 6Estética Aplicada ao Design - Aula 6
Estética Aplicada ao Design - Aula 6
 
Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...
Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...
Estudo de Caso de Comunicação Institucional da Coca-Cola - Sharing Can - Comu...
 
Marketing de Serviços
Marketing de ServiçosMarketing de Serviços
Marketing de Serviços
 
Fundamentos da linguagem visual
Fundamentos da linguagem visualFundamentos da linguagem visual
Fundamentos da linguagem visual
 
Fatores que influenciam o comportamento do consumidor
Fatores que influenciam o comportamento do consumidorFatores que influenciam o comportamento do consumidor
Fatores que influenciam o comportamento do consumidor
 
Teorias da Aprendizagem e Modelos Pedagógicos
Teorias da Aprendizagem e Modelos PedagógicosTeorias da Aprendizagem e Modelos Pedagógicos
Teorias da Aprendizagem e Modelos Pedagógicos
 
Comunicação Institucional
Comunicação InstitucionalComunicação Institucional
Comunicação Institucional
 

Mehr von Eduardo Novais

[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismoEduardo Novais
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces onlineEduardo Novais
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobileEduardo Novais
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - DadaismoEduardo Novais
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02Eduardo Novais
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01Eduardo Novais
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplinaEduardo Novais
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfacesEduardo Novais
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visualEduardo Novais
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na webEduardo Novais
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplinaEduardo Novais
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - coresEduardo Novais
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com VisualEduardo Novais
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre gridsEduardo Novais
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)Eduardo Novais
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - gridsEduardo Novais
 

Mehr von Eduardo Novais (20)

16 - design de marcas
16 - design de marcas16 - design de marcas
16 - design de marcas
 
15 - escolha de tipos
15 - escolha de tipos15 - escolha de tipos
15 - escolha de tipos
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 
[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo[HAD2012] 13 - construtivismo
[HAD2012] 13 - construtivismo
 
[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online[dig2012] 11 - interfaces online
[dig2012] 11 - interfaces online
 
[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile[dig2012] 12 - Interfaces mobile
[dig2012] 12 - Interfaces mobile
 
[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo[HAD2012] 11 - Dadaismo
[HAD2012] 11 - Dadaismo
 
[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo[HA2012] 06 - Cubismo
[HA2012] 06 - Cubismo
 
[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02[HA2012] 03 - Raízes da arte e do design - 02
[HA2012] 03 - Raízes da arte e do design - 02
 
[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01[HA2012] 02 - Raízes da arte e do design - 01
[HA2012] 02 - Raízes da arte e do design - 01
 
[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina[ha2012] 01 - Apresentação da disciplina
[ha2012] 01 - Apresentação da disciplina
 
[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces[dig2012] 02 - História do design de interfaces
[dig2012] 02 - História do design de interfaces
 
[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual[dig2012] 04 - Hierarquia visual
[dig2012] 04 - Hierarquia visual
 
[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web[dig2012] All type e tipografia na web
[dig2012] All type e tipografia na web
 
[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina[DIG2012_1] Apresentação da disciplina
[DIG2012_1] Apresentação da disciplina
 
[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores[cv - 2011.2] 17 - cores
[cv - 2011.2] 17 - cores
 
[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual[cv - 2011.2] Orientações - trabalho final de Com Visual
[cv - 2011.2] Orientações - trabalho final de Com Visual
 
[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids[cv - 2011.2] 16 - dicas finais sobre grids
[cv - 2011.2] 16 - dicas finais sobre grids
 
[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)[cv - 2011.2] 16 - grids (cont)
[cv - 2011.2] 16 - grids (cont)
 
[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids[cv - 2011.2] 14 - grids
[cv - 2011.2] 14 - grids
 

[cv - 2011.2] 04-elementos relacionais