Princípios do Design Visual

Prévia do material em texto

27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 1/
P R I N C Í P I O S 
D O D E S I G N
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 2/
o u s e j a : 
des i g n n ã o é a p e n a s d e i x a r a l g o b o n i t o !
d e s i g n é P R O J E T A R 
U M A S O L U Ç Ã O p a r a 
r e s o l v e r u m p r o b l e m a 
i d e n t i f i c a d o .
des i g n é a d e q u a r : f o r m a e f u n ç ã o !
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 3/
C O M O ?
• e l e m e n t o s
• t é c n i c a s 
(vi s u a i s )
A p a r t i r d e u m c o n j u n t o 
d e f u n d a m e n t o s , t é c n i c a s , 
e m e t o d o l o g i a s , q u e j u n t o s 
a t u a m n a c o n s t r u ç ã o d a s 
s o l u ç õ e s q u e p r o j e t a m o s .
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 4/
Elementos básicos da Linguagem visual
• Ponto
• Linha
• Forma
• Direção
• Cor (e tom)
• Textura
• Dimensão
• Escala
• Movimento
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 5/
Elementos da Linguagem Visual
PONTO
COR E TOM
LINHA
TEXTURA
FORMA
DIMENSÃO
DIREÇÃO e MOVIMENTO
ESCALA
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 6/
O que pode significar as formas?
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 7/
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 8/
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 9/
As formas são representações derivadas da natureza! Elas estão em tudo.
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 10/
Vamos exercitar a 
identificação desses 
elementos?
Mood Board - painel perceptivo
Pesquise nas redes sociais ou no 
google 3 imagens - de qualquer 
tipo - onde seja possível 
identificar um ou mais elementos 
da linguagem visual. Argumente 
sobre a sua percepção ao vê-los 
nas imagens. 
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 11/
• Equilíbrio
• Constraste
• Ênfase
• Hierarquia
• Harmonia
• Alinhamento
• Proximidade
• Tensão
• Nivelamento e 
aguçamento
• Positivo e 
negativo (figura x fundo)
• Repetição
• Ritmo
Técnicas de Composição Visual 
(Fundamentos essenciais do Design)
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 12/
Gera atração visual na imagem. Chama atenção à pontos 
específicos ou detalhes. Pode ser de cor, dimensão, 
movimento e vários outros tipos.
Organiza a harmonia dos elementos numa composição. 
Funciona também como uma referencia espacial entre os 
elementos na composição.
Equilíbrio Contraste
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 13/
Trata da distribuição das informações, objetos e 
elementos atribuindo-lhes pesos, criando a sensação 
de importância e agrupamento entre os elementos. 
Influencia a ordem em que o olho humano percebe a 
informação que está sendo exibida. 
Presença de um objeto, assunto ou tema dominante 
e em destaque na composição. A ênfase serve como 
um ponto focal para atrair o olhar para uma área 
“nobre” na imagem. 
Ênfase Hierarquia
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 14/
n o s s o s i s t e m a d e l e i t u r a 
o c i d e n t a l a c o n t e c e e m Z
ou e m F ( e m a l g u n s c a s o s )
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 15/
Cada elemento deve ter ligação visual com outro
elemento. Isso cria uma aparência limpa e oganizada. 
Nada deve ser colocado apenas para tapar um espaço, 
é importante pensar a disposição dos elementos na 
composição. Este texto legenda, por exemplo, está 
alinhado à esquerda para facilitar sua leitura.
A harmonia de uma composição está na interação e no 
equilíbrio entre todos os elementos, criando assim uma 
unidade coerente e suave. A unidade é o resultado final 
de como diferentes elementos e princípios podem funcionar 
juntos harmoniosamente. O designer precisa se certificar 
de que cada item tem um lugar certo e desempenha um papel 
específico na composição. 
Harmonia Alinhamento
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 16/
O que aconteceu aqui!?
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 17/
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 18/
Agora sim, alinhamento, harmonia, hierarquia, contraste e equilíbrio.
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 19/
Geralmente é uma composição que pode apresentar áreas de 
desequilíbrio, e a sensação de não regularidade. 
A explosão da imagem acima, forma uma composição com 
outras imagens, reforçando a caracterísitca de uma 
sensação explosiva, para cima, representa energia. 
Embora neste anúncio tenha também bastante constraste.
Itens relacionados entre si devem ser agrupados. 
Quando próximos, tornam-se uma unidade visual, a
proximidade implica em uma relação. Ajuda a 
organizar as informações e reduz a desordem.
A ideia é organizar. Se as informações estiverem
organizadas o texto será mais fácil de ler.
Proximidade Tensão
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 20/
Você já ouviu falar de Gestalt da forma? A relação 
figura e fundo diz respeito ao contraste de formas, de 
cores (ou tons), entre objeto que esta na frente e o que 
está atrás. O positivo, geralmente se refere às cores 
Escuras e o negativo às cores Claras (ou ausência de 
cor). O mais comum é a dupla: branco / preto.
Representa a localização do ponto focal do olhar. O 
nivelamento serve para provocar estabilidade e harmonia 
na criação. Trás também a noção de simetria. Já o 
aguçamento é algo visualmente inesperado na composição, 
desloca o ponto focal para criar uma sensação de 
tensão, assimetria ou instabilidade na composição.
Nivelamento e Aguçamento Positivo e Negativo (figura x fundo)
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 21/
Aguçamento
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 22/
Nivelamento
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 23/
Cor | Positivo | Negativo
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 24/
É um tipo de movimento, que de alguma forma possui 
uma repetição e intervalos entre as formas. O ritmo 
é conseguido basicamente pela repetição de elementos 
gráficos. Não necessariamente de elementos idênticos, mas
semelhantes de alguma maneira. Quatro fatores atuam 
de forma determinante: escalonamento, agrupamento, 
espacejamento e rotação.
Para criar uma imagem com unidade visual, forte, 
organizada, e com consistência, repita alguns 
elementos visuais pelo material. Você pode repetir 
cor, forma, textura ou até mesmo a distribuição 
espacial dos elementos. 
Repetição Ritmo
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 25/
escalonamento
espacejamento
agrupamento
rotação
para ir além...
Livros recomendados:
» Design para quem não é designer 
(Robin Williams)
» O essencial do design gráfico 
(Bob e Maggie Gordon)
» Princípios de Forma e Desenho 
(Wucius Wong)
Indicaaí!
Assiste
aí!
pra saber mais
27TÉCNICO EM MULTIMÍDIA, ENSINO MÉDIO PROFº CHINA DESENVOLVER LAYOUT AULA 2 PRINCÍPIOS DO DESIGN 26/
Vamos exercitar 
a identificação dos 
fundamentos?
Vamos criar o “Fundamentos mini.Zine”. 
Faça 2 dobras numa uma folha de papel, formando 4 
partes, criando assim, 8 páginas. Depois, crie 8 
composições visuais - incluindo a capa - que representem 
sentimentos ou emoções. Explore 8 das 12 técnicas de 
composição que conhecemos nesta aula. Use caneta, lápis, 
ou outro recurso criativo que desejar. Por exemplo, você 
pode usar recorte e colagem para fazer esta atividade. 
Para entregar: fotografe página por página e envie pela 
nossa plataforma. Atenção é importante cada composição 
estar sinalizada qual técnica foi utilizada.
Referências desta aula
MBROSE, Gavin; HARRIS, Paul. Grid. Porto Alegre: Bookman, 2009.
ROTOVISION, Editores. Grids: soluções criativas para designers gráficos. Porto Alegre: Bookman, 2009.
SAMARA, Timothy. Grid: construção e descontrução. São Paulo: Cosac Naify, 2007.
TONDREAU, Beth. Criar grids: 100 fundamentos de layout. São Paulo: Blucher, 2009.
WILLIAMS, Robin. Design para quem não é designer. 8.ed. São Paulo: Callis, 1995.
DONDIS, Donis A. Sintaxe da linguagem visual. São Paulo: Martins Fontes, 1997
RIBEIRO, Milton. Planejamento visual gráfico. Editora: LGE, 2007
GOMES FILHO, João. Gestalt do objeto. Editora: ESCRITURAS, 2009
AMBROSE, Gavin & HARRIS, Paul. Fundamentos de Design Criativo. Porto Alegre: Bookman, 2009
LUPTON, Ellen & PHILLIPS, Jennifer Cole. Novos Fundamentos do Design. São Paulo: Cosac Naify, 2009.
SAMARA, Timothy. Elementos do Design: guia de estilo gráfico. Porto Alegre: Bookman, 2010
BELTRÃO, Hannah. Os 7 princípios do design e como aplicá-los ao criar seu site. Wix. Disponível em . Acesso em dezembro, 2020. 
BATISTA, Éricles. Um breve manual de hierarquia visual. Designerd. Disponível em . Acesso em dezembro, 2020.
CCF Aprende Livre. Conceitos Básicos de Design Gráfico. CCF Global. Disponível em . Acesso em dezembro, 2020.
IMAGENS:
Freepik, Flaticon, Google Imagens, Pinterest, 
Portfólio pessoal e Wix.
https://www.youtube.com/watch?v=39y99yr6ZVE
; )