Apostila Completa Comunicacao Visual - Bianca Martins PDF

Comunicao Visual
Autora: Bianca Martins
Um cuutilizando a metodologia
NETLEARNrso INFNET .
ndice
NETLEARN - INTRODUO
Sobre o Instituto Infnet

Histrico
Parcerias
Treinamento aberto
Treinamento fechado
Contato
NETLEARN - INTRODUO
NETLEARN - INTRODUO
Observao Importante:
O mtodo NETLEARN visa trazer o melhor
para os alunos. E ns sabemos que para se ter
o melhor preciso que se tenha
flexibilidade.
Cada assunto tem suas caractersticas
especficas. Cada curso tem suas
necessidades. Por isso, nem sempre todos os
mdulos do NETLEARN estaro presentes em
todos os cursos.
NETLEARN - INTRODUO
A apostila
SUA APOSTILA DIVIDIDA EM 2 PARTES
Os slides, na parte de cima de cada pgina as anotaes, na parte de
baixo
Slides: So os slides que o professor vai utilizar durante o

curso.
Anotaes: Informaes complementares, zoom no cdigo

de programas e espao para voc escrever
NETLEARN - INTRODUO
Apresentaes
PROFESSOR
Nome
E-mail
Experincia
ALUNOS
Nome
Empresa onde trabalha e cargo
Expectativas
NETLEARN - INTRODUO
Logstica
Horrios
Computadores e Rede
Banheiros
Cigarro
Telefone
NETLEARN - INTRODUO
Objetivos do curso
O ALUNO VAI ESTAR HABILITADO A:
Compreender os fundamentos do Design
Manejar conceitos e tcnicas para trabalhar com cores e

tipografia
Conceituar princpios de leitura visual da Forma, da Gestalt e

tcnicas de expresso visual.
Desenvolver layouts em suporte digital e impresso
Dominar princpios de planejamento e produo de projetos de

Design
NETLEARN - INTRODUO
O Curso
UA1 - Fundamentos do Design
BCA 1.1 - Comunicao Visual
BCA 1.2 - Design Grfico
BCA 1.3 - Identidade Visual
UA2 Cores
BCA 2.1
BCA 2.2
BCA 2.3
BCA 2.4
Psicologia das cores

Estudos sobre a cor
Esquemas de cores
Paletas de cores para web
UA3 - Tipografia
BCA 3.1 - Origem e tecnologias
BCA 3.2 - Conceitos
BCA 3.3 - Composio com tipos
BCA 3.4 - Tipografia Digital
BCA 3.5 - Dicas para a seleo de tipos
UA4 Design e percepo

BCA 4.1 - Percepo
BCA 4.2 - Conceituao da forma e
propriedades
BCA 4.3 - Conceitos da Gestalt
BCA 4.4 - Sistema de leitura visual
UA5 Planejamento de projetos
BCA 5.1 Criatividade
BCA 5.2 Processos e princpios de
planejamento
BCA 5.3 Desenvolvimento
5.3.1 - Impressos
5.3.2 - Digital
NETLEARN - INTRODUO
Pblico-Alvo
Designers e profissionais desejando
investir no planejamento de solues de
Design em geral, tanto para mdia
digital como para mdia impressa.
NETLEARN - INTRODUO
Pr-requisitos
Conhecimento em microinformtica
Desejvel conhecimentos bsicos no

Adobe Photoshop ou em ferramenta
similar
NETLEARN - INTRODUO
UNIDADE DE APRENDIZADO 1
Fundamentos do Design
a) Trajetria
a) Conceitos
a) Conceitos
b) Elementos
UA 1
| BCA 1.1 | Comunicao Visual
UA1
Introduo aos fundamentos do Design
OBJETIVOS
Apresentar a trajetria e o
desenvolvimento da Comunicao Visual
Discutir conceitos do Design Grfico
Estudar caractersticas e elementos d

Sistema de Identidade Visual
UA 1
Bibliografia bsica
CARDOSO, R (org.). O Design brasileiro antes do Design. So Paulo: Cosac Naify, 2005.
CARDOSO, R. Uma Introduo Histria do Design. So Paulo: Edgard Blcher, 2000.
FRASCARA, J. Diseo grfico y comunicacin. Buenos Aires: Infinito, 1988.
FRASCARA, J. El Diseo de comunicacin. Buenos Aires: Ediciones Infinito, 2006.
MEGGS, Philip. Historia del diseo grfico. Mxico: Trillas, 1991.
NIEMEYER, Lucy. Design grfico no Brasil: origens e instalao. Rio de Janeiro: 2AB, 1997.
PEN, Maria Luisa. Sistemas de identidade visual. Rio de Janeiro: 2AB, 2000.
PINHO, Jos Benedito. O poder das marcas. So Paulo-SP: Summus, 1996.
SOUZA, Pedro. Notas para uma histria do design. Rio de Janeiro: 2AB, 1997.
STRUNCK, Gilberto. Como criar identidades visuais para marcas de sucesso. Rio de
Janeiro: Rio Books, 2001.
TAMBINI, Michel. O design do sculo. Sao Paulo: tica, 1997.
VILLAS-BOAS, Andr. O que e o que nunca foi design grfico. Rio de Janeiro: 2AB, 1997.
a) Trajetria
a) Conceitos
a) Conceitos
b) Elementos
UA 1
BCA 1.1
Comunicao Visual: Trajetria
As primeiras formas comunicativas consistiam

em elementos visuais para transmitir estados de
nimo, desejos e inquietudes atravs de
expresses e signos no verbais que com o
tempo adquiriram a condio de "linguagem",
pictrica ou verbal, ao converterem-se em
modelos de comunicao.
UA 1
Arte Egpcia em pergaminhos
Com o tempo a linguagem verbal passou a ser o meio

de intercmbio de informao mais direto. Mesmo
assim a linguagem visual continuou tendo um peso
importante nas relaes comunicativas, sobretudo a
partir do uso de diversos materiais como suporte s
mensagens visuais.
UA 1
O Disco de Festos, 1700 a.c.
A representao de idias por meio de pictogramas

teve uma maior expressividade com o advento de
diferentes suportes para linguagens escritas.
As linguagens escritas estavam baseadas na
representao de elementos tomados da natureza
aos quais se atribua uma interpretao particular
e tambm na representao de um conjunto
artificial de smbolos inventados: os alfabetos.
Parte do Alfabeto Cretense
UA 1
Papiro ano 932
Pergaminho ano 975
Como suporte fsico, foi utilizada inicialmente a

pedra, mas, buscaram-se outros tipos de materiais que
permitiriam maior facilidade de uso e portabilidade,
como os papiros ou os pergaminhos.
Com o papiro e o pergaminho diferentes tipos de
pigmentos naturais passaram a ser utilizados para dar
um maior colorido e expresso s obras escritas e
composies artsticas.
UA 1
Cdice
ano 1000
Nesta poca alguns artistas desenvolveram pesquisas

representar uma composio harmoniosa e equilibrada, j
que com isso acreditavam ser possvel aliar comunicao,
clareza e beleza.
Exemplos: cdices realizados nos monastrios.
Livro das Horas sc XV e XVI
UA 1
Prensa
tipogrfica de
Gutemberg
1450-55
Johann Gutenberg, em 1450, inventou a

imprensa (prensa tipogrfica), artefato
capaz de reproduzir um original em
grandes quantidades.
UA 1
Logo comearam a aparecer imprensas que

reproduziam todo tipo de obras, cada vez
mais elaboradas.
INCUNBULOS
obras impressas
desde 1455 at
1500.
UA 1
Publicidades sc. XIX
O design grfico teve outro grande

impulso com a Revoluo Industrial.
Intensificou-se o comrcio e a
concorrncia entre empresas por uma
parte do mercado. Com isso, se
desenvolveu a publicidade.
UA 1
O desenvolvimento da publicidade
ocorreu paralelamente ao do design
grfico e ao dos suportes de
comunicao. Era preciso convencer
o pblico das vantagens de um
determinado produto ou marca.
UA 1
No se tratava mais de
apresentar apenas belas
mensagens visuais, elas deviam
ser efetivas e vender.
UA 1
Na segunda metade do sculo XX,

surgiram os computadores e
mquinas inicialmente destinadas a
um grupo reduzido de tcnicos e
especialistas, mas que pouco a
pouco foram ganhando
popularidade e com o aparecimento
do computador pessoal se
estenderam a todos os ambientes e
grupos sociais.
UA 1
Na dcada de 1980 o Desktop Publish

passou a fazer parte do mbito do design
grfico.
Na dcada de 1990 a World Wide Web se
consolidou como um meio eficiente de
comunicao aumentando o acesso de
diversos pblicos s informaes
UA 1
a) Trajetria
a) Conceitos
a) Conceitos
b) Elementos
Design Grfico
Pode-se definir design grfico como o
processo de conceber, programar, projetar,
coordenar, selecionar e organizar uma srie
de fatores e elementos para produzir
interfaces visuais destinadas a comunicar
mensagens especficas que chegam ao
pblico destinatrio atravs de diferentes
suportes, como folhetos, cartazes,
websites, embalagens, letreiros, etc.
UA 1
| BCA 1.2 | Design Grfico - Conceitos
No processo de design grfico utiliza-se diferentes

elementos grficos para dar forma comunicao buscando
comunicar as idias essenciais da mensagem de forma que
seu pblico alvo possa compreende-la com eficcia.
Elementos grficos simples: pontos, linhas e planos de

todo tipo (grafismos, linhas retas e/ou curvas, etc.)
Elementos geomtricos, com ou sem contorno:
polgonos, crculos, elipses, ovais, etc.
Tipos: letras de diferentes formas e estrutura, utilizadas
para apresentar mensagens textuais.
Grficos variados: logotipos, cones, smbolos, sinais, etc.
Ilustraes
Fotografias
Etc.
UA 1
Para atingir o resultado esperado, o designer

deve conhecer a fundo os diferentes recursos
grficos a sua disposio linguagem visual,
percepo visual, tecnologias, softwares
grficos e meios de comunicao - e ter a
imaginao, a experincia e o sentido comum
necessrios para combin-los de forma
adequada.
UA 1
Os diferentes componentes de um projeto

de design so percebidos pelo pblico
usurio de acordo com a influncia
individual que exerce cada um deles.
Porm, a unio de todos eles, a composio
grfica, uma entidade comunicativa
individual e completa, carregada de
complexos elementos humanos associados
com a linguagem, a experincia, a idade, a
aprendizagem, a educao e a memria de
cada sujeito.
UA 1
Design = planejamento
Design grfico = planejamento Visual = Design de Comunicaes Visuais
UA 1
No que se refere ao excesso de informaes visuais

apresentadas dia-a-dia s pessoas que vivem nas grandes
cidades, surge uma oportunidade de atuao profissional
para os designers que passam a poder usar a sua competncia
em distines visuais para reduzir a sobrecarga daquilo que
deixa o pblico perplexo.
Jorge Frascara
UA 1
Transformar a informao em comunicao
Antes
Depois
Antes
Depois
UA 1
Peridico sc. XIX
Peridico sc. XXI
UA 1
O relacionamento entre o consumidor e o objeto de consumo

inicia-se primeira vista relao entre pessoas!
Design faz a mediao Designer um mediador!
Se j comum dizer que estamos na sociedade da informao, o
designer que trabalha neste setor no somente um embelezador,
mas um organizador da informao.
UA 1
a) Trajetria
a) Conceitos
a) Conceitos
b) Elementos
UA 1
| BCA 1.3 | Identidade Visual
BCA 1.3
Identidade Visual - Conceitos
Conjunto de elementos grficos que iro formalizar a personalidade visual
de um nome, produto, idia ou servio.
Identidades visuais comunicam e projetam mensagens visuais.
UA 1
Sistema ou Manual de Identidade Visual

Todos os componentes que veiculam os elementos bsicos da
Identidade Visual.
UA 1
Elementos de Identidade visual

Primrios:
Logotipo + Smbolo = Marca ou assinatura visual
Secundrios
Cores institucionais
Alfabeto institucional
Acessrios
Grafismos
Mascote
UA 1
Primrios: Logotipo
necessariamente composto por letras
Marcas nominativas: podem ser lidos com rapidez
Marcas figurativas: letras e nmeros que se

assemelham a desenhos
Variaes:
Associados a grafismos (sem que este seja um smbolo)
Exclusivamente tipogrficos: Motorola
UA 1
Logotipos:
Classificao
Baseado em famlia tipogrfica existente

Formado por famlia tipogrfica modificada
Formado por tipos desenhados exclusivamente para ele
UA 1
Primrios: Smbolo
um sinal grfico que, com o uso, passa a identificar um
nome, idia, produto ou servio.
Nem todas as marcas possuem smbolos.
A vantagem da utilizao de um smbolo sua capacidade de
sntese: ele deve ser rapidamente identificado e associado
instituio.
UA 1
Smbolos: classificao
Tipogrficos: deriva das iniciais do nome da

instituio.
Figurativo: baseados em grafismos que de alguma

forma transmitem o que est sendo representado
Abstrato: que no objetiva qualquer representao

figurativa ou que possua representao muito
estilizada e de difcil associao.
UA 1
Primrios: Marca ou assinatura visual
o conjunto formado pelo smbolo + o logotipo

Normatizao quanto posio de um relacionado ao
outro e a proporo entre eles.
UA 1
Secundrios: cores institucionais
Cores utilizadas na identidade visual.
UA 1
Secundrios: Alfabeto institucional
Famlia tipogrfica, incluindo suas variaes de peso (negrito,

itlico etc.), que acompanha as informaes complementares
numa identidade visual.
UA 1
Acessrios: Grafismos
Elementos grficos em geral abstratos com a funo
de enfatizar algum conceito ou servir como um
componente esttico transmitindo idias (ex:
velocidade, jovialidade, solidez, etc.)
UA 1
Acessrios: Mascotes
Personagens que auxiliam atingir pblicos
especficos. Enaltecem dada caracterstica que
cause identificao entre o pblico e a identidade
corporativa.
UA 1
Laboratrio: etapa 1
Este exerccio ser desenvolvido ao longo do curso. Em cada Unidade de Aprendizagem voc
aprender a implementar novas caractersticas a duas marcas que sero criadas.
Nesta etapa voc deve elaborar a Identidade Visual - elementos primrios, secundrios e
acessrios (se assim desejar) para as duas marcas a seguir:
1 RESTAURANTE LA PASTA
2 ACADEMIA POWER BODY
Caractersticas:
Restaurante tradicional especializado
em alta culinria e vinhos italianos
Aconchegante, envolvente, clima
familiar
Decorao tradicional, mobilirio
rstico
O dono faz questo de recepcionar
todos os clientes
Caractersticas:
Especializada em tcnicas avanadas de
musculao, running e bike indoor
Estmulo ao movimento, energia,
dinamismo e vigor
Visual hi-tech, clima jovem, casual,
atraente, sensual
Enfatiza a limpeza, sade, agilidade e
segurana
Pblico:
Sofisticado, exigente, conhecedor de
timos restaurantes internacionais
Classe AA
Idade: majoritariamente entre 35 e
60 anos
Pblico:
Jovem, dinmico, vaidoso, exigente.
Classe: B e C
Idade: majoritariamente entre 15 e 40
anos
Cores
BCA 2.1 - Psicologia das cores
BCA 2.2 - Estudos sobre a cor
a) Cor e percepo
b) Teoria das cores
c) Disco cromtico
d) Parmetros da cor
BCA 2.3 - Esquemas de cores
a) Harmonia
b) Contraste
BCA 2.4 - Paletas de cores para web
a) Sobre as cores em tela
UA 2
| BCA 2.1 | Psicologia das cores
UA2 - Cores
OBJETIVOS
Apresentar a psicologia envolvida no

trabalho com cores
Discutir teorias e estudos sobre as cores
Apresentar esquemas de combinao de

cores
Estudar a utilizao de cores na WEB
UA 2
Bibliografia bsica
FARINA, Modesto. Psicodinmica das cores em comunicao. So Paulo: Edgard
Blcher, 1990.
GUIMARES, Luciano. A Cor como Informao. So Paulo: Annablume, 2001.
ITTEN, Johannes. The art of the color. Paris: Dessain et Tolra, 1974.
ITTEN, Johannes. The Elements of Color. New York: John Wiley & Sons, 1999.
WILLIAMS, Robin; TOLLET, John. Web design para no-designers. Rio de Janeiro:
Cincia Moderna, 2001.
Material didtico Teoria das Cores da Prof. Slvia Schineider
Cores
a) Cor e percepo
b) Teoria das cores
c) Disco cromtico
d) Parmetros da cor
a) Harmonia
b) Contraste
UA 2
Cores
Escolher cores no uma tarefa simples.
necessrio observar aspectos estticos, pensar na
identidade que estamos representando e levar em conta
conceitos de usabilidade.
Existem, felizmente, conhecimentos para a composio com
cores: psicologia das cores e as teorias sobre uso e
combinao de cores.
UA 2
Psicologia das cores

uma rea de estudo que analisa os efeitos
emocionais e comportamentais produzidos pelas
cores e suas combinaes.
UA 2
Vale a pena conhecer algumas associaes psicolgicas que a

maioria das pessoas, na cultura ocidental, desenvolve com
algumas cores.
Vermelho: paixo ou morte?
UA 2
BRANCO
Paz, pureza, batismo, casamento, hospital, neve, frio,
palidez, vulnerabilidade, dignidade, divindade, harmonia,
inocncia etc.
UA 2
PRETO
Medo, morte, maldio, pessimismo, negao,
tristeza, opresso, dor etc.
Na publicidade, o preto esta associado nobreza e
seriedade.
Na moda o preto associado elegncia.
UA 2
VERMELHO
Guerra, sangue, perigo, vida, fogo, mulher, conquista,
masculinidade, paixo, fora, energia, movimento,
violncia, excitao, emoo, ao, etc.
uma cor muito atrativa.
Rosas vermelhas simbolizam o amor.
UA 2
LARANJA
Outono, pr-do-sol, calor, luz, raios, robustez, euforia,
alegria, apetite, prazer, senso de humor e etc.
Muito usada em embalagens de alimentos.
UA 2
AMARELO
Ouro, sol, calor, palha, luz, vero, conforto, idealismo,
espontaneidade, euforia, alegria, expectativa etc.
UA 2
VERDE
Natureza, floresta, folhas, mar, vida, bem-estar,
tranqilidade, segurana, liberdade, juventude, firmeza,
coragem, esperana etc.
Dependendo da tonalidade o verde pode estar associado
energia. Ex: guaran (caso do Guaran Antrtica), etc.
UA 2
AZUL
Cu, frio, mar, tranqilidade, espao, fantasia,
infinito, afeto e serenidade.
Dependendo da tonalidade, sobriedade,
serenidade e credibilidade.
UA 2
ROXO
F, penitncia, sonho, mistrio, dignidade, egosmo,
grandeza, espiritualismo, sexualidade etc.
UA 2
MARROM
Chocolate, caf, terra, frio, melancolia,
sensualidade e tambm certo desconforto.
Se combinada com o dourado, o creme, o bege ou
o vinho, pode demonstrar elegncia e requinte.
UA 2
ROSA
Feminilidade, criana, calma, afeto, delicadeza, inocncia.
UA 2
Cores
a) Cor e percepo
b) Teoria das cores
c) Disco cromtico
d) Parmetros da cor
a) Harmonia
b) Contraste
UA 2

Tanto no plano fsico quanto metafrico, a cor resulta em
intenso estmulo perceptivo. Na sua forma fisiolgica
primeira, ela a sensao produzida nos cones e bastonetes
da retina por ondas de luz de diferentes comprimentos. No
seu aspecto psicolgico e/ou potico, pode suscitar reaes
diferentes, envolvendo sensaes de calor ou frio e
revigorantes sensaes de luz e espao.
UA 2
| BCA 2.2 | Estudos sobre a cor
Na comunicao visual a cor pode servir a vrios objetivos:

1. Constituem objeto de manipulao e
produo de significado;
2. Para simular realidades visveis, nesse caso
ela opera como representaes.
UA 2
COR E PERCEPO
No existem cores reais na natureza - o que existe so
vrios comprimentos de onda que compem a luz branca, os
quais so absorvidos, refletidos ou refratados por todos os
objetos a nossa volta. Os comprimentos de ondas refletidas
penetram em nossos olhos, que enviam sinais ao crebro e
assim percebemos o fenmeno cromtico.
UA 2
A grande contribuio para o nosso

entendimento do fenmeno cromtico foi
realizada pelo cientista Isaac Newton, em 1666.
Newton descobriu que quando um raio de luz
solar separado atravs de um prisma triangular
seus raios revelam todas as cores do arco-ris.
UA 2
Teoria das cores - COR LUZ

Os estmulos que causam as sensaes cromticas provocadas
pela ao da luz sobre o rgo da viso esto divididos em
dois grupos: o das cores luz e das cores pigmentos.
COR-LUZ OU LUZ COLORIDA a radiao visvel que tem
com como sntese aditiva a luz branca. Sua melhor expresso
a luz solar por reunir de forma equilibrada todos os matizes
da natureza.
UA 2
COR PIGMENTO
a substncia material que, conforme sua natureza, absorve,
refrata ou reflete os raios luminosos. Comumente chamamos
cores-pigmento o grupo das cores qumicas. Segundo Goethe
as cores qumicas so aquelas que podemos criar.
Podem ser divididas em:
cor pigmento opaca (mistura)
cor pigmento transparente.
Cores-pigmento opacas
Uma cor pigmento tem como sntese subtrativa o preto.
UA 2
CLASSIFICAO DAS CORES

Cor Primria
COR GERATRIZ OU PRIMRIA: cada uma das trs
cores indecomponveis que, misturadas em propores
variveis, produzem todas as demais, em cada modelo
de representao da cor.
UA 2
Cores-luz PRIMRIAS
Em COR-LUZ as cores primrias so:
Modelo RGB sntese aditiva
UA 2
Cores-pigmento
A trade CMY (magenta, amarelo e ciano)
encontra maior preciso cromtica nas
emulses transparentes (pelculas fotogrficas,
impresses grficas, aquarelas etc.).
Da a denominao cores-pigmento
transparentes, em oposio outra trade de
cores- pigmento, que chamamos de opacas
(tmpera, encustica, leo, etc.)
UA 2
Cores-pigmento transparentes
PRIMRIAS
COR-PIGMENTO TRANSPARENTE as cores primrias:
Modelo CMY sintese subtrativa
UA 2
Cores-pigmento opacas
PRIMRIAS
COR-PIGMENTO OPACA as cores primrias:
Modelo artstico sntese subtrativa
UA 2
Disco cromtico
Para melhor dispor e estabelecer relaes entre
cores utiliza-se o disco cromtico, ou crculo
cromtico.
Se traarmos uma linha vertical poderemos perceber
que do lado esquerdo as cores so vivas e
marcantes. So as chamadas cores quentes.
J do lado esquerdo, as cores transmitem mais
tranqilidade e calma. So as chamadas cores frias.
UA 2
COR SECUNDRIA - a cor formada pelo equilbrio ptico a

partir das duas primrias que lhe do origem. Pode ser
conseguida por mistura, puno ou rotao de propores
iguais.
COR TERCIRIA - a intermediria entre uma cor secundria
e qualquer uma das primrias que lhe deu origem
UA 2
CORES COMPLEMENTARES - so aquelas cuja mistura

produz o branco em cor-luz e o preto em cor pigmento.
Encontram-se sempre em posies opostas no disco
cromtico
CORES QUENTES - so o vermelho e o amarelo e as demais
cores em que eles predominam. Sugerem expanso visual.
CORES FRIAS - so o azul e o verde e as outras cores em
que eles predominam.
UA 2
PARMETROS DA COR - Matiz

Matiz
Quando pensamos o atributo qualitativo de uma cor,
ou seja, aquilo que identifica uma cor (o seu
comprimento de onda) estamos falando de matiz. O
matiz a cor em si, a especificidade da cor.
UA 2
PARMETROS DA COR - Valor

Luminosidade ou valor
O valor de uma cor refere-se ao seu ndice de
luminosidade, e pode ser observado atravs do
acrscimo de preto e branco a um determinado
matiz. o efeito produzido pela suavizao ou
escurecimento de uma cor pigmento pela adio
do branco ou do preto.
UA 2
PARMETROS DA COR - Saturao

Saturao
Refere-se ao grau de pureza de uma cor e mede-se
com relao ao cinza.
UA 2
Cores
a) Cor e percepo
b) Teoria das cores
c) Disco cromtico
d) Parmetros da cor
a) Harmonia
b) Contraste
UA 2
| BCA 2.3 | Esquemas de cores
BCA 2.3
Esquemas de cores
HARMONIA E CONTRASTE
Os esquemas de cores auxiliam na escolha de uma

efetiva composio harmoniosa ou constrastante
conforme o desejado.
Antes de mais nada necessrio escolher uma cor base
que esteja de acordo com os propsitos do projeto.
UA 2
Combinao harmnica
1.
2.
3.
4.
Harmonia
Harmonia
Harmonia
Harmonia
monocromtica
de cores anlogas
tridica
de contraste
a) Complementares simples
b) Complementar contgua (split complementary)
c) Dupla complementaridade (tetrdica)
UA 2
1 - Harmonia monocromtica
a harmonia entre diferentes saturaes e
luminosidades de uma mesma cor.
UA 2
2 - Harmonia de cores anlogas

a harmonia de cores vizinhas no crculo
cromtico.
Formadas, principalmente, por diferentes graus
de intensidade.
(Ribeiro, 2003: 199)
UA 2
3 - Harmonia tridica
Na harmonia tridica, so usadas trs cores eqidistantes no
crculo das cores. Um tringulo eqiltero dentro do crculo
das cores indica quais so elas.
Imagine um triangulo eqiltero sobre o crculo cromtico e
utilize as cores sob os vrtices.
UA 2
4 - Harmonia de contraste
Resulta da justaposio de cores opostas no crculo
cromtico.
(Ribeiro, 2003: 199)
A mais caracterstica das harmonias de contraste obtida

pela combinao das cores complementares.
(Ribeiro, 2003: 199)
UA 2
4a - Harmonia por
complementariedade simples
O mais contrastante o de duas complementares
empregadas sem modulaes intermedirias.
Acrescenta luminosidade cor.
Para diminuir o impacto, pode-se quebrar uma das duas cores
com preto ou com uma pequena parte da complementar
UA 2
4b- Harmonia por

complementariedade contgua
split complementary
Formada por duas cores anlogas e uma terceira oposta a
elas no crculo cromtico
Vale a pena determinar qual ser a cor predominante.
UA 2
4c - Harmonia por dupla

complementariedade - tetrdica
Dois pares de cores complementares dispostos em oposio
no crculo cromtico.
Duas duplas de cores complementares entre si.
Esquema de cores bastante radical pois apresenta um alto
grau de contraste.
UA 2
CONTRASTES CROMTICOS
a diferena ou o grau de diferena entre objetos de naturezas comparveis.
As cores so completamente diversas, contudo sua aproximao no deve
produzir efeitos desagradveis, inspidos ou demasiadamente bruscos.
(Ribeiro, 2003: 199)
1.
2.
3.
4.
5.
6.
7.
Contraste de matiz - cor em si

Contraste de claro e escuro ou contraste de valor
Contraste de temperatura
Contraste de qualidade ou saturao
Contraste de quantidade
Contrastes simultneos
Contraste entre complementares
UA 2
1 - Contraste de matiz
Contraste entre matizes puros. O contraste entre as
cores da trade primria e/ ou secundria um exemplo
de contraste de matiz. Nenhuma delas se destaca.
UA 2
2 - Contraste
claro escuro ou de valor
Contraste simples e fundamental entre claro/escuro,
preto/branco. Tambm funciona no modelo
monocromtico de cores.
UA 2
3 - Contraste de temperatura
Equilbrio proporcionado entre a superfcie ocupada pelas
cores e seu grau de calor.
Cores quentes
Cores frias
UA 2
4 - Contraste de
qualidade ou saturao
Ligada ao grau de pureza ou saturao da cor.
Ocorre quando posicionamos mesclas, nuanas e
tonalidades de uma nica cor prximas umas das
outras. o mais sutil dos contrastes.
UA 2
5 - Contraste de quantidade
Contraste relacionado com as pores de cor
utilizadas na organizao do espao cromtico em
reas maiores e menores.
Procura-se o equilbrio entre as cores, o que depende
diretamente de dois aspectos: dimenso e
luminosidade da cor.
UA 2
6 - Contrastes simultneos
Esto relacionados com o contraste de complementares.
Ocorrem em funo de um fenmeno de compensao
que se d na retina e faz com que o aparato visual
produza sobre uma cor a sombra de sua complementar.
Essas sombras alteram a percepo das cores quando em
presena de outras.
UA 2
7 - Contraste entre complementares

o mais intenso de todos os contrastes. As complementares
tm uma natureza altamente polarizada, pois so criadas a
partir de propores exatamente opostas s cores primrias.
Sua interao muito forte e pode muitas vezes perturbar a
legibilidade de um texto. Ex: ciano e vermelho; verde e
magenta; amarelo e roxo.
UA 2
Influncia do entorno
Se duas cores diferentes so aproximadas, a
relao entre elas se modifica e o potencial de
iluses aumenta. Portanto, fcil deduzir que
duas cores justapostas, uma quente e outra fria,
se exaltam reciprocamente.
UA 2
Cores
a) Cor e percepo
b) Teoria das cores
c) Disco cromtico
d) Parmetros da cor
a) Harmonia
b) Contraste
UA 2
| BCA 2.4 | Paletas de cores para web
BCA 2.4
Paletas de cores para web
Para que criar uma paleta se j escolhemos o
esquema de cores?
Ao criar uma paleta de cores temos a certeza de
que estamos dando mais unidade ao projeto e, a
partir dela, fica mais fcil escolher as cores
durante o processo de desenvolvimento.
UA 2
Sobre as cores em tela

Voc j sabe que os computadores trabalham com trs cores
bsicas, a partir das quais constroem todas as demais,
mediante um processo de mistura por unidades de pixels.
Estas cores so o vermelho, o azul e o verde. O sistema
definido conhecido como sistema RGB (Red, Green, Blue).
UA 2
Quanto mais bits por pixel, maior o nmero de

variaes de uma cor primria podemos ter.
UA 2
Quanto maior for o nmero de cores, maior ser a quantidade

de memria necessria para armazen-los e maiores os
recursos necessrios para process-los.
Para representar uma cor no sistema RGB utilizam-se duas
formas de codificao diferentes, a decimal e a hexadecimal,
correspondendo os diferentes valores com a porcentagem de
cada cor bsica que tem uma cor determinada.
UA 2
Das 256 cores bsicas, o prprio sistema

operacional fica com 40 para sua gesto interna,
sobrando 216 cores. Delas, 18 correspondem s
gamas das cores primrias: 6 tons de vermelho, 6
de azul e 6 de verde.
UA 2
Escolha de cores:
aplicativos WEB
Site com exerccios e desafios para o trabalho com

cores:
http://poynterextra.org/cp/colorproject/color.html
Experimente combinar cores utilizando aplicativos na
WEB em:
www.colorjack.com/articles/formulas.html
www.universodacor.com.br/unicor/index.php?
scr=esquemas_cores
UA 2
Laboratrio: etapa 2
Nesta etapa voc deve elaborar um esquema de cores (no mximo 5) para cada uma das
duas marcas:
Caractersticas:
familiar
rstico
todos os clientes
Caractersticas:
dinamismo e vigor
atraente, sensual
segurana
Pblico:
Classe AA
60 anos
Pblico:
Classe: B e C
anos
Tipografia
Mapa
Evoluo das letras latinas
Quatro Revolues que

modificaram
o modo de reproduo da escrita
BCA 3.2 - Conceitos
Espcies de caracteres:
Partes do tipo
Variaes estruturais
Sistema de medidas
Classificao das famlias

tipogrficas
Alguns tipgrafos renomados e seus

tipos

A escolha dos tipos
Intervenes na Aplicao de Tipos
Recursos de Composio para Destaque de
Elementos
Relao entre tipos
Contrastes entre tipos
Critrios para uso de Tipos
Arquivos de fontes digitais
Formatos de fontes
Fontes personalizadas
Caractersticas dos Textos na web
Restries para o uso de tipografia

na web
Apresentando textos por intermdio de
imagens
UA3 - Tipografia
OBJETIVOS
Apresentar a evoluo dos tipos e das tcnicas
Discutir conceitos e classificaes tipogrficas
Estudar estratgias para composio com tipos
Analisar especificaes para o uso de tipografia na WEB
Bibliografia bsica
BRINGHURST, Robert. Elementos do Estilo Tipogrfico. So Paulo, Cosac e
Naify, 2005. 3 ed.
FARIAS, Priscila. Tipografia digital. Rio de Janeiro: 2AB, 2000.
GRUSZYNSKI, Ana Claudia. Design grfico: do invisvel ao ilegvel. Rio de
Janeiro: 2AB, 2000.
JACQUES, Joo Pedro. Tipografia ps-moderna. Rio de Janeiro. 2AB. 1998
NIEMEYER, Lucy. Tipografia: uma apresentao. Rio de Janeiro: 2AB, 2000.
ROCHA, Claudio. Projeto tipogrfico. So Paulo.Rosari.2002
BEAIRD, Jason. The Principles of Beautiful Web Design. SitePoint, 2007.
Tipografia
Mapa
Quatro Revolues que

modificaram
BCA 3.2 - Conceitos
Partes do tipo
Variaes estruturais
Sistema de medidas

tipogrficas
a)ATypI - Association (1954)
Typographique International
b)Robert Bringhurst (1996)
c)Tipos Ps-Modernos (2002)

tipos

A escolha dos tipos
Elementos
Relao entre tipos
Critrios para uso de tipos
Formatos de fontes
Restries para o uso de tipografia na web
imagens
UA 3
| BCA 3.1 | Origem e tecnologias

UA 3
Narrativas visuais so to antigas quanto o prprio homem.

PINTURA RUPESTRE:
a forma mais antiga de narrao de que se tem
conhecimento. Foi produzida entre 40.000 e 10.000 A.C.
Na pr-histria as ilustraes descreviam fatos que as
palavras ainda no podiam descrever.
UA 3
A simplificao dos desenhos originou smbolos grficos

abstratos para representar:
Fonemas > Letras > ALFABETO
Na antiguidade o suporte para a escrita e para a ilustrao

era a pedra ou a argila.
UA 3
Depois da gravao em pedra ou argila vieram os volumen:

cilindros de papiro facilmente transportados.
ESCRIBAS:
Dominavam a leitura e a escritura e eram uma classe
poderosa. Educavam desde o povo at a classe dominante
para a manuteno das estruturas sociais. Os escribas
tambm ilustravam seus escritos.
UA 3

ANTIGUIDADE
Romana Capital quadrada (300 a.C.)
Romana Rstica (200 a. C.)
UA 3

IDADE MDIA Queda do Imprio Romano Sc. V / Renascimento Sc. XV
Escrita manual e feita por copistas
Uncial (sc. IV)
Semi-Uncial (sc. V - VIII)

UA 3

Carolngea (sc. VIII - XII)
Gtica (sc. XII sc. XV)
Iniciais Gticas (1200 a 1500)

UA 3

Cursiva (sc. XV)

Humanistas (renascimento):
Longas ligaturas
UA 3

Gtica (sc. XII sc. XV)
Cursiva (sc. XV)
UA 3
Quatro Revolues
Que modificaram o modo
de reproduo da escrita
1.
2.
3.
4.
Gutenberg - inveno da prensa tipogrfica

Revoluo Industrial
Fotocomposio
Tecnologia Digital
UA 3
1- Sc. XV XVI - perodo 1450 1870

Impresso por tipos mveis
UA 3
1- Sc. XV XVI - perodo 1450 1870

Impresso por tipos mveis
Em 1450 Johannes GUTENBERG formula o processo de

impresso manual utilizando tipos mveis.
O mais antigo sistema de composio tipogrfica e o nico at
o final do sculo XIX.
Est em uso at hoje, em pequenas grficas, em todo o pas.
Foi utilizado por Gutenberg na produo da Bblia de 42
linhas, em 1455.
UA 3
2 - perodo 1870 1950

Aps a Revoluo Industrial composio quente
UA 3
2 - perodo 1870 1950

Aps a Revoluo Industrial composio quente
Os processos artesanais do lugar s mquinas impressoras

a vapor substituem as manuais, e a gravao de imagens em
chapas para impresso por sensibilizao fotogrfica
difundida.
A produtividade aumentou. Um operador de Linotype podia
compor o equivalente a sete ou oito compositores manuais.
UA 3
3 - perodo 1950 1985

Fotocomposio - Sistema de composio a frio
UA 3
3 - perodo 1950 1985

Fotocomposio - Sistema de composio a frio
As matrizes dos tipos eram vazadas. Os caracteres

so projetados em uma pelcula para filme
fotogrfico.
Foi possvel graas evoluo da impresso offset,
que permitia reprodues com melhor definies e,
conseqentemente, maior qualidade final.
Tipos ainda restritos.
UA 3
4 - a partir 1985
Tecnologia Digital Desktop publish
UA 3
4 - a partir 1985
Tecnologia Digital Desktop publish
O primeiro conjunto de equipamentos e sistemas de

desktop publishing (DTP) apresentado em 1985 pela
Apple Computer o computador Macintosh;
Software Page Maker I, da Aldus Corporation,
Fontes digitais licenciadas pela ITC (International
Typeface Corporation),
Linguagem de descrio de pgina postscript da Adobe
Modelo original da impressora Apple Laser Writer com
resoluo de 300 dpi.
A liberdade dos Tipos.

UA 3
Tipografia
Mapa
Quatro Revolues que

modificaram
BCA 3.2 - Conceitos
Partes do tipo
Variaes estruturais
Sistema de medidas

tipogrficas
b)
Robert Bringhurst (1996)
c)
Tipos Ps-Modernos (2002)

tipos

A escolha dos tipos
Elementos
Relao entre tipos
Formatos de fontes
imagens
UA 3
| BCA 3.2 | Tipografia: conceitos
BCA 3.2 - Tipografia: conceitos

Tipografia
Ofcio que trata dos atributos visuais da linguagem escrita. Envolve
a seleo e a aplicao de tipos , a escolha do formato da pgina
assim como a composio das letras de um texto, com o objetivo
de transmitir uma mensagem do modo mais eficaz possvel,
gerando no leitor significaes pretendidas por quem emitiu a
mensagem.
Tipologia
Processo de classificao ou estudo de um conjunto, qualquer que
seja a natureza dos elementos que o compem, para determinao
das categorias em que se distribuem, segundo critrios definidos.
(NIEMEYER, 2000)
Tipologia no sinnimo de Tipografia.
UA 3
Baskerville
CARACTERE
Uma letra, nmero e/ou sinal
Univers
TIPO
Um conjunto de caracteres em estilo especfico
Memphis
FONTE OU FAMLIA TIPOGRFICA

Conjunto completo de sinais alfabticos
(caracteres maisculos e minsculos) e paraalfabticos (algarismos e sinais de pontuao)
que integram um determinado alfabeto
(Niemeyer, 2000).
Snell
UA 3
Caligrafia
Processo manual para a obteno de letras nicas, a
partir de traados contnuos mo livre.
(FARIAS, 2004)
Lettering
Processo manual para obteno de letras nicas, a
partir de desenhos.
Herb Lubalin um designer que
utiliza a tipografia como um
elemento plstico com grande
habilidade. Ao lado, ttulo para
o LadiesHome Journal
(FARIAS, 2004)
UA 3
Espcies de caracteres
Existem 12 grupos de caracteres no alfabeto latino. So eles:
UA 3
1. Maisculas ou caixa-alta
As letras maisculas tambm so
conhecidas por caixa-alta devido sua
localizao na caixa de composio
tipogrfica.
As maisculas podem ter diversos
desenhos, porm com caractersticas
semelhantes. So essas diferenas que
do personalidade a uma famlia.
UA 3
2. Minsculas ou caixa-baixa
Adotadas pelo imperador romano Carlos
Magno durante seu reinado, conhecidas
como carolngias.
Assim como as maisculas, as minsculas
tambm tm esta denominao devido
sua colocao da caixa de composio,
podendo ser chamadas de caixa-baixa.
UA 3
3. Versaletes
Os caracteres versaletes so letras versais
(maisculas) com altura igual s letras
minsculas. Tambm so conhecidas
como small caps.
UA 3
4. Ligaturas
So letras com conexes, com dois ou
mais caracteres. Em portugus, uma das
poucas ligaturas teis a fi.
As ligaturas evitam a inconveniente
sobreposio da terminao do f com o
pingo do i.
UA 3
Ligaturas tambm podem ser usadas como recurso de estilo

Frases compostas com
Mrs Eaves Ligatures.
ITC Avant Garde de Herb Lubalin.

E Cholla Unicase de Sybille Hagman
da Emigre.
Optima Nova Titling, verso

para ttulos com vrias
ligaturas, de Hermann Zapf
UA 3
5. Ditongos
Maisculas ou minsculas unidas, em geral,
por suas hastes e que, em determinadas
lnguas, representam fonemas prprios.
UA 3
6. Acentos grficos
Nas fontes digitais existem os acentos
grficos separados e em conjunto com os
letras. Sendo assim cada caractere
acentuado corresponde a um caractere
individual.
UA 3
7. Algarismos
OLD STYLE
Tambm conhecido por lowercase figures ou text figures, ou seja,
nmeros alinhados pelo texto. Isso quer dizer que esses nmeros tem
linhas ascendentes e descendentes.
LINING
Os numerais alinhados, mais freqentes, so conhecidos por lining
figures, titling figures ou cap figures. Eles tm o tamanho de uma
maiscula e no apresentam ascendentes nem descendentes.
SMALL CAPS
Os numerais Small Caps, assim como o lining, no apresentam
ascendentes e descendentes, mas tm o tamanho de um versalete
(small caps).
UA 3
Voc sabia?
Numerais no sistema arbico: o valor numrico de cada signo
determinado pela quantidade de ngulos que ele
apresenta. O nmero 1 tem um ngulo, o 2, dois ngulos e
assim por diante. O zero no tem ngulo nenhum, assumindo
portanto a forma redonda.
UA 3
8. Fraes
As fraes tambm tm seu espao nas fontes. As trs
fraes ao lado aparecem na maioria das fontes de texto.
UA 3
9. Sinais de pontuao
Esses caracteres formam o conjunto de elementos que os
transcrevem ritmos da fala para a escrita, sendo
indispensveis a qualquer fonte.
UA 3
Voc sabia?
O sinal de interrogao deriva da abreviao da palavra
latina quaestio, que utiliza a maiscula Q sobre a minscula
o.
O sinal de exclamao deriva da abreviao da palavra latina

io (contentamento), com a maiscula I sobre a minscula o.
UA 3
10. Smbolos monetrios

Os smbolos monetrios que compem o conjunto
internacional de caracteres (padro ISO para fontes latinas)
so o dlar e o cent norte-americanos, o yen japons, a libra
esterlina da (moeda inglesa), o florin (antiga moeda
holandesa) e, mais recentemente, o euro.
UA 3
11. Smbolos de operao matemtica

Muito teis em escritos cientficos, os smbolos de operaes
matemticas no podem ficar de fora das fontes.
UA 3
12.Smbolos comerciais
Os principais smbolos comerciais presentes nas fontes mais
usadas esto apresentados ao lado.
UA 3
Voc sabia?
A arroba era uma antiga medida de peso. Em ingls, significa at (em) e ganhou
novo status com o uso para
endereamento em e-mails, pois no tem funo em textos normais.
O e comercial derivado da et. Poucos caracteres permitem tanta variao na
sua forma. O et sofreu vrias transformaes at chegar ao seu traado
caracterstico.
O fleuron o mais aristocrticos dos ornamentos tipogrficos. Sua origem data de
1499 nas encadernaes de Aldus Manutius. Foi usado inicialmente como
decorao externa, em encadernaes de livros.
Algumas fontes tem fleurons como suplemento decorativo, mas so
normalmente encontrados em dingbats.
O smbolo de pargrafo era usado pelos antigos escribas para marcar o incio de
um pargrafo ou uma diviso no texto. O smbolo deriva do grego pi que significa
paragraphos.
UA 3
Partes do tipo
Apesar de a palavra Tipografia abaixo estar composta com as
fontes Bernhard Modern e Palatino, ambas com mesmo
tamanho, note que a altura de x pode variar de uma fonte
para outra.
UA 3
Partes do tipo
UA 3
Variaes estruturais
Tamanho
Relacionada ao corpo de tipo, isto , a sua altura
Forma
Relacionada s diferenas no desenho de uma letras nas suas
verses em caixa alta e caixa baixa
negrito,
bold,
black
normal,
regular,
medium
claro,
light
Peso
Relaciona-se estrutura dos traos em um mesmo corpo de
um tipo de uma mesma famlia. Os nveis de variao podem
ser: extranegrito (extra-black), negrito (bold), normal
(medium), claro (light), e extraclaro (extralight)
UA 3
Variaes estruturais
Quanto ao contraste
De angulao
Baskerville,
Palatino,
Goudy Old Style
De espessura dos traos

Baskerville,
Helvtica
UA 3
Quanto inclinao
Normal, Romano
Optima roman
itlico, inclinado
Optima italic
Quanto estrutura
Garamond,
Helvtica,
Zapfino
Quanto largura do tipo

Condensado, apertado
Expandido, wide
Optima Wide
Optima condensed
UA 3
Sistema de medidas:
CCERO E PAICA
CCERO
O ccero utilizado para determinar extenso de linhas, a
altura e a largura de pginas. At a dcada de 1970 foi o
sistema mais utilizado no Brasil.
1 ccero = 4,513 mm = 12 pontos (0,376065 mm cada)
PAICA
A paica equivale a 1/72 polegadas inglesas e tambm
formada por 12 pontos. O ponto paica um pouco menor
que o ponto ccero: 0,351368 mm. Uma paica mede:
4,216416 mm.
pt (pontos)
pt (pontos)
mm (milmetro) 2,83
in (polegada)
72
p (paica)
12
mm (milmetro)
in (polegada)
0,3759
1
25,4
4,23
UA 3
p (paica)
1/72
1/12
1/25,4
1/4,23
1/6
Unidades de medida: eme e ene

Uma outra unidade de medida tipogrfica a que trata do
espacejamento e da justificao dos textos.
EME
Largura da letra M do tipo que est sendo composto. Esta
medida equivale a um quadrado cujo lado tem a mesma
medida do tipo que est sendo composto. Para simplificar pode
ser definido pelo pelo nmero de pontos do tipo em uso.
ENE
Largura no N maisculo do corpo do tipo em uso. Equivale a
metade de M.
Dependendo do nmero de unidades M e N utilizadas, o
espacejamento pode ser aberto, fechado ou normal.
(Niemeyer, 2001)
UA 3
Classificao das famlias tipogrficas

ATypI- Association Typographique International
1 Romanos
a) Humanistas (ou venezianos)
b) Geraldos (garaldinos)
c) Transicionais (barrocos ou old style)
d) Didines (modernos)
e) Mecanizados
2 Lineares (sem serifa)
a) Grotescos
b) Geomtricos
c) Neogrotescos
d) Humansticos
4 Manuais
a) Decorativos (display ou fantasia)
b) Brush
5 Manuscritos (ou script)
6 - Gticos
a) Texturados
b) Rotundos
c) Bastardos
d) Franktur
7 No-latinos
3 Incisos
UA 3
1 - Romanos
A) HUMANISTAS (OU VENEZIANOS)
Caractersticas: O desenho dos caracteres tem origem no uso da pena
empunhada de modo oblquo. A inclinao fica clara no eixo do O,
no b e na barra do e. No h grandes contrastes entre hastes
grossas e finas. Apresenta serifas triangulares ligadas s hastes por
curvas.
Exemplos: Centaur, Deepdene, Italian Old Style, Jenson, Kennerley,
Lutetia, Schneider Old Style, Stempel Schneider, Venetian Old
Style, Verona.
UA 3
1 - Romanos
B) GERALDOS (GARALDINOS)
Caracterstica: Como os humanistas, possuem eixos inclinados para a
esquerda, serifas triangulares e serifas das caixas baixas oblquas.
Porm possuem maior contraste das hastes e a barra do e tende a ser
horizontal.
Exemplos: Benguiat, Bembo, Caslon, Dante, Geraldus, Garamond,
Goudy Ols Style, palatino, Palatin, Sabon, Sourvenir.
UA 3
1 - Romanos
C) TRANSICIONAIS (BARROCOS OU OLD STYLE)
Caractersticas: A Baskerville a famlia mais representativa desta
classe e apresenta grande contraste das hastes e serifas pontiagudas.
Os tipos transicionais apresentam maior variao na espessura das
hastes comparados aos Geraldos, suas serifas so planas (porm
triangulares) e o eixo vertical ou levemente inclinado.
Exemplos: Times, Americana, Baskerville, Bookman, Calednia,
Janson, Fournier, Imprimtur, Perptua, Quadriga, Antiqua, Stone
Serif, Times, Zapf Internacional.
UA 3
1 - Romanos
d) DIDONES (MODERNOS)
Caractersticas: possuem contraste entre as hastes mais acentuado
que o dos transicionais e o eixo definitivamente vertical. Apresenta
serifas lineares com minsculas especialmente finas e perpendiculares
s hastes, unidas a estas sem quaisquer curvaturas. O desenho tende a
ter uma configurao geomtrica.
Exemplos: Bodoni, Didot, Corvinus, Fenice, Modern, Extended,
Walbaum.
UA 3
1 - Romanos
E) MECANIZADOS
Caractersticas: Serifas marcantes, slidas, formando um ngulos reto
com alinha de base. Esta perpendicularidade se enfatiza na ligao s
hastes por outro ngulo reto serifa retangular, como na Memphis, ou
contrastada com o uso de curvas discretas para estas ligaes serifa
inglesa, Claredon.
Exemplos: Aachen, American typewriter, Benton, Cheltenham,
Cleredon, Clearface, Corrier, Egizio, Ionic, Melior, Memphis, Neutra,
Nimrod, Lubalin Graph, Pro Arte, Rockwell, Serifa Volta, Schadow.
UA 3
Tipos sem serifa. Algumas famlias so referidas nos

EUA como Gothic ou Grotesque; na Alemanha como
grotesk; na Frana como Antique. Tambm tm
origem no mercado de impressos advindo da
Revoluo industrial.
UA 3

A) GROTESCOS
Caractersticas: Os caracteres so reduzidos s suas estruturas e
conservam suas formas mais essenciais. Apresentam curvas discretas,
com terminaes horizontalizadas das hastes e curvas.
Exemplos: Alternate Gothic, Grotesca, Grotesque, Franklin Gothic.
UA 3

B) GEOMTRICOS
Caractersticas: So monolineares no h contraste entre as
hastes - tendem a partir de configuraes bsicas para a
construo de grupos de caracteres com estrutura
semelhante. So bem menos pesados do que os grotescos dos
quais derivam. Em geral, apresenta-se sem o gancho superior.
Exemplos: Avant-Garde Gothic, Erbar, Eurostyle, Futura.
UA 3

C) NEOGROTESCOS
Caractersticas: Como os geomtricos, derivam dos
grotescos, com menor contraste entre as hastes do que
aqueles, mas no monolineares como os geomtricos. As
hastes tendem a terminar de forma oblqua.
Exemplos: Arial, Folio, Helvtica, Univers.
UA 3

D) HUMANSTICOS
Caractersticas: tendem a ser mais delicados do que as trs
subclasses anteriores, com contrastes entre as hastes. O a
possui o gancho superior.
Exemplos: Frutiger, Gill Sans, Shannon, Myriad, Optima.
UA 3
3 Incisos
So tipos que possuem semi-serifa,
baseados nas romanas gravadas em pedra.
Suas formas assemelham-se mais aos
originais esculpidos do que a letras
caligrficas.
Exemplos: Albertus, Augustea, Afriz
Quadrata, Hadriano, Meridien
UA 3
4 - Manuais
A) DECORATIVOS (DISPLAY OU FANTASIA)
So tipos que parecem mais desenhados do que
propriamente escritos. Comumente utilizados em
logotipos, displays, cartazes, anncios publicitrios.
No se destinam a texto corrido.
Exemplos: Arnold Boecklin, Benguiat Gothic, Biffo,
Cdex, Hobo, Largo, Profil, Revue, Stop, Stencil.
UA 3
4 - Manuais
B) BRUSH
Tm inspirao na letra cursiva por isso o eixo
claramente inclinado, as linhas geralmente leves e
arredondadas. No entanto ntido que so
desenhados e que no tm como objetivo imitar a
escrita cursiva apesar de se inspirarem nela.
Exemplos: Ballon, Brush Script, Dom casual, Tekton.
UA 3
5 Manuscritos (ou script)

So tipos que imitam a cursiva comum ou
formal (ligados entre si). Distinguem-se das
manuais por imitarem claramente a escrita
caligrfica.
Exemplos: Ariston, Coronet, Legend,
Lithographia Shelley, Mistral, Park Avenue,
Snell, Present Script, Virtuosa.
UA 3
6 - Gticos
UA 3
6 - Gticos
A) TEXTURADOS
Foram os tipos utilizados na bblia de Gutemberg:
pontiagudos, com hastes terminando em losango.
Exemplo: Cloister, Wilhelm Klingspor.
UA 3
6 - Gticos
B) ROTUNDOS
As terminaes so retangulares, mas as estruturais
incluem curvas marcantes, com linhas angulosas. Tm
origem na Espanha e na Itlia.
Exemplos: Schwaben Alt, Trump-Deutsch, Walau,
Wedding Text, Weib-Gotisch.
UA 3
6 - Gticos
C) BASTARDOS
o gtico mais popular, conhecido na Alemanha
como Schwabacher. bem enfeitado, com o caixa
baixa pontiaguda. As maisculas so mais
dinmicas do que as dos texturados e rotundos.
Exemplos: Ehmecke-Sschwabacher, Old
Schwabacher, Renata.
UA 3
6 - Gticos
D) FRANKTUR
Muito difundido na Renascena e hoje o tipo gtico mais
utilizado na Alemanha. Tem formas mais sofisticadas que os
bastardos, com curvas e ngulos que se alternam e
maisculas com hastes curvas. As ascendentes tm serifas
que se bifurcam.
Exemplos: Brietlopf-Franktur, Fette Gotich, Unger-Franktur,
Gilgengart Drer Fraktur.
UA 3
7 No-latinos
Todos as demais famlias tipogrficas que pertencem a
outros alfabetos como tibetano, rabe, russo e etc.
UA 3
Classificao de Tipos por

Robert Bringhurst (1996)
1. Romana
2. Renascentistas (sc. XV e XVI)
3. Barrocas (sc. XVII)
4. Neoclssicas (sc. XVIII)
5. Romnticas (sc. XVIII e XIX)
6. Realistas (sc. XIX e XX)
7. Modernistas Geomtricas (sc. XX)
8. Modernistas Lricas (sc. XX)
9. Ps-Modernistas (fins sc. XX)
10.Ps-Modernistas geomtricos (fins sc.XX)
BRINGHURST, Robert. Elementos do Estilo Tipogrfico.
So Paulo: Ed. Cosac & Naify. 2005
UA 3
1- Romana
Caractersticas Perodo Romano:
Sistematizao das propores e do desenho das letras;
Abertura modesta;
Trao modulado (a grossura do trao varia com a
direo);
Serifas como elemento formal que termina o trao.
Trajan, fonte desenhada por Carol

Twombly, 1988, baseada nas
inscries da Coluna de Trajano
(Roma), gravadas em 113 d.c.
UA 3
2 - Renascentistas (sc. XV/XVI)

Caractersticas Letra Renascentista Redonda
(sc. XV e XVI):
Fuste vertical;
Trao modulado com contraste moderado (variao entre zona +

grossa e a + fina do trao);
Eixo humanista (direo do brao humano, semelhana do trao

produzido por cana cortada);
Altura de x modesta;
Serifa de cabea oblqua e encrespada, em bico (letras b e r);
Serifa de p: bilateral, abrupta ou ligeiramente espraiada (cunha

suave) (letras l e p);
Terminal: abrupto e em bico, formado a partir de pena cortada (a,

c, f e r)
Barra de e perpendicular ao eixo do trao;
A verso redonda ou Romana solitria (no possui itlico ou bold)
UA 3
2 - Renascentistas (sc. XV/XVI)

Caractersticas Letra Itlica Renascentista:
Trao principal vertical ou com inclinao no

excedendo os 10;
Curvaturas (a, c, e, d, b) geralmente elpticas;
Trao fino e modulado;
Eixo humanista;
Pouco contraste;
Altura de x modesta;
Formas cursivas com serifas encrespadas e
oblquas;
Descendentes serifadas bilateralmente ou sem
serifas;
Terminais abruptos ou lacrimais;
Itlico completamente independente do redondo.
UA 3
3 - Barrocas (sc. XVII)

Caractersticas Letra Barroca (sc. XVII):
Desenho mais dramtico, com formas

contraditrias;
Uma das caractersticas mais marcantes da

letra Barroca a grande variao no eixo de
uma letra para a seguinte;
O itlico Barroco ambidestro (orientao

para a esquerda e para a direita);
Foi no Barroco que surgiu o hbito de juntar

letra redonda e itlica na mesma frase;
UA 3
4 Neoclssicas (sc. XVIII)

Caractersticas Letra Neoclssica (sc. XVIII):
Desenho mais esttico e mais rigoroso;
Afastamento do efeito do instrumento (cana

cortada): o eixo deixa de ser humanista e torna-se
vertical (eixo ditado pela idia e no pela
anatomia humana);
Abertura moderada;
Enquanto as Barrocas eram ambidestras, estas

no so de nenhuma mo;
Terminal lacrimal;
O primeiro tipo Neoclssico: Roman du

Roi (Frana, 1690);
UA 3
5 - Romnticas (sc. XVIII e XIX)

Caractersticas Letra Romntica (sc. XVIII e XIX):
Tanto a Neoclssica como a Romntica

possuem eixo Racionalista;
Ambas parecem mais desenhadas que
escritas.
UA 3
6 - Realistas (sc. XIX e XX)

Caractersticas Letra Realista
(fins sc. XIX e incio sc. XX):
Procura a simplicidade para possibilitar a

leitura a um grupo mais vasto de pessoas;
Na maioria das vezes a letra Realista tem a
mesma forma base da Neoclssica ou da
Romntica, contudo tem serifas mais pesadas
(em bloco), de igual peso ao trao principal da
letra ou no as tem de todo.
UA 3
7 - Modernistas Geomtricas (sc. XX)

Caractersticas Letra do Modernismo Geomtrico (sc. XX):
Caracterstica marcante do incio do sc. XX:

geometrismo (caracterstica do modernismo)
No tm distino de trao: no h modulao;
As serifas possuem o mesmo peso do trao, ou no

existem;
Abertura moderada;
No h eixo: os traos curvos so geralmente

circulares;
Ausncia de itlico ou sua substituio por

oblquo;
UA 3
7 - Modernistas Lricas (sc. XX)

Caractersticas Letra do Modernismo Lrico (sc. XX):
Redescoberta dos prazeres da escrita da letra em vez do

desenho: redescoberta da caligrafia;
Redescoberta do eixo humanista;
Redescoberta da escala humanista das letras

Renascentistas;
Trao modulado;
Grande abertura;
Relativamente forma renascentista, as serifas abruptas

de cabea e os terminais so mais assumidos (mais
evidentes).
UA 3
8 - Ps-Modernistas (fins sc.XX)

Caractersticas Letra do Ps-Modernismo (fins sc. XX):
O desenho tipogrfico Ps-moderno baseia-se no

revisitar e reciclar das idias e formas
Neoclssicas,
Romnticas e de outros perodos pr-modernos,

sempre com um toque de leveza e humor;
Ps-modernismo: atitude autoconsciente mas

pouco sria;
Mistura de eixo racionalista com energia

caligrfica;
H muitos tipos de letra neste perodo: no h

uma nica regra.
UA 3
8 - Ps-Modernistas
geomtricos (fins sc.XX)
Caractersticas Letra do Ps-Modernismo Geomtrico (fins
sc. XX):
Como as suas predecessoras do Modernismo

Geomtrico, so normalmente no serifadas ou
desenhadas
com trao contnuo (sem modulao);
Baseadas no crculo e linha, contudo assimtricas;
Ricas de nostalgia, reciclam valores e referncias
estticas as idias Realistas;
O desenho da letra inclui o humor ps-moderno;
H muitos tipos de letra neste perodo: no h
uma nica regra;
Ps-Modernismo: tal como o Neoclssico, uma
arte da superfcie, mais da viso do que da
reflexo.
UA 3
Classificao de
Tipos Ps-Modernos F.V.Cauduro (2002)
Se refere a uma classificao dos principais estilos que
informam o imaginrio dos designers contemporneos,
profissionais e amadores, na criao de fonts.
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Fontes Bitmap ou Pixelizadas

Fontes Techno
Fontes Revival ou Retro
Fontes Vernaculares ou Pop
Fontes Personalizadas
Fontes Grunge
Fontes Randmicas
Fontes Hbridas ou Esquizofrnicas
Fontes de Artifcio
Fontes Dingbats
UA 3
Tipos Ps-Modernos
1- Fontes Bitmap ou Pixelizadas

caracterstica das primeiras fontes digitais produzidas
para impressoras de agulha e para uso nas telas de
videogames, de monitores de computadores, displays
eletrnicos em geral e em displays de cristal lquido
de relgios e calculadoras digitais.
UA 3
Tipos Ps-Modernos
2 - Fontes Techno
Caracterizadas pelas formas baseadas em ngulos
retos, de espessura geralmente uniforme, visual
simplificado, emulando estilos de letterings; parecem
ser produzidas por instrumentos de desenho.
UA 3
Tipos Ps-Modernos
3 - Fontes Revival ou Retro

Fontes que so releituras ou simplesmente cpias digitais
de fontes populares em outras pocas; so geralmente
pastiches que no se levam muito a srio nem se
preocupam muito com a exatido da citao. Exploram a
nostalgia e o saudosismo, sem privilegiar nenhuma poca
em particular.
UA 3
Tipos Ps-Modernos
4 - Fontes Vernaculares ou Pop

Fontes que se inspiram em elementos grficos
anedticos da literatura e da arte popular, produzidos
por dispositivos grficos populares (como rotuladores,
xeroxes, faxes, carimbos, tipos xilogravados, tipos de
antigas mquinas de datilografia, tipos pintados,
escritos a giz, caligrafados, etc.)
UA 3
Tipos Ps-Modernos
5 - Fontes Personalizadas
Fontes baseadas na escrita mo-livre de uma
pessoa ou num estilo grfico idiosincrtico,
geralmente expressando um gosto ou estilo muito
singular e especfico.
UA 3
Tipos Ps-Modernos
6 - Fontes Grunge
Fontes sujas, trash, que se caracterizam por um
design imperfeito, desleixado, algumas vezes ilegvel,
e que geralmente se inspiram em grafites, pichaes,
deterioraes, rudos, colagens, raspagens, etc.
UA 3
Tipos Ps-Modernos
7 - Fontes Randmicas
Fontes cujas outlines ou background so variveis cada
impresso em funo de irregularidades aleatrias
introduzidas atravs da linguagem PostScript. Cada
impresso nica, sem nunca repetir a mesma forma.
UA 3
Tipos Ps-Modernos
8 - Fontes Hbridas ou Esquizofrnicas

Fontes que resultam de uma mistura fragmentada de
estilos de diversos tipos, de resultados imprevisveis,
apresentando uma lgica complexa de gerao de seus
tipos.
UA 3
Tipos Ps-Modernos
9 - Fontes de Artifcio
So geralmente produzidas atravs de processo de
aplicao uniforme de um ou mais efeitos especiais de
Photoshop, ou resultam de outros algoritmos analgicos ou
matemticos de deformao ou transformao de forma.
UA 3
Tipos Ps-Modernos
10 - Fontes Dingbats
Fontes no-alfanumricas, pictricas ou de sinais
grficos arbitrrios, e que exploram temas derivados de
cartoons, smbolos cientficos e comerciais, elementos
decorativos, pictogramas de sinalizao, marcas e logos
comerciais, sinais, molduras, fios, linhas, etc.
UA 3
Alguns tipgrafos renomados

e seus tipos
CLAUDE GARAMOND Paris, Frana: 1480-1561
Fundidor de tipos, designer de tipos, editor.
Berthold Garamond BQ, Adobe Garamond, Stempel Garamond,
Typoart Garamond, LTC Garamont, Granjon, Sabon
JOHN BASKERVILLE Inglaterra: 1706-1775

Designer de tipos, mestre em redao, impressor.
TS Baskerville, Baskerville, Baskerville, John Baskerville, TS Old
Baskerville
GIAMBATTISTA BODONI Parma, Itlia: 1740-1813

Designer de tipos, impressor de livros, gravador e editor.
Bodoni, Bodoni, LTC Bodoni 26, Bodoni Classico, Bodoni Stencil,
Bauer Bodoni, ITC Bodoni Six, ITC Bodoni Twelve, ITC Bodoni
Seventy-Two, Linotype Gianotten
UA 3
Alguns tipgrafos renomados

e seus tipos
MORRIS FULLER BENTON EUA: 1872-194
Engenheiro, designer de tipos.
Bodoni-Antiqua, Broadway, Century, Franklin Gothic, Clearface,
Cheltenham, Souvenir, Stymie
RUDOLF KOCH Nuremberg, Alemanha: 1876-1934
Designer de livros e de tipos, calgrafo e professor.
Kabel, Koch-Antiqua, Claudius, Wilhelm-Klingspor-Gotisch, Wallau
STANLEY MORISON Inglaterra: 1889-1967
Designer de tipos.
Times New Roman, Bembo (redesenho), Blado
PAUL RENNER Wernigerode, Inglaterra: 1878-1956
Designer de tipos, artista grfico, pintor, autor e professor.
Futura, Renner Antiqua
ED (EDWARD) BENGUIAT EUA: 1927
Designer de tipos, calgrafo e msico de jazz.
Bauhaus, Benguiat, Benguiat Gothic, Bookman, Tiffany
UA 3
Tipografia
Mapa
Quatro Revolues que

modificaram
BCA 3.2 - Conceitos
Partes do tipo
Variaes estruturais
Sistema de medidas

tipogrficas

tipos

A escolha dos tipos
Elementos
Relao entre tipos
Formatos de fontes
imagens
UA 3
| BCA 3.3 | Composio com tipos
INTERVENES NA APLICAO DE TIPOS

Espacejamento
Alinhamento
ESPAO ENTRE LETRAS: Espacejamento

Comando predeterminado de espacejamento para os
elementos das fontes.
UA 3
ESPAO HORIZONTAL
Variao de kerning entre W e A
Kerning
Ajustamento de espaos horizontais entre pares de
caracteres especficos em um texto.
Tracking
Controle do espao mdio entre os caracteres num
bloco de texto definidos por nveis de variao.
Variao de tracking
UA 3
ESPAO HORIZONTAL
Espao entre Linhas
Freqentemente chamado de leading, no ramo grfico.
Espao da entrelinha = distncia entre uma linha de base e sua
subseqente.
Variao de leading
UA 3
ESPAO VERTICAL
Entrelinha muito fechado:
Embaralha a leitura.
Entrelinha muito aberto:
Aumento da dificuldade de leitura e
do tempo de leitura.
UA 3
ALINHAMENTO DO TEXTO
Posicionamento do texto entre as margens da pgina:
Alinhado esquerda;
Alinhado direita;
Centralizado;
Justificado;
Justificado forado (quando cria espao
entre letras e palavras muito acentuado,
prejudica a leitura).
UA 3
ALINHAMENTO DO TEXTO
Observar o efeito dos caminhos brancos no pargrafo:
Texto hifenizado permite uma leitura e um visual
mais agradvel.
Ateno ao alinhamento da ltima linha do
pargrafo.
UA 3
Recursos de composio
para destaque de elementos
Capitular
Versalete
Indentao
Recuo
UA 3
CAPITULAR
Aumento do corpo da primeira letra de um pargrafo.
Capitular descendente: a capitular entra no corpo do texto,
sendo alinhada a linha das ascendentes do texto.
Capitular ascendente: a capitular fica fora do corpo do
texto, sendo alinhada a linha de base da primeira linha do
corpo do texto.
VERSALETE
Composio em que todas os caracteres ficam em caixa alta,
sendo que os correspondentes a minsculos ficam da altura-X
(olho mdio) do corpo do texto.
UA 3
1.
2.
INDENTAO OU ENTRADA
1. Indentao esquerda na primeira linha do pargrafo.
2. Indentao esquerda.
3.
3. Indentao direita.
4. Indentao diagonal (primeiras linhas a esquerda,
ltimas linhas a direita)
4.
RECUO (INVERSO DA INDENTAO)

Alinhamento a esquerda da primeira linha do pargrafo
e alinhamento a direita das linhas seguintes.
Recuo
UA 3
Relao entre tipos

Quando compomos layouts com tipos costuma
haver mais de um elemento por pgina. Mesmo
um documento com simples texto corrido, tem
ttulos, subttulos, ou suas pginas numeradas.
Nesta situao dinmica da pgina,
estabelecida uma relao que pode ser
concordante, conflitante ou contrastante. A
maioria dos designs concordantes tende a ser
mais calma e formal.
UA 3
Relao entre tipos:
Concordncia
tipos da mesma famlia com peso,

largura, tamanho ou estilo diferentes
UA 3
Relao entre tipos:
Conflitos
Semelhanas
Estruturas conflitantes
UA 3
Relao entre tipos:
Contrastes
Contraste de estrutura
Contraste conceitual
UA 3
Tamanho
Peso
Estrutura
Forma
Direo
Cor
UA 3
Tamanho
Tamanho: definido em pontos.
UA 3
Peso
Peso: espessura dos traos:
fino (light), mdio (regular, normal,
semibold) ou grosso (bold, extrabold);
UA 3
Estrutura
Estrutura: maneira como a fonte foi
construda, a distribuio dos
traos (grosso-fino) - relaciona-se
com a categoria;
UA 3
Forma
Forma: refere-se ao seu formato e
tambm relaciona-se com a categoria;
UA 3
Direo
Direo: refere-se inclinao no da
estrutura do tipo mas do texto,
como um todo.
UA 3
cor
cor
UA 3
Critrios para uso de TIPO

O nvel de atendimento dos requisitos de
usabilidade so determinados por trs critrios
ergonmicos: legibilidade, leiturabilidade
(readability) e pregnncia.
(Lucy Niemeyer, 2001)
UA 3
Legibilidade
Este atributo nos confere a capacidade de diferenciar com
rapidez letras de um mesmo tipo, sendo considerado um tipo
altamente legvel todo aquele no qual se identifica este
atributo.
UA 3
Leiturabilidade (readability)
Leiturabilidade no depende da configurao do caractere

em si. Alto nvel de leiturabilidade = fcil acesso
informao continuada nas palavras gerado pela composio
do texto.
UA 3
Pregnncia
a qualidade de um caractere ou smbolo que faz com que ele seja
visvel separadamente do seu entorno.
Ex.: quando uma linha de texto se destaca entre outras informaes
dispostas, ela tem mais pregnncia para informao.
Esta a qualidade prioritria que se persegue no design de
mensagens de advertncia de cartazes.
(Lucy Niemeyer, 2001)
As diversas pesquisas sobre legibilidade, construram um conjunto de

recomendaes quanto a tamanhos e propores de letras, nmeros e
smbolos para torn-los mais legvel.
UA 3
Pregnncia
O tamanho de letras e nmeros depende da distncia de
leitura. Recomenda-se que a altura de letras e nmeros
seja 1/200 da distncia em milmetros.
UA 3
Tipografia
Mapa
Quatro Revolues que

modificaram
BCA 3.2 - Conceitos
Partes do tipo
Variaes estruturais
Sistema de medidas

tipogrficas

tipos

A escolha dos tipos
Elementos
Relao entre tipos
Formatos de fontes

imagens
UA 3
| BCA 3.4 | Tipografia Digital
BCA 3.4 -
Tipografia Digital
A reproduo de caracteres no sistema digital feita a partir
do armazenamento das informaes Bitmap e outline.
Bitmap: o registro do conjunto de informaes de cada um
dos pontos de um caractere tipogrfico a ser mostrado no na
tela do computador.
Outline: a descrio de linhas retas e curvas que formam o
contorno do caractere. a informao usada pelas
impressoras na impresso dos tipos.
Formatos de fontes
True Type, PostScript e Open Type.
UA 3
True Type
Foi desenvolvido pela Apple mas hoje serve

principalmente os usurios do Windows.
Arquivo representado por um nico cone.
Rene em um nico arquivo as informaes necessrias
para ampliar caracteres em qualquer tamanho, tanto em
tela quanto em sada de impresso.
UA 3
PostScript
H dois tipos: Type1 e Type3, sendo que quase

todas so Type1.
Alm de ser marca registrada da Adobe mais que
um formato de fonte, uma linguagem que
gerencia texto e imagem.
UA 3
OpenType
Formato universal, desenvolvido em conjunto pela

Adobe e pela Microsoft.
Assim como os arquivos TrueType concentra em um s
arquivo as informaes para impresso e visualizao
em tela. Alm de ser multiplataforma (PC e Mac).
Pode incluir mais de 65.000 glifos (diferentes desenhos
de caracteres e sinais), aumentando o suporte a
diferentes lnguas.
Suporte a caracteres no standards, como swasshes,
ligaturas, numerais de texto, etc.
Veja: http://www.adobe.com/type/opentype/index.html
UA 3
Confira algumas ferramentas que vo auxiliar na criao
de fontes personalizadas:
ScanFont
FontLab
The Font Creator Program
UA 3

Uma vez que a tipografia tambm compreende transmitir
impresses atravs da escrita cada detalhe importante e
interfere no processo de entendimento da mensagem pelo
leitor do web site.
UA 3
Restries para o uso trabalho com

tipografia na web
O nmero das famlias de fontes toleradas, por
default pela maioria dos sistemas operacionais bem
reduzido. importante sempre levar em considerao
a lista segura de fontes que em geral so:
Arial, Courier New, Georgia, Times New Roman,
Verdana, Trebuchet MS, Comic Sans
Websafe fonts por www.sitepoint.com
UA 3
Como voc pode notar no h muita possibilidade de escolha. Se

pensa-se em utilizar uma fonte sem serifa a escolha deve ficar entre
Arial, Trebuchet MS e Verdana.
Porm, a propriedade font-family do CSS permite a escolha de
mltiplas fontes em ordem de preferncia. Se a primeira fonte no
est disponvel a segunda ser utilizada, se a segunda no puder ser
usada, existe uma terceira opo e assim por diante.
Exemplo de font-family no CSS:
font-family: Calisto MT, Gergia, Times New Roman, serif;
UA 3
Apresentando textos
como imagens
Para contornar esta limitao pode-se
apresentar textos como logotipos, top
navigation, ttulos e subttulos atravs de
imagens, como no exemplo ao lado.
UA 3
A escolha dos tipos

Deve-se levar em conta:
Aspectos Histricos
A histria do tipo desde sua criao;

Autor;
Contexto histrico de sua criao.
Aspectos Conceituais
Objetivos do projeto
Pblico alvo
Relao entre tipos
Aspectos Tcnicos
Disponibilidade (licena de uso, copyright)

Viabilidade de exibio em tela (web)
Legibilidade;
Acabamento p/tela p/impresso;
UA 3
Laboratrio: etapa 3
Depois de tudo que foi estudado nesta Unidade voc deve escolher a tipografia mais
adequada para cada uma das duas marcas respeitando as caractersticas j abordadas.
Relembrando:
Caractersticas:
familiar
rstico
todos os clientes
Caractersticas:
dinamismo e vigor
atraente, sensual
segurana
Pblico:
Classe AA
60 anos
Pblico:
Classe: B e C
anos
Design & Percepo

BCA 4.1 - Percepo
BCA 4.2 - Conceituao da forma
Leis da Gestalt
Categorias conceituais fundamentais
nfases visuais
BCA 4.5 - Exerccios prticos
UA 4
| BCA 4.1 | Percepo
UA4 - Design & Percepo

OBJETIVOS
Avaliar a relao entre Design e Percepo

Estudar como o design trabalha a percepo
Discutir conceitos relacionados percepo
UA 4
| BCA 4.1 | Percepo
Bibliografia bsica
ARNHEIM, Rudolf. Arte e Percepo Visual. So Paulo, Ed. Pioneira, 1986.
DONIS, A. Dondis. Sintaxe da linguagem Visual. So Paulo: Edies 70, 1989
GOMBRICH, E.H. Arte e Iluso. 3.ed. So Paulo: Martins Fontes, 1995.
GOMES FILHO, Joo. Gestalt do objeto: Sistema de lettura visual da forma.
So Paulo: Escrituras, 2000.
JOLY, Martine. Introduo Anlise da Imagem. Campinas: Papirus, 2003.
MANGUEL, Alberto. Lendo Imagens. So Paulo: Companhia das Letras, 2001.
OLIVEIR, Sandra Ramalho. Imagem tambm se l. So Paulo: Rosari, 2005.
Design & Percepo

BCA 4.1 - Percepo
Leis da Gestalt
nfases visuais
UA 4
| BCA 4.1 | Percepo
BCA 4.1 -
Percepo
PERCEPO
Origem na palavra grega aisthesis
Essa palavra tambm deu origem ao termo
esttica - percepo atravs dos sentidos
UA 4
| BCA 4.1 | Percepo
Percepo ...
Complexo processo de recepo e produo de sentido de qualquer
informao recebida.
ato ou efeito de perceber;
combinao dos sentidos no reconhecimento de um objeto;
recepo de um estmulo;
faculdade de conhecer independentemente dos sentidos;
sensao;
intuio;ato ou operao da inteligncia;
representao intelectual;
UA 4
| BCA 4.1 | Percepo
Percepo
FASE 1: reconhecimento
Olho e crebro tendem a compreender e organizar o

que vemos, impondo um sentido racional pela
experincia individual.
UA 4
| BCA 4.1 | Percepo
Percepo
FASE 2: anlise
Interpretao e organizao do estmulo percebido.

Estruturao dos elementos da informao. Distino
entre fundo e figura, contornos, tamanhos, contrastes,
cores, grupos, etc.
UA 4
| BCA 4.1 | Percepo
Percepo
FASE 3: complementao de sentido
Produo de sentido dos elementos que possam dar

definio, simetria, continuidade, unificao e boa
forma informao visual.
UA 4
| BCA 4.1 | Percepo
A construo do significado da informao visual depende

tambm da experincia pessoal e intelectual do indivduo aspecto puramente subjetivo.
Experincia
intelectual do sujeito:
Subjetiva
Seletiva
Temporal
Nveis da Percepo:
Instintivo
Descritivo
Simblico
Pato ou coelho?
UA 4
| BCA 4.1 | Percepo
Curiosidades
Muitos artistas e autores se utilizam dos recursos da
percepo para dar mais lirismo s suas obras.
Alice in Wonderland, de Lewis Carroll
UA 4
| BCA 4.1 | Percepo
Estudar a percepo importante porque o

comportamento das pessoas baseado na produo de
sentido que fazem da realidade e no na realidade em si.
Estudos que baseiam sua teoria na percepo:
Gestalt
Fenomenologia
Existencialismo
UA 4
| BCA 4.1 | Percepo
Fatores que influenciam a percepo
A ATENO pode ser influenciada por agentes:

EXTERNOS
Intensidade Sirene de ambulncia
Contraste cores vivas
Movimento crianas reagem mais facilmente a
brinquedos em movimento
Incongruncia - ateno s coisas absurdas e bizarras
UA 4
| BCA 4.1 | Percepo
Fatores que influenciam a percepo
INTERNOS
Motivao valorizao do que motiva e d prazer em

contraposio s coisas que no interessam
Experincia fcil reconhecer o que j entendemos
UA 4
| BCA 4.1 | Percepo
Tipos de percepo
1.Visual
2.Auditiva
3.Gustativa
4.Olfativa
5.Ttil
6.Tempo/movimento
7.Espacial
UA 4
| BCA 4.1 | Percepo
1 - Percepo Visual
Formas
Relaes espaciais
Cores
Intensidade luminosa
UA 4
| BCA 4.1 | Percepo
2 - Percepo Auditiva
Timbres
Alturas e freqncias
Intensidade sonora (volume)
Percepo rtmica
Localizao auditiva (origem do
som)
UA 4
| BCA 4.1 | Percepo
3 - Percepo Olfativa
Discriminao de odores
(diferenciao e efeito da
combinao)
Alcance olfativo
UA 4
| BCA 4.1 | Percepo
4 - Percepo Gustativa
Doce
Salgado
Amargo
Azedo
UA 4
| BCA 4.1 | Percepo
5 - Percepo Ttil
A pele o maior rgo humano
O tato no uniforme por todo o corpo
O tato distingue:
Objetos pequenos
Calor
Dor
UA 4
| BCA 4.1 | Percepo
6 - Percepo Temporal/Movimento
Produo de ritmos
Ordem temporal e simultaneidade

Aparelho vestibular (manuteno
do equilbrio)
7 - Percepo Espacial
Estimativa de distncia dos objetos
Estimativa de tamanho relativo dos
objetos
Percepo
Percepo tem a ver com os sentidos
O que no sentido, no percebido
Cada sujeito, atravs dos variados
modos de perceber o mundo, produz
significados a respeito das coisas que
percebe
Filtragem e recomposio baseadas em
experincias anteriores
Jogos de percepo visual
M.C. Escher (1898-1972)
Escher, artista grfico

holands, se tornou
clebre por suas
representaes de
construes impossveis.
Explorao da percepo
visual na publicidade
Design & Percepo

BCA 4.1 - Percepo
Leis da Gestalt
nfases visuais
UA 2
BCA 4.2
Conceituao da forma e propriedades
FORMA:
Figura ou imagem visvel do contedo
Aparncia externa
Feitio, configurao, aspecto
PARA PERCEBER UMA FORMA

Deve haver variaes, diferenas no campo visual.
Contrastes dos elementos que constituem o objeto.
Propriedades da forma
A forma pode ser:
um ponto,
uma linha,
um plano
um volume
Pode ter configurao:

real
esquemtica
O ponto
Unidade mais simples e irredutivelmente mnima
de comunicao visual
O ponto qualquer elemento que funcione como
forte centro de atrao visual dentro de um
esquema estrutural
AS PRINCIPAIS CARACTERSTICAS DO PONTO SO:

Um grande poder de atrao visual, criando tenso
sem direo.
Quando prximos, dois pontos podem produzir
sensaes de tenso ou de direo, criando uma
linha reta imaginria que os une.
Posicionando diferentes pontos em seqncia,
sugere-se uma direo
Quando agrupados vrios pontos podem definir
formas, contornos, tons ou cores.
As sucesses de pontos prximos so bons recursos para:

dirigir a ateno observador;
guiar seu olhar para uma zona concreta;
estabelecer relaes entre elementos;
separar zonas da pgina.
A linha
A linha uma sucesso de pontos
Tambm pode ser definida como um ponto em
movimento
A linha delineia, contorna, conforma e
delimita objetos e coisas
4.2 | Design & Percepo | Conceituao da forma
AS PRINCIPAIS PROPRIEDADE DA LINHA SO:

Grande expressividade grfica e muita
energia.
Quase sempre expressa dinamismo,
movimento e direo.
Cria tenso no espao grfico em que
se encontra.
Cria separao de espaos no grafismo.
A repetio de linhas prximas gera
planos e texturas.
Em uma composio, a linha define direcionamento:

estar mais acentuado o que mais linhas na mesma
direo houver. Esta qualidade pode ser usada para
dirigir a ateno em uma direo concreta, fazendo
com que o espectador observe o lugar adequado.
Uma linha divide ou circunda uma rea, encontra-se

na borda de uma forma. Expressa separao de
planos, permitindo ao designer us-la como elemento
delimitador de nveis e reas na composio
As propriedades de uma linha viro definidas pela:
Grossura;
Longitude;
Orientao (direo) em relao pgina;
Localizao (posio);
Forma (reta ou curva);
Cor.
A unio sucessiva de linhas forma um trao.

O traos do volume aos objetos que desenhamos e
permitem representar simbolicamente objetos na
composio, eliminando deles toda informao
suprflua, deixando apenas o essencial.
Linha reta
Define o caminho mais curto entre dois pontos.
Ela pouco freqente na natureza, onde
predominam as curvas, porm so abundantes no
ambiente humano, pois o homem necessita delas
para dar estabilidade s suas criaes.
Contornos
Quando a linha se fecha sobre si mesma,
descreve um contorno e determina uma tenso
entre o espao criado e seus limites.
Os contornos podem ser estticos ou
dinmicos, dependendo do uso ou das
diferentes direes que o designer adote.
Contornos: quadrado
uma figura de quatro lados de igual longitude
que se unem em ngulos retos.
Sua direo a vertical e horizontal.
Em projees tridimensionais existe o cubo no
caso do quadrado e o paraleleppedo no caso
do retngulo.
Associa-se a idias de estabilidade, solidez e
equilbrio, severidade, honestidade, retido,
esmero e permanncia.
Contornos: crculo
uma curva perfeita cujo permetro o

mesmo de qualquer ponto para o centro.
Sua direo a curva.
sua projeo tridimensional a esfera. As

modificaes so o oval e o ovide.
Este contorno tem um grande valor

simblico especialmente seu centro. Pode
ter diferentes significaes: proteo,
instabilidade, totalidade, infinitude,
aconchego, fechado...
Contornos: tringulo
O tringulo eqiltero apresenta os sentidos

direcionais vertical-horizontal e se apia num de
seus lados. O tringulo eqiltero tem os trs
lados e ngulos iguais.
uma figura estvel, com trs pontos de apoio,

um em cada vrtice, ainda que no to esttico
como o quadrado.
Sua direo a diagonal e sua projeo

tridimensional o tetraedro.
Pode significar verticalidade sempre que

representado pela base. Associam-se a ele
significados de ao, conflito e tenso.
A partir de combinaes e variaes infinitas destes

contornos bsicos derivam todas as formas imaginveis.
O plano
O plano definido como uma sucesso de

linhas.
Em geometria, um plano, por definio, tem

somente duas dimenses: comprimento e
largura.
Como superfcie conhecida em: fachadas

de edifcios, de tetos e paredes, de pisos de
campos e quadras desportivas, de ruas e
estradas...
O volume
Volume definido como algo que se expressa por projeo
nas trs dimenses do espao, de duas maneiras:
Pode ser fsico: algo slido como um

bloco de pedra, como um edifcio, como
uma pessoa, etc., ou seja, algo real.
Pode ser criado por meio de artifcios:

como na pintura, no desenho, na
ilustrao, e outros, sobre superfcie
plana.
A sensao de espessura ou profundidade pode ser

obtida pelo emprego de:
Luzes, brilhos, sombras e texturas.
Com o uso ou no da perspectiva linear
Por intermdio de cores, que avanam e recuam,
de modo a ressaltar determinadas artes do objeto
Configurao
Configurao o sinnimo de forma; porm, neste caso deve
ser entendida pelas suas caractersticas espaciais
consideradas essenciais.
Configurao real
Pode-se referir a duas propriedades visuais distintas dos

objetos:
A representao real
A representao esquemtica.
Configurao
esquemtica
Juan Mir
Configurao real
Representao real ou figurativa dos objetos
possvel saber exatamente a que ou a quem faz

referncia
Fotografias, ilustraes e pinturas figurativas
Esttuas, monumentos, produtos
Configurao esquemtica
Feita por meio do conceito de esqueleto

estrutural
NO faz referncia a uma coisa em particular
Associa-se ao real representando sua idia sem

representar suas especificidades smbolo,
cone, silhueta, etc.
Exerccio:
Identifique a presena mais evidente das
categorias: Ponto, Linha, Plano, Volume e
Configurao real ou esquemtica nas
imagens a seguir:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
Design & Percepo

BCA 4.1 - Percepo
Leis da Gestalt
Categorias conceituais:
Fundamentais
Tcnicas de comunicao visual
4.3 | Design & Percepo | Conceitos da Gestalt
4.3 - Gestalt
CONCEITO
Immanuel Kant: unidade do ato de percepo
O crebro percebe as partes de um todo, mas

as organiza de maneira original que pode
mudar o sentido do todo inicial
O que Gestalt?
Palavra alem, sem traduo
Significa integrao das partes em
oposio soma do todo
O todo maior ou diferente da
soma das partes
Relaciona-se a uma teoria da
organizao ou teoria da forma/
configurao
Se cada um de 12 observadores ouvisse uma

nota da melodia, a soma das experincias no
corresponderia ao que seria percebido por
algum que ouvisse a melodia toda.
Von Ehrenfels, filsofo vienense - fins do sc. XIX
Para que serve?

A Gestalt estuda a nossa percepo da
interao entre as formas e o provvel
motivo de umas combinaes obterem
mais xito que outras.
Exemplo
Para provar nossa capacidade de organizao
mental, e por um puro ato de aprendizagem
e vontade, estabelecemos vrias ordenaes
perceptivas visveis.
Mesmo que se note duas distncias diferentes, as

verticais-horizontais mais curtas que as diagonais,
produzem um efeito predominante.
Qualquer forma pede sugerir a terceira dimenso.
Leis da Gestalt
1. Lei da proximidade
2. Lei da Semelhana
3. Lei da Pregnncia (Lei da boa forma e destino comum)
4. Lei do fechamento
5. Lei da experincia ou familiaridade
6. Lei da simetria
7. Lei da continuidade
8. Lei da figura-fundo
1 - Proximidade
Quando as partes de uma totalidade
recebem um mesmo estmulo, se
unem formando grupos no sentido da
mnima distncia.
2 Semelhana
Quando so apresentados vrios elementos
de diferentes classes, h uma tendncia a
constituir grupos com os que so iguais.
3. Pregnncia (boa forma)

O sistema tende espontaneamente estrutura
mais equilibrada, mais homognea, mais
regular, mais simtrica. A pregnncia diz
respeito ao caminho natural que ela segue em
direo boa forma, que , idealmente, a
mais simples de todas. E essa simplicidade
formada justamente por equilbrio,
homogeneidade, regularidade e simetria.
4. Fechamento
As linhas incompletas que circundam uma
superfcie so facilmente captadas como
unidade ou figura. As circunferncias,
quadrilteros ou tringulos produzem o efeito
de fechamento.
5 - Experincia ou Familiaridade
Este princpio avalia o papel da familiaridade e
da experincia no processo da percepo, uma
vez que percebemos com base em nossas prprias
experincias. Tambm observa-se que as
experincias individuais humanas condicionam a
percepo a especializar-se.
6 - Simetria
Sua importncia ultrapassa o campo da percepo
das formas para constituir um dos fenmenos
fundamentais da natureza. A Biologia, a
Matemtica, a Qumica e a Fsica e at mesmo a
Esttica organizam-se seguindo as leis da simetria.
Ela est ligada ao ser humano, cuja prpria
estrutura fisiolgica tambm simtrica.
7 - Continuidade
Possui caractersticas da Lei do Fechamento sntese de formas
incompletas e da Lei da Pregnncia - provoca a preferncia pela
forma mais simples.
Tambm tem elementos da Lei da Experincia opta-se por
aquelas formas familiares ao observador.
As partes de uma figura que tm boa forma ou indica uma
direo ou destino comum, formam com clareza unidades
autnomas no conjunto.
8 - Figura e fundo
Este princpio o de maior fora e transcendncia
porque engloba todos os demais.
Nele est o princpio organizador da percepo, j
que as formas s se constituem como figuras
definidas quando sobrepostas a um fundo mais
neutro.
Exerccio
Analise as imagens a seguir destacando a presena das Leis
da Gestalt mais evidentes em cada uma delas.
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:

Categorias conceituais:
Fundamentais
Tcnicas de comunicao visual
Objetivo: facilitar a leitura visual
4.4 | Design & Percepo | Sistema de leitura Visual
4.4.1 - CATEGORIAS FUNDAMENTAIS
1. HARMONIA
2. EQUILBRIO
3. CONTRASTE
HARMONIA
Disposio formal bem organizada
Perfeita articulao visual na integrao das partes
HARMONIA: ordem
HARMONIA:
regularidade (seqencialidade)
DESARMONIA: desordem
DESARMONIA: irregularidade
(falta de seqencialidade)
EQUILBRIO
Foras que agem sobre o corpo so compensados
Pesos visuais so distribudos
EQUILBRIO: peso e direo
EQUILBRIO: simetria
EQUILBRIO: assimetria
EQUILBRIO: desequilbrio
CONTRASTE
Tcnica mais importante para mensagens bi ou tridimensionais
Desequilibra, provoca e atrai a ateno
Tcnicas de contraste:
Luz e tom
Cor
Vertical e horizontal
Movimento
Dinamismo
Ritmo
Passividade
Proporo e escala
Agudeza
CONTRASTE: luz e tom
CONTRASTE: cor
CONTRASTE: horizontal vertical
CONTRASTE: movimento
CONTRASTE: dinamismo
CONTRASTE: ritmo
CONTRASTE: passividade
CONTRASTE: proporo e escala
CONTRASTE: agudeza
Exerccio
Identifique as categorias conceituais fundamentais mais
evidentes nas imagens a seguir:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
4.4.2 TCNICAS DE COMUNICAO VISUAL
Estratgias compositivas e meios de expresso do contedo
Contedo:
O que est sendo direta ou indiretamente expresso.
o carter da informao. a mensagem. Nunca est
dissociado da forma.
Forma:
Representao: aparncia, suporte, composio, tipografia,
Contedo + forma = Objetivo

Escolhas do designer: sub julgadas ao objetivo e ao pblico
Significado deve ser compartilhado entre o

Designer e o pblico.
Contedo
Designer
Pblico
Forma
Mensagem e mtodo de express-la

A tcnica a fora fundamental da
abstrao, a reduo e a simplificao de
detalhes complexos e cambiveis a
relaes grficas que podem ser
apreendidas.
Donald Anderson Elements of Design.
Com inteno de um controle efetivo o designer deve

compreender os complexos procedimentos atravs dos
quais o organismo humano v e com este
conhecimento aprender a influenciar respostas atravs
das tcnicas visuais.
Dondis Sintaxe da linguagem visual
Esta busca extremamente intelectual; as opes

atravs da escolha de tcnicas devem ser racionais e
controladas.
Mas o que se precisa fazer para criar a

estrutura elementar?
As opes que levam ao efeito expressivo dependem da
manipulao dos elementos atravs de tcnicas visuais.
Tcnicas de Comunicao Visual
Oposies conceituais
Harmonia x contraste
Nivelamento x aguamento

Equilbrio x Instabilidade
Simetria x Assimetria
Regularidade X Irregularidade
Simplicidade x Complexidade
Unidade X Fragmentao
Economia X Profuso
Minimizao X Exagero

Minimizao X Exagero
Previsibilidade x Espontaneidade
Atividade x Estase
Sutileza X Ousadia
Neutralidade x nfase
Transparncia X Opacidade
Estabilidade x Variao

Exatido X Distoro
Planura x Profundidade
Singularidade X Justaposio
Seqencialidade X Acaso
Agudeza X Difuso
Repetio x Episodicidade

Luminosidade X Embaamento
Angularidade X Rotundidade
Verticalidade X Horizontalidade
Delineamento X Mecanicidade
Interseo X Paralelismo
Equilbrio
Instabilidade
Simetria
Assimetria
Regularidade
Irregularidade
Unidade
Fragmentao
Simplicidade
Complexidade
Economia
Profuso
Minimizao
Exagero
Previsibilidade
Espontaneidade
Atividade
Estase
Neutralidade
nfase
Opacidade
Transparncia
Exatido
Distoro
Planura
Profundidade
Singularidade
Justaposio
Seqencialidade
Acaso
Agudeza
Difuso
Banana
Barco
Chaveiro
Avio
Telegrama
Trem
Repetio
Episodicidade
Exerccio
Avalie os sites a seguir conforme os conceitos de cores,
tipografia e formas que voc j aprendeu.
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
R:
Laboratrio: etapa 4
A partir de agora voc comear a planejar o exerccio final: Desenvolver uma pea de
divulgao (impresso: formato A5 ou um Hot site) utilizando tipografias, cores, formas e
imagens para divulgar cada uma das duas empresas sempre respeitando as
caractersticas j abordadas. Relembrando:
Caractersticas:
familiar
rstico
todos os clientes
Caractersticas:
dinamismo e vigor
atraente, sensual
segurana
Pblico:
Classe AA
60 anos
Pblico:
Classe: B e C
anos
Planejamento de projetos
Design, arte e esttica

BCA 5.2 Processos
e princpios de planejamento
Briefing de projeto
Coleta de informaes
Desenvolvimento da proposta de Design
Apresentao ao Cliente
5.3.1 - IMPRESSOS
Formatos
Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
Grids
Produo
Suporte impresso
Impresso
Acabamentos
BCA 5.3.2 - SUPORTE DIGITAL

Formatos e resoluo de tela
Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
GRIDS
Anatomia da pgina
Grids para web
BCA 5.4- Exerccio Final
Grids verticais
Grids horizontais
UA 5
| BCA 5.1 | Criatividade
UA5 - Planejamento de projetos

OBJETIVOS
Discutir relaes entre Design, Arte,

Esttica e criatividade
Analisar processos e princpios de planejamento
de projetos de Design
Estudar as especificidades do desenvolvimento de
projetos para o meio impresso e para o meio digital
UA 5
Bibliografia bsica
ARFUCH, Leonor, CHAVES, Norberto y LEDESMA, Mara. Diseo y comunicacin: teoras y
enfoques crticos. Buenos Aires: Paids, 1997.
ASSOCIAO DOS DESIGNERS GRFICOS DO BRASIL (ADG). Design grfico caso a caso:
como o designer faz design. Sao Paulo: Garilli, 2000.
___________. O Valor do design: guia ADG Brasil de prtica profissional do designer
grfico. So Paulo: SENAC, ADG, 2003.
BEAIRD, Jason. The Principles of Beautiful Web Design. SitePoint, 2007.
FRASCARA, J. Diseo grfico para la gente. Buenos Aires: Infinito, 1997.
FRASCARA, J. El Diseo de comunicacin. Buenos Aires: Ediciones Infinito, 2006.
GOMES FILHO, Joo. Design do objeto: bases conceituais. So Paulo: Escrituras, 2006.
MARGULIES, Nancy, et al. Mapping Inner Space: Learning and Teaching Visual Mapping.
Tucson: Zephyr Press, 2002.
MILES, John. Design For Desktop Publishing. San Francisco: Chronicle Books, 1987.
WILLIANS, Robin. Design para quem no designer. So Paulo: Callis. 1995.

BCA 5.2 Processos
e princpios de planejamento
Briefing de projeto
Coleta de informaes
BCA 5.3 Tcnicas para a concepo de projetos

5.4.1 - IMPRESSOS
Formatos
Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
Grids
Grids verticais
Grids horizontais
Produo
Suporte impresso
Impresso
Acabamentos
BCA 5.4.2 - DIGITAL

Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
GRIDS
Anatomia da pgina
Grids para web
UA 5
BCA 5.1 Criatividade e tcnicas para
a concepo de projetos
DESIGN
O Design est sujeito a uma variedade de interpretaes.
Logos de duas subsidirias da

revista Readers
Eight consulting
UA 5
O pblico em geral tende a perceber o Design como

produtos ou sistemas em sua configurao final.
Campanhas civis de Buenos Aires
UA 5
Designers tendem a associar a palavra ao processo,

enxergando o produto como um ltimo estgio de uma
longa jornada.
Processo de Design de um Web site.

Empresa Ward e Kroll
UA 5
DESIGN X ARTE
DESIGN
Processo de concepo, planejamento, projeto,
seleo e organizao de uma srie de elementos para
a criao de comunicaes visuais, assim como os
objetos criados por esse processo.
DESIGN X ARTE
DESIGN est relacionado reproduo de bens ou
servios e possui a inteno de alterar a conduta, a
opinio, o conhecimento ou a atitude das pessoas
estabelecendo uma clara diferenciao entre o
designer e o artista.
UA 5
O trabalho do designer exige a coordenao de aspectos

humanos e tcnicos em um processo iterativo de anlise,
sntese e julgamento, implementao de conhecimento
existente e gerao de novos conhecimentos.
Sally Ride Science

www.sallyridescience.com
UA 5
DESIGN x ARTE
Designers normalmente no so a fonte das mensagens
que representam/comunicam.
www.euripedes.com.br e
www.restart.pt
UA 5
Criatividade e esttica
Esses aspectos definitivamente no
restritos ao universo da arte.
Dentro do Design grfico, a
criatividade no se ope clareza,
podendo sim tornar mensagens
complexas mais fceis de perceber,
compreender e interpretar pelo seu
pblico alvo.
London Underground Map
UA 5
CRIATIVIDADE
Habilidade de conceber solues inesperadas para
problemas aparentemente sem soluo.
A criatividade deve existir no Design dentro de
limitaes estabelecidas, ou seja, liberdade total no
deve ser enxergada como uma condio necessria para
permitir a criatividade.
UA 5
CRIATIVIDADE E INTELIGNCIA
Criatividade uma inteligncia - desenvolvida e
cultivvel - que em meio a uma grande quantidade de
informao aparentemente desconectada e catica
pode descobrir semelhanas que outros no
descobrem, ver oposies que outros no vem,
estabelecer conexes que outros no estabelecem e,
consequentemente, pode produzir snteses novas e
surpreendentes.
UA 5
ESTTICA
A questo esttica um dos requisitos projetuais a
serem satisfeitos em qualquer projeto de Design e est
intimamente relacionada ao contexto scio-cultural do
pblico-alvo.
Qualquer opo esttica carrega em si um significado.
UA 5

BCA 5.2 Processos e princpios de planejamento
Briefing de projeto
Coleta de informaes
5.4.1 - IMPRESSOS
Formatos
Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
Grids
Grids verticais
Grids horizontais
Produo
Suporte impresso
Impresso
Acabamentos
BCA 5.4.2 - DIGITAL

Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
GRIDS
Anatomia da pgina
Grids para web
UA 5
| BCA 5.2 | Processos e princpios de planejamento
BCA 5.2 Processos e princpios de
planejamento
Processos de Design como soluo de problemas
Carter conceitual e formal
aspectos relacionados atratividade, reteno da
ateno e facilidade de leitura (estgio perceptivo),
facilidade de entendimento e interpretao da
mensagem (estgio cognitivo)
contexto de veiculao da mensagem, englobando os
aspectos perceptivos, culturais, estticos,
lingsticos e tcnicos.
UA 5
Todo projeto de design requer um planejamento.

Estgios:
1. Delimitao do projeto
2. Coleta de informao
3. Segunda definio do problema:
Briefing (ou relatrio) de projeto: definio
dos objetivos
4. Terceira definio do problema: desenvolvimento
da proposta de Design
5. Apresentao ao cliente
6. Organizao da produo
7. Superviso da implementao
8. Avaliao de performance
UA 5
1- Delimitao do projeto
A parte que mais intimida num processo de design e o incio.
Para poder planejar as etapas do processo importante

conhecer o cliente e o que a empresa desenvolve.
O primeiro encontro com o cliente deve ser ao vivo, onde o
principal no impressionar e sim estabelecer um dilogo
franco.
Pense que neste momento ser mais importante ouvir do que
falar e todas as informaes obtidas devem ser anotadas.
Voc deve ter em mente perguntas chave que podem servir
para conduzir a conversa de modo proveitoso.
UA 5
As perguntas devem ser do tipo:
O que a empresa faz/produz?
Qual o mbito de atuao da empresa?
A empresa j possui um logotipo e um

planejamento de Branding?
Qual o objetivo do projeto?
Que informao voc gostaria de prover?
Quem o pblico-alvo? possvel identificar algo

em comum entre estas pessoas, tal como: faixa
etria, gnero ou localizao geogrfica?
Quem so os concorrentes diretos da empresa? Eles

possuem em produto similar?
UA 5
2 - Coleta de informaes
O designer deve se preocupar em conhecer o contexto em que o

objeto ser consumido/utilizado (a situao do mercado, outros
produtos similares, os usurios e tarefas a serem realizadas), mas
tambm o ambiente da empresa cliente.
Os objetivos de um produto devem ser visualizados de
forma mais ampla, incluindo:
a definio dos canais de comunicao (como o produto

chegar fisicamente ao pblico);
definio dos argumentos (como aproximar

cognitivamente e afetivamente o produto do pblico);
definio da forma (como aproximar perceptivamente e

esteticamente o produto do pblico).
UA 5
3 - Mtodos para compor o Briefing
Mtodo dos Cinco (agora 6) Ws:
Que?
Quem?
Quando?
Como?
Onde?
Porqu?
UA 5
Para compor um briefing de design pode-se associar

os Cinco Ws s questes:
Objetivos Que
O que se pretende e qual o tipo de produto deve-se desenvolver: metas.
Deciso: o que se pretende.
Pblico Quem
Para quem o produto?
Deciso: para quem.
Contexto Quando
Em que situao espao temporal?
Deciso: em que situao.
Contedo - Como
O produto em si.
Deciso: o que necessrio expressar.
Formato Onde
Suportes e dimenses
Deciso: Como apresentar
Retorno Porque
Qual a meta que justifica o projeto
Deciso: pretende-se de retorno.
UA 5
4 - Desenvolvimento da
proposta de Design
Funo do designer: orientador do cliente, ao invs
de um receptor passivo de um briefing consolidado.
UA 5
Nesta etapa definem-se o contedo, a forma, a mdia e a

tecnologia de produo. Desenvolve-se o layout do projeto
propriamente dito.
Existe a necessidade de se definir tambm neste estgio as
funes das formas, imagens e da tipografia no objeto em
desenvolvimento.
Elas podem servir para atrair, ornamentar ou comunicar.
UA 5
5 - Apresentao do projeto
ao cliente
Neste momento necessrio que o designer assuma um
novo papel, o qual requer habilidades verbais e
capacidade de persuaso.
A apresentao para o cliente tambm um
problema de Design, devendo existir igual
preocupao na escolha do contedo
informacional, organizao e apresentao da
informao.
UA 5
6 - Organizao da produo
O designer deve selecionar materiais, insumos e
ferramentas (softwares) necessrios para o desenvolvimento
do projeto. E provvel que seja necessrio contratar
especialistas: ilustradores, fotgrafos, redatores, etc.
importante adotar como princpio de projeto a elaborao
de um cronograma consistente prevendo prazos para todas
as etapas.
UA 5
7 - Superviso da implementao
Para assegurar que tudo saia como o planejado e
garantir a eficincia do projeto importante
acompanhar a sua implementao que para suportes
impressos pode consistir em sua produo grfica e
nos suportes digitais significa a implementao junto
ao host ou similar.
UA 5
8. Avaliao da performance
Um processo de design s se complementa de fato com a
avaliao do produto em uso pelo pblico em seu contexto
real de aplicao. lamentvel que a grande maioria dos
projetos no efetive este estgio, pois em muitos casos a
verificao do produto no seu contexto de uso pode trazer
respostas valiosas para um aperfeioamento do projeto.
UA 5
Dica: Livro O valor do Design

Como o cotidiano profissional do designer grfico?
Como calcular o preo do servio de design e como fazer
um contrato? Como funciona o mercado? Qual a tica
da profisso? Como se formar e como se manter
constantemente atualizado? Este guia responde a essas e
outras perguntas que esto na cabea dos designers
grficos, dos estudantes de design, dos seus parceiros
habituais de trabalho e dos usurios dos seus servios.
UA 5

BCA 5.2 Processos e princpios de planejamento
Briefing de projeto
Coleta de informaes
5.4.1 - IMPRESSOS
Formatos
Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
Grids
Grids verticais
Grids horizontais
Produo
Suporte impresso
Impresso
Acabamentos
BCA 5.4.2 - DIGITAL

Layout e grids
Hierarquia visual
Consistncia
Grids
Proporo aurea
GRIDS
Anatomia da pgina
Grids para web
UA 5
| BCA 5.3 | Tcnicas para a concepo de projetos
BCA 5.3
Tcnicas para a concepo de projetos
Brainstorming individual
Brainstorming individual
Mapeamento de idias
Composio de cenrios atravs de estmulos sensoriais
UA 5
1 - Brainstorming individual
O esprito do brainstorming est no no-julgamento crtico
das idias.
1. Prepare o local: o ambiente deve ser tranqilo,
confortvel e no propiciar distraes.
2. Arme-se de lpis e papel, gravador ou o que voc
preferir para registrar idias.
3. Comece a anotar todas as idias que vierem cabea,
sem nenhuma crtica ou medo de parecer ridculo
4. O objetivo deste exerccio fazer fluir o maior nmero
possvel de idias, por mais absurdas que paream.
5. Marque um tempo determinado para o exerccio, ou
um nmero mnimo de idias a ser atingido.
UA 5
2 - Brainstorming em grupo
a mesma idia do brainstorming individual, porm
com outros participantes.
Vantagem: uma idia puxa a outra de forma mais
rpida e original. As associaes fluem mais soltas.
conveniente se apontar uma pessoa para anotar as
idias para no haver repetio.
importante que esta pessoa no tente guiar o
brainstorming ou criticar/ridicularizar as idias
alheias.
Marque um tempo determinado para o exerccio, ou
um nmero mnimo de idias a ser atingido.
UA 5
3 - Mapeamento de idias
Utilize uma folha de papel em branco
No centro da folha, anote, em uma palavra, a sntese do problema que voc

deve resolver.
A partir desta palavra, comece a escrever em qualquer parte do papel

qualquer idia que voc acredite estar relacionada soluo do problema.
No se preocupe com seqncia, ordem ou qualquer outra coisa. Apenas
anote as idias. Defina um perodo de tempo para isso.
Agora, na mesma folha, procure agrupar as palavras com conceitos

semelhantes, utilizando figuras geomtricas e/ou cores diferentes para
simbolizar cada conceito.
Desenhe linhas de relaes entre os grupos de conceitos, do tipo "este

conceito leva a este outro", "isto conseqncia daquilo" etc.
A esta altura, sua folha deve estar uma baguna. Para limp-la, pegue outra
folha e priorize as relaes que voc encontrou, passando a limpo o seu
mapa.
Agora voc tem uma boa quantidade de abordagens diferentes para resolver
seu problema e, provavelmente, vrias solues em estado bruto prontas
para serem lapidadas.
UA 5
4 - Composio de cenrios
atravs de estmulos sensoriais
Escolha um ambiente tranqilo.
Voc deve ter em mente o tema que ser abordado no trabalho.
A partir do tema tente compor um cenrio estimulando todos os
sentidos:
Que som remete a este tema?
Se ele tivesse um gosto, qual seria?
Que cheiro tem?
E sua textura, qual ?
Agora pesquise e monte um lbum de recortes com imagens (fotos,
desenhos, anncios, sites, texturas, etc.), cores, formas,
tipografias que ajudem a compor visualmente em 5 sentidos o
cenrio que voc est desenvolvendo.
Ao familiarizar-se com o cenrio voc estar mais seguro para
propor solues visuais para os problemas abordados.
UA 5
Desenvolvendo o
Pensamento visual
No h nenhuma vida que se compare com a
pura imaginao. Vivendo l, voc estar livre se
verdadeiramente desejar ser.
Willy Wonka - A fanttica fbrica de chocolates - Ronald Dahl, 1964
UA 5
PENSAMENTO VISUAL
Prtica de usar imagens para abordar problemas
Pensar atravs de temas e comunicar objetivamente
Utilizao de imagens para comunicar e resolver
problemas
80 % do crebro dedicado ao processamento visual
O processamento visual no novidade, ele a parte
da nossa histria
A lngua escrita originou-se de desenhos
Do livro Mapping Inner Space
Nancy Margulies, Nusa Maal, e Margaret J. Wheatley
UA 5
Dicas para desenvolver o

pensamento visual
1. Crie um ambiente para a criatividade
2. Desenvolva o hbito do desenho
3. Crie uma biblioteca visual pessoal
4. Crie uma biblioteca pessoal de metforas
5. Faa intervalos para pensamentos criativos e visuais
6. Pratique a criatividade
7. Leia mais livros de fico
8. Desenvolva o hbito do pensamento visual
UA 5

5.4.1 - Layout: hierarquia visual
A organizao guia o usurio na contemplao
de uma pgina.
Em toda composio grfica deve-se criar uma
hierarquia visual adequada ao pblico-alvo, com
o objetivo de ressaltar os elementos mais
importantes.
Hierarquia visual no windows explorer
UA 5
| BCA 5.4 | Desenvolvimento
Nos pases ocidentais, lemos os documentos da esquerda para a

direita e de cima para baixo.
UA 5
Esta forma de proceder comum em folhetos, documentos ou

cartazes publicitrios - criados com um design clssico - e tambm
em pginas web.
Como voc j pde observar possvel estabelecer uma hierarquia
com o uso de cores. Pode-se enfatizar as partes mais importantes
da composio usando cores primrias ou cores muito saturadas.
UA 5
Quanto aos elementos textuais, aos que tambm

so aplicveis os mtodos de cor e contraste,
podemos estabelecer uma hierarquia mediante os
tamanhos relativos dos mesmos.
Hierarquia visual em elementos textuais
UA 5
importante pensar em hierarquia visual

tambm durante a escolha dos demais elementos
que comporo a pgina, tais como: ornamentos
grficos impactantes, cones, animaes, etc.
Sua presena s deve atrair em demasia a
ateno do espectador se esta caracterstica for
um requisito do projeto.
http://www.mikeswanson.com/blog/images/SUPERthrive.jpg
UA 5
Layout: Consistncia
Estabelea alguns padres para seus textos e grficos (cores,
alinhamentos, etc) e procure aplic-lo consistentemente
atravs das pginas para proporcionar unidade ao seu
projeto. A repetio possibilita uma identidade grfica
consistente que refora a particularidade do seu projeto.
Se voc escolher um elemento grfico, use-o durante todo
seu projeto.
Exemplo em Impressos: consistncia em cores e formas
UA 5
Exemplo web site: consistncia cones para facilitar a navegao
Exemplo web site: consistncia cores definindo setores
UA 5
Layout: Teoria dos Grids

Os grids (= grades ou linhas guia) so essenciais ao Design
Grfico.
O que de fato h de teoria nos grids que eles tratam da
proporo entre os elementos que compe o layout. A idia
de utilizar conceitos matemticos para compor obras
influenciou artistas de vrias pocas.
O Homem Vitruviano, de Leonardo da Vinci. As

idias de proporo e simetria aplicadas
concepo da beleza humana
UA 5
Voc sabia?
PROPORO UREA
A proporo urea ou nmero de ouro uma constante real
algbrica irracional denotada pela letra grega (phi) e com o
valor arredondado a trs casas decimais de 1,618. um nmero
que h muito tempo empregado na arte. Phi - no confundir
com o nmero Pi () o quociente da diviso do comprimento
de uma circunferncia pela medida do seu respectivo dimetro.
Justamente por estar envolvido no crescimento, este nmero se
torna to freqente. E justamente por haver esta freqncia, o
nmero de ouro ganhou um status "quase mgico", sendo alvo
de pesquisadores, artistas e escritores.
UA 5
O que a proporo urea tem a ver com design grfico?

Em geral as composies divididas por linhas proporcionais
proporo urea so consideradas esteticamente
agradveis.
Elas oferecem um padro lgico para produzir layouts
interessantes.
Proporo urea no design das pginas de um livro
UA 5
Uma simplificao da proporo urea a diviso

do layout em teros.
www.thegeniusstore.com
UA 5
Grids verticais e horizontais:
EXEMPLOS
O layout da pgina estruturado pelos grids: colunas verticais,

margens e espaos das entrelinhas horizontais.
A profundidade da pgina depende do tamanho da fonte, do
entrelinhamento e das margens. necessrio planejar tudo
previamente.
A complexidade do grid vai depender do tipo de layout
necessrio. Num projeto, cujo layout mais passivo o nmero
de linhas depende do conforto visual previsto no projeto
grfico.
Quando existe a exigncia de um layout mais complexo com
muitas imagens, figuras e etc. o uso dos painis horizontais
muito til.
UA 5
Livros clssicos
Layout inspirado nos manuscritos
Rodap o dobro do cabealho
Detalhes:
Considere o layout em spreads
Margem interna: prever encadernao
Deixar espao para cabealho, rodap e numerao
UA 5
1 Coluna de largura total

Vantagem:
Texto sem muitas quebras de linha
Desvantagem:
Linhas muito longas com muitas palavras no so muito
confortveis e atraentes.
Entrelinhamento deve ter mais espao.
Blocos largos de texto tornam mais difcil articular
subttulos, texto secundrio e ilustraes.
Resultado montono e pouco convidativo.
UA 5
1 Coluna estreita
Vantagem:
Layout mais convidativo
Possibilidades variadas
Possibilidade de posicionar ilustraes
Melhor para encadernao
Possibilidade de utilizar ttulos laterais, texto secundrio e etc.
Desvantagem:
Ainda bastante esttico se comparado a outros layouts
USO:
Impressos: formatos grandes
Layout mais sbrio
UA 5
2 Colunas de igual largura

Vantagens
Fcil manuseio
Leitura confortvel
Mais econmico
Desvantagem:
Pode ficar montono
Abriga vrios tipos de publicao layout comum
Devido a sua natureza esttica no recomendado para
Layouts que exijam ritmo e ao.
UA 5
2 Colunas de larguras diferentes

Vantagens
Usado em ocasies em que existem dois textos de
contedos diferentes porm podem ser dispostos lado
a lado
Impressos: se o texto da coluna estreita exceder
seu limite uma nova pgina somente com colunas
estreitas pode ser inserida.
UA 5
3 Colunas
Vantagens
Proporciona um layout bastante dinmico
Econmico porm os tipos devem ser menores.
Desvantagem
O layout pode se tornar confuso
S funciona bem com uso generosos espaos em branco
Geralmente requer alinhamento esquerda
USO:
Documentos que combinam texto e ilustraes, boxes e matrias
secundrias
UA 5
4 Colunas
Vantagens
Econmico para texto com linhas curtas como listas e ndices
Layout dinmico
Desvantagem
Requer o uso de tipos pequenos e alinhamento esquerda
USO:
ndices, dicionrios e listas
Serve de base para layout em 2 colunas.
UA 5
GRIDS HORIZONTAIS
Vantagens
Combinados com guias verticais ajudam a organizar a pgina
Oferecem suporte para o uso de imagens
Ttulos, subttulos e abertura de novas sees ou pargrafos podem ficar mais
organizados iniciando na mesma altura em diferentes pginas.
Se no for possvel manter a mesma distncia entre os painis divida a pgina
arbitrariamente.
CUIDADO:
No necessrio adotar uma aderncia completa aos grids. Ele deve ficar
sugerido no layout final e no deve servir como um delimitador obrigatrio.
Os grids servem para a nossa convenincia e no para tornar nossa vida difcil.
UA 5
2 colunas
Poucas e grandes divises horizontais
Estrutura simples
UA 5
2 colunas + 5 painis horizontais

Layout mais flexvel
Proporo mais fcil de trabalhar em imagens e textos
UA 5
Para impressos: 3 colunas + 6 painis horizontais
Permite explorar mais variaes nas combinaes
UA 5
Para impressos: 4 colunas + 7 painis horizontais
til para combinar muitas ilustraes com textos.

Grids ajudam a controlar os espaos em branco.
UA 5
5.4.2 Impressos
FORMATOS DE PAPEL
A indstria papeleira adota algumas padronizaes de formato do
papel produzido em folhas. Conhecer bem esses formatos e suas
subdivises evita desperdcios desnecessrios quando for feito o
clculo do produto impresso final. No Brasil, so adotados dois
padres, o DIN e o ABNT.
DIN significa Deutsche Industrie Normunque, algo como
"Normalizao da Indstria Alem", e seus formatos padres so
adotados em todo o mundo. Os formatos DIN se apresentam em trs
sries, A, B e C, sendo que no Brasil a mais comum a srie A, da
qual faz parte o popular formato A4. A base chamada de A0, e
seus derivados so A1, A2 e assim sucessivamente, at chegar no
A12. O nmero depois da letra indica quantas vezes o formato
original foi "dobrado", pela altura.
http://produtorgrafico.org/papeis/formatos.htm
UA 5
| BCA 5.4.2 | Impressos
Veja as dimenses das trs sries DIN, em milmetros:
UA 5
J o padro definido pela ABNT (Associao Brasileira de

Normas Tcnicas) utilizado com mais freqncia na
indstria grfica brasileira, e apresenta duas sries, AA e
BB. comum os formatos principais serem chamados de
"folha inteira" pelos grficos, e suas primeiras divises
serem chamadas de "meia folha". Veja as medidas, em
centmetros:
UA 5
Apesar dessas sries apresentarem as divises do formato

principal tambm dividindo a altura pela metade, possvel
"encaixar" vrios outros formatos econmicos (ou seja, sem
perda) na folha inteira ou na meia folha. Na dvida, consulte
seu fornecedor antes de definir o formato final de seu
impresso.
Ateno: nunca se esquea de calcular uma rea de
sangramento para o seu impresso, com cerca de 0,5 cm de
cada lado. Ela ser perdida quando o material for cortado,
mas uma garantia de bom acabamento para as suas peas.
UA 5
Curiosidade:
Tamanhos de papel padro nos EUA e Canad:
Letter
Legal
Tablide
em polegadas em milmetros
11 812
279 216
14 812
356 216
17 11
432 279
razo
1.2941
1.6471
1.5455
prxima ao A4
prxima ao A4
prxima ao A3
Comparao entre o padro brasileiro

e o padro nos EUA e Canad
UA 5
FORMATOS DE JORNAIS
Os jornais contemporneos normalmente so impressos
em um tipo especfico de papel espesso e spero - o
papel-jornal - cortado em folhas de tamanhos
padronizados.
Tamanho Standard - entre 60 cm x 38 cm e 75 cm x
60 cm.
Tamanho Tablide - cerca de 38 cm x 30 cm
Tamanho Tablide Berlinense (ou Europeu), Berliner
Format - cerca de 47 cm x 31,5 cm.
UA 5
5.4.3 - Suporte Digital

RESOLUO DE TELA
Se refere s consideraes os sobre diferentes
tipos de tela que os visitantes possam estar
utilizando e o espao disponvel para cada caso.
Os navegadores (browsers) so as aplicaes
encarregadas de apresentar as pginas web (ex:
Internet Explorer, Netscape Navigator, Opera e
Mozilla Firefox).
UA 5
| BCA 5.4.3 | Suporte Digital
A interface de um navegador, em seu modo padro, apresenta ao

usurio uma ou mais barras superiores (de menus, de endereos,
etc.), uma barra inferior (a barra de estado) e um espao principal, a
janela, na qual so apresentadas as pginas web.
A forma desta janela sempre retangular, porm seu tamanho varia,
dependendo do monitor e da placa de vdeo. Podemos falar de dois
tamanhos de tela diferentes:
Tamanho absoluto: o tamanho "real" da janela do monitor,
medido geralmente em polegadas. Depende do monitor.
Resoluo ou tamanho relativo: vem determinado pelo nmero
de pixels que se mostram na janela do monitor e depende da
placa de vdeo.
UA 5
A importncia da resoluo de tela est relacionada forma

como as informaes sero dispostas visualmente para o
usurio. Com uma maior resoluo mais pontos sero utilizados
para apresentar os elementos na tela, porm estes pontos so
menores e, logo, os elementos da interface (textos, imagens,
objetos de formulrio, etc.) se vem menores.
UA 5
TAMANHO DE PGINA E RESOLUES

Se desenhamos uma pgina para uma resoluo dada,
ocupando toda a janela do navegador, aqueles usurios que
a visualizarem em resolues menores no tero espao na
tela para mostrar toda a pgina, por conta disso seriam
obrigados a usar as barras de rolagem (scroll) do
navegador.
Sendo ao contrrio, aqueles usurios que a visualizarem
com resolues maiores tero muito espao na tela para
to pouca pgina, deixando assim bastante espao vazio,
sem contedo.
UA 5
Laboratrio: etapa 5 - FINAL

Desenvolva uma pea de divulgao (impresso: formato A5 ou um Hot site) utilizando
tipografias, cores, formas e imagens para divulgar cada uma das duas empresas sempre
respeitando as caractersticas j abordadas. Relembrando:
Caractersticas:
familiar
rstico
todos os clientes
Caractersticas:
dinamismo e vigor
atraente, sensual
segurana
Pblico:
Classe AA
60 anos
Pblico:
Classe: B e C
anos
UA 5
Bibliografia complementar
ARGAN, Gian Carlo. Arte moderna. Sao Paulo: Companhia das letras, 1992
BHASKARAN, Lakshmi et al. Design Retro - 100 Anos De Design Grfico. So
Paulo: Senac So Paulo, 2008.
CHAVES, Norberto. El oficio de disear: propuestas a la conciencia crtica de
los que comienzan. Barcelona: Gustavo Gilli, 2001.
MUNARI, Bruno. Diseo y comunicacin visual: contribucin a una metodologa
didctica. Barcelona: Gustavo Gili, 1976.
PEVSNER, Nicolaus. Os pioneiros do desenho moderno. Sao Paulo: Martins
Fontes, 1980.
Imagens
www.sxc.hu
http://creativecommons.org

Apostila Completa Comunicacao Visual - Bianca Martins PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Apostila Completa Comunicacao Visual - Bianca Martins PDF

Uploaded by

Copyright:

Available Formats

Comunicao Visual

Autora: Bianca Martins

Sobre o Instituto Infnet

Slides: So os slides que o professor vai utilizar durante o

Anotaes: Informaes complementares, zoom no cdigo

Compreender os fundamentos do Design

Manejar conceitos e tcnicas para trabalhar com cores e

Conceituar princpios de leitura visual da Forma, da Gestalt e

Desenvolver layouts em suporte digital e impresso

Dominar princpios de planejamento e produo de projetos de

Psicologia das cores

UA4 Design e percepo

Desejvel conhecimentos bsicos no

| BCA 1.1 | Comunicao Visual

Discutir conceitos do Design Grfico

Estudar caractersticas e elementos d

| BCA 1.1 | Comunicao Visual

| BCA 1.1 | Comunicao Visual

As primeiras formas comunicativas consistiam

| BCA 1.1 | Comunicao Visual

Arte Egpcia em pergaminhos

Com o tempo a linguagem verbal passou a ser o meio

| BCA 1.1 | Comunicao Visual

O Disco de Festos, 1700 a.c.

A representao de idias por meio de pictogramas

Parte do Alfabeto Cretense

| BCA 1.1 | Comunicao Visual

Papiro ano 932

Pergaminho ano 975

Como suporte fsico, foi utilizada inicialmente a

| BCA 1.1 | Comunicao Visual

Nesta poca alguns artistas desenvolveram pesquisas

Livro das Horas sc XV e XVI

| BCA 1.1 | Comunicao Visual

Johann Gutenberg, em 1450, inventou a

| BCA 1.1 | Comunicao Visual

Logo comearam a aparecer imprensas que

| BCA 1.1 | Comunicao Visual

Publicidades sc. XIX

O design grfico teve outro grande

| BCA 1.1 | Comunicao Visual

| BCA 1.1 | Comunicao Visual

| BCA 1.1 | Comunicao Visual

Na segunda metade do sculo XX,

| BCA 1.1 | Comunicao Visual

Na dcada de 1980 o Desktop Publish

| BCA 1.1 | Comunicao Visual

| BCA 1.2 | Design Grfico - Conceitos

No processo de design grfico utiliza-se diferentes

Elementos grficos simples: pontos, linhas e planos de

| BCA 1.2 | Design Grfico - Conceitos

Para atingir o resultado esperado, o designer

| BCA 1.2 | Design Grfico - Conceitos

Os diferentes componentes de um projeto

| BCA 1.2 | Design Grfico - Conceitos

| BCA 1.2 | Design Grfico - Conceitos

No que se refere ao excesso de informaes visuais

| BCA 1.2 | Design Grfico - Conceitos

Transformar a informao em comunicao

| BCA 1.2 | Design Grfico - Conceitos

Peridico sc. XIX

Peridico sc. XXI

| BCA 1.2 | Design Grfico - Conceitos