SlideShare uma empresa Scribd logo
1 de 90
Baixar para ler offline
Elementos da linguagem visual
       Comunicação Visual - 8.11




sexta-feira, 19 de agosto de 11
Vamos começar?




sexta-feira, 19 de agosto de 11
Antes de começarmos qualquer coisa em comunicação visual,
           precisamos entender quais são os elementos que compõem essa tal
           linguagem.

           Começaremos estudando os elementos mais básicos: Ponto, Linha e
           Plano.




sexta-feira, 19 de agosto de 11
1 Elementos Básicos




sexta-feira, 19 de agosto de 11
“O ponto, a linha e o plano compõem os alicerces do design. Partindo
           desses elementos, os designers criam imagens, ícones, texturas,
           padrões, diagramas, animações e sistemas tipográficos.”
           (Lupton & Phillips, 2008)




sexta-feira, 19 de agosto de 11
Diagramas constroem relações entre
         elementos que utilizam pontos, linhas e planos
         para conectar dados. (Web Trend Map, 2007)


sexta-feira, 19 de agosto de 11
Diagramas constroem relações entre
         elementos que utilizam pontos, linhas e planos
         para conectar dados. (Web Trend Map, 2007)


sexta-feira, 19 de agosto de 11
Texturas e padrões são contruídos a partir de
                                  grandes grupos de pontos e linhas que se
                                  repetem...

sexta-feira, 19 de agosto de 11
... revezando-se ou interagindo na formação de
                                  superfícies singulares e atraentes.


sexta-feira, 19 de agosto de 11
a
         A tipografia compreende letras individuais que
         se comportam como pontos.


sexta-feira, 19 de agosto de 11
...tais pontos compõem linhas e manchas de
         texto. (CLM/BBDO, 2011)



sexta-feira, 19 de agosto de 11
A fotografia, inventada no início do século XIX, capta a luz refletida
           automaticamente. As variações tonais da fotografia eliminaram a
           trama intermediária de pontos e linhas.




sexta-feira, 19 de agosto de 11
sexta-feira, 19 de agosto de 11
sexta-feira, 19 de agosto de 11
sexta-feira, 19 de agosto de 11
1.1 Ponto




sexta-feira, 19 de agosto de 11
Em termos geométricos, um ponto é uma coordenada x, y.




sexta-feira, 19 de agosto de 11
Graficamente, ele toma forma como um sinal, uma marca visível.




sexta-feira, 19 de agosto de 11
O ponto
                                  simultaneamente
                                  contrai-se para dentro e
                                  irradia para fora.




sexta-feira, 19 de agosto de 11
Quando o ponto entra no espaço, uma relação imediata entre as partes é
     estabelecida.

sexta-feira, 19 de agosto de 11
Quando o ponto entra no espaço, uma relação imediata entre as partes é
     estabelecida.

sexta-feira, 19 de agosto de 11
O ponto quebra o espaço de um modo neutro, sendo leve e internamente
     balanceado.

sexta-feira, 19 de agosto de 11
A proporção do ponto com a sua área circulante é a consideração mais importante.


sexta-feira, 19 de agosto de 11
A proporção do ponto com a sua área circulante é a consideração mais importante.


sexta-feira, 19 de agosto de 11
Outra consideração importante é a sua posição em relação às margens. O ponto
     localizado no centro está assentado, confortável e estático, mas domina o espaço
     circundante.
sexta-feira, 19 de agosto de 11
À medida que ele se move do centro, há um deslocamento na dominância - o fundo
     se impõe e surge tensão.

sexta-feira, 19 de agosto de 11
À medida que ele se move do centro, há um deslocamento na dominância - o fundo
     se impõe e surge tensão.

sexta-feira, 19 de agosto de 11
Um segundo elemento desvia a atenção da relação com o espaço para a interação
     entre os dois pontos

sexta-feira, 19 de agosto de 11
Um segundo elemento desvia a atenção da relação com o espaço para a interação
     entre os dois pontos

sexta-feira, 19 de agosto de 11
c




     À medida que os pontos se aproximam, aumenta a tensão entre eles.


sexta-feira, 19 de agosto de 11
c




     À medida que os pontos se aproximam, aumenta a tensão entre eles.


sexta-feira, 19 de agosto de 11
Se o espaço entre os pontos for quase nulo, sua presença assume maior
     importância do que os próprios pontos.

sexta-feira, 19 de agosto de 11
Se os pontos ficarem sobrepostos, principalmente se forem de tamanhos
     diferentes, a tensão é de certo modo aliviada e surge a dicotomia entre o plano e a
     aparência tridimensional.
sexta-feira, 19 de agosto de 11
Quanto mais próximos os pontos estiverem, mais potente será o senso de
     identidade como objeto.
sexta-feira, 19 de agosto de 11
Quanto mais distantes, mais evidente será o sentido de estrutura induzido pelo
     caminho invisível entre eles.
sexta-feira, 19 de agosto de 11
Exemplos




sexta-feira, 19 de agosto de 11
Um prédio visto por um satélite pode ser
         considerado um ponto. (Google Maps, 2011)



sexta-feira, 19 de agosto de 11
La Parade (Georges Seurat, 1889)


sexta-feira, 19 de agosto de 11
Port de Marseilles (Paul Signac, 1906)


sexta-feira, 19 de agosto de 11
Marlene Dietrich (Vik Muniz, 2004)


sexta-feira, 19 de agosto de 11
Snopake: Lennon
                                  (Impact BBDO Dubai, 2011)

sexta-feira, 19 de agosto de 11
El país con tacto: Forlan
       (Punto Ogilvy, 2011)

sexta-feira, 19 de agosto de 11
VW Polo BlueMotion: Ocean
       (Grabarz & Partner, 2011)

sexta-feira, 19 de agosto de 11
Adventure
                                   (Atari, 1979)


sexta-feira, 19 de agosto de 11
Pac-Man
                                  (Atari, 1980)


sexta-feira, 19 de agosto de 11
Mario
                                  (Shigeru Miyamoto, 1981)


sexta-feira, 19 de agosto de 11
1.2 Linha




sexta-feira, 19 de agosto de 11
Uma linha pode ser compreendida como uma série infinita de pontos,
           ou a conexão entre dois pontos ou, ainda, o trajeto de um ponto em
           movimento.




sexta-feira, 19 de agosto de 11
O caráter principal da linha é a conexão. Ela se apresenta como:


       • Invisível, definida pelo efeito de atração entre dois pontos, ou;

       • Visível como um objeto concreto, viajando para frente e para trás entre
           o ponto inicial.




sexta-feira, 19 de agosto de 11
A idéia principal da linearidade é a de movimento e direção. Uma linha é
           dinâmica, não estática.


           O ponto cria foco, a linha separa espaços, cria barreiras, cerca e limita.




sexta-feira, 19 de agosto de 11
Uma linha fina não contém centro ou massa e expressa apenas direção e um efeito
     no espaço que a cerca.

sexta-feira, 19 de agosto de 11
Quebrar a linha aumenta a atividade superficial sem desviar a atenção de seu
     movimento e direção.

sexta-feira, 19 de agosto de 11
Várias linhas finas em conjunto criam uma textura, semelhante à criada por um
     agrupamento denso de pontos de tamanho semelhante.

sexta-feira, 19 de agosto de 11
Separar as linhas aumenta a atenção para suas identidades e também para os
     intervalos entre elas.

sexta-feira, 19 de agosto de 11
Uma mudança de peso entre um grupo de linhas, junto com o intervalo entre elas,
     cria ilusão de profundidade.

sexta-feira, 19 de agosto de 11
Se algumas linhas cruzarem os outras, a percepção de profundidade é realçada.


sexta-feira, 19 de agosto de 11
Se algumas linhas cruzarem os outras, a percepção de profundidade é realçada -
     ainda mais se o seu peso também for diferenciado.

sexta-feira, 19 de agosto de 11
Duas linhas muito próximas criam uma terceira linha, negativa. Esse mesmo efeito é
     conseguido com um elemento positivo sobre o preto único.

sexta-feira, 19 de agosto de 11
A junção de duas linhas torna-se o ponto inicial dos dois movimentos.
     Múltiplas junções criam senso de direção alterada de um movimento.

sexta-feira, 19 de agosto de 11
Linhas que entram e saem de um formato reforçam o sentido de seu movimento.


sexta-feira, 19 de agosto de 11
Se os pontos iniciais ou finais estiverem contido no formato a direção muda para
     específica e resulta em um aumento significativo da tensão com o espaço ou formas
     em volta.
sexta-feira, 19 de agosto de 11
Um conjunto de linhas produz ritmo. Igualmente espaças, um conjunto de linhas
     produz um tempo regular, estático; diferenças na medida de comprimento produzem
     tempo dinâmico.
sexta-feira, 19 de agosto de 11
Exemplos




sexta-feira, 19 de agosto de 11
Linhas contém grande expressividade gráfica e
         muita energia.



sexta-feira, 19 de agosto de 11
Self-Portrait with Grey Felt Hat
                                                     (Van Gogh, 1887)


sexta-feira, 19 de agosto de 11
Women going to the market of Chimbote.
       (Sebastião Salgado, 1998)

sexta-feira, 19 de agosto de 11
Coal miniers
       (Sebastião Salgado, 1989)

sexta-feira, 19 de agosto de 11
Nanmee Horse: Contour, 1
                                        (Access & Associates, 2011)


sexta-feira, 19 de agosto de 11
Bon Voyage Magazine: Flag
        (LaBase, 2011)



sexta-feira, 19 de agosto de 11
Pong (Nolan Bushnell e Ted Dabney, 1972)


sexta-feira, 19 de agosto de 11
Enduro (Activision, 1983)


sexta-feira, 19 de agosto de 11
1.3 Plano




sexta-feira, 19 de agosto de 11
O plano é uma superfície contínua que se estende em altura e largura.




sexta-feira, 19 de agosto de 11
O plano, assim, nada mais é que um grande ponto cujo contorno
           externo torna-se um atributo importante.




sexta-feira, 19 de agosto de 11
Uma superfície plana será mais ou menos definível como ponto dependendo do
     volume de espaço que a circunda.

sexta-feira, 19 de agosto de 11
O plano pode ser paralelo à superfície da imagem ou inclinar-se e recuar no espaço.


sexta-feira, 19 de agosto de 11
Um plano com contorno simples parece mais denso do que um plano com contorno
     complexo.

sexta-feira, 19 de agosto de 11
Exemplos




sexta-feira, 19 de agosto de 11
McDonald's Happy Meal: Batman.
       (Leo Burnett, 2010)

sexta-feira, 19 de agosto de 11
K-nino: Happyness
                                      (AthosTBWA, 2010)


sexta-feira, 19 de agosto de 11
Frostbite
                                  (Activision, 1983)


sexta-feira, 19 de agosto de 11
Double Dragon
                                  (Access & Associates, 1988)


sexta-feira, 19 de agosto de 11
Echochrome
                                  (Game Yarouze, 2008)


sexta-feira, 19 de agosto de 11
Bibliografia




sexta-feira, 19 de agosto de 11
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.

           Ads of The World. Disponível em: http://adsoftheworld.com/




sexta-feira, 19 de agosto de 11
Exercício




sexta-feira, 19 de agosto de 11
Definição
           O trabalho consiste na busca e análise de imagens de páginas web ou
           jogos eletrônicos que sirvam como exemplo do bom uso dos conceitos
           vistos na aula: ponto, linha e plano.




sexta-feira, 19 de agosto de 11
Desenvolvimento:
           O trabalho é individual e cada aluno deverá coletar 2 imagens para
           cada conceito - 6 imagens ao total - e, além de descrever como cada
           conceito for usado, descrever sobre equilíbrio, tensões e dinâmicas
           existentes em cada tela.




sexta-feira, 19 de agosto de 11
Entrega:
              Data de entrega:    26/08
              Enviar para: comvisual20112@gmail.com
              Título do E-mail: Trabalho 01 - Turma <XX> - <Nome>
              Formato: Word (.doc)




sexta-feira, 19 de agosto de 11
Elementos da linguagem visual
       eduardonovais@virtual.ufc.br




sexta-feira, 19 de agosto de 11

Mais conteúdo relacionado

Mais de Eduardo 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
 
[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áureaEduardo Novais
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativoEduardo Novais
 
[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visualEduardo Novais
 
[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangramEduardo Novais
 
[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestaltEduardo Novais
 
[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagemEduardo Novais
 
[cv - 2011.2] 04-elementos relacionais
[cv - 2011.2] 04-elementos relacionais[cv - 2011.2] 04-elementos relacionais
[cv - 2011.2] 04-elementos relacionaisEduardo Novais
 

Mais de Eduardo Novais (20)

[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] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea[cv - 2011.2] 13 - layout e proporção áurea
[cv - 2011.2] 13 - layout e proporção áurea
 
[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo[cv - 2011.2] 10 - Plano negativo
[cv - 2011.2] 10 - Plano negativo
 
[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual[cv - 2011.2] 12 - organizacao visual
[cv - 2011.2] 12 - organizacao visual
 
[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram[cv - 2011.2] 08 - tangram
[cv - 2011.2] 08 - tangram
 
[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt[cv - 2011.2] 07 - gestalt
[cv - 2011.2] 07 - gestalt
 
[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem[cv - 2011.2] 05-níveis de linguagem
[cv - 2011.2] 05-níveis de linguagem
 
[cv - 2011.2] 04-elementos relacionais
[cv - 2011.2] 04-elementos relacionais[cv - 2011.2] 04-elementos relacionais
[cv - 2011.2] 04-elementos relacionais
 

Último

Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfAnnaCarolina242437
 
I.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCCI.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCCJudite Silva
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfAnnaCarolina242437
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAnnaCarolina242437
 
I.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptxI.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptxJudite Silva
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...AnnaCarolina242437
 
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaaGESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaayasminlarissa371
 
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAnnaCarolina242437
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024CarolTelles6
 

Último (9)

Simulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdfSimulado Enem Bernoulli-Primeiro dia.pdf
Simulado Enem Bernoulli-Primeiro dia.pdf
 
I.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCCI.1 Boas Práticas fitossanitarias.pptxCC
I.1 Boas Práticas fitossanitarias.pptxCC
 
Simulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdfSimulado Bernoulli Enem_2-Primeiro dia.pdf
Simulado Bernoulli Enem_2-Primeiro dia.pdf
 
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdfAVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
AVALIA_CHUM_EFI_5 ANO_AV_2SEMESTRE_2023.pdf
 
I.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptxI.2 Meios de Proteção das culturass.pptx
I.2 Meios de Proteção das culturass.pptx
 
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
Exame De Suficiencia Para Obtencao Do Titulo De Especialista Em Medicina De F...
 
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaaGESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
GESTÃO FINANceiraaaaaaaaaaaaaaaaaaaaaaaaaa
 
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdfAntonio Pereira_Vale+comunidade_set a dez_2023.pdf
Antonio Pereira_Vale+comunidade_set a dez_2023.pdf
 
MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024MARANATA - 19_04_2024.pptx | Maranata 2024
MARANATA - 19_04_2024.pptx | Maranata 2024
 

[cv - 2011.2] 02 - Elementos Básicos

  • 1. Elementos da linguagem visual Comunicação Visual - 8.11 sexta-feira, 19 de agosto de 11
  • 3. Antes de começarmos qualquer coisa em comunicação visual, precisamos entender quais são os elementos que compõem essa tal linguagem. Começaremos estudando os elementos mais básicos: Ponto, Linha e Plano. sexta-feira, 19 de agosto de 11
  • 5. “O ponto, a linha e o plano compõem os alicerces do design. Partindo desses elementos, os designers criam imagens, ícones, texturas, padrões, diagramas, animações e sistemas tipográficos.” (Lupton & Phillips, 2008) sexta-feira, 19 de agosto de 11
  • 6. Diagramas constroem relações entre elementos que utilizam pontos, linhas e planos para conectar dados. (Web Trend Map, 2007) sexta-feira, 19 de agosto de 11
  • 7. Diagramas constroem relações entre elementos que utilizam pontos, linhas e planos para conectar dados. (Web Trend Map, 2007) sexta-feira, 19 de agosto de 11
  • 8. Texturas e padrões são contruídos a partir de grandes grupos de pontos e linhas que se repetem... sexta-feira, 19 de agosto de 11
  • 9. ... revezando-se ou interagindo na formação de superfícies singulares e atraentes. sexta-feira, 19 de agosto de 11
  • 10. a A tipografia compreende letras individuais que se comportam como pontos. sexta-feira, 19 de agosto de 11
  • 11. ...tais pontos compõem linhas e manchas de texto. (CLM/BBDO, 2011) sexta-feira, 19 de agosto de 11
  • 12. A fotografia, inventada no início do século XIX, capta a luz refletida automaticamente. As variações tonais da fotografia eliminaram a trama intermediária de pontos e linhas. sexta-feira, 19 de agosto de 11
  • 13. sexta-feira, 19 de agosto de 11
  • 14. sexta-feira, 19 de agosto de 11
  • 15. sexta-feira, 19 de agosto de 11
  • 16. 1.1 Ponto sexta-feira, 19 de agosto de 11
  • 17. Em termos geométricos, um ponto é uma coordenada x, y. sexta-feira, 19 de agosto de 11
  • 18. Graficamente, ele toma forma como um sinal, uma marca visível. sexta-feira, 19 de agosto de 11
  • 19. O ponto simultaneamente contrai-se para dentro e irradia para fora. sexta-feira, 19 de agosto de 11
  • 20. Quando o ponto entra no espaço, uma relação imediata entre as partes é estabelecida. sexta-feira, 19 de agosto de 11
  • 21. Quando o ponto entra no espaço, uma relação imediata entre as partes é estabelecida. sexta-feira, 19 de agosto de 11
  • 22. O ponto quebra o espaço de um modo neutro, sendo leve e internamente balanceado. sexta-feira, 19 de agosto de 11
  • 23. A proporção do ponto com a sua área circulante é a consideração mais importante. sexta-feira, 19 de agosto de 11
  • 24. A proporção do ponto com a sua área circulante é a consideração mais importante. sexta-feira, 19 de agosto de 11
  • 25. Outra consideração importante é a sua posição em relação às margens. O ponto localizado no centro está assentado, confortável e estático, mas domina o espaço circundante. sexta-feira, 19 de agosto de 11
  • 26. À medida que ele se move do centro, há um deslocamento na dominância - o fundo se impõe e surge tensão. sexta-feira, 19 de agosto de 11
  • 27. À medida que ele se move do centro, há um deslocamento na dominância - o fundo se impõe e surge tensão. sexta-feira, 19 de agosto de 11
  • 28. Um segundo elemento desvia a atenção da relação com o espaço para a interação entre os dois pontos sexta-feira, 19 de agosto de 11
  • 29. Um segundo elemento desvia a atenção da relação com o espaço para a interação entre os dois pontos sexta-feira, 19 de agosto de 11
  • 30. c À medida que os pontos se aproximam, aumenta a tensão entre eles. sexta-feira, 19 de agosto de 11
  • 31. c À medida que os pontos se aproximam, aumenta a tensão entre eles. sexta-feira, 19 de agosto de 11
  • 32. Se o espaço entre os pontos for quase nulo, sua presença assume maior importância do que os próprios pontos. sexta-feira, 19 de agosto de 11
  • 33. Se os pontos ficarem sobrepostos, principalmente se forem de tamanhos diferentes, a tensão é de certo modo aliviada e surge a dicotomia entre o plano e a aparência tridimensional. sexta-feira, 19 de agosto de 11
  • 34. Quanto mais próximos os pontos estiverem, mais potente será o senso de identidade como objeto. sexta-feira, 19 de agosto de 11
  • 35. Quanto mais distantes, mais evidente será o sentido de estrutura induzido pelo caminho invisível entre eles. sexta-feira, 19 de agosto de 11
  • 37. Um prédio visto por um satélite pode ser considerado um ponto. (Google Maps, 2011) sexta-feira, 19 de agosto de 11
  • 38. La Parade (Georges Seurat, 1889) sexta-feira, 19 de agosto de 11
  • 39. Port de Marseilles (Paul Signac, 1906) sexta-feira, 19 de agosto de 11
  • 40. Marlene Dietrich (Vik Muniz, 2004) sexta-feira, 19 de agosto de 11
  • 41. Snopake: Lennon (Impact BBDO Dubai, 2011) sexta-feira, 19 de agosto de 11
  • 42. El país con tacto: Forlan (Punto Ogilvy, 2011) sexta-feira, 19 de agosto de 11
  • 43. VW Polo BlueMotion: Ocean (Grabarz & Partner, 2011) sexta-feira, 19 de agosto de 11
  • 44. Adventure (Atari, 1979) sexta-feira, 19 de agosto de 11
  • 45. Pac-Man (Atari, 1980) sexta-feira, 19 de agosto de 11
  • 46. Mario (Shigeru Miyamoto, 1981) sexta-feira, 19 de agosto de 11
  • 47. 1.2 Linha sexta-feira, 19 de agosto de 11
  • 48. Uma linha pode ser compreendida como uma série infinita de pontos, ou a conexão entre dois pontos ou, ainda, o trajeto de um ponto em movimento. sexta-feira, 19 de agosto de 11
  • 49. O caráter principal da linha é a conexão. Ela se apresenta como: • Invisível, definida pelo efeito de atração entre dois pontos, ou; • Visível como um objeto concreto, viajando para frente e para trás entre o ponto inicial. sexta-feira, 19 de agosto de 11
  • 50. A idéia principal da linearidade é a de movimento e direção. Uma linha é dinâmica, não estática. O ponto cria foco, a linha separa espaços, cria barreiras, cerca e limita. sexta-feira, 19 de agosto de 11
  • 51. Uma linha fina não contém centro ou massa e expressa apenas direção e um efeito no espaço que a cerca. sexta-feira, 19 de agosto de 11
  • 52. Quebrar a linha aumenta a atividade superficial sem desviar a atenção de seu movimento e direção. sexta-feira, 19 de agosto de 11
  • 53. Várias linhas finas em conjunto criam uma textura, semelhante à criada por um agrupamento denso de pontos de tamanho semelhante. sexta-feira, 19 de agosto de 11
  • 54. Separar as linhas aumenta a atenção para suas identidades e também para os intervalos entre elas. sexta-feira, 19 de agosto de 11
  • 55. Uma mudança de peso entre um grupo de linhas, junto com o intervalo entre elas, cria ilusão de profundidade. sexta-feira, 19 de agosto de 11
  • 56. Se algumas linhas cruzarem os outras, a percepção de profundidade é realçada. sexta-feira, 19 de agosto de 11
  • 57. Se algumas linhas cruzarem os outras, a percepção de profundidade é realçada - ainda mais se o seu peso também for diferenciado. sexta-feira, 19 de agosto de 11
  • 58. Duas linhas muito próximas criam uma terceira linha, negativa. Esse mesmo efeito é conseguido com um elemento positivo sobre o preto único. sexta-feira, 19 de agosto de 11
  • 59. A junção de duas linhas torna-se o ponto inicial dos dois movimentos. Múltiplas junções criam senso de direção alterada de um movimento. sexta-feira, 19 de agosto de 11
  • 60. Linhas que entram e saem de um formato reforçam o sentido de seu movimento. sexta-feira, 19 de agosto de 11
  • 61. Se os pontos iniciais ou finais estiverem contido no formato a direção muda para específica e resulta em um aumento significativo da tensão com o espaço ou formas em volta. sexta-feira, 19 de agosto de 11
  • 62. Um conjunto de linhas produz ritmo. Igualmente espaças, um conjunto de linhas produz um tempo regular, estático; diferenças na medida de comprimento produzem tempo dinâmico. sexta-feira, 19 de agosto de 11
  • 64. Linhas contém grande expressividade gráfica e muita energia. sexta-feira, 19 de agosto de 11
  • 65. Self-Portrait with Grey Felt Hat (Van Gogh, 1887) sexta-feira, 19 de agosto de 11
  • 66. Women going to the market of Chimbote. (Sebastião Salgado, 1998) sexta-feira, 19 de agosto de 11
  • 67. Coal miniers (Sebastião Salgado, 1989) sexta-feira, 19 de agosto de 11
  • 68. Nanmee Horse: Contour, 1 (Access & Associates, 2011) sexta-feira, 19 de agosto de 11
  • 69. Bon Voyage Magazine: Flag (LaBase, 2011) sexta-feira, 19 de agosto de 11
  • 70. Pong (Nolan Bushnell e Ted Dabney, 1972) sexta-feira, 19 de agosto de 11
  • 72. 1.3 Plano sexta-feira, 19 de agosto de 11
  • 73. O plano é uma superfície contínua que se estende em altura e largura. sexta-feira, 19 de agosto de 11
  • 74. O plano, assim, nada mais é que um grande ponto cujo contorno externo torna-se um atributo importante. sexta-feira, 19 de agosto de 11
  • 75. Uma superfície plana será mais ou menos definível como ponto dependendo do volume de espaço que a circunda. sexta-feira, 19 de agosto de 11
  • 76. O plano pode ser paralelo à superfície da imagem ou inclinar-se e recuar no espaço. sexta-feira, 19 de agosto de 11
  • 77. Um plano com contorno simples parece mais denso do que um plano com contorno complexo. sexta-feira, 19 de agosto de 11
  • 79. McDonald's Happy Meal: Batman. (Leo Burnett, 2010) sexta-feira, 19 de agosto de 11
  • 80. K-nino: Happyness (AthosTBWA, 2010) sexta-feira, 19 de agosto de 11
  • 81. Frostbite (Activision, 1983) sexta-feira, 19 de agosto de 11
  • 82. Double Dragon (Access & Associates, 1988) sexta-feira, 19 de agosto de 11
  • 83. Echochrome (Game Yarouze, 2008) sexta-feira, 19 de agosto de 11
  • 85. 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. Ads of The World. Disponível em: http://adsoftheworld.com/ sexta-feira, 19 de agosto de 11
  • 87. Definição O trabalho consiste na busca e análise de imagens de páginas web ou jogos eletrônicos que sirvam como exemplo do bom uso dos conceitos vistos na aula: ponto, linha e plano. sexta-feira, 19 de agosto de 11
  • 88. Desenvolvimento: O trabalho é individual e cada aluno deverá coletar 2 imagens para cada conceito - 6 imagens ao total - e, além de descrever como cada conceito for usado, descrever sobre equilíbrio, tensões e dinâmicas existentes em cada tela. sexta-feira, 19 de agosto de 11
  • 89. Entrega: Data de entrega: 26/08 Enviar para: comvisual20112@gmail.com Título do E-mail: Trabalho 01 - Turma <XX> - <Nome> Formato: Word (.doc) sexta-feira, 19 de agosto de 11
  • 90. Elementos da linguagem visual eduardonovais@virtual.ufc.br sexta-feira, 19 de agosto de 11