Aula 1 analise

Prévia do material em texto

Princípios Básicos do Design
Análise Grá�ca
Princípios Básicos do Design
Contraste
O objetivo do contraste é evitar elementos meramente similares em uma página. 
O contraste costuma ser a mais importante atração visual 
de uma página.
Os elementos contrastantes nunca deveriam 
confundir o leitor ou criar um foco que não 
seja o correto.
Princípios Básicos do Design
Contraste
Boa diagramação mas
nada atrai o olhar
Princípios Básicos do Design
Contraste
Os olhos se �xam mais
nesta página do que na
anterior
Princípios Básicos do Design
Contraste
Currículo típico | nada
chama atenção nesta
diagramação
Princípios Básicos do Design
Contraste
Um bom alinhamento não
signi�ca que tudo esteja alinhado
num mesmo canto | Bold para
destacar os tópicos
Princípios Básicos do Design
Repetição
Repita os elementos visuais do design e espalhe-os pelo material.
Cor | Forma | Textura | Espessura | Tamanhos
O propósito básico da repetição é uni�car e 
acrescentar interesse visual. Algum aspecto 
do design deve se repetir no material inteiro.
Princípios Básicos do Design
Repetição
Escolha um elemento consistente, como
uma fonte para os títulos e reforce-o |
Unidade Visual
Princípios Básicos do Design
Alinhamento
Nada deve ser colocado arbitrariamente em uma página. Cada elemento deve ter uma 
ligação visual com outro elemento da página. 
Isso cria uma aparência limpa, so�sticada e suave.
O propósito básico do alinhamento é o de 
uni�car e organizar a página. 
Princípios Básicos do Design
Alinhamento
A opção não é ruim, mas é
monótona
Alinhamento à esquerda gera
maior so�sticação
Princípios Básicos do Design
Alinhamento
Você consegue visualizar todos
os lugares nos quais os itens
poderiam estar alinhados?
Princípios Básicos do Design
Alinhamento
Compare este layout 
com o anterior
Princípios Básicos do Design
Proximidade
Itens relacionados entre si deveriam ser agrupados. Quando vários itens estão próximos, 
tornam-se uma unidade visual e não várias unidades individualizadas. 
Organiza as informações e reduz a desordem.
O propósito básico da proximidade é o de 
organizar. 
Princípios Básicos do Design
Proximidade
O seu olho parou cinco vezes!
Cinco pontos de leitura
Princípios Básicos do Design
Proximidade
Elementos agrupados | hierarquia
de informações | lógica visual
Princípios Básicos do Design
Proximidade
Entediante e difícil de encontrar
as informações
Princípios Básicos do Design
Proximidade
Informações agrupadas 
por assunto
Princípios Básicos do Design
Proximidade
Princípios Básicos do Design
Proximidade
Princípios Básicos do Design
Proximidade
Princípios Básicos do Design
Proximidade
Ponto de interesse
Também chamado de centro ótico, não pode ser considerado o centro geométrico, que é
determinado pelo cruzamento das diagonais do retângulo. O centro real de um projeto
grá�co está acima do centro geométrico.
Ponto de interesse
Um projeto e�ciente guia o leitor através da diagramação.
Ponto de interesse
Proporção
Retângulo Áureo e Retângulo Dinâmico
São retângulos que crescem em proporção descontínua, gerados pelos 
rebatimentos das diagonais.
Proporção
Um quadrado e um retângulo têm uma relação constante: se um quadrado é
adicionado ao lado mais longo de um retângulo ou formado dentro deste,
uma nova seção áurea é criada.
A proporção áurea é uma constante algébrica denotada pela letra grega ᵠ (phi) e com o valor 
arredondado a três casas decimais de 1,618.
Série de Fibonacci
0, 1, 1, 2, 3, 5, 8, 13, 21 ...
Cada número é a soma dos dois números precedentes - in�nito
Proporção
Proporção
Proporção
Proporção
Proporção
Formatos de Papéis
Alfabetismo Visual
O Alfabetismo Visual é o instrumento utilizado para compreendermos, aquilo que 
conhecemos como, a Linguagem Visual.
O que vemos é uma parte fundamental do que sabemos, e o Alfabetismo Visual pode 
nos ajudar a ver o que vemos e a saber o que sabemos.
En�m, o Alfabetismo Visual é ler uma imagem
Linguagem | De�nição
Linguagem é simplesmente um 
recurso de comunicação próprio do 
homem, que pode
ser verbal ou não-verbal.
Verbal = fala, escrita
Não-verbal = signos visuais
(ex.: imagens, gestos, objeos 
e cores)
Linguagem | De�nição
Linguagem Visual | De�nição
Linguagem visual é uma linguagem 
não-verbal que compreende várias 
formas de expressão construídas a 
partir de elementos visuais.
Formas de expressão - pintura, ilustração,
fotogra�a, vídeo, esculturas, gesto e dança
Elementos visuais - ponto, linha, forma,
tom, cor, textura, escala, dimensão,
direção e movimento
Linguagem Visual | Alfabetismo Visual
Chamamos Alfabetização visual a 
sensibilidade à forma como as
imagens são utilizadas e manipuladas
para conter mensagens precisas
e reunirem informações.
A Alfabetização visual é
importante para a formação
do olhar crítico do sujeito
na interpretação/percepção
de mensagens visuais.
Linguagem Visual | Alfabetismo Visual
Qualquer mensagem visual é
uma forma com conteúdo,
extremamente in�uenciada
pelos elementos que a compõem.
- As formas e posturas dos corpos expressam protesto;
- O uso do preto, branco e tons de cinza representam o 
momento sombrio da guerra e expressam dor e caos;
- O fogo e as ruínas não apenas expressam destruição, 
mas re�etem o poder destrutivo da guerra;
- A lâmpada de luz representa o sol e a espada quebrada 
simboliza a derrota do povo na mão de seus algozes;
- A �or representa vida e esperança.
Guernica
Pablo Picasso
Linguagem Visual | Alfabetismo Visual
“A experiência visual humana é
fundamental no aprendizado 
para que possamos compreender
o meio ambiente e reagir à ele;
a informação visual é o mais
antigo registro da história
humana”. (Dondis, 1997)
Sintaxe Visual 
Quando projetamos precisamos tomar decisões e os resultados dessas 
decisões determinam o objetivo e o signi�cado 
do que é recebido pelo espectador.
No momento que decidimos é que nós, designers, 
exercemos controle sobre nosso trabalho e 
direcionamos o projeto para o público 
que ele quer atingir.
Transmissão da Mensagem 
A mensagem se relaciona entre quatro fatores:
Criador (designer) • Conteúdo • Forma • Receptor
O conteúdo e forma são totalmente dependentes e ambos devem ter 
como foco o público receptor, pois é para este que a 
comunicação será dirigida.
Peças E�cazes 
O Público de alguma forma se insere no contexto 
da comunicação.
Desperta interesse ou cria expectativa no público 
(TEASERS).
Possui controle das respostas.
Técnicas de Comunicação Visual 
Regularidade: uniformidade dos elementos e o desenvolvimento de 
uma ordem baseada em algum princípio ou método constante e invariável. 
Seu oposto é a Irregularidade, que, enquanto estratégia de design, 
enfatiza o inesperado e o insólito, sem ajustar-se a nenhum plano decifrável. 
Técnicas de Comunicação Visual 
Simplicidade: técnica visual que envolve rapidez e uniformidade 
de forma elementar, livre de complicações ou elaborações 
secundárias. 
A Complexidade compreende um material visual composto 
por várias unidades e forças complementares e diferentes.
Técnicas de Comunicação Visual 
Unidade: equilíbrio adequado de elementos diversos em uma 
totalidade que se percebe visualmente. 
Fragmentação é a decomposição dos elementos e de unidades 
de um design em partes separadas, que se relacionam entre si 
mas conservam seu caráter individual.
Técnicas de Comunicação Visual 
Atividade: como técnica visual deve re�etir o movimento atravésda representação ou da sugestão. 
A Estase (representação estática) é feita através do equilíbrio 
absoluto, apresenta um efeito de repouso e tranquilidade. 
 
Técnicas de Comunicação Visual 
Sutileza: Sugere uma abordagem delicada e de extremo 
requinte, deve ser criteriosamente concebida para que as 
soluções encontradas sejam hábeis e inventivas. 
A Ousadia, por sua própria natureza, é uma técnica visual óbvia. 
Deve ser utilizada pelo designer com audácia e segurança, 
uma vez que o seu objetivo é obter a máxima visibilidade. 
 
 
Técnicas de Comunicação Visual 
Simetria é o equilíbrio axial. É uma formulação visual totalmente 
resolvida, em que cada unidade de um lado de uma linha central 
é rigorosamente repetida do outro lado. 
Trata-se de uma concepção visual caracterizada
 pela lógica e pela simplicidade absolutas.
Na Assimetria, o equilíbrio é obtido com a distribuição desigual 
dos pesos na página, utilizando ainda o branco como elemento visual. 
 
Exercícios
1. Escolha uma imagem e faça uma lista avaliando a funcionalidade e o que comunica
(ou seja, a mensagem visual compreendida).
2. Identi�que a técnica visual utilizada nesta imagem.
3. Escolha uma outra imagem, observe, analise e de�na em uma frase a mensagem
ou sensação que esta transmite.
1 2 3
4 5 6
7
8