7 DESIGN GRÁFICO

Prévia do material em texto

DESIGN GRÁFICO
Professora Esp. Janaina Aparecida de Freitas
GRADUAÇÃO
Unicesumar
C397 CENTRO UNIVERSITÁRIO DE MARINGÁ. Núcleo de Educação a 
Distância; FREITAS, Janaina Aparecida de. 
 
 Design Gráfico. Janaina Aparecida de Freitas. 
 (Reimpressão revista e atualizada)
 Maringá-Pr.: UniCesumar, 2017. 
 197 p.
“Graduação - EaD”.
 
 1. Design 2. Gráfico . 3. EaD. I. Título.
CDD - 22 ed. 741.6
CIP - NBR 12899 - AACR/2
Ficha catalográfica elaborada pelo bibliotecário 
João Vivaldo de Souza - CRB-8 - 6828
Reitor
Wilson de Matos Silva
Vice-Reitor
Wilson de Matos Silva Filho
Pró-Reitor de Administração
Wilson de Matos Silva Filho
Pró-Reitor de EAD
Willian Victor Kendrick de Matos Silva
Presidente da Mantenedora
Cláudio Ferdinandi
NEAD - Núcleo de Educação a Distância
Direção Operacional de Ensino
Kátia Coelho
Direção de Planejamento de Ensino
Fabrício Lazilha
Direção de Operações
Chrystiano Mincoff
Direção de Mercado
Hilton Pereira
Direção de Polos Próprios
James Prestes
Direção de Desenvolvimento
Dayane Almeida 
Direção de Relacionamento
Alessandra Baron
Head de Produção de Conteúdos
Rodolfo Encinas de Encarnação Pinelli
Gerência de Produção de Conteúdo
Juliano de Souza
Supervisão do Núcleo de Produção de 
Materiais
Nádila de Almeida Toledo
Coordenador de Conteúdo
 Danillo Xavier Saes
Lideranças de área
Angelita Brandão, Daniel F. Hey, Hellyery Agda
Design Educacional
Isabela Agulhon
Iconografia
Ana Carolina Martins Prado
Projeto Gráfico
Jaime de Marchi Junior
José Jhonny Coelho
Arte Capa
André Morais de Freitas
Editoração
Fernando Henrique Mendes
Revisão Textual
Daniela Ferreira dos Santos
Kaio Vinicius Cardoso Gomes
Ilustração
Marta Sayuri Kakitani
Viver e trabalhar em uma sociedade global é um 
grande desafio para todos os cidadãos. A busca 
por tecnologia, informação, conhecimento de 
qualidade, novas habilidades para liderança e so-
lução de problemas com eficiência tornou-se uma 
questão de sobrevivência no mundo do trabalho.
Cada um de nós tem uma grande responsabilida-
de: as escolhas que fizermos por nós e pelos nos-
sos farão grande diferença no futuro.
Com essa visão, o Centro Universitário Cesumar 
assume o compromisso de democratizar o conhe-
cimento por meio de alta tecnologia e contribuir 
para o futuro dos brasileiros.
No cumprimento de sua missão – “promover a 
educação de qualidade nas diferentes áreas do 
conhecimento, formando profissionais cidadãos 
que contribuam para o desenvolvimento de uma 
sociedade justa e solidária” –, o Centro Universi-
tário Cesumar busca a integração do ensino-pes-
quisa-extensão com as demandas institucionais 
e sociais; a realização de uma prática acadêmica 
que contribua para o desenvolvimento da consci-
ência social e política e, por fim, a democratização 
do conhecimento acadêmico com a articulação e 
a integração com a sociedade.
Diante disso, o Centro Universitário Cesumar al-
meja ser reconhecido como uma instituição uni-
versitária de referência regional e nacional pela 
qualidade e compromisso do corpo docente; 
aquisição de competências institucionais para 
o desenvolvimento de linhas de pesquisa; con-
solidação da extensão universitária; qualidade 
da oferta dos ensinos presencial e a distância; 
bem-estar e satisfação da comunidade interna; 
qualidade da gestão acadêmica e administrati-
va; compromisso social de inclusão; processos de 
cooperação e parceria com o mundo do trabalho, 
como também pelo compromisso e relaciona-
mento permanente com os egressos, incentivan-
do a educação continuada.
Diretoria Operacional 
de Ensino
Diretoria de 
Planejamento de Ensino
Seja bem-vindo(a), caro(a) acadêmico(a)! Você está 
iniciando um processo de transformação, pois quando 
investimos em nossa formação, seja ela pessoal ou 
profissional, nos transformamos e, consequentemente, 
transformamos também a sociedade na qual estamos 
inseridos. De que forma o fazemos? Criando oportu-
nidades e/ou estabelecendo mudanças capazes de 
alcançar um nível de desenvolvimento compatível com 
os desafios que surgem no mundo contemporâneo. 
O Centro Universitário Cesumar mediante o Núcleo de 
Educação a Distância, o(a) acompanhará durante todo 
este processo, pois conforme Freire (1996): “Os homens 
se educam juntos, na transformação do mundo”.
Os materiais produzidos oferecem linguagem dialógica 
e encontram-se integrados à proposta pedagógica, con-
tribuindo no processo educacional, complementando 
sua formação profissional, desenvolvendo competên-
cias e habilidades, e aplicando conceitos teóricos em 
situação de realidade, de maneira a inseri-lo no mercado 
de trabalho. Ou seja, estes materiais têm como principal 
objetivo “provocar uma aproximação entre você e o 
conteúdo”, desta forma possibilita o desenvolvimento 
da autonomia em busca dos conhecimentos necessá-
rios para a sua formação pessoal e profissional.
Portanto, nossa distância nesse processo de cresci-
mento e construção do conhecimento deve ser apenas 
geográfica. Utilize os diversos recursos pedagógicos 
que o Centro Universitário Cesumar lhe possibilita. Ou 
seja, acesse regularmente o AVA – Ambiente Virtual de 
Aprendizagem, interaja nos fóruns e enquetes, assista 
às aulas ao vivo e participe das discussões. Além dis-
so, lembre-se que existe uma equipe de professores 
e tutores que se encontra disponível para sanar suas 
dúvidas e auxiliá-lo(a) em seu processo de aprendiza-
gem, possibilitando-lhe trilhar com tranquilidade e 
segurança sua trajetória acadêmica.
A
U
TO
R
Professora Esp. Janaina Aparecida de Freitas
Especialização em MBA em Teste de Software pela Universidade Ceuma 
(UNICEUMA/2012). Graduação em Informática pela Universidade Estadual 
de Maringá (UEM/2010). Atualmente, cursando o Mestrado em Ciência da 
Computação pela Universidade Estadual de Maringá (UEM) e Licenciatura 
em Letras - Português/Inglês no Centro Universitário Cesumar (UniCesumar). 
Trabalhou na iniciativa privada, na área de Análise de Sistemas e Testes de 
Software. Tem experiência na área de Engenharia de Software com ênfase em 
Análise de Requisitos, Gestão de Projetos de Software, Métricas e Estimativas, 
Qualidade e Teste de Software. É professora mediadora dos cursos de 
graduação Analise e Desenvolvimento de Sistemas (ADS) e Sistemas para 
Internet (SI) na modalidade de Ensino a Distância (EAD) pelo Unicesumar.
SEJA BEM-VINDO(A)!
Prezado(a) aluno(a), seja bem-vindo(a) à disciplina de Design Gráfico! Este livro foi de-
senvolvido para você que fica encantado(a) com imagens, fotografias, cores e gifs ani-
mados que são usados nas páginas da Web. 
Com base nisso, procurei abordar assuntos interessantes e que lhe ajudarão a entender 
o mundo dos designers gráficos. Um web designer deve ter conhecimento teórico am-
plo e forte em vários campos como: arte, visual, semiótica, comunicação, as teorias do 
grid e da cor, tipografia, resoluções e muitas outras, que ajudam a se tornar um profis-
sional de sucesso.
Na unidade I, trataremos sobre o design gráfico e como ele depende do seu público para 
ter sucesso nos seus projetos. E para isso, é necessário entender o que o público deseja, 
o que ele realmente precisa e espera para se comunicar. Os processos de designs, seus 
conceitos e técnicas que serão a base para o desenvolvimento do processo de design 
gráfico. Alguns dos conceitos que vamos estudar são: brainstorming, briefing, design 
thinking, UX design e UI design. 
Seguindo nosso estudo, na unidade II, estudaremos alguns elementos importantes que 
fazem parte da identidade visual, como o logotipo, o símbolo, a marca, as cores, o al-
fabeto usado e ainda alguns acessórios que ajudam a divulgar a empresa no mercado 
como a mascote e os grafismos. Aprenderemos, nesta unidade, as etapas que envolvem 
a criação de conceitos, logotipos e logomarcas de uma empresa e como é importante 
esses conceitos no Design Gráfico.
Já na unidade III, conheceremos algumas técnicas que são voltadas à criação da estru-
tura de uma página, como o layout visual,à criação de protótipos, de rascunhos, de 
esboços como: wireframe, protótipo, mock-up e storyboard. Estudaremos outras técni-
cas que são voltadas ao layout da página, como o Design Responsivo e conheceremos 
também algumas das técnicas voltadas ao layout dos elementos da página, que são: Flat 
Design e o Skeuomorphism.
Também aprenderemos que antes de começar a criar um site, é preciso planejar sua estru-
tura (página principal e páginas adjacentes), definindo de forma clara e coerente a sequên-
cia das informações que se deseja apresentar e conheceremos como é a anatomia de uma 
página, o seu esboço padrão e suas funções usadas no desenvolvimento de uma página.
Na unidade IV, falaremos sobre a teoria das cores. Vamos ver que o sistema usado para a 
criação de cores baseia-se nas propriedades fundamentais da luz que ocorrem na natu-
reza: essas cores podem ser criadas a partir do vermelho, verde e azul e essa é a base do 
modelo de cores RGB e o modelo de cores CMYK baseia-se na subtração da cor.
Nesta unidade, falaremos também sobre a importância da Tipografia, como ela é evi-
dente, esta em toda a parte é essencial para os designers gráficos. Falaremos sobre os 
elementos básicos dos tipos de letras, sua anatomia e seus estilos e também sobre a 
noção do pixel como uma medida de qualidade das imagens e sobre alguns tipos de 
imagens, como imagens vetoriais e imagens rasterizadas ou bitmaps.
APRESENTAÇÃO
DESIGN GRÁFICO
Por fim, na unidade V, conheceremos algumas ferramentas, softwares e plugins que 
são utilizados na área de Design Gráfico. Essas ferramentas te ajudarão a evitar pro-
blemas, ajudarão na otimização do tempo e qualidade dos trabalhos desenvolvidos.
As ferramentas que estudaremos vão deste softwares para visualização de imagens 
e edição de fotografias avançadas, ferramentas para alteração/criação de fontes, 
pintura e desenho, ferramentas para a criação de esquemas de cores harmoniosas, 
testes de resolução para sites e blogs em diferentes navegadores e sistemas ope-
racionais, geração de ícones e gifs animados e, finalmente, para encerrar o nosso 
capítulo, vamos ter uma estudo de caso, no qual colocaremos em prática a criação 
de um design responsivo. 
Assim, convido você, caro(a) aluno(a), a entrar nessa jornada com empenho, dedica-
ção e muita sede por conhecimento! Boa leitura e ótimos estudos!
APRESENTAÇÃO
SUMÁRIO
09
UNIDADE I
História da Arte e do Design Gráfico
15 Introdução
16 História da Arte e do Design Gráfico 
25 Introdução ao Processo de Design 
25 Brainstorming 
26 Briefing 
28 Design Thinking 
32 Codesign 
33 Sprinting 
35 UX Design e UI Design 
38 Considerações Finais 
48 Gabarito 
UNIDADE II
IDENTIDADE VISUAL 
51 Introdução
52 Identidade Visual 
56 Estudo da Percepção da Marca 
58 Criação de Conceitos, Logotipo e Logomarca 
63 Branding 
SUMÁRIO
10
65 Brandbook 
70 Considerações Finais 
78 Gabarito 
UNIDADE III
LAYOUT E COMPOSIÇÃO
81 Introdução
82 Layout e Composição 
86 Wireframe 
87 Protótipo 
87 Mock-Up 
89 Storyboard 
90 Responsive Web Design 
91 Flat Design 
92 Skeuomorphism 
94 Definição do Bom Design 
96 Anatomia de Uma Página da Web 
99 Teoria do Grid 
107 Considerações Finais 
116 Gabarito 
SUMÁRIO
11
UNIDADE IV
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
119 Introdução
120 Psicologia Da Cor 
121 Associações de Cores 
129 Temperatura da Cor 
130 Valor da Cor 
131 Sistemas de Cores: CMYK, RGB, HSB e Pantone 
133 Roda De Cores 
134 Tipografia 
139 Edição e Tratamento de Imagens 
146 Considerações Finais 
153 Gabarito 
UNIDADE V
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
157 Introdução
158 Softwares e Ferramentas Aplicadas ao Design Gráfico 
172 Ferramentas Para Web Design Responsivo 
177 Estudo de Caso 
187 Considerações Finais 
196 Gabarito 
197 CONCLUSÃO 
U
N
ID
A
D
E I
Professora Esp. Janaína Aparecida de Freitas
HISTÓRIA DA ARTE E DO 
DESIGN GRÁFICO
Objetivos de Aprendizagem
 ■ Estudar a história que envolve a arte e o design gráfico.
 ■ Entender os conceitos que envolvem o processo de design gráfico.
 ■ Conhecer os conceitos de brainstorming, briefing, design thinking, 
codesign e sprinting.
 ■ Compreender UX design e UI design.
Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
 ■ História da arte e do design gráfico
 ■ Introdução ao processo de design
 ■ Brainstorming
 ■ Briefing
 ■ Design Thinking
 ■ Codesign
 ■ Sprinting
 ■ UX design e UI design
Introdução
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
15
INTRODUÇÃO
Olá, aluno(a)! Este capítulo tem por finalidade mostrar a História da Arte, seus 
conceitos e como ela é importante para o Design Gráfico. Vamos entender que 
por meio da arte podemos desenvolver a nossa imaginação, a criatividade e pode-
mos entender, assim, quem somos e aprendemos a conviver uns com os outros 
e, como isso influencia o projeto de um Designer gráfico.
Nesta primeira unidade, falaremos sobre o Design Gráfico e como ele depende 
do seu público, isso significa que é necessário entender o que o público deseja, 
o que ele realmente precisa e espera. Uma das principais finalidades do Design 
gráfico, é que ele surgiu para resolver os problemas de comunicação.
Vamos conhecer também um pouco das áreas de conhecimento do Design, 
que são várias, cada uma com sua especialidade e um universo para explorar. 
Vamos conhecer algumas: Design Editorial, Design e Embalagem, Design de 
Superfície, Design e Animação, Design e Games, Design de Interação, Design 
de Experiência, Design Tipográfico, Design e Branding, Design e Gestão, Design 
Sustentável, Design de Serviços, Design Social, Design e Informação e Web Design.
Outro ponto que será abordado abrange os processos de designs, seus con-
ceitos e técnicas que serão a base para o desenvolvimento do processo de design 
gráfico. Para iniciarmos um projeto, temos que passar por várias fases de pro-
cesso do design, desde a entrevista com o cliente, a pesquisa sobre o problema, 
o mundo da geração de ideias e por fim, chegar à criação das formas. Alguns 
dos conceitos que vamos estudar são: brainstorming, briefing, design Thinking, 
UX Design e UI Design.
Após ver os conceitos e técnicas que podem ser usados no processo de design, 
vamos aprender por onde começar o desenvolvimento do projeto de design, 
como definir o problema, entender o público-alvo, investigar os concorrentes e 
definir os requisitos gerais para o que vai ser criado.
Preparado(a) para começar? Então, vamos seguir em frente. Boa leitura e 
bons estudos!
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E16
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Aluno(a), você sabe o que é arte? Qual é a história da arte? Muitos podem res-
ponder de diversas maneiras o que é arte, pois, a arte não possui um conceito 
único, ela depende do momento histórico e da cultura, o olhar pessoal de cada 
um, enfim, a arte pode ser considerada para cada um algo diferente.
Por meio da arte, podemos desenvolver a nossa imaginação, a criatividade 
e podemos entender quem somos e aprendemos a conviver uns com os outros. 
Segundo Santos e Funk (2007, p. 50): “[...] certamente no futuro também será 
estudado, como uma forma de arte as obras que são feitas hoje e que certamente 
serão base para novas evoluções que surgirão no futuro”.
Para entendermos melhor a arte, vamos observar algumas imagens:
 ■ Podemos dizer que a figura 01 referente a famosa estátua de “O Pensador” 
é uma arte? Ela é considerada arte devido à época?
 ■ Quais as características desta imagem que leva você a considerar como arte?
Figura 2 - Escultura exposta na Exposição Internacional 
de arte moderna e contemporânea de 08 de abril de 2011, em Milão, Itália
História da Arte e do Design GráficoRe
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
17
Figura 1 - O Pensador no Museu Rodin em Paris
 ■ E a figura 02? Você considera 
uma arte? A época em que ela foi 
criada, influencia em dizer que ela 
não é arte? Quais as característi-
cas desta imagem que levam você 
a considerar como arte?
 
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E18
 Agora, caro(a) aluno(a), analise e responda: das duas imagens descritas, qual 
delas você consideraria como sendo “arte”? Temos vários conceitos do que pode-
ria ser a arte, mas podemos dizer que ela é uma experiência humana que mexe 
e expressa as emoções do ser humano. Apreciar a arte é entender um pouco do 
que o ser humano pensa e, com isso, aprendermos a refletir, criticar sobre os 
modos diferentes de cada um fazer e pensar a arte.
Na opinião de Santos (2007, p. 49):
a arte sempre esteve presente nas atividades dos homens, pois ela é uma 
forma de criação do próprio homem, podendo ser feita de várias for-
mas e por meio de diferentes meios, não somente como as artes plásti-
cas, mas também a música, a dança, o teatro, a fotografia, por exemplo, 
também são formas de arte. Hoje a arte também está presente nas mais 
diversas áreas e lugares, seja qual for a atuação, se não for completa-
mente, em algum momento ter-se-á contato a arte. A arte pode ser vista 
nas embalagens, nos cartões de visita, nos anúncios, e também no cibe-
respaço como arte digital. 
 Falamos de arte, ma você deve estar pensando: o que a arte tem a ver com o 
Design Gráfico? Podemos dizer que o design gráfico teve origem nas artes grá-
ficas e ele pode ser definido como um processo usado para projetar, programar, 
selecionar, coordenar e organizar elementos que produzem objetos visuais que 
são usados para se comunicar. 
Na arte, temos o artista que desenvolve sua criação em um processo de 
experimentação e descobertas particulares. O designer gráfico desenvolve sua 
criação para a comunicação visual e com um fim específico, transmitindo suas 
ideias de forma clara e direta com o uso de elementos gráficos que sejam fáceis 
de entender pelos destinatários da mensagem.
Para Nicolau (2013, p. 6): 
o designer é utilizado para informar, identificar, sinalizar, estimular, 
persuadir, concientizar. Os meios para esses objetivos são variados e 
torna-se cada vez mais difícil delimitá-los diante a infinidade de subs-
tratos de atuação, os quais têm se tornado cada vez mais complexo.
Dessa forma, é possível perceber que o sucesso do Design Gráfico depende do 
seu público. Isso significa que é necessário entender o que o público deseja, pre-
cisa e espera. Nem sempre é fácil, pois mesmo respeitando a opinião do cliente, o 
História da Arte e do Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
19
designer gráfico é quem decide se é possível aceitar as sugestões e quando não deve 
aceitá-las. O Design Gráfico surgiu para resolver os problemas de comunicação.
Vamos agora conhecer um pouco as áreas de conhecimento do Design cada 
uma com sua especialidade, mas que para o nosso estudo, Design Gráfico para 
Web, é importante conhecer e entender seus conceitos. Preparados?
As áreas de conhecimento do Design são:
 ■ Design Editorial.
 ■ Design e Embalagem.
 ■ Design de Superfície.
 ■ Design e Animação.
 ■ Design e Games.
 ■ Design de Interação.
 ■ Design de Experiência.
 ■ Design Tipográfico.
 ■ Design e Branding.
 ■ Design e Gestão.
 ■ Design Sustentável.
 ■ Design de Serviços.
 ■ Design Social.
 ■ Design e Informação.
 ■ Web Design.
Perceba que são várias as áreas do Design e, para o nosso estudo, vamos conhe-
cer alguns um pouco mais, como segue.
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E20
DESIGN EDITORIAL
O design editorial é uma das especialidades do Design Gráfico e corresponde 
ao projeto visual de uma edição. Entende-se por edição o processo de planeja-
mento envolvendo textos e imagens que irão compor uma publicação, sendo ela 
periódica ou não. Livros, jornais, revistas e e-books são produtos de design edi-
torial no qual mensagens visuais e textuais são ordenadas visando cumprir os 
objetivos de comunicação.
O design editorial se utiliza da combinação de elementos gráficos no objetivo 
de informar, instruir e comunicar os objetivos da publicação. Com o desenvol-
vimento das tecnologias digitais, o termo editoração eletrônica passou a ser 
utilizado e foram introduzidos novos softwares para a composição destas publi-
cações virtuais.
História da Arte e do Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
21
DESIGN E ANIMAÇÃO
Temos designs nas animações? Com cer-
teza, pois quando falamos de animação, 
pensamos em personagens e sets até as 
produções para web ou qualquer 
outro meio digital. O designer 
gráfico pode desempenhar várias 
funções em um processo de ani-
mação, por exemplo: o Designer 
de Tipos1 necessita da animação 
para a produção dos créditos; 
o storyboard2 depende do 
designer de som para criar o 
animatic3; e o concept art4 
precisa do animador para 
o personagem ganhar vida. 
Essas são algumas das funções 
que um Design Gráfico pode exercer no universo da animação.
1 Designer de Tipos é quem trabalha com a arte e o processo de criação na composição de um texto, física 
ou digitalmente.
2 Storyboard são organizadores gráficos tais como uma série de ilustrações ou imagens arranjadas em 
sequência com o propósito de pré-visualizar um filme, animação ou gráfico animado, incluindo elementos 
interativos em websites.
3 O animatic é uma mistura de computação gráfica, ilustração, animação vetorial e composição, montado 
para ilustrar uma cena antes de ser filmada ou animada.
4 Concept art é uma forma de ilustração cujo objetivo principal é reproduzir uma representação de um 
design, ideia e/ou tom usado em filmes, jogos eletrônicos, animações ou histórias em quadrinhos antes de 
ele ser posto no produto final.
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E22
DESIGN E GAMES
E o que falar do Design em Games? Esse mundo também possui um Design 
Gráfico, que chamamos de Game Design. O Game Design participa do processo 
de criação, análise de jogos, todas as suas especificações, regras e características. 
Conforme Nicolau (2013, p. 44), o Game Design “recebe o material do marke-
ting disponível do jogo, como logotipo, imagens 3D, ilustrações, concept arts, e 
projeta o visual em que o jogo será apresentado ao público, criando desde car-
tazes até vídeos de apresentação”.
DESIGN DA INFORMAÇÃO
Será que as informações disponíveis aos usuários precisam de design? O mesmo 
autor que temos apontado, Nicolau (2013, p. 99), explica que “[...] o design da 
informação é um ponto que está entre os estudos da linguagem, arte, estética, 
informação, comunicação, comportamento e cognição, administração e direito, 
e tecnologias de produção de mídias”. Além disso, Horn (1999, p. 15) afirma 
que “[...] o Design da Informação é a arte e a ciência de preparar a informação, 
História da Arte e do Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
23
possibilitando seu uso pelo homem de maneira eficiente e eficaz”. 
Nessa categoria do Design, devemos levar em conta a satisfação do usuário, 
a eficácia e eficiência da informação que está sendo disponibilizada nos meios de 
comunicação, por exemplo: panfletos, outdoors,cartazes, TV, internet; também 
os novos meios, como o cinético – jogos que captam o movimento do usuário; 
e o tátil - smartphones e tablets (NICOLAU, 2013). 
Caro(a) aluno(a), falamos que para o nosso estudo, Design Gráfico para Web, 
é importante conhecer e entender os conceitos relacionados às áreas de conhe-
cimento do Design Gráfico. Essa relevância se dá, pois, elas estão relacionadas 
entre si e o profissional de Design Gráfico é responsável pela criação da iden-
tidade visual de uma empresa e pela apresentação de suas marcas e produtos. 
Agora, imagine a empresa XX que possui sua logomarca com cores azuis 
e brancas e no seu site as cores que foram usadas são vermelhas e amarelas. 
Estranho certo? O Designer Gráfico deve analisar os elementos mais propícios 
a serem usados em cada projeto, para melhor atingir o objetivo de atrair e per-
suadir os usuários a consumirem e/ou utilizarem os produtos ou serviços de 
determinada empresa ou marca.
Segundo Slengmann (2010, p. 11):
para realizar-se a criação de uma identidade visual, não basta apenas 
fazer algo “belo” ou “criativo”, mas também uma proposta adequada, 
atraente, inovadora, deslumbrante, instigante e persuasiva. Para tanto, 
o conhecimento não deve ficar restrito ao segmento do Design Gráfico, 
mas sim ser aprofundado nas diferentes áreas correlacionadas, para só 
depois se iniciar um projeto de identidade visual tendo maiores chan-
Hoje, o universo do Design Gráfico se ampliou. Não tratamos mais de espa-
ços bi ou tridimensionais, mas tratamos de espaços que nem sequer temos 
o alcance visível e/ou material.
(Gisele Beluzo de Campos)
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E24
ces de se atingir os objetivos. E neste sentido é fundamental a pesquisa: 
leitura, observação, experimentação, reexperimentação.
Para Ambrose e Harris (2011), o design gráfico é uma atividade com alto grau 
de criatividade, mas que é controlada e direcionada ao processo em desenvolvi-
mento, ou seja, canalizada para o problema de design para a produção.
Vamos falar de Web Design Gráfico? Web Design Gráfico é o design voltado para 
a Internet. Neste tipo de design, a imagem é tudo e um bom design, bem definido e 
que esteja de acordo com o que a empresa quer, com certeza serão mais eficientes.
Aluno(a), como está a sua criatividade? Lembre-se sempre: criatividade é 
essencial, mas é somente o primeiro passo, pois é preciso inovar e colocar as 
ideias em prática.
Competências de um game designer
Uma das premissas para ser um Game Designer é ter espírito de liderança e 
coordenação com uma visão inovadora e de negócios. Além dessas caracte-
rísticas, é necessário ter um perfil observador para interpretar as preferên-
cias do público. [...] Seguem algumas características indispensáveis ao Game 
Designer, independente do papel que assumirá na equipe: 
Sociabilidade: o designer precisa possuir habilidades sociais, tais como: sa-
ber expor suas ideias, entender e assimilar a opinião de terceiros e o que 
estão tentando dizer. 
Conhecimentos gerais: para ter ideias relevantes é preciso ter conhecimen-
to do contexto mundial [...]. 
Criatividade: a criação de vários dos elementos visuais do jogo e a extração 
das melhores ideias do brainstorm. A realidade do projeto pode não corres-
ponder com sua idealização e/ou planejamento inicial, cabendo ao projetis-
ta contornar o problema em busca de soluções viáveis e criativas [...].
Ser jogador: é preciso amar esse universo, passar horas conhecendo, ex-
perimentando e testando os mais diversos jogos [...] O importante é jogar e 
conhecer, para que se possa inovar na área. 
Fonte: Nicolau (2013, p. 44).
Introdução ao Processo de Design
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
25
INTRODUÇÃO AO PROCESSO DE DESIGN
Conforme Lupton (2013, p. 04), “[...] o processo de design é uma mistura de ações 
intuitivas e intencionais”. Para iniciarmos um projeto, temos que passar por várias 
fases de processo do design, desde a entrevista com o cliente, a pesquisa sobre o 
problema, o mundo da geração de ideias e, por fim, chegar à criação das formas.
Para explorarmos os processos de designs, precisamos antes conhecer alguns 
conceitos e técnicas que serão a base para o desenvolvimento do nosso processo 
de design gráfico. Alguns dos conceitos são: Brainstorming, Briefing, Design 
Thinking, UX Design e UI Design. Preparados? 
BRAINSTORMING
Caro(a) aluno(a), quando se inicia um projeto, seja ele qual for, pode envol-
ver alguns rituais pessoais, como uma caminhada, ou algo mais estruturado, 
como alguns questionários ou uma entrevista com o cliente. Outros aplicam o 
Brainstorming, na busca incansável de ideias inovadoras, uma forma de melho-
rar o processo de pensar criativo. O Brainstorming é uma ferramenta poderosa, 
é o início da busca por ideias inspiradoras do designer gráfico.
Brainstorming é o nome dado a uma técnica grupal – ou individual – na 
qual são realizados exercícios mentais com a finalidade de resolver problemas 
específicos. Segundo Ambrose e Harris (2011), Brainstorming é uma ferramenta 
que aborda a criação em grupo que visa desenvolver ideias e soluções durante a 
etapa de geração de ideias.
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E26
Sobre a capacidade de ser criativo, Lupton (2013, p. 04) explica:
praticamente qualquer pessoa pode aprender a melhorar suas capaci-
dades criativas. Embora o talento seja uma entidade misteriosa, o pro-
cesso criativo tende a trilhar percursos previsíveis. Ao decompor esse 
processo em etapas, implementando métodos consciente de pensa-
mento e execução, os designers têm a possibilidade de abrir suas men-
tes para soluções incríveis que irão satisfazer os clientes, os usuários e 
eles próprios.
BRIEFING
 Briefing é um conceito usado em diversas áreas e para quando se quer infor-
mações e instruções claras e objetivas sobre um projeto, uma missão ou tarefa 
a ser realizada, executada. Na área de design, ele é usado como um roteiro, um 
guia que determina todas as etapas a serem desenvolvidas no projeto, desde a 
sua concepção inicial até a sua finalização, por exemplo: tamanho, cores, tipo-
grafia, imagens, público-alvo etc.
O layout (disposição de elementos de texto e imagens em uma peça gráfica) 
antes da editoração eletrônica era feito à mão, com uso de tintas e letras em decal-
que, aplicados em papel comum. Com a evolução e informatização de diversas 
atividades, o layout passou a ser feito diretamente no computador, com uso de 
scanners e softwares de edição de imagens. 
A finalização, antes feita artesanalmente em papel vegetal e colada com ben-
zina, agora é processada 100% digitalmente e, entregue ao cliente com 97% de 
Briefing
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
27
fidelidade do impresso final. A editoração 
eletrônica atualmente é a base de recur-
sos para todo tipo de publicação, seja em 
artes gráficas ou em multimídia.
Ao usarmos o Briefing, devemos 
desenvolvê-lo de forma bem elaborada, 
pois ele é fundamental para conduzir todo 
o desenvolvimento do nosso processo de 
design sem gerar distorções, más inter-
pretações, erros ou retrabalhos, ou seja, 
sem problemas.
E como seria o conteúdo do documento? Seu conteúdo deverá conter as 
estratégias do projeto e as estratégias do design, acertado entre as duas partes: 
o cliente e o designer. As informações básicas que deve conter são: objetivo do 
projeto, uma visão do produto, resultados previstos, tipo de negócio, verificação 
da concorrência, público-alvo, definição do portfólio da empresa e definição do 
escopo do projeto (prazos, equipe, custos de cada etapa do projeto).Conforme Lupton (2013, p. 57), temos algumas técnicas que podem ser uti-
lizadas para refinar um Briefing, que são:
1. Faça perguntas: crie uma lista de perguntas que serão feitas ao clien-
te, pois as respostas servirão como o primeiro rascunho do briefing.
2. Conduza a pesquisa: procure conhecer “bem” seu cliente e seu pú-
blico. Lembre-se: seu cliente é seu parceiro. Após esta pesquisa, atualize 
e refine o seu briefing.
3. Reduza o escopo do briefing: refine mais seu briefing e defina a es-
sência do seu projeto.
4. Defina as mensagens-chave: hora de discutir o briefing com seu 
cliente. Estando de acordo, comece a desenvolver soluções.
No Briefing, devemos tentar descobrir o que seu cliente quer, o que ele precisa 
que seja resolvido (seu problema) e o mais importante: o que você precisa fazer 
para resolver o problema. Por isso, fique atento ao elaborar um Briefing, pois, 
ele precisa ser de fácil entendimento e feito com qualidade. 
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E28
DESIGN THINKING
 Conforme Lupton (2013, p. 05) “[...] o conceito de Design Thinking normal-
mente se refere aos processos de concepção, pesquisa, prototipagem e interação 
com o usuário”. Os processos de concepção envolvem a captura visual das ideias, 
do pensamento e passar isso para esboços, listas, diagramas, mapeamento, ima-
gens, fotografias etc.
Para Vianna et al. (2012, p. 13): 
[...] o Design Thinking se refere à maneira do designer de pensar, que 
utiliza um tipo de raciocínio pouco convencional no meio empresarial, 
o pensamento abdutivo. Assim, ao pensar de maneira abdutiva, a solu-
ção não é derivada do problema: ela se encaixa nele.
O Design Thinking ajuda a entender os parâmetros e padrões essenciais para 
criar projetos da melhor qualidade.
Não se pode solucionar problemas com o mesmo tipo de pensamento 
que os criou: abduzir e desafiar as normas empresariais é a base do De-
sign Thinking. É pensando de maneira abdutiva que o designer cons-
tantemente desafia seus padrões, fazendo e desfazendo conjecturas, e 
transformando-as em oportunidades para a inovação. É essa habilida-
de, de se desvencilhar do pensamento lógico cartesiano, que faz com 
que o designer se mantenha “fora da caixa” (VIANNA et al., 2012, p. 
13).
Design Thinking
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
29
Bem, caro(a) aluno(a), podemos pensar que os seres humanos são Design Thinkers 
por natureza. Será? Você concorda com isso? Preparado para observar o mundo 
e gerar soluções? Design Thinkers produzem soluções que geram novos signifi-
cados e que estimulam a criatividade os diversos aspectos (cognitivo, emocional 
e sensorial) envolvidos na experiência humana.
 
O QUE ELE
PENSA E SENTE?
O que você realmente quer? O que você 
não quer de jeito nenhum? Quais preo-
cupações te atormentam?
Quais suas maiores aspirações?
O QUE ELE
FALA E FAZ?
Como você se veste? Qual o seu estilo? 
Qual a história que você conta? O que 
você expressa? O que quer mostrar aos 
outros?
QUAIS SÃO SUAS
DORES?
O que pode dar errado? O que seria muito 
ruim se acontecesse? Quais obstáculos estão a 
sua frente? Qual o maior obstáculo entre você 
e suas aspirações?
QUAIS SÃO OS
OBJETIVOS?
Qual o projeto ideal? Onde você quer 
chegar? O que é extremamente desejável? 
Como você mede o sucesso?
O QUE ELE
VÊ?
Como você percebe as 
opções? Como é a casa dos 
seus vizinhos, amigos e 
familiares? O que as outras 
pessoas estão fazendo por 
ai? O que aparece na mídia
O QUE ELE
ESCUTA?
Como o ambiente te 
in�uencia? O que seus 
amigos, vizinhos e 
familiares te dizem? Quem 
realmente in�uencia? O 
que eles esperam? O que a 
mídia diz?
Figura 3 - Descoberta do Design Thinking
Fonte: Silveira e Gonsales (2014, p. 29). 
Segundo Vianna et al. (2012, p. 07): 
[...] no Design Thinking, a Arte se junta a Ciência e a Tecnologia para 
encontrar novas soluções de negócio. Usa-se vídeo, teatro, representa-
ções visuais, metáforas e música junto com estatística, planilhas e mé-
todos de gerência para abordar os mais difíceis problemas de negócio 
e gerar inovação.
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E30
Um Design Thinkers utiliza algumas ferramentas principais que podem enri-
quecer seu trabalho, como a observação, a imaginação e a configuração. Vamos 
ver cada uma delas:
Ferramenta que deve 
ser aguçada sempre que se 
observam as “coisas”, que se 
transforma numa poderosa 
ferramenta, composta de 
inferências e ciclos de teste.Ferramenta 
utilizada para ver 
“coisas” que outros 
não veem, ou seja, 
temos que ver e ouvir 
tudo que for referente 
ao projeto que está 
sendo desenvolvido, 
cuidadosamente e 
de uma maneira 
sensível. Ferramenta 
responsável pelo 
entendimento, à 
tradução da ideia do 
cliente.
O
BSERVAÇÃO
CO
NF
IG
UR
AÇ
ÃO
IMAGINAÇÃO
O Design Thinking surgiu para solucionar (entre outros desafios), os gerados 
pela internet ou era da informação, onde temos os concorrentes a um clique do 
mouse, uma crescente necessidade de inovação e temos produtos como serviço. 
O Design Thinking tem como base três pilares:
Design Thinking
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
31
IMERSÃO COCRIAÇÃO PROTOTIPAÇÃO
Conjunto de técnicas 
para conhecer em 
profundidade as ne-
cessidades e expecta-
tivas do cliente.
Nessa fase, designers, 
clientes e demais 
interessados criam e 
desenvolvem juntos 
as possíveis soluções.
Protótipos de baixo 
custo são feitos para 
que as soluções 
sejam experimenta-
das antes de imple-
mentadas.
Figura 4 - Base do Design Thinking
Fonte: a autora.
Caro(a) aluno(a), o Design Thinking é considerado a nova visão do design para 
inovar e solucionar problemas, pois pensa com a cabeça do usuário, ouve pesquisa, 
recolhe dados, acerta na busca por soluções. É considerada uma metodologia 
criativa e inovadora que coloca as pessoas no centro das soluções. Uma nova 
forma de pensar e solucionar problemas, focada na empatia e colaboração. Um 
processo criativo e crítico que ajuda a organizar ideias, tomar decisões, melho-
rar situações e ganhar conhecimento.
 
Desenhar
para
Pessoas
Estimular
os
Sentidos
Contar
Boas
Histórias
Us
áv
el Útil
Desejável
Figura 5 - Boas experiências criam emoções - A Santíssima Trindade das experiências digitais
Fonte: Negrini (2004, p. 45).
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E32
CODESIGN
Também conhecido como “design colaborativo”, ou seja, uma forma de design 
que envolve os usuários finais no processo de criação. Quem melhor para cola-
borar com seu projeto do que os próprios usuários? Conforme Águas (2012, p. 
62) “[...] o co-design é uma forma interdisciplinar de desenvolvimento de pro-
jetos, em que os designers, os utilizadores, os investigadores, os promotores e os 
decisores são parceiros para o mesmo fim”.
Outra forma de codesign é o conteúdo gerado para usuários na internet. Um 
exemplo é a Graffimi5, uma plataforma de grafite virtual, que oferece aos usuá-
rios ferramentas como tinta spray, pincéis, tudo virtual. Os usuários adicionam 
suas obras a um muro com transmissão ao vivo que serve como tela pública. Esse 
muro de tijolos, que forma o fundo do site, expande-se à medida que é preen-
chido com as obras enviadas pelos usuários. Quem criou esta arena digital foi o 
designer Baris Siniksaran. 
5 Veja a Plataforma de Grafite Virtual Graffimi disponível em: <https://vimeo.com/11710482>.
Sprinting
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.33
SPRINTING
Quando falamos em Sprinting na área de designer (Design Sprint), estamos nos 
referindo a uma técnica que serve para romper com seus próprios hábitos e com 
isso criar uma solução visual nova em um curto período de tempo. Quando o 
tempo é curto, os designers muitas vezes, sentem-se mais confortáveis em assu-
mir riscos e experimentar coisas novas. O ideal é sempre programar sessões de 
Sprinting, como se fossem reuniões agendadas. (LUPTON, 2013).
O Sprinting é um processo de design rápido em que um grupo de designers 
se reúne por cinco dias para responder questões críticas de negócios por meio 
de design, prototipagem e teste das ideias com os clientes. 
Mas como funciona o Sprinting? Primeiro, você precisa escolher o problema 
a ser resolvido. Segundo, reuna a equipe que vai fazer parte desse projeto. Quando 
estiverem todos alinhados (escolhido o problema e a equipe) reúna a equipe em 
uma sala, desmarque os compromissos de todos da equipe e distribua materiais 
básicos para usar durante a reunião (post-its, caneta, papel etc.). No primeiro 
dia da Sprinting, sua equipe vai exteriorizar tudo o que sabem sobre o problema/
ideia. No segundo dia, toda a equipe deve rabiscar as ideias, trabalhando indi-
vidualmente e colocando as soluções para aquele problema/ideia no papel. No 
terceiro dia, o objetivo é filtrar as ideias, refiná-las, e no fim do dia escolher uma 
única ideia para prototipar. Quinta-feira é o dia de prototipar e a ideia é montar 
um protótipo daquele problema/ideia até o fim do dia. Sexta-feira é dia de mos-
trar os protótipos criados aos clientes em sessões individuais.
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E34
Caro(a) aluno(a), para facilitar o entendimento da técnica de Sprinting, vamos 
a um estudo de caso. Jornais, revistas e outras publicações ou aplicações podem 
servir como parâmetros prontos que podem ser usados em sessões de Sprinting 
bem sucedidas. Assim, quando se trabalha com elementos determinados, como 
as reportagens, chamadas, fotografias, imagens, legendas, ícones e corpo de texto; 
o designer pode se concentrar em organizar componentes em uma série de pro-
postas rápidas, descontraídas ou experimentais. Os designers podem usar sessões 
de 30 minutos de sprintings para desenvolver e se divertir com novos layouts. 
Figura 6 - Exemplo de Layout de Jornal
Figura 7 - UX Design
Fonte: Ferreira (2014, p. 05).
Sprinting
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
35
UX DESIGN E UI DESIGN
Caro(a) aluno(a), em muitos casos, pode se confundir os conceitos de UI Design 
com UX Design, apesar dos nomes serem parecidos, suas abordagens são bem 
diferentes. UX está relacionado com a experiência do usuário e com seus senti-
mentos, enquanto que UI é a maneira como o usuário alcança essa experiência.
Vocês já viram a quantidade de nomenclaturas existentes hoje em dia para 
definir todas as áreas que envolvem o design? O que precisamos entender, é que 
esses conceitos se complementam, apesar de terem significados diferentes e que 
os dois são importantes para o designer. Então, para facilitar e entender os con-
ceitos, sempre pense da seguinte forma: o UX Design trabalha com as emoções 
e experiências dos usuários, já o UI, é justamente a ponte responsável por fazer 
com que essas experiências aconteçam. E agora, ficou mais fácil diferenciar os 
conceitos? Então, vamos seguir em frente. 
UI Designer UX Designer
Parte criativa e visual
Elementos consistentes
O famoso designer
Lado emocional
Facilidade de uso
Fluidez e clareza
Figura 8 - Diferenças entre UI Design e UX Design
Fonte: Gobbi (2015, p. 04). 
POR ONDE COMEÇAR?
Bem, caro(a) aluno(a), vimos vários conceitos e técnicas que podem ser utili-
zados no processo de design. Mas antes de escolher um (ou um conjunto delas) 
para o desenvolvimento do seu projeto de design você precisa:
 ■ Definir e especificar o problema que você está tentando resolver.
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E36
 ■ Definir e entender o seu público-alvo.
 ■ Investigar o que os concorrentes têm feito na área.
 ■ Definir os requisitos gerais do produto, aplicativo ou dispositivo.
Além disso, pense no prazo, custo e seu time. Como vocês se organizarão? O 
que funcionará melhor para vocês? Uma documentação formal ou rascunhos 
mais informais e discussões presenciais, reuniões? Vocês têm tempo e recursos 
para uma pesquisa mais aprofundada? Qual o nível técnico do seu time? Quais 
sabem programar? Qual a habilidade de cada um?
Agora que você já conheceu algumas das técnicas e conceitos que envolvem 
o processo de design e também obteve subsídios para analisar os itens que você 
precisa definir para iniciar o seu projeto, você está preparado para continuar? 
Então, vamos seguir em frente. 
A atividade do Design, essencialmente relacionada ao ato de projetar, não 
pode ser pensada como uma área estática, com fronteiras definidas. Design 
e Gestão, Design e Experiência, Design e Interação - é o Design voltado ao 
contexto e às necessidades em que está inserido. Nesta aproximação, são 
absorvidas novidades e fornecidos subsídios para otimizar a profissão e as 
áreas com que pode ser associado o design. O uso plural da expressão ‘De-
sign’ tem como possível causa à capacidade de integração do conhecimento 
de diversas disciplinas e áreas de estudo. O Design é utilizado para informar, 
identificar, sinalizar, estimular, persuadir e conscientizar. Os meios para esses 
objetivos são variados e se tornam cada vez mais difícil delimitá-los diante 
da infinidade de substratos de atuação, os quais têm se tornado cada vez 
mais complexos e interdisciplinares. Sob essa perspectiva, a atuação dos 
designers supõe uma transformação contínua na elaboração do próprio co-
nhecimento.
Fonte: Nicolau (2013, p. 06).
Considerações Finais
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
37
Criar websites pelo simples ato de criar, não irá agregar valor a sua marca e 
ao seu negócio.
(José Roberto Martins)
HISTÓRIA DA ARTE E DO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IU N I D A D E38
CONSIDERAÇÕES FINAIS
Prezado(a) aluno(a), nesta unidade, aprendemos sobre a História da Arte e seus 
conceitos, vimos como ela é importante para o Design Gráfico e como influen-
cia a nossa imaginação e criatividade. Aprendemos, por meio da Arte, entender 
quem somos e aprendemos a conviver uns com os outros e como isso influen-
cia o projeto de um Designer gráfico.
Também discutimos sobre o Design Gráfico e como ele depende do seu 
público, e porque é necessário entender o que esse público deseja, o que real-
mente precisa e espera do projeto de design. Aprendemos que um dos objetivos 
principais do Design gráfico, é que ele surgiu para resolver os problemas de 
comunicação. Aprendemos também um pouco sobre algumas das áreas de 
conhecimento do Design, vimos que são várias e cada uma voltada a uma espe-
cialidade, um universo para explorar. 
Outro ponto abordado foi a respeito dos processos de designs, seus concei-
tos e técnicas que podem ser utilizadas para o desenvolvimento do processo de 
design gráfico. Complementar a isso, foi possível verificar quais os passos para 
iniciar um projeto, que vai desde a entrevista com o cliente, pesquisa sobre o 
problema, geração de ideias e criação das formas.
Estudamos os conceitos de Brainstorming, Briefing, Design Thinking, UX 
Design e UI Design. Aprendemos como podem ser usados no processo de 
design, desde a definição do problema até o fechamento dos requisitos gerais a 
serem criados.
Preparado(a) para continuar? Então, vamosseguir para a próxima unidade. 
Boa leitura e bons estudos!
39 
DESIGN THINKING: CONCEITOS E COMPETÊNCIAS DE UM PROCESSO DE 
ESTRATÉGIAS DIRECIONADO À INOVAÇÃO
 
Atualmente, o tema design thinking vem sendo disseminado no meio acadêmico, e in-
serido de maneira gradual crescente, devido à recente presença do design e ainda ser 
um termo novo no Brasil. Dessa maneira as contribuições de pesquisas desse tema são 
de grande relevância, e servem como contribuição ao desenvolvimento de inovação, 
torna premente a necessidade de esclarecimentos sobre o assunto e a viabilização de 
instrumentos capazes de auxiliar na implementação prática de ideias acerca do Design 
thinking. Neste sentido, o presente artigo inicia por uma revisão de conceitos conside-
rados fundamentais do design e avança na discussão específica da conceituação do de-
sign thinking, e avança na discussão específica das competências do design thinker1 . 
Após isso, revê iniciativas e considerações envolvendo contribuições significativas do 
design thinking.
Destaca, assim, alguns pontos considerados relevantes para a reflexão a partir do con-
ceito que, [...] sua característica de trabalhar junto das pessoas para as quais se está pro-
jetando, propondo soluções é capaz de gerar alternativas de alto impacto e que nascem 
de baixo para cima.
 
Design
 O Design é um assunto que possui múltiplas formas de interpretação e significados, 
possui uma abordagem significativa e muita ampla, assim vem sendo examinado e de-
batido por diversos autores, porém, não há uma definição concreta que consiga abordar 
o design em toda sua totalidade pela constante modificação da atividade [...].
O design é uma atividade criativa cujo objetivo é estabelecer as qualidades multifaceta-
das de objetos, processo, serviços e seus sistemas em ciclos de vida completos. Portanto, 
design é o fator central da humanização inovadora de tecnologias e o fator crucial do 
intercâmbio cultural e econômico.
O design procura descobrir e avaliar as relações estruturais, organizacionais, funcionais, 
expressivas e econômicas, com a tarefa de: promover a sustentabilidade global e a pro-
teção ambiental (ética e global); oferecer benefícios e liberdade a toda comunidade hu-
mana (ética social); apoiar a diversidade cultural, a despeito da globalização do mundo; 
fornecer produtos, serviços e sistemas em formas que sejam expressivas (semiótica) e 
coerentes (estética) com sua complexidade própria.
É inegável que o design ocupa papel central no contexto cultural contemporâneo, tor-
nou-se forma privilegiada dos indivíduos conviverem com os diferenciais simbólicos e 
os valores indenitários que cultivam. É um desafio que amadurece com a contempora-
40 
neidade. Está associado à cultura de massa e a reprodução em série. Especialmente para 
o Brasil de hoje, e o de amanhã, o design é vital. Ele não só faz parte de um processo de 
inclusão, ele também é uma das maiores expressões de nossa afirmação em um mundo 
globalizado.
Considera-se que o design trabalha muito mais do que a estética, faz uso de fatores que 
envolvem planejamento, produção, gerenciamento e comercialização de produtos e 
serviços. Muitas organizações já têm conhecimento da sua importância e apostam nele 
como diferencial competitivo, melhorando seu posicionamento, utilizando - se de estra-
tégias para gerar redução de custos, inovações atingindo assim o desejo do consumidor.
Até surgir a competitividade, o foco das empresas era a exaustiva produtividade, consi-
derado um aspecto quantitativo, mas com a globalização, passou-se a exigir atributos 
qualitativos. A produtividade passa a ser substituída pela competitividade, fazendo com 
que o design foque em uma gestão mais completa. O design é tido como um integrador, 
entre todas as ferramentas da empresa e trabalha próximo ao marketing, à engenharia, 
até mesmo da administração, além de entrar em contato com tecnologias e os clientes, 
sendo capaz de propor novas estruturas de ações estratégicas do design.
 
Design thinking – definições, objetivos e princípios
O design thinking pode ser considerado um conceito que de certa forma esteve pre-
sente, consciente ou inconscientemente, desde que existe design. Pode-se, no entanto, 
atribuir a Papaneck, Fuller e Caplan, o crédito por ter introduzido, a partir de 1976, o 
conceito de design thinking atrelado a mudanças sociais e ambientais [...]. Já desde essa 
época, é visível uma grande tentativa de ampliar o campo de atuação do design, que dei-
xa de ter um aspecto predominantemente operacional, e parte para uma maneira mais 
estratégica de abordagem, neste sentido, o “design não é somente fazer coisas bonitas; é 
também fazer com que as coisas trabalhem maravilhosamente bem” [...]. Design thinking 
é um caminho alternativo, o do design como forma de pensar. Dessa maneira, o design 
se transforma então, em processo, em método de inovação centrado em aspectos hu-
manos, utilizando métodos como: observação, co-criação, visualização e prototipagem 
[...] complementam que esse é um processo que começa pelas pessoas para as quais 
estejamos criando a solução.
O Design Thinking emergiu como um caminho mais rápido para a inovação e para a alta 
performance organizacional. Organizações pedem aos designers para imaginar solu-
ções que encontrem necessidades e para construir sistemas que otimizam a experiência 
e a satisfação do consumidor [...]. Ainda [...] define design thinking como “a disciplina que 
utiliza a sensibilidade e os métodos do designer para corresponder às necessidades dos 
consumidores, com o que é tecnologicamente factível, e o que a estratégia viável de 
negócio possa converter em valores para consumidores e oportunidades de mercado”, 
essas habilidades usadas de forma criativa e colaborativa, geram casos promissores.
41 
O Design Thinking é uma abordagem para problemas complexos focada no uso da cria-
tividade e da empatia, e que incentiva a participação de usuários finais na criação de 
soluções que já nascem mais adaptadas e, por isso, possuem maiores índices de adoção 
e maior potencial de serem catapultadas ao patamar de inovação. A importância do 
Design Thinking na alavancagem de inovações pode ser explicada por meio do entendi-
mento dos fatores que compõem na prática uma inovação.
Fonte: Balem et al. (2011, p. 02-05).
42 
1. A arte sempre esteve presente nas atividades dos homens, como vimos em nos-
sos estudos, ela é uma forma de criação do próprio homem, podendo ser feita de 
várias formas e por meio de diferentes meios, não somente como as artes plásticas, 
mas também a música, dança, teatro, fotografia, por exemplo, também são formas 
de arte. A partir dessa informação, assinale a opção correta:
I. Hoje, a arte está presente nas mais diversas áreas e lugares, seja qual for à 
atuação.
II. A arte pode ser vista nas embalagens, nos cartões de visita, nos anúncios, e 
também no ciberespaço como arte digital.
III. A arte dá e encontra forma e significado como instrumento de vida na bus-
ca do entendimento de quem somos, onde estamos e o que fazemos no 
mundo.
IV. A arte não tem um conceito único. Em cada momento histórico, em cada 
cultura, em cada circunstância pessoal, o que faz alguma coisa ser conside-
rada arte é diferente.
V. O ser humano representa simbolicamente sua vivência, valores e crenças 
por meio da arte.
 Assinale a alternativa CORRETA:
a) Somente as questões I e II estão corretas.
b) Somente as questões I e IV estão corretas.
c) Somente a questão I está correta.
d) Somente as questões II e V estão corretas.
e) Todas estão corretas.
 
2. Para Nicolau (2013), o designer é utilizado para informar, identificar, sinalizar, es-
timular, persuadir e conscientizar. Os meios para esses objetivos são variados e se 
torna cada vez mais difícil delimitá-los diante a infinidade de substratos de atuação, 
os quais têm se tornado cada vez mais complexos. Sobre o assunto, leia atentamen-
te as seguintes afirmações:
I. O sucesso do Design Gráfico não dependedo seu público, isso significa que é 
necessário entender o que o público deseja, precisa e espera.
II. Nem sempre é fácil, pois mesmo respeitando a opinião do cliente, o designer 
gráfico é quem decide se é possível aceitar as sugestões e quando não.
III. Design gráfico surgiu para resolver os problemas de relacionamento.
43 
IV. Na arte, temos o artista que desenvolve sua criação em um processo de exato 
de descobertas universais.
V. O designer gráfico desenvolve sua criação para a comunicação visual e com 
um fim específico, transmitindo suas ideias de forma clara e direta. Usa ele-
mentos gráficos que sejam fáceis de entender pelos destinatários da mensa-
gem.
 
Assinale a alternativa CORRETA:
a) Somente as questões I e II estão corretas.
b) Somente as questões I e IV estão corretas.
c) Somente a questão I está correta.
d) Somente as questões II e V estão corretas.
e) Todas estão corretas.
 
3. O universo do Design Gráfico se ampliou e hoje são várias as áreas de conheci-
mento do Design, cada uma com uma especialidade. Conhecer e entender os seus 
conceitos é importante e essencial para futuros designers gráficos. Com base nisso, 
identifique quais são as áreas de conhecimento do Design.
I. Design Editorial, Design e Embalagem, Design de Superfície.
II. Design e Animação, Design e Games, Design de Interação.
III. Design de Conhecimento, Design Cartográfico e Design e Branding.
IV. Design e Gestão, Design Sustentável, Design de Serviços e Design Assisten-
cial.
V. Design e Informação e Web Design.
Assinale a alternativa CORRETA:
a) Somente as questões I e II estão corretas.
b) Somente as questões I e IV estão corretas.
c) Somente a questão I está correta.
d) Somente as questões I, II e V estão corretas.
e) Todas estão corretas.
 
44 
4. O sucesso de um produto está diretamente relacionado à construção de um Brie-
fing completo, claro e objetivo. O Briefing é o documento de apoio para a avaliação 
das etapas de desenvolvimento do projeto e do protótipo final. Com ele, podemos 
descobrir o que o cliente quer, o que ele precisa que seja resolvido e o mais impor-
tante: o que você precisa fazer para tentar resolver o problema do cliente. Com base 
nisso, quais as técnicas que podem ser utilizadas para refinar um Briefing?
 
5. Para explorarmos os processos de designs, precisamos conhecer alguns conceitos 
e técnicas que serão a base para o desenvolvimento do nosso processo de design 
gráfico. Identifique cada conceito fazendo a relação entre as colunas:
1) Brainstorming.
2) Briefing.
3) Design Thinking.
4) Codesign.
5) Sprinting.
6) UX Design e UI Design.
( ) É um conceito usado em diversas áreas e é usado quando se quer informações e 
instruções claras e objetivas sobre um projeto, uma missão ou tarefa a ser realizada, 
executada.
( ) É o meio pela qual o usuário interage e controla um dispositivo, um software ou 
um aplicativo. Os controles podem ser: botões, menus, janelas, som, vídeos ou qual-
quer elemento que forneça uma interação entre o dispositivo e o usuário. É o design 
com foco no usuário, em suas expectativas, necessidades e atitudes.
( ) É uma ferramenta que aborda a criação em grupo que visa desenvolver ideias e 
soluções durante a etapa de geração de ideias.
( ) Técnica que serve para romper com seus próprios hábitos, e com isso criar uma 
solução visual nova em um curto período de tempo.
( ) Refere à maneira do designer de pensar, que utiliza um tipo de raciocínio pouco 
convencional no meio empresarial, o pensamento abdutivo. Assim, ao pensar de 
maneira abdutiva, a solução não é derivada do problema: ela se encaixa nele.
( ) Também conhecido como “design colaborativo”, ou seja, uma forma de design 
que envolve os usuários finais no processo de criação. 
Material Complementar
MATERIAL COMPLEMENTAR
Design para quem não é designer: noções básicas de 
planejamento visual
Autor: Robin Williams
Editora: Callis
Ano: 2013
Sinopse: você quer uma aparência melhor para suas páginas impressas ou eletrônicas, mas não sabe 
como fazê-lo? Você quer aprender mais sobre design, mas não tem tempo disponível ou não deseja 
estudar profundamente esse tema? Então, esse livro pode ser perfeito para você.
Retórica do Design Gráfi co: da Prática à Teoria
Autor: Licínio de Almeida Júnior e Vera Lúcia Nojima
Editora: Edgard Blucher
Ano: 2010
Sinopse: examinar o fazer design sob o olhar da Nova Retórica é caminhar por um terreno 
enigmático e sedutor na construção de aportes conceituais para o delineamento de um corpus 
teórico do Design, que está em franco debate epistemológico.
MATERIAL COMPLEMENTAR
Entenda o Design Thinking:
o Design Thinking ajuda na imersão e no entendimento de parâmetros e padrões essenciais para 
criar projetos de melhor qualidade. Infográfico mostra os processos e as abordagens de como 
aplicar os conceitos no nosso dia a dia. Veja alguns casos práticos no infográfico acessando o site 
a seguir do Serviço Brasileiro de Apoio às Micro e Pequenas Empresas (SEBRAE).
Disponível em: <http://www.sebrae.com.br/sites/PortalSebrae/artigos/entenda-o-design-thinkin
g,369d9cb730905410VgnVCM1000003b74010aRCRD>.
Profissão de Web designer:
artigo interessante sobre a profissão de web designer, pois é feito uma analogia ao voltarmos 
ao passado (dez anos no tempo) e com o tempo atual e suas tendências. É mostrado que não 
podemos resumir a atuação do web designer a apenas deixar interfaces bonitas e saber trabalhar 
com softwares gráficos é eliminar uma série de estudos (indispensáveis) na formação de um bom 
profissional. Ótima leitura. Aproveite.
Disponível em: <http://www.tecmundo.com.br/blog/2934-profissao-webdesigner.htm>.
Os três Pilares do Design Thinking:
artigo que trás informações importantes sobre os três pilares que envolvem o Design Thinking. Os 
três pilares são: Empatia: o primeiro e principal pilar do Design Thinking, Colaboração: co-criação 
como soma de experiências e a Experimentação: o aprendizado pela prática. Aproveite.
Disponível em: <http://www.uxdesign.blog.br/design-thinking/tres-pilares/>.
REFERÊNCIAS
47
ÁGUAS, S. Do Design ao Co-design uma Oportunidade de Design Participativo 
na transformação do espaço público. Universidade Lusófona de Humanidades e 
Tecnologias (ULHT), ISSN 1139-7365, 2012.
AMBROSE, G.; HARRIS, P. Design Thinking. Porto Alegre: Editora Bookman, 2011.
BALEM, F. R.; FIALHO, F. A. P.; CARDOSO, H. A. T. G.; SOUZA, R. P.L. de. Design Thinking: 
conceitos e competências de um processo de estratégias direcionado a inovação. 1º 
Congresso Nacional de Design, Desenhando o Futuro, 2011.
CAMPOS, G. B. de. Novos Enfoques para o Design Gráfico. In: Novas Fronteiras do 
Design Gráfico. São Paulo: Estação das Letras e Cores, 2011.
FERREIRA, A. Guia Profusamente ilustrado UX. Edit Industry Sessions, 2014.
GOBBI, G. UI e UX no Material Design. Google I/O Extend, Maceió, 2015.
HORN, R. E. Information Design: Emergence of a New Profession. In: JACOBSON, R. 
(ed). Information design. Cambridge: MIT Press, 1999.
LUPTON, E. Intuição, Ação, Criação: Graphic Design Thinking. São Paulo: Editora G. 
Gili, 2013.
MARTINS, J. R. Branding: um manual para você criar, gerenciar e avaliar marcas. São 
Paulo: Editora Global Brands, 03. ed., 2006.
NEGRINI, M. Desenhando Inovação: UX Design, Service Design & Design Thinking. 
MNMark Marketing Solutions, 2004.
NICOLAU, R. R. A. Zoom: design, teoria e prática. João Pessoa: Editora Ideia, 2013.
SANTOS, A. P. dos; FUNK, S. Arte Digital: a arte desencadeada por evoluções tec-
nologias e humanas. Anais do II Ciclo de Investigação do PPGAV UDESC - Arte e 
Pesquisa: aporias e constelações. Florianópolis, 2007. 
SILVEIRA, F.; GONSALES, P. Design Thinking para Educadores. São Paulo: HUB Es-
cola, 2014.
SLENGMANN, S. A Importância do Design Gráfico: na Criação da Identidade Visual 
de uma Marca, Universidade do Extremo Sul Catarinense – UNESC: Criciúma, 2010. 
VIANNA, M.; VIANNA, M.; ADLER, I. K. Design Thinking: inovação em negócios, Rio 
de Janeiro: MJV Press,2012.
GABARITO
1. e) Todas estão corretas. 
2. d) Somente as questões II e V estão corretas.
3. d) Somente as questões I, II e V estão corretas.
4. As técnicas utilizadas para refinar um Briefing são: 
Faça perguntas: crie uma lista de perguntas que serão feitas ao cliente, pois as res-
postas servirão como o primeiro rascunho do briefing.
Conduza a pesquisa: procure conhecer “bem” seu cliente e seu público. Lembre-se: 
seu cliente é seu parceiro. Após esta pesquisa, atualize e refina o seu briefing.
Reduza o escopo do briefing: refina mais seu briefing e defina a essência do seu 
projeto.
Defina as mensagens-chave: hora de discutir o briefing com seu cliente. Estando de 
acordo, comece a desenvolver soluções.
 
5. A ordem correta é: 2, 6, 1, 5, 3, 4. 
U
N
ID
A
D
E II
Professora Esp. Janaína Aparecida de Freitas
IDENTIDADE VISUAL 
Objetivos de Aprendizagem
 ■ Conhecer os conceitos e os elementos da Identidade Visual de uma 
empresa.
 ■ Entender a importância do estudo da percepção da marca de uma 
empresa no Design Gráfico.
 ■ Estudar a criação de conceitos, logotipo e logomarca.
Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
 ■ Identidade visual
 ■ Estudo da percepção da marca
 ■ Criação de conceitos, logotipo e logomarca
 ■ Branding
 ■ Brandbook
INTRODUÇÃO
Olá, aluno(a)! Esta unidade tem por finalidade mostrar como a identidade 
visual é importante para uma empresa. Vamos estudar e analisar logotipos de 
empresas e instituições consolidadas cuja marca ou símbolo são reconhecidos 
internacionalmente.
Vamos aprender que a imagem é o veículo mais poderoso de comunicação 
que uma empresa tem com seu público. As marcas podem ser complexas, sofis-
ticadas ou minimalistas, mas o importante é se utilizar de criatividade e pensar 
em se posicionar na memória do consumidor.
Estudaremos alguns elementos importantes que fazem parte da identidade 
visual, como o logotipo, o símbolo, a marca, as cores, o alfabeto usado e ainda 
alguns acessórios que ajudam a divulgar a empresa no mercado como a mas-
cote e os grafismos.
Também discutiremos nesta unidade as etapas que envolvem a criação de 
conceitos, logotipos e logomarcas de uma empresa e como é importante estes 
conceitos no Design Gráfico.
Ao refletir sobre uma marca em si, você valoriza as marcas que compra? 
Aprenderemos como os consumidores brasileiros costumam valorizar as mar-
cas quando efetuam suas compras, por serem conhecidas e de confiança. Vamos 
conhecer o Branding, que quando bem aplicado, favorece o estreitamento da 
relação entre a marca e seus clientes, e a ampliação da visão da marca no mer-
cado e com o consumidor. 
Outro ponto a ser abordado nesta unidade será o Brandbook e ver como ele 
pode ajudar a apresentar o desenvolvimento de uma identidade visual da marca. 
Ele é considerado uma evolução do manual de aplicação da marca porque além 
das formas de uso, retrata os valores e conceitos que o logotipo, as cores, fotos e 
disposições procuram transmitir na comunicação da marca.
Preparado(a) para continuar? Então, vamos seguir em frente. 
Boa leitura e bons estudos!
Introdução
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
51
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E52
IDENTIDADE VISUAL
Caro(a) aluno(a) porque será que a identidade visual de uma empresa é tão 
importante? Conforme Liberato (2013, p. 14): 
[...] a primeira coisa que vem à cabeça quando falamos em identida-
de visual de uma empresa é seu logotipo. Isso acontece porque o logo 
(para os íntimos) é normalmente o primeiro e muitas vezes o único 
contato que ela terá com seu público. 
A identidade visual sintetiza todos os elementos que diferenciam essa empresa 
do resto e, isto é o que a torna tão importante. Quando pensamos em um bom 
logotipo, devemos pensar que ele é muito mais que um desenho bonito para a 
empresa.
A definição de identidade visual, segundo Liberato (2013, p. 21) é:
[...] um sistema que constitui um conjunto de definições particulares 
relacionadas à apresentação visual de uma empresa, produto ou servi-
ço, como: símbolo, logotipo, fonte de apoio e web, sistema de assinatu-
ras, paleta de cores, grafismos, elementos de apoio a linguagem gráfica, 
materiais de comportamento, modelos tridimensionais, animação, ava-
tares e mascotes etc.
Para Mazzarolo (2013, on-line)4 a identidade visual de uma empresa é:
Porque as pessoas geralmente escolhem os produtos com base no valor 
percebido em vez de pensarem no valor real. Podemos usar exemplos 
cotidianos de nossa família, ou de nós mesmos que compramos alguns 
produtos pelo nome que conhecemos, porque nossa mãe usa ou mes-
mo pela embalagem que carrega e não exatamente pelo seu conteúdo 
físico. [...] A escolha do consumidor, diante de tantas ofertas, passa a 
ser baseada em valores subjetivos relacionados às marcas e, em grande 
Identidade Visual
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
53
parte dos casos, esses valores criados advém de estratégias de marketing 
que focam na experiência sensorial do consumidor, não somente em 
produtos como também nos seus espaços de varejo, criando assim uma 
fidelidade entre o público e a marca. 
Marca pode ser definida como o nome de uma empresa, produto ou serviço repre-
sentado por um desenho ou imagem (logotipo e/ou símbolo) que, com passar 
do tempo passa a ter um valor específico para cada consumidor e outra função 
importante da marca é diferenciar um produto de seus concorrentes.
Segundo Mazzarolo (2013, on-line)4 “[...] o design e a identidade visual que 
dele advém, tem sido o fator decisivo no sucesso ou fracasso de um produto, 
visto que como já citado anteriormente, existem produtos similares que são 
diferenciados apenas por sua marca”. É possível definir que o design cria, den-
tro da imagem da marca, conceitos essenciais, sendo que nenhuma concorrente 
poderá copiá-la.
O Sistema de Identidade Visual (SIV) é como se configura objetiva-
mente a identidade, é tudo aquilo que a forma: marca, cores institu-
cionais, alfabeto institucional, símbolos, elementos acessórios como 
material de papelaria, letreiros, sinalização, uniformes, embalagens etc. 
O SIV é formado por todas essas aplicações que veiculam os elementos 
de identidade visual que estão normatizados por ele ( MAZZAROLO, 
2013, on-line)4.
 
Figura 1 - Tudo começa e pode terminar na assinatura visual
Fonte: Liberato (2013, p. 15). 
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E54
ELEMENTOS DE IDENTIDADE VISUAL
A identidade visual possui alguns elementos importantes e podem ser dividi-
dos em:
 ■ Elementos primários: são os elementos fundamentais para o funciona-
mento da identidade. São eles: o logotipo, o símbolo e a marca. Podemos 
defini-las como:
Logotipo Símbolo Marca
forma particular e 
diferenciada com a 
qual o nome da 
empresa é registrada 
nas aplicações.
sinal grá�co que 
substitui o registro do 
nome da empresa.
conjunto formado 
pelo símbolo e pelo 
logotipo.
 ■ Elementos Secundários: são os elementos que contribuem para a per-
cepção e fixação da marca. São eles: as cores e o alfabeto utilizados nos 
elementos primários.
 ■ Acessórios: são elementos que servem como complementos, como grafis-
mos e mascotes cuja presença está relacionada ao grau de complexidade 
da empresa.
Identidade Visual
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
55
SÍMBOLO LOGOTIPO
Figura 2 - Assinatura visual é a combinação do logotipo com o símbolo
Fonte: Liberato (2013, pg 16).
 
 
 
 
 
 
IDENTIDADE VISUAL 
Reprodução proibida. A
rt.184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E56
ESTUDO DA PERCEPÇÃO DA MARCA
Caro(a) aluno(a), a marca é a expressão do individualismo social, mas que às 
vezes possibilita fazer parte de um grupo e ao mesmo tempo se destacar den-
tro dele, seja de uma pessoa, um produto, uma empresa, evento ou entidade 
(DAROS, 2009). 
Conforme Kapferer (2003), as marcas exercem as seguintes funções para os 
consumidores:
 ■ Referência: ver claramente, situar-se em relação à produção setorial, 
identificar rapidamente os produtos procurados.
 ■ Praticidade: permitir ganho de tempo e de energia na recompra de pro-
dutos idênticos pela fidelidade.
 ■ Garantia: segurança de encontrar uma qualidade estável em todos os 
lugares e a todo instante.
 ■ Otimização: segurança de comprar o melhor produto de sua categoria, 
com o melhor desempenho para um uso específico. 
 ■ Personalização: sentir-se reconfortado com sua autoimagem ou com a 
imagem que é passada aos outros.
 ■ Permanência: satisfação nascida da familiaridade e da intimidade das liga-
ções com uma marca que foi consumida durante anos e que ainda dura.
 ■ Hedonista: satisfação ligada à estética da marca, seu design e suas 
comunicações.
 ■ Ética: satisfação ligada ao comportamento responsável da marca nas 
suas relações com a sociedade (ecologia, emprego, cidadania e publici-
dade não chocante).
Segundo Daros (2009, p. 19), “[...] cada marca é trabalhada de acordo com 
o seu objetivo, planejamento e projeto de divulgação”. Para o autor, temos outros 
aspectos que são abordados com relação a percepção da marca. Mediante o 
reconhecimento da marca, o consumidor satisfeito pode encontrar o produto 
facilmente e efetuar uma nova compra, indicar para outras pessoas e, consequen-
temente, pode-se desenvolver ferramentas de fidelização. Já, para o vendedor, 
Estudo da Percepção da Marca
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
57
torna-se mais fácil vender produ-
tos de marcas conhecidas.
Podemos dizer que a 
percepção da marca é o 
produto de uma expres-
são gráfica (ela possui uma 
cara), de uma expressão filo-
sófica (ela tem um propósito) e 
de uma experiência (ela tem alguma 
coisa a passar). E cada uma dessas expressões 
nos remete à origem da marca e à confiabilidade de seus propósitos.
Daros (2009, p. 36) afirma que: 
[...] as marcas, atualmente, são fenômenos complexos, vão além das 
funções e atributos carregados no decorrer de sua história - signo, dis-
curso e sistema de memória. Hoje, desempenham o papel de objetos de 
desejo e sedução, no qual as pessoas se vêem refletidas.
Assim, quando criamos elementos gráficos, como logomarca/logotipo, são com-
ponentes que precedem a marca. O início da marca – composta por logotipo, 
símbolo e cor – é fundamental para seguir qualquer plano de comunicação, pois 
ela é o primeiro passo.
 
 
 
 
 
 
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E58
CRIAÇÃO DE CONCEITOS, LOGOTIPO E LOGOMARCA
Agora, caro(a) aluno(a), vamos ver as etapas que envolvem a criação de concei-
tos, logotipos e logomarcas de uma empresa.
A logomarca é a síntese da filosofia da empresa e representa a sua imagem. 
Ela deve ser o nome da empresa/produto juntamente com um ícone ou ima-
gem trabalhada em forma e cores que passem a ideia que ela pretende passar ao 
público (BRITO, 2011, p. 02).
A logomarca é uma versão gráfica do nome da marca. Isso acontece 
quando associamos à marca à alguma imagem, símbolo, sinal ou dese-
nho gráfico. A essa associação dá-se o nome de logomarca, apelidada 
de “logo”. Logotipo é o termo utilizado para as marcas que possuem 
o nome da empresa escrito de forma não convencional, representadas 
apenas em tipologia. Tem a mesma função de identidade que a logo-
marca, e no final das contas, também é um símbolo, mas só com letras.
Figura 3 - Exemplo de logomarca 
Criação de Conceitos, Logotipo E Logomarca
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
59
Segundo Brito (2009), muitos logos podem ser criados com figuras que podem 
ser abstratas ou imitativas. As figuras abstratas são aquelas cujo conceito é desig-
nado pela sua forma. Nas figuras imitativas, o conceito refere-se a um objeto 
independente da forma.
Figura 4 - Exemplo de logomarca 
Figura 5 - Exemplo de abstrata 
Fonte: Wikipedia ([2016], on-line)1.
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E60
Caro(a) aluno(a), ao criar um logo, precisamos ter informações sobre a empresa 
ou produto, como vimos na unidade I do livro, com o uso do Briefing. Para Brito 
(2011), temos alguns critérios principais que devem ser seguidos ao criar um logo:
 ■ Originalidade e Significado: a originalidade que fará a marca diferente 
das outras. O sentido de um logo deve ser facilmente percebido.
Figura 6 - Exemplo de imitativa 
Figura 7 - Exemplo de logo original e criativa
Criação de Conceitos, Logotipo E Logomarca
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
61
 ■ Incorporação da imagem da empresa: a identidade da empresa deve 
estar identificada, sem hesitação, na imagem do logo.
 ■ Reconhecimento e Lembrança: o logo deve ter legibilidade e visibili-
dade, para que ele seja lembrando e reconhecido.
Figura 8 - Exemplo de logo com reconhecimento e lembrança
 ■ Adaptabilidade: o logo deve possibilitar sua reprodução em qualquer 
formato ou processo.
 ■ Resistência ao tempo: o logo deve ser lembrado com o passar dos anos, 
uma marca tem que durar a vida toda. 
Figura 9 - Exemplo de logo com resistência ao tempo
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E62
Logo-
símbolo
Ambos signos identi�cadores estão 
formalmente integrados e constituem 
uma unidade grá�ca indissociável.
Logotipo
com
símbolo
Ambos signos são formalmente 
independentes e têm capacidade de 
identi�cação tanto em conjunto como 
separados.
Apenas
símbolo
Em alguns casos o símbolo alcança 
um nível de imposição tão grande 
que pode prescindir totalmente o 
logotipo.
Logotipo
com
fundo
O logotipo está inserido em um fundo 
sem autonomia no processo de 
identi�cação da marca.
Logotipo
com
acessório
O logotipo está acompanhado de 
algum sinal acessório sem autonomia 
no processo da marca.
Logotipo
puro
Representação exclusivamente 
tipográ�ca, caligrá�ca ou manuscrita 
do nome.
Figura 10 - Tipos de Logotipos
Fonte: Liberato (2013, p. 13).
Branding
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
63
BRANDING
Segundo Martins (2006, p. 09):
Branding é o conjunto de ações ligadas à administração das marcas. 
São ações que, tomadas com conhecimento e competência, levam as 
marcas além da sua natureza econômica, passando a fazer parte da cul-
tura, e influencia a vida das pessoas. Ações com a capacidade de sim-
plificar e enriquecer nossas vidas num mundo cada vez mais confuso 
e complexo.
Caro(a) aluno(a), já que estamos falando de construir uma marca, proponho-
-te uma breve reflexão: Você valoriza as marcas que compra? Martins (2006) 
explica que os consumidores brasileiros costumam valorizar as marcas quando 
efetuam compras, por serem conhecidas e de confiança. O Branding, quando 
bem aplicado, favorece o estreitamento da relação entre a marca e seus clientes 
e a ampliação da visão da marca.
 Sabe qual a estratégia do Branding que é a mais utilizada? A estratégia de 
fidelização da marca por meio da conexão emocional com seus clientes. Você 
possui marcas que te fidelizarampor causarem uma emoção? Por que lembra-
ram em você um momento especial ou alguém especial? Por isso, no design, o 
Branding passa a ser visto como uma ferramenta de diferenciação.
 Hoje em dia, a comunicação visual das empresas e marcas extrapola os limi-
tes físicos e impressos. Temos um cenário virtual em que a inserção das marcas 
é de extrema necessidade. Nessa realidade, temos então a Internet Branding. 
Mas, fica a pergunta: Será que, mesmo na esfera virtual, é possível ter esse apelo 
emocional? Com certeza sim! O computador visual é responsável pela imagem 
pública da empresa e dos produtos que ela representa no mercado e ela se tor-
nou uma verdadeira oportunidade de reinventar as empresas, dada a sua base 
de criação de relacionamento com os consumidores.
Sobre a Internet Branding, Martins (2006, p. 119) diz:
Para a maioria das pessoas, a criação de websites ainda envolve uma “ci-
ência desconhecida”. Marcas e termos que se renovam continuamente 
como: linguagem “HTML” de programação, e-commerce; Java; Scho-
ckwave e derivados são reciclados antes mesmo de serem decifrados 
pela maioria dos interessados. As empresas dispostas a investirem na 
internet são então levadas a acreditarem que a tecnologia é a ponta mais 
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E64
importante do sistema. Para criarmos um website, execu-
tamos a mesma série de procedimento que adotamos na 
criação de nomes, produtos e embalagens, muito antes 
de buscarmos o estado da arte em tecnologia “web-de-
sign”. A internet é um formato (condição) digital de 
Branding e posicionamento de marcas.
Então, você está preparado para criar uma marca 
de sucesso? Segundo Keller (2006) existem alguns 
fatores que representam desafios para os gestores de 
marca, sob algumas óticas:
 ■ Ótica do cliente: ocorre um aumento do poder de 
compra e, consequente, amadurecimento da consciência 
de mercado.
 ■ Ótica do mercado: ocorre uma constatação de uma 
concorrência mais sofisticada.
 ■ Ótica da comunicação: em função da perda de eficácia da mídia tradi-
cional, o surgimento de novas mídias e consequentemente o aumento de 
gastos promocionais.
Caro(a) aluno(a), ao desenvolver um projeto, leve em consideração à imagem da 
marca da empresa, pois ela é a identidade da marca que o consumidor conhece, 
reconhece e aprecia. A marca da empresa nos mostra as impressões positivas, 
neutras ou negativas que temos dela, do mercado que ela atua, do perfil do seu 
consumidor e como ela é vista na sociedade. 
BRANDBOOK
Caro(a) aluno(a), você já ouviu falar em brandbook? Um livro que conta a 
história da marca e que, conforme Lupton (2013, p. 46), “[...] é uma maneira 
de visualizar a personalidade e a história de vida de um produto, empresa ou 
Brandbook
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
65
organização. Um brandbook tem mais a ver com linguagem, atitudes e ideias 
do que com produtos”.
Conforme Mazzarolo (2013, on-line)4, o brandbook trata-se de uma evo-
lução na forma de apresentar o desenvolvimento de uma identidade visual da 
marca e é considerado uma evolução do manual de aplicação da marca porque, 
além das formas de uso, retrata os valores e conceitos que o logotipo, as cores, as 
fotos e as disposições procuram transmitir na comunicação da marca.
Para entender o conceito de brandbook é preciso primeiramente enten-
der o que é o manual de uso da marca, já que uma coisa é intrínseca 
a outra. Manual de marca ou manual de identidade visual é um docu-
mento técnico que contém um conjunto de recomendações, especifica-
ções e normas essenciais para a utilização de uma marca, e tem como 
objetivo preservar suas propriedades visuais e facilitar a correta propa-
gação, percepção, identificação e memorização da marca. No manual 
de marca é importante especificar a lógica construtiva da marca e dos 
elementos que a compõe (símbolo, logotipo etc.), estabelecer variações 
formais da marca, estabelecer dimensões para a utilização, indicar es-
pecificações técnicas como paleta cromática para garantir a fidelidade 
em diferentes meios e mídias de reprodução, além de demonstrar apli-
cações permitidas e proibidas da marca a fim de evitar sua divulgação 
de forma prejudicial à empresa (MAZZAROLO, 2013, on-line)4.
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E66
Neste livro da marca, o designer gráfico utiliza cores, formas, texturas, ima-
gens e fotografias para mostrar um estado, e assim convidar o usuário a visualizar 
e sentir que o produto ou a página é uma forma de documentar as fontes de ins-
piração. Seus principais objetivos são:
 ■ Mostrar a abrangência e a importância de vínculos entre a empresa com 
seu público-alvo.
 ■ Apresentar a marca de forma clara e eficiente. 
 ■ Passar um melhor entendimento dos valores retratados da identidade 
visual da marca.
 ■ Demonstrar a marca como identidade e transmitir a comunicação de sua 
empresa com seus consumidores. 
Como exemplo de um brandbook, vamos visualizar o da marca “O Boticário” 
que foi desenvolvido pela empresa Future Brand em 2011. Conforme Mazzarolo 
(2013), “[...] a ideia desse material era ilustrar os argumentos criativos para o rede-
sign da marca e da identidade e tornar mais didático esse processo de transição”. 
Figura 11 - Exemplo de Brandbook “O Boticário”
Brandbook
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
67
Mazzarolo (2013, p. 34) define o redesign da identidade da marca:
Com uma tipografia exclusiva, de formas arredondadas, a marca O Bo-
ticário revisita elementos clássicos e tem o olhar no futuro. Estampa 
uma alegria calorosa, jovem. A leveza e elegância dos florais, em con-
traste com a simplicidade e o peso dos tipos, sugere uma sofisticação 
acessível. A força particular desses elementos abre para a marca O Bo-
ticário múltiplos modos de expressão.
Outro exemplo de Brandbook, podemos citar a marca “Havaianas”.
Figura 12 - Exemplo de Brandbook da marca “Havainas”
No BrandBook das Havainas com as cores urbanas foi uma das fontes de inspira-
ção para o desenho da marca, que ganhou formas leves. O movimento dos traços 
demonstra a constante evolução da marca e a entrada de luz e as letras minús-
culas representam a clareza e a proximidade das relações com todos os públicos.
Outro exemplo de Brandbook, citamos da marca “Coca-Cola”.
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E68
O BrandBook é considerado um otimizador de esforços de comunicação e um 
multiplicador do valor da marca, desde que sejam concentrados esforços em 
conhecer e entender seus valores e sua personalidade. Em seu BrandBook, a 
Coca-Cola descreve que em qualquer parte do mundo, você será capaz de achar 
uma Coca-Cola e que ela é uma empresa de atuação global e que é comprome-
tida com os mercados locais. 
Figura 13 - Exemplo de Brandbook da marca “Coca-Cola”
 Fonte: Calameo ([2016], on-line)3.
 
 
 
 
 
 
Considerações Finais
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
69
Uma identidade bem definida leva nossa atenção àquilo, faz com que nos 
lembremos, ou seja, da maior pregnância ao objeto.
(Rafaeli Emili Mazzarolo)
Construção da marca
A construção de marca é um processo que envolve a participação do consu-
midor de forma decisiva [...] para a compreensão do processo de construção 
da marca na perspectiva do consumidor, devem ser apontados vários recur-
sos como o componente cognitivo, o afetivo e o conativo, que servem de 
base para a apreensão das atitudes e preferências por uma marca. O com-
ponente cognitivorelaciona-se com o conhecimento e a crença do consu-
midor em um determinado produto. O afetivo representa os sentimentos 
em relação ao produto. [...] A preferência por determinada marca pode advir, 
por exemplo, do conhecimento ou crença que se tem nela. Mediante ava-
liação comparativa que o consumidor faz entre vários produtos e aquele 
que seria o produto ideal. Ao realizar escolhas em relação aos produtos de 
consumo, os consumidores delineiam suas preferências de acordo com a 
percepção e a relação estabelecida com uma determinada marca. Tais es-
colhas também são passíveis de influências de outras pessoas e dos grupos 
de referência, cabe ressaltar que a cultura, a classe social, os familiares e os 
grupos de convivência exercem influências na compra.
Fonte: Magalhães (2006, p. 25).
IDENTIDADE VISUAL 
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIU N I D A D E70
CONSIDERAÇÕES FINAIS
Olá, aluno(a)! Nesta unidade, aprendemos por que a identidade visual é importante 
para uma empresa. Estudamos e analisamos logotipos de empresas e institui-
ções consolidadas cuja marca ou símbolo são reconhecidos internacionalmente.
Aprendemos que a imagem é o veículo mais poderoso de comunicação que 
uma empresa tem com seu público. As marcas podem ser complexas, sofistica-
das ou minimalistas, mas o importante é se utilizar de criatividade e pensar em 
se posicionar na memória do consumidor.
De maneira complementar, estudamos alguns elementos importantes que 
fazem parte da identidade visual, como o logotipo, o símbolo, a marca, as cores, 
o alfabeto usado e ainda alguns acessórios que ajudam a divulgar, como a mas-
cote e os grafismos. Além disso, você pôde ter acesso às etapas que envolvem a 
criação de conceitos, logotipos e logomarcas de uma empresa.
Foi possível perceber com a discussão proposta nesse capítulo que os consu-
midores brasileiros costumam valorizar as marcas quando efetuam compras, por 
serem conhecidas e de confiança. Por isso, a importância de se utilizar a ferra-
menta Branding, que, quando bem aplicado, favorece o estreitamento da relação 
entre a marca e seus clientes, além de ampliar a visão da marca.
Como discutido, o Brandbook pode ajudar a apresentar o desenvolvimento 
de uma identidade visual da marca. Esse documento é considerado uma evolu-
ção do manual de aplicação da marca porque, além das formas de uso, retrata os 
valores e conceitos que o logotipo, as cores, fotos e disposições procuram trans-
mitir na comunicação da marca.
Preparado para continuar? Então, vamos seguir em frente. 
Boa leitura e bons estudos!
71 
1. A identidade visual sintetiza todos os elementos que diferenciam essa empresa do 
resto, fazendo com que ela se torne tão importante e competitiva. Quando pensa-
mos em uma boa marca, devemos pensar que ela é muito mais que um desenho 
bonito para a empresa. Com base nisso, identifique os elementos importantes da 
identidade visual
I. Elementos primários, elementos secundários e acessórios.
II. Cores, alfabeto e símbolo.
III. Marca, logotipo, mascote e grafismo.
IV. Elementos primários, escoteiros e acessórios.
V. Adereços, elementos secundários e acessórios.
 
Assinale a opção com a sequência CORRETA:
a) Somente as questões I, II e III estão corretas.
b) Somente as questões I e IV estão corretas.
c) Somente a questão I está correta.
d) Somente as questões I, II e IV estão corretas.
e) Todas estão corretas.
2. Segundo Daros (2009), a marca é a expressão do individualismo social, mas que às 
vezes possibilita fazer parte de um grupo e ao mesmo tempo se destacar dentro dele, 
seja de uma pessoa, um produto, uma empresa, evento ou entidade. Com base nisso, 
identifique quais as funções que as marcas exercem para os consumidores:
 
1. Referência.
2. Praticidade.
3. Garantia.
4. Otimização.
5. Personalização.
6. Permanência.
7. Hedonista.
8. Ética.
 
72 
( ) Segurança de encontrar uma qualidade estável em todos os lugares e a todo 
instante.
( ) Segurança de comprar o melhor produto de sua categoria, com o melhor 
desempenho para um uso específico.
( ) Sentir-se reconfortado com sua autoimagem ou com imagem que é passada 
aos outros.
( ) Satisfação nascida da familiaridade e da intimidade das ligações com uma 
marca que foi consumida durante anos e que ainda dura.
( ) Satisfação ligada à estética da marca, seu design e suas comunicações.
satisfação ligada ao comportamento responsável da marca nas suas relações 
com a sociedade (ecologia, emprego, cidadania e publicidade não chocante).
( ) Ver claramente, situar-se em relação à produção setorial, identificar rapida-
mente os produtos procurados.
( ) Permitir ganho de tempo e de energia na recompra de produtos idêntico pela 
fidelidade.
 
Assinale a alternativa que contém a ordem correta da relação feita:
a) 1, 2, 3, 4, 5, 6, 7 e 8.
b) 8, 2, 5, 4, 3, 6, 7 e 2.
c) 4, 2, 3, 1, 5, 6, 7 e 8.
d) 8, 2, 3, 4, 5, 6, 7 e 8.
e) 8, 3, 4, 5, 6, 7, 1 e 2.
 
3. ________________________ é o conjunto de ações ligadas à administração 
das ________________. São ações que, tomadas com conhecimento e competên-
cia, levam as _______ além da sua natureza econômica, passando a fazer parte da 
___________ e influência a vida das pessoas.
Assinale a alternativa que contém as expressões que completam, respectivamente, 
as lacunas acima:
73 
a) Brandbook, marcas, marcas e cultura.
b) Branding, marcas, marcas e vida.
c) Branding, identidade visual, logo e cultura.
d) Brandbook, logo, marcas e cultura.
e) Branding, marcas, marcas e cultura.
 
4. O brandbook trata-se de uma evolução na forma de apresentar o desenvolvimen-
to de uma identidade visual da marca. A partir dessa informação, avalie as afirma-
ções a seguir:
I. Ele é considerado uma evolução do manual de aplicação da marca porque 
além das formas de uso, retrata os valores e conceitos que o logotipo, as co-
res, as fotos e as disposições procuram transmitir na comunicação da marca.
II. Para entender o conceito de brandbook é preciso primeiramente entender o 
que é o manual de uso da marca, já que uma coisa é intrínseca a outra.
III. Um brandbook é uma maneira de visualizar a personalidade e a história de 
vida de um produto, empresa ou organização.
IV. Um brandbook tem mais a ver com linguagem, atitudes e ideias do que com 
produtos.
V. Um brandbook é uma maneira de visualizar a vida das pessoas da empresa, 
seu dia a dia, suas funções e suas personalidades.
 
Assinale a alternativa correta: 
a) Somente as questões I, II e III estão corretas.
b) Somente as questões I e IV estão corretas.
c) Somente a questão I está correta.
d) Somente as questões I, II, III e IV estão corretas.
e) Todas estão corretas. 
5. A marca é a cara de uma empresa e é ela que conecta o consumidor ao produ-
to. Ela precisa mostrar ao consumidor, que é capaz de atender as necessidades e 
garantir a sua satisfação. Com isso existem alguns fatores que, para Keller (2006), 
representam desafios para os gestores de marca. Com base nisso, pontue e explique 
quais são as óticas que representam os desafios que os gestores devem analisar?
74 
A PROPOSTA DA MARCA “O FAMOSO BRIGADEIRO”
Para que fosse possível criar o brandbook, foi preciso fazer uma análise da empresa e da 
marca para entender qual era exatamente a imagem que esta pretendia repassar aos 
seus consumidores. Em conversas com os proprietários da marca foi possível chegar a 
uma frase que definia o seu conceito, a sua essência: 
“Leve uma vida mais leve, mais doce, mais alegre e surpreendente a cada dia.”
Para definir a frase, que é a proposta da marca “O Famoso Brigadeiro” e torná-la de fácil 
entendimento, foi criado um texto de apoio: 
“O que ‘O Famoso Brigadeiro’ tem de diferente? Tudo! Nós queremos que todos os clien-
tes sejam nossos fãs. Damos atenção a tudo, desde o atendimento atencioso a cada 
cliente, até a entrega com o frescor incomparável estamos atentos a cada detalhe, por 
menor que seja. O nosso espetáculoé alcançar todos os níveis de satisfação do cliente, a 
partir do momento em que ele faz um pedido até a hora que irá degustar um delicioso 
doce, de sabor único e incomparável, afinal, quem faz dele especial e famoso são os 
nossos clientes, então nada mais justo que entregar-lhes um show”. 
Por que fazer o redesign da marca e identidade visual do “O Famoso Brigadeiro”
A identidade visual gera atributos tangíveis e intangíveis que, se gerenciados de for-
ma adequada, criam influência e geram valor à marca. Pela avaliação de mercado da 
marca Coca-Cola é possível comprovar esses valores atribuídos a ela: somente a marca 
“Coca-Cola” é avaliada em US$ 164 bilhões sendo que segundo dados da empresa de 
consultoria Brand Finance apenas 4% desse valor é considerado tangível, ou seja, US$ 6 
bilhões, enquanto os outros 96%, US$ 158 bilhões, estão relacionados à valores intangí-
veis, emocionais. É claro que a identidade também depende de um sistema organizacio-
nal integrado com o branding, que prometa e entregue soluções diferenciadas e dese-
jadas pelas pessoas. Porém, a marca não deixa de ser um fator de tamanha importância 
para empresa, pois será o seu “rosto”, a representação de sua personalidade.
No caso da marca “O Famoso Brigadeiro”, o redesign foi necessário, pois como o logotipo 
que vinha sendo utilizado surgiu sem grandes pretensões, não teve a devida atenção, 
e acabou perdendo a ligação com o resto dos materiais, impossibilitando a criação de 
uma identidade adequada diante do mercado e da concorrência, não conseguindo re-
presentar a empresa após o seu crescimento. Os donos da marca sentiram a necessidade 
dessa mudança quando notaram o que aconteceu algumas repetidas vezes em sua rede 
social Facebook: as pessoas não reconheciam a página como de uma marca que vendia 
brigadeiros, mas sim como uma comunidade de “amantes do doce” como A proprietária 
citou. A percepção por parte deles foi repassada para que fosse possível buscar uma 
solução para esse problema, mas com o surgimento dessa dificuldade, visualizou-se a 
falta de integração nos materiais relacionados à marca, que dificultavam a identificação 
e reconhecimento por parte dos clientes. É preciso criar valores emocionais por meio 
dos quais os clientes não simplesmente amem o doce, mas sim, a marca.
75 
Onde a identidade será aplicada
A principal ideia dos donos da loja é expandi-la para além de um ateliê, a pretensão é 
abrir uma “brigaderia” em um ambiente onde fiquem algumas mesas para os clientes 
consumirem, um balcão e logo atrás (possivelmente dividida por um vidro) a cozinha, 
para que os clientes vejam os brigadeiros sendo feitos, pois assim é possível focar no 
maior diferencial da marca, que é o “frescor”, a entrega ágil, logo após a concepção do 
produto, ao contrário das “brigaderias” já existentes que deixam seus produtos expostos 
durante o dia todo. Então, a identidade seria aplicada no ponto de venda, de forma que 
o cliente já tenha alguma experiência sensorial ao entrar na loja.
Outros materiais também levariam a identidade e a marca, tais como: papelaria em geral 
(cartões de visitas, envelopes, bloco de notas, papel timbrado, caneta, adesivos), outros 
como: uniformes, guardanapos, louças, adesivo de mesas, fachada, embalagens, sacolas 
etc.
Quando deve ser modificada
Não tem exatamente como estimar um prazo para que sejam feitas alterações ou rede-
signs tanto na identidade quanto na marca. O ideal planejado nesse caso foi criar uma 
marca e uma identidade que não levem em conta princípios de moda que com o passar 
do tempo se tornem antiquados. A identidade deve ser forte e se manter na mente dos 
consumidores. Ela não deve ser apenas um sinal (elemento designativo sem carga emo-
cional), mas sim um símbolo, que é uma representação acrescida de emoção, pois as 
marcas vencedoras transformam sua representação (sinal) em um símbolo.
Como o trabalho será realizado
A princípio a proposta é de redesign da marca “O Famoso Brigadeiro”. A marca já existe e 
é conhecida pelos clientes, porém durante a sua existência foram encontradas diversas 
dificuldades em relação ao reconhecimento da mesma por parte do público e, além dis-
so, a falta de identidade entre os materiais da empresa também tem prejudicado suas 
vendas. A dona da empresa afirmou que a identidade que tem não representa a essên-
cia da marca que desejam transmitir. A ideia é passar algo simples, que traga o conceito 
principal da nova loja que pretendem abrir: o handmade. Eles querem transmitir a es-
sência da marca que é também o seu diferencial, ou seja, o frescor dos brigadeiros feitos 
na hora. A pesquisa foi feita nesse sentido e foram encontradas algumas referências até 
mesmo de marcas voltadas para outros tipos de produtos, porém que traziam o concei-
to do handmade, isto é, de algo feito a mão, que não é em grande escala.
A nova marca do “O Famoso Brigadeiro” será feita sobre o conceito de algo manual, arte-
sanal, que preza muito mais pela qualidade do que pela quantidade, para que por meio 
dela seja possível transmitir a essência da empresa e seus diferenciais, para que ela se 
destaque diante da concorrência e para que seja reconhecida pelo público e principal-
mente lembrada por aquilo que deseja transmitir.
 Fonte: adaptado de Mazzarolo (2013, on-line)4.
MATERIAL COMPLEMENTAR
Identidade e Cultura: Design Gráfi co
Autor: André Villas-Boas
Editora: 2AB Editora
Ano: 2009
Sinopse: uma das obras mais citadas de André Villas-Boas, ele mesmo uma das principais referências 
brasileiras do pensamento crítico sobre design, identidade e cultura tornou-se fonte obrigatória 
para as investigações sobre a localização do design grá� co na dinâmica da cultura, especialmente 
nos países periféricos. Alteridade, hibridação e dessemantização, culturas de classe e subjetivação, 
efemeridade, autonomia projetual, interdisciplinaridade, dependência pós-colonial, relações de poder 
na academia, subculturas e cânones são alguns dos temas explorados por Identidade e cultura. Sua 
releitura da clássica noção de identidade nacional revitalizou a questão, trazendo-a de volta ao debate 
sob novos parâmetros.
A ideia sendo colocada em termos no brandbook, é possível visualizar como se dá o trabalho da 
criação da marca de uma empresa, criando uma real identidade que se unifi ca e se complementa 
em todos os materiais relacionados à marca, como é possível ver em algumas páginas do 
brandbook, identidade e produtos desenvolvidos para a marca do Grupo Positivo. Acesse o link a 
seguir e visualize o brandbook do Grupo Positivo. 
Disponível em: <http://positivo.com.br/uploads/POSITIVO_Brandbook_shortvs.pdf>.
Visualize mais um trabalho de brandbook para a marca São Paulo Turismo. Para visualizar o 
brandbook acesso o link a seguir: 
Disponível em: <http://spturis.com/marcasp/MarcaSP.pdf>.
Outro trabalho interessante de brandbook é o da marca do Carrefour. Acesse o link a seguir para 
visualizar o brandbook.
Disponível em: <http://logobr.org/branding/carrefour-manual-e-aplicacoes/>.
Brand Book: o livro que guarda a essência da marca - as marcas vêm ganhando reconhecimento 
por parte dos empresários como o principal ativo que deve ser trabalhado dentro da gestão 
empresarial. É o que podemos chamar de “a era das marcas”. Neste site é possível acessar vários 
links com exemplos de brandbooks e montar uma estrutura para criar um modelo próprio. Assim, 
será possível criar uma referência que ajudará a manter a integridade das marcas desde a essência 
e fortalecer a gestão de branding. Acesse o link a seguir e fi que por dentro de tudo sobre o 
brandbook.
Disponível em: <http://www.cafecomgalo.com.br/
brand-book-o-livro-que-guarda-a-essencia-da-marca/>.
REFERÊNCIAS
77
BRITO, B. Direção de Arte: Criação de Logomarcas e Identidade Visual. Associação 
de Ensino Superior do Piauí (AESPI). Departamento de Comunicação Social, 2011.
DAROS, C. A Importância da Identidade Visual como Estratégia de Comunicação 
para Micro e Pequenas Empresas: Sistema deIdentidade Visual. Curitiba, 2009. 
65p. Especialização (MBA em Gestão da Comunicação Empresarial) - Universidade 
Tuiuti do Paraná (UTP), Curitiba, 2009.
KAPFERER, J. N. As Marcas - Capital da Empresa: Criar e Desenvolver Marcas Fortes. 
Porto Alegre: Bookman, 2003.
KELLER, K. L. Gestão estratégica de marcas. São Paulo: Pearson Prentice Hall, 2006.
LIBERATO, M. V. O Design e a Publicidade em Sinergia com o Marketing Digital. 
Fulltype: Rio de Janeiro, 2013.
LUPTON, E. Intuição, Ação, Criação: Graphic Design Thinking. São Paulo: Editora G. 
Gili, 2013.
MAGALHÃES, T. A. Valor da Marca para o Consumidor: um Estudo Empírico no 
Setor Automotivo. Universidade FUMEC, Belo Horizonte, 2006.
MARTINS, J. R. Branding: um manual para você criar, gerenciar e avaliar marcas. São 
Paulo: Editora Global Brands, 3. ed., 2006.
REFERÊNCIAS ON-LINE
1 Em: <https://upload.wikimedia.org/wikipedia/commons/7/73/Brasil_Telecom.
png>. Acesso em: 5 out. 2016.
2 Em: <http://www.b9.com.br/20961/design/b9-pergunta-porque-a-nova-marca-
-de-o-boticario-e-assim/>. Acesso em: 05 out. 2016.
3 Em: <http://pt.calameo.com/read/000398226f400b3b21871>. Acesso em: 05 out. 
2016.
4 Em: <http://repositorio.roca.utfpr.edu.br/jspui/bitstream/1/1948/1/CT_CO-
DEG_2013_1_13.pdf>. Acesso em: 6 out. 2016.
GABARITO
1. a) Somente as questões I, II e III estão corretas.
2. e) 8, 3, 4, 5, 6, 7, 1 e 2.
3. e) Branding, marcas, marcas e cultura.
4. d) Somente as questões I, II, III e IV estão corretas. 
5. 
Ótica do cliente: ocorre um aumento do poder de compra e, consequente, amadu-
recimento da consciência de mercado. 
Ótica do mercado: ocorre uma constatação de uma concorrência mais sofisticada.
 Ótica da comunicação: em função da perda de eficácia da mídia tradicional, o sur-
gimento de novas mídias e consequentemente o aumento de gastos promocionais.
U
N
ID
A
D
E III
Professora Esp. Janaína Aparecida de Freitas
LAYOUT E COMPOSIÇÃO
Objetivos de Aprendizagem
 ■ Aprender sobre o layout e a composição de uma página Web.
 ■ Entender a definição de um bom Web design.
 ■ Aprender como é a anatomia de uma página da Web.
 ■ Entender a Teoria do Gris e como aplicá-la na Web design.
Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
 ■ Layout e Composição
 ■ Wireframe
 ■ Protótipo
 ■ Mock-Up
 ■ Storyboard
 ■ Responsive web design
 ■ Flat Design
 ■ Skeuomorphism
 ■ Definição do Bom Design
 ■ Anatomia de uma página da Web
 ■ Teoria do Grid
INTRODUÇÃO
Olá, aluno(a)! Esta unidade tem por finalidade mostrar como trabalhar com 
o layout e a composição para o desenvolvimento de uma página web. Vamos 
entender que, para iniciarmos o processo de desenvolvimento de um site ou de 
um aplicativo para a web, temos que conhecer algumas tarefas do processo de 
criação e seus elementos.
Vamos conhecer também algumas técnicas que são voltadas à criação da 
estrutura de uma página, como o layout visual, a criação de protótipos, de ras-
cunhos, de esboços como: Wireframe, Protótipo, Mock-up e Storyboard.
Estudaremos outras técnicas que são voltadas ao layout da página, como o 
Design Responsivo e vamos conhecer também algumas voltadas ao layout dos 
elementos da página, que são: Flat Design e o Skeuomorphism.
Ainda nesta unidade, vamos falar sobre o que define um bom design ou um 
design ruim. Como identificar estas diferenças? Por meio de pontos de vista, por 
exemplo, o estritamente prático, cujo foco é a funcionalidade, na qual as infor-
mações são apresentadas de maneira eficaz e eficiente; e o ponto de vista estético, 
que envolve apresentações, imagens, animações, gráficos e cores.
Muitos designers focam apenas na parte estética e acabam deixando o usu-
ário de lado e outros designs com lado mais prático, perdem-se no lado visual. 
Para ter sucesso e alcançar o público, o ideal é explorar os dois lados.
Vamos aprender que antes de começar a criar um site, é preciso planejar 
sua estrutura (página principal e páginas adjacentes), definindo de forma clara 
e coerente a sequência das informações que se deseja apresentar. Complementar 
a isso, vamos conhecer como é a anatomia de uma página, o seu esboço padrão 
e suas funções usadas no seu desenvolvimento. 
Preparado(a) para continuar? Então, vamos seguir em frente. 
Boa leitura e bons estudos!
Introdução
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
81
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E82
LAYOUT E COMPOSIÇÃO 
Caro(a) aluno(a), como iniciar um desenvolvimento para a Web? Dar o passo ini-
cial é considerado a parte mais assustadora do processo de design. Será? Vamos 
imaginar que você tenha que criar um website básico para a empresa do cartão 
de visitas a seguir:
Figura 1 - Exemplo básico de cartão de visita
Fonte: a autora.
Normalmente, um cartão de visita nos diz muito sobre uma empresa e sua identi-
dade visual. Mas este não é o caso, certo? Este cartão não traz nenhuma inspiração 
para iniciarmos o processo de design. Nesse caso, entre em contato com o cliente 
e procure pesquisar o que a empresa do cliente faz e o que ele espera sobre o pro-
jeto de design a ser desenvolvido para a empresa dele.
Segundo Beaird (2008, p. 04) “[...] qualquer um, independente do seu nível de 
talento artístico, poderá criar designs funcionais e atraentes – isso requer pequena 
experiência e conhecimento prático de alguns princípios básicos de layout”.
Mas por onde começar? Para iniciarmos o processo de desenvolvimento de 
um site ou de um aplicativo para a web, temos que conhecer algumas tarefas do 
processo de criação do comp que são: descoberta e execução.
Layout e Composição 
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
83
O que seria comp? Conforme Beaird (2008, p. 05), a palavra comp é:
a abreviatura para boneco completo e o termo deriva do mundo do 
design impresso. O termo indica a simulação completa de um layout 
impresso criada antes de o layout propriamente dito ter sido enviado 
para a impressão. Ao traduzir o termo para a linguagem do web design, 
o comp representa a imagem de um layout criada antes de desenvolver-
mos o protótipo do design em HTML.
DESCOBERTA
Esta tarefa envolve conhecer os clientes e descobrir o que fazem. Como apren-
demos na unidade I, temos vários conceitos e técnicas que podem ser adotadas 
para sabermos o que o cliente quer e como ele pensa. A descoberta não é uma 
ferramenta de design, mas ela faz parte do processo de criação, pois ajuda a reu-
nir as informações necessárias sobre o cliente e com isso chegarmos a um design 
adequado e eficaz.
A seguir algumas perguntas que podem ser feitas ao cliente, por exemplo, 
em uma primeira reunião:
 ■ O que faz a sua empresa?
 ■ A empresa já possui uma marca? Um logotipo?
 ■ Qual o seu objetivo em desenvolver um web site?
 ■ Que informações gostaria que fossem disponibilizadas no ambiente 
on-line?
 ■ Que tipo de consumidores é seu público-alvo? Eles compartilham algo 
em comum, como demografia, idade, sexo e localização física?
 ■ Quem são seus concorrentes?
 ■ Eles possuem websites?
Você pode usar a sua imaginação e criar outras perguntas para obter melhores 
informações sobre seus clientes. Para Beaird (2008), se você é um programa-
dor, evite o uso de jargões técnicos da área, se você é um designer, evite falar 
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E84
especificamente em design, pois podem não fazer sentido para o cliente e poderá 
prejudicar o trabalho inicial do processo de criação.
EXECUÇÃO
A tarefa de execução é o passo de reunir o que foi aprendido com o cliente 
e sobre ele, e começar a aplicá-lo no processo de criação de um design. Mas, 
neste momento, aindanão importa a linguagem a ser usada, o ponto essencial é 
que temos que usar o papel para projetar a interface. Você deve estar pensando 
“papel”? Sim. Para Beaird (2008, p. 04): 
[...] entenda o porquê: é muito fácil perder o foco no design quando se 
está pensando no layout em frente ao computador. Comece pelo papel, 
e você será capaz de ignorar as tais limitações técnicas de browsers e 
CSS1 para se concentrar no aspecto que deseja dar ao produto final.
Para o autor o processo de design é como:
aprender a criar um design é como aprender a programar. Alguns já 
têm jeito para a coisa, mas qualquer um pode aprender. Da mesma 
forma que há códigos bons e ruins, também há designs bons e ruins. 
O aprendizado de alguns dos princípios e convenções associados ao 
design o ajudará a compreender entre o bom e ruim, além de guiá-lo 
no estabelecimento do seu próprio processo de design (BEAIRD, 2008, 
p. 05).
Vimos duas tarefas que são utilizadas para iniciarmos o processo de desen-
volvimento de um site ou de um aplicativo para a web, e dentro de cada uma, 
podemos aplicar algumas técnicas que facilite o início do nosso processo de cria-
ção do layout web.
Mas, o que seria o Layout (ou leiaute)? Para Boniati e Silva (2013, p. 35) “[...] 
é a forma pela qual os itens estão dispostos/diagramados, em outras palavras, 
refere-se ao design gráfico e a aparência visual.” Na etapa de criação do layout, 
devem ser definidos os itens que irão compor a identidade visual do site, como 
1 Cascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de 
documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é 
a separação entre o formato e o conteúdo de um documento.
Layout e Composição 
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
85
o esquema de cores, a tipografia2, o estilo das imagens (fotos ou ilustrações, por 
exemplo) e a ergonomia3.
A seguir, vamos conhecer algumas técnicas que são voltadas à estrutura, ao 
layout visual, outras a criação de protótipos, de rascunhos, de esboços como: 
Wireframe, Protótipo, Mock-up e Storyboard e outras técnicas são voltadas ao 
layout da página, como o Design Responsivo. Temos também as técnicas volta-
das ao layout dos elementos da página, que são: Flat Design e o Skeuomorphism.
2 Tipografia: é a arte e o processo de criação na composição de um texto, física ou digitalmente. Seu 
objetivo é dar ordem estrutural e forma aos sinais gráficos utilizados. Vamos estudar um pouco mais sobre 
isso na unidade 4.
3 Ergonomia: consiste no entendimento das interações entre seres humanos e outros elementos de um 
sistema. A ergonomia é a qualidade da adaptação de um dispositivo a seu operador e à tarefa que ele 
realiza. No projeto de uma interface web, a ergonomia objetiva facilitar e otimizar o trabalho do usuário 
junto ao computador.
 
 
 
 
 
 
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E86
WIREFRAME
O Wireframe é um roteiro, um guia visual que fornece a estrutura, o template 
que será usado pelo designer para construir o layout (visual) do seu projeto. O 
objetivo do Wireframe é planejar como os requisitos funcionais coletados com 
o cliente, serão usados pelo desenvolvedor do projeto (FERNANDES, 2015). O 
Wireframe é um desenho, como um esqueleto, de como vai ser a arquitetura do 
final do projeto e seus objetos (interface, página da internet, modelo etc.). Ele 
pode ser organizado de forma simples, mostrando apenas o essencial, como 
uma espécie de rascunho, sem cores e sem imagens. O Wireframe não especifica 
design gráfico. Sua função é apresentar os elementos que vão compor a página. 
Mas, o que um Wireframe deve mostrar? Ele deve mostrar:
 ■ O quê? Os principais grupos de conteúdo que serão trabalhados.
 ■ Onde? A estrutura da informação a ser mostrada.
 ■ Como? Uma descrição e uma visualização básica da interface e intera-
ção do usuário.
Devemos sempre pensar que um Wireframe eficiente deve comunicar o 
design de uma maneira clara e definir o caminho a ser seguido por todos os 
envolvidos no projeto. Pois, caso os desenvolvedores ou web designers pergun-
tarem como algo deve ser feito, a resposta pode ser dada com a criação rápida 
e clara de um Wireframe.
Figura 2 - Exemplo de website wireframe
Protótipo
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
87
PROTÓTIPO
Caro(a) aluno(a), você já deve ter ouvido falar em protótipo. No caso do desig-
ner, um protótipo é uma representação de média ou alta fidelidade do projeto 
final a ser desenvolvido e ele, normalmente, simula a interface de interação com 
o usuário final. Nem sempre ele precisa ser exatamente igual ao produto final, 
mas deve ser similar.
Mas, como ele é destinado ao usuário, ele deve possibilitar que o usuá-
rio experimente o conteúdo e as interações da interface, além de poder testar 
as principais interações de forma similar ao produto final. Ou seja, ele é a pri-
meira versão do produto, criado com a mesma linguagem de programação que 
será usada no produto final.
No entanto, fica sempre uma questão no ar: será que vale a pena construir 
os protótipos? Construir os protótipos pode ser caro e consumir tempo dos 
designers. Mas, podem ser construídos protótipos que possam ser utilizados no 
desenvolvimento do projeto, por exemplo, usando um pouco de HTML ou CSS 
e, se feito de forma correta e combinada com testes de usuário, a criação de pro-
tótipos em projetos de designer podem pagar os custos. 
MOCK-UP
Mock-up é uma representação estática de média a alta fidelidade de um design, 
ou seja, um rascunho bem próximo do design final do projeto. Um Mock-up 
simula a aparência, atmosfera e comportamento que um produto de design terá 
depois de sua produção. Você está achando que o conceito parece ser de um 
Wireframe? Muitas vezes um Mock-up é confundido com um Wireframe, mas 
são diferentes.
Um Mock-up deve representar visualmente a estrutura da informação, visu-
alizar o conteúdo e demonstrar as principais funcionalidades do projeto de uma 
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E88
forma estática, é uma simulação de como a interface deve funcionar.
Agora que falamos sobre Wireframe, protótipo e Mock-up – Qual a dife-
rença entre eles? Bem, como estamos falando de conceitos que podem ser usados 
durante o processo de desenvolvimento do design, uma das etapas principais 
de um projeto, seja ele um produto, ou um website ou aplicativo, é a criação das 
ideias e de protótipos, mostrando como será a solução para o usuário.
Essas três formas utilizadas no processo de desenvolvimento do design se 
comunicam de forma diferente e servem para propósitos diferentes dentro do 
projeto. Ficou confuso? Tenha calma! Você pode estar pensando: Mas todos eles 
são formas de representação do produto final. Sim, são formas de representa-
ção do produto final, mas para fins diferentes. Para entender as diferenças entre 
eles, vamos a um resumo que mostrará o uso e as características de cada um.
Tabela 1 - Diferença entre Wireframe, Protótipo e Mock-up
REPRESENTAÇÃO USO CARACTERÍSTICAS
Wireframe Documentação, comunicação 
rápida.
Rascunho, representa-
ção preta e branca da 
interface.
Protótipo Esqueleto reutilizável para o 
desenvolvimento da interface. 
Teste de usabilidade do usuário.
Interativo.
Mock-up Coletar feedback e conseguir 
vender a ideia do produto.
Visualização estática, 
simulação da aparência 
do produto.
Fonte: a autora. 
Storyboard
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
89
STORYBOARD
Storyboards são organizadoresgráfi cos tais como uma série de ilustrações ou 
imagens arranjadas em sequência com o propósito de pré-visualizar um fi lme, 
animação ou gráfi co animado, incluindo elementos interativos em websites e são 
muito usados em animações para o cinema (WIKIPÉDIA. [2016]).
Conforme Fernandes (2015, p. 15) “[...] o Storyboard é um esboço de como 
você deseja abordar um projeto particular. Criar um storyboard antes de começar 
o seu site facilita seu trabalho, pois te dá uma perspectiva global do projeto”. Assim, 
a partir de um esboço geral do site, um projeto complexo, poderá ser quebrado 
em partes menores que poderão ser resolvidas e implementadas individualmente.
Figura 3 - Esboço de site usando técnica de storyboard 
Fonte: Fernandes (2015, p. 15).
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E90
RESPONSIVE WEB DESIGN
Caro(a) aluno(a), chegamos a um ponto de bastante relevância no contexto 
tecnológico que vivemos hoje em dia, especialmente pela popularização dos 
dispositivos móveis: Responsive Web Design. Para entendermos esse conceito, 
vamos analisar o avanço das tecnologias e a evolução dos dispositivos, como tele-
fone, tablet, celular, console de jogos, televisão ou PC, todos com capacidade de 
se conectar na Internet. Mas vocês repararam que todos possuem dimensões de 
telas com diferentes resoluções? É aqui que entra a criação de designers adaptá-
veis, ou seja, Design Responsivo.
No Design Responsivo as páginas da web são adaptáveis, ou seja, o layout 
da página se adapta à resolução da tela do dispositivo do usuário. O conceito de 
Design Responsivo pode ser definido como uma forma de tornar os sites mais 
adaptáveis, podendo facilmente ser visualizados e utilizados em qualquer tipo 
de dispositivo. 
Quando bem projetado, o design responsivo traz benefícios que são inegáveis, 
pois permitem que os usuários visualizem os conteúdo em qualquer dispositivo, 
em qualquer contexto, da melhor forma possível. As empresas têm um benefício 
que seria ter um único site, com menor esforço de manutenção e possibilidade 
de produzir conteúdo pensado desde o início para ser consumido em diferen-
tes situações e para qualquer dispositivo. 
Vocês já tinham percebido que algumas páginas são adaptáveis à tela do 
dispositivo? Aproveitem e façam o teste abrindo a mesma página no PC, no 
notebook e no celular. 
Flat Design
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
91
FLAT DESIGN
No tópico anterior, falamos sobre Design Responsivo, no qual as páginas da web 
são adaptáveis à resolução da tela do dispositivo do usuário. Agora, vamos estu-
dar “Flat Design”. Essa tendência se caracteriza pela simplificação dos elementos 
de interface, tendo o foco na forma, funcionalidade e tecnologia. Também conhe-
cido como tendência ao uso minimalista de elementos simples no layout com 
tipografia e cores planas.
Liberato (2013, p. 33) define Flat Design como:
Flat Design, o design plano. Essa tendência do web design é a pura 
simplicidade dos elementos, da clareza do layout. Se distingue por suas 
formas cleans e planas. O conceito funciona sem variações na estrutu-
ra do layout, como chanfros, relevo, gradientes ou outras ferramentas 
que adicionam profundidade. Cada elemento ou caixa é nítido. Nada 
realista é adicionado. 
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E92
SKEUOMORPHISM
No Skeuomorphism, os objetos buscam relação com o ambiente real, suas fun-
cionalidades e seus detalhes estéticos, para assim se assimilar com o ambiente.
Como diria Liberato (2013, p. 35) sobre Skeuomorphism:
esta palavra complicada trata de algo que você encontra diariamente. 
Skeuomorphism é um estilo de design onde um objeto virtual mantém 
a aparência e a estrutura de um elemento real, apenas por questão de 
familiaridade. 
Segundo Sá (2014, p. 58) “[...] a palavra Skeumorfismo foi criada a partir de ele-
mentos do vernáculo grego, sendo que o termo skeuos significa “recipiente” ou 
“ferramenta” e o termo morphe significa forma”. Mas, o autor ainda diz que o 
estilo Skeumorfismo teve sua época e o estilo Flat Design (Design Plano) conso-
lidou sua presença nas interfaces gráfico-digitais durante o biênio 2013 e 2014, 
coincidindo com o período de popularização dos dispositivos móveis, como 
smartphones e tablets entre outros.
-Então, fica a indagação: Qual estilo você prefere? O Skeumorfismo ou Flat 
Design?
Figura 4 - Representação gráfica de uma lixeira no estilo skeumorfismo
Fonte: Sá (2014, p. 60).
Skeuomorphism
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
93
Figura 5 - Uso do estilo Flat Design em interfaces digitais 
Fonte: Sá (2014, p. 60).
 
 (A) Estilo Skeumorfismo. (B) Estilo Flat Design.
 
Figura 6 - Evolução da Marca Gráfica Windows 
Fonte: Sá (2014, p. 60).
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E94
DEFINIÇÃO DO BOM DESIGN
Caro(a) aluno(a), você já parou para pensar qual seria a definição de um bom 
design? Conforme Beaird (2008), temos dois pontos de vista que definem se um 
design de web é “bom” ou “ruim”. Os dois pontos de vista são: o estritamente 
prático cujo foco é a funcionalidade na qual as informações são apresentadas 
de maneira eficaz e eficiente; e o ponto de vista estético que envolve apresenta-
ções, imagens, animações, gráficos e cores.
Muitos designers focam apenas na parte estética e acabam deixando o usuá-
rio de lado e outros designers com lado mais prático, perdem-se no lado visual. 
Para ter sucesso e alcançar o público, o ideal é explorar os dois lados.
Segundo Beaird (2008), o mais importante é ter em mente que design signi-
fica comunicação, sendo que os elementos e funcionalidades do design final de 
um web site deveriam atuar como uma unidade coesa, de modo que:
Os usuários se sintam satis-
feitos com o design, porém 
atentos ao conteúdo.
O design tem que se preocupar com o tempo 
perdido pelos usuários quando eles tentam 
localizar a página que contém a informação 
desejada, seja ela um tópico de conteúdo, um 
link para outra página ou um campo de um 
formulário. O design não pode ser um estorvo, 
pelo contrário, ele tem que ser um intermedia-
dor entre o usuário e a informação.
Os usuários possam 
percorrê-lo facilmente via 
navegação intuitiva.
O bloco de navegação principal deve ser clara-
mente visível na página, com cada um dos links 
acompanhado de um título. Devemos facilitar 
a localização dos itens separando visualmente 
os conteúdos, assim, permitimos que o usuário 
mantenha o foco na informação.
Definição do Bom Design
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
95
Os usuários reconheçam 
cada página como perten-
cente ao site.
Mesmo que haja diferenças dramáticas entre 
layout da página inicial e o restante do site, é 
imprescindível a coesão entre tema ou estilo 
ao longo de todas as páginas, de modo que o 
design não perca seu sentido.
Figura 7 - Elementos e funcionalidades do design final de um web site 
Fonte: Beaird (2008, p. 21).
Para Boniati e Silva (2013), precisamos observar algumas propriedades ou qua-
lidades que potencializam a experiência positiva com o site que são: 
 ■ Usabilidade: atributo de qualidade relacionado à facilidade de uso de 
algo. Refere-se à rapidez com que os usuários podem apreender e utilizar 
algo e o quanto lhes agradam utilizá-la. Se um recurso não pode ser uti-
lizado ou não é utilizado por seus usuários, então, ele não precisa existir.
 ■ Navegabilidade: propriedade da organização das informações que nos 
remete à capacidade de navegação, ou seja,nos permite percorrer intuitiva-
mente os caminhos virtuais que nos são propostos de forma que saibamos 
onde estamos, de onde viemos e quais são nossas possibilidades futuras.
 ■ Legibilidade: uma qualidade que determina a facilidade de leitura de 
alguma coisa; mede o quão legível esta se apresenta ao leitor.
 ■ Acessibilidade: no contexto da internet, é a propriedade que um site tem 
para permitir que portadores de necessidades especiais se utilizem dos 
recursos que oferece. Dependendo como os elementos gráficos são utili-
zados no site, eles inviabilizam qualquer tentativa de um deficiente visual, 
por exemplo, conseguir acessar as informações disponibilizadas pelo site.
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E96
ANATOMIA DE UMA PÁGINA DA WEB
Caro(a) aluno(a), um dos pontos difíceis ao iniciar a criação do website, é pen-
sar no seu formato, como vai ser a anatomia do site. Segundo Ambrose e Harris 
(2012), formato é a forma e o tamanho do produto final, seja ele um livro, uma 
embalagem ou um site. A seleção do formato é uma combinação de visão do 
design e de considerações práticas. As considerações são: público-alvo, natureza 
da informação, onde o design será visto ou utilizado.
Para Boniati e Silva (2013, p. 31): 
[...] design e projeto são termos intimamente ligados. Isto evidencia a 
necessidade de nos planejarmos antes de qualquer ação. Antes de co-
meçar a criar um site, é preciso planejar sua estrutura (página principal 
e páginas adjacentes), definindo de forma clara e coerente a sequência 
das informações que se deseja apresentar [...].
Mas por onde começar? A maioria das páginas da web tem uma anatomia de 
partes que têm funções específicas, um esboço padrão. Esse esboço padrão não 
é obrigatório, mas ajuda no trabalho de criação de um protótipo ou Wireframe 
para um posterior layout, pois este padrão nos orienta em saber distribuí-las e 
remodelá-las de maneira criativa.
Sobre o espaço web, Boniati e Silva (2013, p. 36) descrevem que:
a web é um espaço bastante democrático e as técnicas discutidas para 
estruturação do conteúdo não são, necessariamente, utilizadas de for-
ma rígida e inflexível. Pelo contrário, o que se observa na prática são 
estruturas mistas, ou seja, organização dos vínculos entre as páginas de 
forma lógica dando ao usuário a liberdade de navegar e de se aprofun-
dar de acordo com sua necessidade, permitindo, inclusive, começar do 
princípio a qualquer momento.
Agora, vamos conhecer o esboço padrão ou de roteiro com bastante aceitação e 
altamente difundido entre grandes e pequenos sites. Tal modelo é composto por 
alguns elementos de conteúdo que podem ser visualizados na figura a seguir, na 
forma de um esquema numerado.
Anatomia de Uma Página da Web
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
97
Figura 8 - Anatomia de uma página web
Fonte: Boniati e Silva (2013, p. 37).
1. Logotipo: o logotipo ou a marca do site, normalmente, ocupa o espaço mais 
nobre, no qual, comumente, a visualização ocorre primeiro (canto superior es-
querdo).
2. Banner padrão, área de busca, anúncios externos: espaço nobre que, fre-
quentemente, é explorado com um banner. Nessa área, recomenda-se a utili-
zação de uma ferramenta de busca ou de um mapa do site (para simplifi car e 
agilizar a localização de informações).
3. Menu administrativo: o menu administrativo é uma opção importante, no en-
tanto, deve ser discreto. É nele que colocamos informações sobre a empresa, 
identifi cação (login) ou cadastro de usuários, contato, ajuda etc.
4. Menu de navegação: categorização das informações disponibilizadas pelo site. 
É comumente encontrado de forma horizontal e é importante que as categorias 
ou opções do menu sejam curtas e claras, indicando ao usuário, rapidamente, a 
opção que ele deve escolher (excessivas opções também não são recomenda-
das).
5. Área de destaque: nesse espaço, recomenda-se focar em algo de maior impor-
tância dentro do contexto do site. Um site de comércio eletrônico poderia divul-
gar uma promoção; um site de notícias poderia noticiar o fato mais marcante 
do dia; um site pessoal poderia remeter para a atividade mais recente ou última 
postagem.
6. Conteúdo: área de conteúdo é o lugar onde são exibidas as informações na me-
dida em que navegamos pelo site.
7. Anúncios: a barra lateral, da direita, pode ser utilizada para divulgação de ativi-
dades afi ns ao site, como anúncios ou links para outras páginas.
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E98
8. Rodapé: utilizado para informações sobre o portal. Não é, necessariamente, usa-
do por visitantes comuns, mas sim por aqueles com algum interesse específico 
(como anunciar, trabalhe conosco, política de privacidade, termos de uso etc.).
Figura 9 - Exemplo dos elementos de uma página web
Fonte: Boniati e Silva (2013, p. 38).
 Os elementos que acabamos de discutir são aqueles considerados padrões em 
uma página da web e são comumente encontrados. Mas de acordo com o pro-
pósito da página, ela poderá não utilizar todos os elementos ou ainda adaptar 
a posição dos mesmos, segundo o que seu projeto de design considerou mais 
importante (BONIATI; SILVA, 2013). 
 
Teoria do Grid
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
99
TEORIA DO GRID
 Caro(a) aluno(a), o grid é uma ferramenta essencial para o design gráfico, pois 
é uma organização visual dos elementos dentro de um espaço onde utilizamos 
linhas horizontais e verticais para alinhamento. Ao usar o grid, temos uma estru-
tura dos elementos de uma página mais concisa, melhor organizada e alinhada.
Segundo Beaird (2008) utilizar um grid não significa apenas alinhar os ele-
mentos ou torná-los quadrados: é também uma questão de proporção. É assim 
que a “teoria” se transforma na Teoria do Grid. Esse conceito de divisão dos 
elementos de uma composição surgiu com as ideias matemáticas lançadas por 
Pitágoras e seus seguidores, os quais definiram números como proporções e não 
unidades individuais (BEAIRD, 2008).
Você deve estar se perguntando: o que a proporção matemática tem a ver 
com design gráfico? Para Beaird (2008) tem tudo a ver, ele diz que as composições 
divididas por linhas proporcionais são consideradas esteticamente agradáveis. 
Conforme o autor, em vez de se apoiar em ideias artísticas, a divina proporção 
nos oferece diretrizes lógicas para a produção de layouts atraentes.
 A REGRA DOS TERÇOS
A Regra dos Terços é considerada a versão simplificada da proporção dourada4 
4 A proporção dourada ou proporção áurea é a medida perfeita entre elementos. Estudos matemáticos e 
geométricos exaustivos realizados pelos nossos antepassados foram testados durante centenas de anos, 
aplicados na arquitetura, pintura, escultura e também encontrados em vários elementos da natureza.
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E100
matemática. Uma linha dividida em dois pela proporção resulta em duas seções, 
sendo uma delas o dobro do tamanho da outra. Segundo Beaird (2008, p. 11) “[...] 
uma maneira simples de se aplicar a divina proporção sem o uso da calculadora 
é dividir a composição em três partes”. O designer amador em seu trabalho de 
produção de layout tende a alinhar ao centro tudo o que se encontra na página. 
O uso da Teoria de Grid impede que isso seja feito.
Figura 10 - Exemplo de Grid. Pontos de Interesse na imagem. Regra da Proporção dourada + Regra de Três 
Terços
Fonte: a autora.
Figura 11 - Exemplo de Fotos em grades criadas a partir da Regra dos Terços.
Fonte: Fotografi a Fácil ([2016], on-line)1.
Teoria do Grid
Re
pr
od
uç
ão
 p
ro
ib
id
a.A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
101
Observe que na imagem acima, temos duas fotos iguais, as quais uma delas está 
com linhas como se fossem um “jogo da velha”. Essa imagem foi usada como 
exemplo, para mostrar que ela é um pouco diferente, ela fugiu a regra dos três 
terços, mas não é considerada errada. O que chama atenção nesta imagem, é que 
ela manteve os elementos chaves da Regra dos Terços dando destaque aos ele-
mentos principais da foto. 
As fotografias horizontais, normalmente de paisagens, devem ficar próximas 
(e alinhadas) à linha horizontal do jogo da velha. Já em retratos, sempre posi-
cionar o rosto da pessoa próximo à uma intersecção (de preferência no terço 
superior), focando sempre nos olhos, para haver proporção. 
Resumindo, a Regra dos Terços é basicamente dividir suas fotos em 9 qua-
drados idênticos e dedicar dois terços dos quadrados (ou seja, 6 quadrados) a 
parte mais interessante da sua paisagem. Ao aplicar esta regra, com certeza você 
obterá melhores fotos. Hoje em dia muitas câmeras já disponibilizam este recurso 
na tela, dividindo-a em quadrados.
Você sabia que há uma razão para esta nossa tendência de centralizar tudo? 
É o nosso desejo pelo equilíbrio. Conforme Beaird (2008, p. 12): “Equilíbrio, 
figurativamente falando, o conceito de equilíbrio visual é semelhante ao equilí-
brio físico, que é ilustrado pela gangorra. Assim como os objetos físicos possuem 
peso, os elementos visuais do layout também”.
Há duas formas principais de equilíbrio visual:
 ■ Equilíbrio Simétrico: ou equilíbrio formal, acontece quando os elemen-
tos de uma composição são os mesmos em ambos os lados de uma linha.
 ■ Equilíbrio Assimétrico: ou equilíbrio informal, ele é mais abstrato e 
visualmente mais interessante. O balanço assimétrico envolve objetos de 
diferentes formas, tamanhos, tonalidades ou posicionamento. 
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E102
Figura 12 - Equilíbrio Assimétrico
Figura13 - Equilíbrio Simétrico
Após o equilíbrio, temos a Unidade, que conforme Beaird (2008) na teoria do 
design é a forma com que os diferentes elementos de uma composição intera-
gem, ou seja, um layout unificado funciona como um todo único, e não como 
peças individuais.
Unidade é uma das muitas razões pelas quais web designers sempre menos-
prezam as estruturas em HyperText Markup Language (HTML). É importante 
que haja unidade não apenas em cada elemento da página web, mas por meio 
da página toda - a página propriamente dita deve funcionar como uma unidade 
(BEAIRD 2008, p. 55).
Temos algumas abordagens para estabelecer a unidade em um layout que são:
Teoria do Grid
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
103
PROXIMIDADE
Na proximidade, os itens relacionados entre si devem ser agrupados e aproxima-
dos uns dos outros para que sejam vistos como um conjunto coeso e não como 
um emaranhado de partes sem ligação. Para Beaird (2008), o conceito de proxi-
midade é aplicado à web quando começamos a definir margens e preenchimentos 
para os elementos e quando os elementos similares são agrupados em uma uni-
dade a página mais organizada.
REPETIÇÃO
O princípio da repetição afirma que 
algum item do design pode se repetir na 
página inteira. A repetição pode ser con-
siderada como consistência e o seu uso 
no design unifica e fortalece a página. É 
um recurso muito útil em peças de uma 
só página e essencial em documentos 
de muitas páginas. A repetição tam-
bém serve para nos ajudar a equilibrar o 
“peso” da peça e fazer um preenchimento 
para contrastar com espaços vazios. Esse 
efeito é conseguido, repetindo-se partes 
do elemento principal da peça (não o 
elemento completo), a fim de equilibrar 
e tornar a peça mais harmoniosa, por exemplo: repetir algum item do símbolo 
da empresa, variando seu tamanho e posição.
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E104
CONTRASTE
No contraste se dois elementos não forem exatamente os mesmos, diferencie-os 
completamente. Para Beaird (2008) “[...] o contraste é defi nido como a justapo-
sição de elementos gráfi cos dessemelhantes, sendo ele muito usado para criar 
ênfase em um layout”.
POSICIONAMENTO
O centro direto de uma composição é o ponto para onde o observador olha 
primeiro e é sempre a localização com maior ênfase. Quanto mais afastado do 
centro, menos chance de o elemento ser notado.
Figura 14 - Exemplo de posicionamento 
Fonte: Desing Blog ([2016], on-line)2.
CONTINUIDADE
Para Beaird (2008), a ideia por traz da continuidade é a dos olhos, movendo-se 
em determinada direção, a tendência é seguirem esse curso até que surja diante 
Teoria do Grid
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
105
deles uma fi gura predominante. Uma forma simples de ampliar esse conceito é 
utilizar a regra dos terços e dispor outros elementos da página pelas linhas de grid.
 
PROPORÇÃO
Um modo interessante de criar ênfase na composição é utilizar a proporção que 
é um princípio de design que lida com as diferenças na escala dos objetos. Se 
incluirmos um objeto cuja escala é maior ou menor do que o objeto em inclu-
ído, este parecerá maior ou menor do que realmente é (BEAIRD 2008).
Figura 15 - Exemplo de proporção 
Fonte: Design Blog ([2016], on-line)3.
O advento da web abriu espaço para uma nova forma de planejamento de 
transmissão de ideias/objetivos em materiais publicados em ambientes 
on-line: web design. Tais técnicas consistem da estruturação adequada de 
informações, utilizando recursos apropriados para veiculação em páginas 
web, de maneira que o usuário possa alcançar seu objetivo de forma direta 
e agradável. O design para web não é como o design de impressão. A web é 
um meio único que, por sua natureza, força os profissionais a desistir de con-
trolar coisas que eles, tradicionalmente, eram responsáveis por controlar [...]. 
Elementos como cores, fontes e disposição, podem ser determinados pelo 
usuário (ou por seu software navegador) e não há garantias de que todos 
irão visualizar uma página da mesma forma como foi projetada e desenvol-
vida. Projetar para o desconhecido consiste na principal atividade de um 
profissional que trabalha com web design. Como profissional, é importante 
que você tenha um bom entendimento sobre o ambiente web e consiga se 
planejar para o desconhecido.
Fonte: Boniati e Silva (2013, p. 29).
LAYOUT E COMPOSIÇÃO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IIIU N I D A D E106
Dependendo da mídia ou do alvo em que se deseja trabalhar, certas técni-
cas de design serão mais apropriadas do que outras.
(Bruno Batista Boniati e Teresinha Letícia da Silva)
Considerações Finais
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
107
CONSIDERAÇÕES FINAIS
Olá, aluno(a)! Encerramos mais uma unidade com a qual aprendemos como tra-
balhar com o layout e a composição para o desenvolvimento de uma página web. 
Entendemos que para iniciarmos o processo de desenvolvimento de um site ou 
de um aplicativo para a web, temos que conhecer algumas tarefas do processo 
de criação e seus elementos.
Conhecemos também algumas técnicas que são voltadas à criação da estru-
tura de uma página, como o layout visual, a criação de protótipos, de rascunhos, 
de esboços como: Wireframe, Protótipo, Mock-up e Storyboard.
Estudamos outras técnicas que são voltadas ao layout da página, como o 
Design Responsivo e conhecemos também algumas técnicas voltadas ao layout 
dos elementos da página que são: Flat Design e o Skeuomorphism.De forma complementar, vimos as diferenças por meio de pontos de vista, 
por exemplo, o estritamente prático e o ponto de vista estético.
Foi abordado que muitos designers focam apenas na parte estética e acabam 
deixando o usuário de lado e outros designers com lado mais prático, perdem-
-se no lado visual. Aprendemos que para ter sucesso e alcançar o público, o ideal 
é explorar os dois lados.
É importante você lembrar que antes de começar a criar um site é preciso 
planejar sua estrutura definindo de forma clara e coerente a sequência das infor-
mações que se deseja apresentar.
Espero que tenha gostado. Até a próxima unidade. 
Boa leitura e bons estudos!
108 
1. Entrar em contato com o cliente e procurar pesquisar o que sua empresa faz e o 
que ele espera sobre o projeto de design a ser desenvolvido para a empresa dele é 
uma das formas de iniciarmos o processo de desenvolvimento de um site ou de um 
aplicativo para a web, além de conhecer algumas tarefas do processo de criação. A 
partir dessa informação, avalie a opção correta:
A. A tarefa de execução é o passo de reunir o que foi aprendido com o cliente e 
sobre ele e começar a aplicá-lo no processo de criação de um design.
B. A descoberta é uma ferramenta de design e ela faz parte do processo de 
criação, pois ajuda a reunir as informações necessárias sobre o cliente e com 
isso chegarmos a um design adequado e eficaz.
C. Comece pelo papel e você será capaz de ignorar as tais limitações técnicas 
de browsers e CSS para se concentrar no aspecto que deseja dar ao produto 
no início do projeto.
D. Um programador deve evitar o uso de jargões técnicos da área, se você é um 
designer, fale especificamente em design, pois podem fazer sentido para o 
cliente e poderá prejudicar o trabalho inicial do processo de criação.
E. Não importa a linguagem a ser usada na descoberta, o ponto essencial é que 
temos que usar o papel para projetar o layout do projeto.
2. O ___________________ é um desenho, como um ______________, de como vai 
ser a arquitetura do final do projeto e seus objetos (interface, página da internet, 
modelo etc.). Ele pode ser organizado de forma simples, mostrando apenas o essen-
cial, como uma espécie de _______________, sem cores e sem imagens. Assinale a 
alternativa que completa as lacunas, respectivamente:
A. Mock-Up, esqueleto e rascunho.
B. Protótipo, rascunho e esqueleto.
C. Wireframe, esqueleto e rascunho.
D. Wireframe, prototipagem e rascunho.
E. Storyboard , esqueleto e rascunho.
109 
3. Temos algumas técnicas que são voltadas à estrutura, ao layout visual, outras à 
criação de protótipos, de rascunhos, de esboços como: Wireframe, Protótipo, Mo-
ck-up e Storyboard Storyboard e outras técnicas são voltadas ao layout da página, 
como o Design Responsivo. Identifique cada conceito fazendo a relação entre as 
colunas.
1. Wireframe.
2. Protótipo.
3. Mock-Up.
4. Storyboard.
5. Design Responsivo.
( ) É uma representação de média ou alta fidelidade do projeto final a ser desenvol-
vido e ele, normalmente, simula a interface de interação com o usuário final.
( ) É uma representação estática de média a alta fidelidade de um design, ou seja, 
um rascunho bem próximo do design final do projeto
( ) São organizadores gráficos tais como uma série de ilustrações ou imagens ar-
ranjadas em sequência com o propósito de pré-visualizar um filme, animação ou 
gráfico animado, incluindo elementos interativos em websites.
( ) As páginas da web são adaptáveis, ou seja, o layout da página se adapta à resolu-
ção da tela do dispositivo do usuário.
( ) É um roteiro, um guia visual que fornece a estrutura, o template que será usado 
pelo designer para construir o layout (visual) do seu projeto.
Assinale a alternativa que contém a ordem correta da relação:
a) 1, 3, 4, 5 e 2.
b) 3, 2, 4, 5 e 1.
c) 2, 3, 4, 5 e 1.
d) 2, 3, 1, 5 e 4.
e) 2, 1, 4, 5 e 3.
 
4. Existe uma razão para a nossa tendência de centralizar tudo. É o nosso desejo 
pelo equilíbrio. Conforme Beaird (2008, p. 12): “Equilíbrio, figurativamente falando, 
o conceito de equilíbrio visual é semelhante ao equilíbrio físico, que é ilustrado pela 
gangorra”. Há duas formas principais de equilíbrio visual, cite e explique cada uma.
110 
5. A maioria das páginas web tem uma anatomia de partes que tem funções es-
pecíficas, um esboço padrão. Esse esboço padrão não é obrigatório, mas ajuda no 
trabalho de criação de um protótipo ou Wireframe para um posterior layout, pois, 
este padrão nos orienta em saber distribuí-las e remodelá-las de maneira criativa. A 
respeito dos elementos considerados padrão para uma página web, leia as afirma-
ções a seguir:
I. Logotipo, Banner padrão, Menu administrativo e Menu de navegação.
II. Área de destaque, Conteúdo, Jornal e Rodapé.
III. Marcação, Banner padrão, Menu administrativo e Menu de navegação.
IV. Área de destaque, Conteúdo, Anúncios e Rodapé.
V. Área de Navegação, Mostruário, Anúncios e Rodapé.
Assinale a alternativa CORRETA:
a) Somente as questões I, II e III estão corretas.
b) Somente as questões I e IV estão corretas.
c) Somente a questão I está correta.
d) Somente as questões I, II e IV estão corretas.
e) Todas estão corretas. 
111 
CONSIDERAÇÕES SOBRE A VISUALIDADE E OS ESTILOS GRÁFICOS
Com relação à visualidade das interfaces gráficas, o desenvolvimento e a apresentação 
do novo sistema operacional Windows 8 alterou o tratamento visual da composição de 
toda a interface e fez com que o estilo Flat Design fosse apresentado de maneira mais 
objetiva. Há evidências de que também influenciou o redesenho dos elementos gráficos 
da interface digital do sistema operacional iOS 7 da Apple.
Atualmente, o estilo Flat Design caracteriza uma tendência na composição visual de di-
versos produtos ofertados. Para Horvat [...] o estilo Flat Design assumiu o status de “mo-
dernidade”.
Além disso, depois da mudança estética na interface da Apple com um estilo mais sim-
ples, o estilo Skeumorfismo pareceu se tornar obsoleto e outros Websites e aplicativos, 
rapidamente, descobriram que precisavam ser redesenhados.
A visualidade do estilo Flat Design expressa uma oposição ao estilo gráfico Skeumorfismo 
que predominou na área de Design de Interface em décadas recentemente anteriores. 
Há evidências que associam o estilo Flat Design a estilos desenvolvidos em momentos 
anteriores da história nos campos de Arte e do Design. Assim, são assinaladas referên-
cias não só das influências e do estilo da escola Bauhaus do início do século XX, como 
também associações com os pictogramas Isotype e com o Estilo Tipográfico Internacio-
nal dos anos 1950 e 1960.
Em texto disponível no Website oficial da empresa Microsoft, o porta-voz Steve Clayton 
[...] declara que o processo que resultou na visualidade Flat Design da interface do sis-
tema operacional Windows 8 teve fortes influências estilísticas características de outros 
momentos históricos, por exemplo: “o movimento Bauhaus, despojando-se das superfi-
cialidades decorativas e focando na funcionalidade” e o Estilo Suíço por sua “limpeza, le-
gibilidade e objetividade”. Também é evidenciado o uso das fontes sem serifas em todos 
os elementos compositores do sistema operacional da Microsoft.
Assim, [...], condena a não funcionalidade da prática de compor elementos icônicos imi-
tando-se os materiais do “mundo real”, como vidro ou metal e sugerindo variações de luz 
e sombra entre outros efeitos.
Observa-se, portanto, que houve uma redução na quantidade de informação aplicada 
na composição de elementos gráficos componentes das interfaces dos dois sistemas 
operacionais em estudo. Especialmente, a redução é notada nos ícones que identificam, 
simbolizam e atuam como hiperlinks para partes funcionais do sistema operacional.
Isso influenciou circunstancialmente nas cores e no tratamento visual dos fundos e de 
outros elementos gráficos da interface digital, o que para Radfahrer [...] citado anterior-
mente, incita o usuário a examinar todo conteúdo desta, poiscria um ambiente estimu-
lante por meio do uso de contrastes, cores, formas e áreas vazias que promovem uma 
estrutura em equilíbrio.
112 
Porém, apesar das semelhanças, há também evidentes diferenças com a visualidade da 
escola Bauhaus, dos pictogramas Isotype e do Design Suíço, entre outras referências da 
história cultural.
Por exemplo, o desenho mais uniforme e mais radical dos elementos gráficos da interfa-
ce digital do sistema Windows 8 da Microsoft indica ainda concessões à visualidade do 
estilo Skeumorfismo, ao simplificar figuras com efeito de perspectiva, sugerindo volume 
e espacialidade às imagens. Inclusive, isso ocorre na própria representação do símbolo 
da marca.
Porém, apesar de influências e associações anteriores, o estilo Flat Design também é de-
corrência das demandas tecnológicas e econômicas atuais. Vive-se em outro momento 
histórico e a cultura atual possui suas características e peculiaridades. [...].
Atualmente, os meios digitais e a internet nos possibilitam uma facilidade de acesso a 
uma quantidade de informação nunca antes vista pelo homem.
Dentro deste novo contexto, repensar em como se destacar em meio a uma infinidade 
de estímulos visuais gráficos tornou-se uma questão de sobrevivência para as marcas. 
Principalmente nos ambientes eletrônicos digitais onde a atenção do usuário é dispu-
tada o tempo todo.
Sendo assim, um bom design gráfico pode ser um diferencial competitivo. Na parte de 
conceituação deste trabalho foram apresentados os diferentes tipos de símbolos, a par-
tir do símbolo oficial da marca gráfica de produtos, serviços ou organização. Todavia, 
todos os elementos gráficos compositores de uma interface digital dos sistemas opera-
cionais apresentados, inclusive os fundos de tela ou backgrounds, são percebidos como 
símbolos de identificação da própria marca.
Um exemplo é a possibilidade de reconhecimento do sistema operacional por meio da 
observação do desenho típico de seus elementos gráficos. Pois, apenas pela observação 
dos ícones presentes na interface digital, é possível que o usuário/leitor reconheça o 
sistema operacional instalado no equipamento.
Também como visto neste estudo, Souza [...] e Preece [...] defendem que esta percepção 
se dá por meio de um conjunto de informações selecionadas e estruturadas em função 
de experiências anteriores, bem como o uso de ícones expressivos é uma das aborda-
gens do design de interfaces afetivas que tem como objetivo, provocar um estado emo-
cional positivo no usuário.
Para Wheller [...], “[...] o cérebro reconhece e memoriza primeiramente as formas. A cor 
vem em segundo lugar, e, pode incitar uma emoção. Em terceiro lugar, vem o conteúdo, 
pois o cérebro leva mais tempo para processar a linguagem” [...]. Uma interface gráfico-
-digital apresenta símbolos visuais figurativos ou abstratos de todos os tipos, incluindo, 
palavras, siglas, pictogramas, figuras ilustrativas, imagens fotográficas entre outros. De 
maneira semelhante, foi possível evidenciar, que as interfaces gráficas dos sistemas ope-
racionais em estudo, Windows 8 da Microsoft e iOS 7 da Apple, ainda utilizam diferentes 
113 
recursos, naturalistas, expressivos e simbólicos, promovendo efeitos luminosos e suge-
rindo profundidade, transparências, ritmos e outras impressões, para compor o discurso 
visual diversificado de suas interfaces gráfico-digitais.
Mesmo a visualidade de uma interface gráfica que segue radicalmente o estilo Flat De-
sign ainda é um campo de ampla diversidade, pois, reúne pictogramas, palavras, planos, 
imagens fotográficas fixas e em movimento e diferentes efeitos visuais.
Fonte: Sá (2014, p. 61-79).
MATERIAL COMPLEMENTAR
Web Design Responsivo
Autor: Maurício Samy Silva
Editora: Create Space Pub
Ano: 2014
Sinopse: aprenda a criar sites que se adaptam automaticamente a qualquer dispositivo, desde 
desktops até telefones celulares. O objetivo do livro é fornecer informações detalhadas das técnicas 
do design responsivo, estudando seus princípios e detalhando os métodos e as tecnologias 
aplicáveis. Explicações teóricas em linguagem corrente e clara, dispensando, sempre que possível, 
o jargão técnico avançado, são acompanhadas de exemplos práticos detalhados passo a passo e 
complementados por arquivo HTML para consulta.
Os conceitos e o entendimento das técnicas de desenvolvimento de interfaces responsivas são uma 
poderosa ferramenta de apoio na criação de sites mais acessíveis, enriquecendo a experiência do 
usuário. Pro� ssionais da área de design, familiarizados com as técnicas aqui descritas, contarão com 
uma valiosa fonte de conhecimento e conceitos a empregar no planejamento das funcionalidades 
para incrementar suas criações, tornando-as universais.
O que é Responsive Web Design?
Artigo muito interessante sobre Responsive Web Design uma das soluções técnicas para 
esse problema: programar um site de forma que os elementos que o compõem se adaptem 
automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado.
Para a leitura integral acesse o link disponível em: <http://arquiteturadeinformacao.com/
mobile/o-que-e-responsive-web-design/>.
REFERÊNCIAS
115
AMBROSE, G.; HARRIS, P. Fundamentos de Design Criativo. Porto Alegre: Bookman, 
2012.
BEAIRD, J. Princípios do Web Design Maravilhoso. Rio de Janeiro: Editora Alta 
Books, 2008.
BONIATI, B. B.; SILVA, T. L. da. Fundamentos de Desenvolvimento Web. Frederico 
Westphalen: Universidade Federal de Santa Maria, Colégio Agrícola de Frederico 
Westphalen e Rede e-Tec Brasil, 2013.
FERNANDES, R. Design de Interfaces para Internet. São Paulo: NRSystem, 2015.
LIBERATO, M. V. O Design e a Publicidade em Sinergia com o Marketing Digital. 
Rio de Janeiro: Fulltype, 2013.
SÁ, T. H. M. O Estilo Gráfico Flat Design na Gestão da Interface Visual nos Dispo-
sitivos Móveis. Dissertação (mestrado) - Universidade Federal de Santa Catarina, 
Centro de Comunicação e Expressão. Programa de Pós- Graduação em Design e Ex-
pressão Gráfica. Florianópolis/SC, 2014.
REFERÊNCIAS ON-LINE
1 Em: <https://fotografiafacil.files.wordpress.com/2009/07/composicao-plaza-del-
-ayuntamiento.jpg?w=620>. Acesso em: 10 out. 2016.
2 Em: <http://design.blog.br/wp-content/uploads/2012/01/equilibrio.jpg>. Acesso 
em: 10 out. 2016.
3 Em: <http://design.blog.br/wp-content/uploads/2008/07/02.jpg>. Acesso em: 10 
out. 2016.
GABARITO
1. a)
2. c)
3. c) 2, 3, 4, 5 e 1
4. Equilíbrio Simétrico: ou equilíbrio formal, acontece quando os elementos de 
uma composição são os mesmos em ambos os lados de uma linha.
Equilíbrio Assimétrico: ou equilíbrio informal, ele é mais abstrato e visualmente 
mais interessante. O balanço assimétrico envolve objetos de diferentes formas, 
tamanhos, tonalidades ou posicionamento.
5. Somente as questões I e IV estão corretas.
U
N
ID
A
D
E IV
Professora Esp. Janaína Aparecida de Freitas
TRABALHANDO COM 
CORES, TIPOGRAFIA E 
IMAGENS
Objetivos de Aprendizagem
 ■ Entender a psicologia das cores no design gráfico e suas associações.
 ■ Conhecer os conceitos que envolvem a roda de cores.
 ■ Aprender sobre a Tipografia e seus tipos.
 ■ Entender como funciona a edição e o tratamento de imagens no 
design gráfico. 
Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
 ■ Psicologia da cor
 ■ Associações de cores
 ■ Temperatura da cor
 ■ Valor da cor
 ■ Sistemas de cores: CMYK, RGB, HSB e pantone
 ■ Roda de cores
 ■ Tipografia
 ■ Edição e tratamento de imagens
INTRODUÇÃO
Olá, aluno(a)! Em nossa quarta unidade, aprenderemos sobre a psicologia das 
cores. A cor é um fenômeno primordial, onipresente. Elas possuem um caráter 
simbólico e mágico. Então, eu te questiono: Qual a emoção que as cores pas-
sam a você? 
Imagine uma reação, por exemplo, tão simples como mudar a tonalidade 
exata ou saturação de uma cor. Isso pode evocar um sentimento completamente 
diferente. A escolha das cores é fundamental para o sucesso de um site. Ela pode 
enfatizar textos, imagens ecaracterizar especialmente os elementos da página. 
O sistema usado para a criação de cores baseia-se nas propriedades fundamen-
tais da luz que ocorrem na natureza. Essas cores podem ser criadas a partir do 
vermelho, do verde e do azul. No decorrer da unidade, discutiremos um pouco 
mais sobre os sistemas de cores.
Estudaremos também a importância da Tipografia, como ela é evidente e 
está em toda a parte, sendo considerada essencial para os designers gráficos. 
Falaremos sobre os elementos básicos dos tipos de letras, sua anatomia e seus esti-
los. E aprenderemos nesta unidade que as companheiras inseparáveis de qualquer 
página web são as imagens, pois elas dão vida ao seu site. Por isso, entraremos 
um pouco no conceito da semiótica, que é o estudo dos símbolos e os fenôme-
nos culturais como se fossem sistemas de significação usados na comunicação.
Ao visualizarmos uma imagem bem de perto é possível identificar pequenos 
quadrados coloridos nela, que, somados, formam o desenho completo o qual 
chamamos de pixels, que são as menores partes de uma imagem. Com a noção 
do pixel como uma medida da qualidade das imagens, surgiu o termo “resolu-
ção” para atribuir quantos pixels uma imagem possui. Também estudaremos 
sobre alguns tipos de imagens, como as imagens vetoriais e imagens rasteriza-
das ou bitmap.
Preparado(a)? Bons estudos!
Introdução
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
119
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E120
PSICOLOGIA DA COR
Psicologia da cor, segundo Beaird (2008, p. 38) “[...] é o campo de estudo vol-
tado à análise dos efeitos emocionantes e comportamentais produzidos pelas 
cores e suas combinações”.
Escolher as cores que vai usar em uma página Web não é uma tarefa simples. 
Devemos considerar a identidade da empresa, a estética e a usabilidade. Para 
isso, a psicologia das cores e suas teorias reais e comprovadas ajudarão a tomar 
as decisões mais certas em relação a que cores usar em seu projeto de designer.
Sobre os recursos das cores, vale a pena refletir o que Ambrose e Harris 
(2012, p. 115) nos ressaltam:
a cor se tornou um recurso permanente no campo da comunicação vi-
sual desde que a impressão em quadricromia tornou-se predominante 
em revistas e jornais. A cor acrescenta dinamismo a um design, atrai a 
atenção e pode produzir reações emocionais. Ela também facilita a or-
ganização dos elementos em uma página - dividindo elementos em zo-
nas ou agrupando itens semelhantes, codificando certos tipos de infor-
mações e auxiliando o receptor a encontrar as informações que deseja.
Usar cor no design gráfico é muito subjetivo, pois, o que provoca uma reação 
em uma pessoa pode provocar outra muito diferente em outro indivíduo. Isso 
pode ocorrer devido à preferência pessoal ou o contexto cultural em que a pes-
soa está inserida.
Estudar como as cores afetam diferentes pessoas, individualmente ou em 
grupo, é importante para o Designer gráfico desenvolver uma página Web com 
qualidade e que agrade os clientes e os consumidores. Às vezes uma simples 
mudança de tonalidade de uma cor, por exemplo, pode evocar um sentimento 
completamente diferente nas pessoas. 
Para Ambrose e Harris (2012, p. 117) “[...] cor é um comunicador poderoso 
porque apresenta diversos significados codificados, enquanto confere certo dina-
mismo ao design”. O estado emocional ou o humor pode ser representado por 
uma cor e pode ser utilizada para obter reações emotivas específicas do consu-
midor. Conforme o país e a cultura, a cor pode ter seu significado diferenciado 
e também pode se referir a categorias específicas de produtos ou de conceitos. 
Associações de Cores
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
121
ASSOCIAÇÕES DE CORES
Tentar descrever as associações emocionais que as pessoas 
desenvolvem em relação às cores, para Beaird 
(2008) pode se revelar um assunto tanto quanto 
psicodélico. 
Mas, saber usá-la é muito importante. Segundo 
Ambrose e Harris (2012), com a cor livremente dis-
ponível, o seu conhecimento é necessário para que 
os designs sejam convincentes, o mais legível possível e 
enriquecendo a comunicação. Preparado(a) para conhecer 
e compreender as sensações emocionais que cada cor pode 
provocar? Vamos lá!
VERMELHO
O vermelho é uma cor muito quente, tem reputação de estimular a adrenalina 
e a pressão sanguínea. É associada ao fogo, violência, guerra e ao amor e a pai-
xão. Na história, ele já foi associado tanto com o Diabo como para o Cupido.
O vermelho também pode ser associado à raiva, mas também está associada 
à fama (tapete vermelho em eventos de celebridades). O vermelho também indica 
perigo, por exemplo, sinais são vermelhos e os rótulos de advertência também. 
Como exemplo das características da cor vermelha, temos marca da empresa 
Coca-Cola.
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E122
Figura 1 - Coca-Cola
LARANJA
A cor laranja é muito vibrante e energética. Estimula o apetite e o metabolismo, 
por isso é muito usada para divulgar alimentos e culinária. Suas formas suaves 
podem ser associadas com a terra e com o outono. Nos projetos, laranja chama 
a atenção sem ser tão avassalador quanto o vermelho. Nos Estados Unidos, o 
laranja representa o dia das Bruxas. Já, na Irlanda, é associada à religião protes-
tante. Como exemplo de site que usa a cor laranja temos o da Loja Online Orange.
Figura 2 - Site da Loja Online Orange
Fonte: Orange ([2016], on-line)1.
Associações de Cores
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
123
AMARELO
Amarelo é a cor mais brilhante e energizante. É associada à felicidade, inteligên-
cia e ao sol, sendo a marca registrada das carinhas sorridentes. É usada também 
em táxis e sinais de aviso e é considerada cor sagrada e imperial em muitas cultu-
ras asiáticas. O Amarelo produz um efeito de aquecimento, estimula a atividade 
mental e gera energia muscular por ser frequentemente associada a alimentos. 
Quando usado em demasia, o amarelo pode ter um efeito perturbador. Muito 
amarelo pode causar ansiedade, nervosismo, apreensão, agitação e confronto 
particularmente em pessoas que já estão estressadas . Pode motivar as pessoas a 
se tornarem excessivamente críticas.
Como exemplo do uso da cor amarelo, temos o site da Margarina Doriana, 
que nos passa as características relacionadas à esta cor.
Figura 3 - Site da Doriana
Fonte: Doriana ([2016], on-line)2.
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E124
ROSA
Geralmente, associada com ternura, romance, amor, juventude, inocência e sua-
vidade. A cor é conhecida por ter um efeito calmante. Os efeitos desta cor podem 
variar de acordo com a intensidade da cor (forte, leve, profunda etc). Nas cul-
turas ocidentais, os tons de rosa estão associados às recém-nascidas. Utilizada 
especialmente em roupas, pois ajuda a identificar que são meninas. Como exem-
plo do uso da cor rosa, temos a imagem a seguir: que, em seu layout, transmite 
as características aqui mencionadas da cor rosa.
Figura 4 - Site com Cor de Rosa
VERDE
Verde é uma cor que representa a natureza. Pode representar um novo começo e 
crescimento. Isso também significa renovação e abundância. No projeto, o verde 
pode ter um efeito de equilíbrio e harmonização e, é muito estável. É apropriado 
para projetos relacionados à riqueza, à estabilidade, à renovação e à natureza. 
Utilizada em um chapéu, indica que uma esposa está sendo infiel na China. NaAssociações de Cores
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
125
França tem conotações negativas e é uma má escolha para embalagens. Nos paí-
ses muçulmanos, o verde é muito importante, pois é a cor do Islã. Como exemplo 
do uso da cor verde, temos o exemplo de um site com a cor verde, visto que a cor 
se remete à Natureza, nada melhor do que utilizá-la nesse contexto. 
Figura 5 - Site com a cor verde
AZUL
Azul é utilizado para representar a calma e responsabilidade, mas ele pode ser 
refrescante e agradável. Azuis escuros são mais fortes e confiáveis. O azul é tam-
bém associado com a paz e tem uma conotação espiritual e religiosa em muitas 
culturas e tradições. Os chineses, por exemplo, associam o azul à imortalidade. 
Também é considerada uma cor sagrada na religião judaica e para os Hindus, 
pois é a cor de Krishna. Na Colômbia, a cor azul é associado a sabonetes. 
A seguir um exemplo de site com tons na cor azul. 
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E126
Figura 6 - Site com cor azul
ROXO
O roxo historicamente está associado com a realeza e ao poder. Ainda hoje o 
roxo é o símbolo de riqueza e da extravagância. A cor é vinculada a flores, per-
fumes e pedras preciosas. É também considerada a cor da nobreza nas culturas 
europeias. Ela remete a pensamentos reflexivos e místicos. O profundo mistério 
que a cor evoca pode promover sensações de tristeza e melancolia, caso a pes-
soa conviva demais com a cor. De acordo com pesquisas, quase 75 por cento das 
crianças em idade de pré-adolescência preferem mais o roxo do que as outras 
cores. O roxo brilhante é muito utilizado para promover produtos infantis, por 
Associações de Cores
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
127
exemplo, o site da Nintendo 3DS, exposto na figura a seguir:
Figura 7 - Site da Nintendo 3DS
Fonte: Nintendos de Plantão ([2016], on-line)3.
PRETO
O preto é a mais forte das cores neutras. No lado positivo, ele é comumente 
associado a poder, elegância e formalidade. Do lado negativo, pode estar asso-
ciado com o mal, morte e mistério. O preto é a cor tradicional do luto em muitos 
países e também é associada ao Halloween e ao lado oculto. Preto pode tornar 
mais fácil de transmitir uma sensação de sofisticação e mistério em um projeto, 
pois é considerada uma cor extremamente elegante e estilosa. Como exemplo 
do uso da cor preta, temos o site da loja Pulo do Gato que, em seu layout, trans-
mite essas características aqui mencionadas. A seguir um exemplo de outro site 
com a cor preta.
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E128
Figura 8 - Site com cor preta
BRANCO
Branco é o extremo oposto da cor preto. Branco é associado à pureza, bondade, 
paz e virtude. Por isso é usado por noivas no dia do casamento pois nas culturas 
ocidentais é a cor da pureza. Também é associada à saúde, principalmente por 
médicos, enfermeiros e dentistas. Porém, o branco é a cor de luto nas culturas 
orientais. No Japão, por exemplo, a cor branca é associada à morte, principal-
mente em cravos brancos. Ele é considerado como sendo a cor da perfeição. Mas, 
por outro lado, muito branco pode causar sentimentos de isolamento e vazio. 
Como exemplo do uso do branco, temos o site Rainha das Noivas e Debutantes 
que, em seu contexto, relaciona-se com os tópicos apresentados nesta descrição.
Temperatura da Cor
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
129
Figura 9 - Site Rainha Noivas e Debutantes
Fonte: Rainha Noivas ([2016], on-line)4.
TEMPERATURA DA COR
Conforme Beaird (2008), um atributo existente em todo o espectro de cores1 é 
o conceito da temperatura da cor, ou seja, quais cores são associadas ao fogo ou 
ao gelo. As temperaturas de cor são divididas em:
 ■ Cores quentes: vão do vermelho ao amarelo e incluem laranja, rosa, mar-
rom e vinho. Associadas ao sol e ao fogo, as cores quentes representam 
calor e movimento.
 ■ Cores frias: vão do verde ao azul e podem incluir tons de roxo. As cores 
frias acalmam as pessoas e são usadas para reduzir a tensão.
1 O espectro de radiação de uma fonte é a distribuição de intensidades das ondas em diferentes 
comprimentos de onda. Cor é uma sensação produzida pelo nosso sistema visual como resultado da 
composição espectral da luz.
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E130
VALOR DA COR
Para Beaird (2008, p. 44) “[...] a medida da claridade ou obscuridade de uma 
cor é conhecida como valor. O uso de cores vivas ou escuras ajuda a estabelecer 
a dicotomia clássica do bem versus o mal”.
Os Matizes são produzidos pela adição do branco a uma dada cor. Tom é 
qualquer cor pura à qual foi adicionado o preto.
Saturação ou intensidade de uma cor, conforme Beaird (2008), é o seu grau 
de luminosidade ou opacidade. É a característica quantitativa de uma cor. Uma 
cor mais saturada, é a cor que tem menos branco ou preto. Quando uma cor 
se encontra em sua máxima força e não contém nenhuma fração de branco ou 
preto, diz-se que tem saturação máxima. Por exemplo, o rosa é menos saturado 
que o vermelho porque contém branco.
Cores intensas e vívidas têm maior destaque. Quando adicionamos cinza 
(preto e branco) a uma determinada cor, ela se torna opaca e não saturada.
Já a luminosidade é a capacidade de reflexão da luz. Depende da quanti-
dade de preto ou cinza que contém e faz com que uma cor se aproxime mais, ou 
menos, do branco (luminoso) ou do preto (escuro).
Por fim, dentro da questão sobre o valor da cor, temos o contraste. Esse se 
baseia no princípio de que nenhuma cor tem valor por si mesma e sim que ela é 
acentuada, atenuada ou modificada pela influências de outras cores.
Sistemas de Cores: CMYK, RGB e Pantone
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
131
SISTEMAS DE CORES: CMYK, RGB E PANTONE
SÍNTESE ADITIVA
Segundo Beaird (2008, p. 33) “[...] as cores são baseadas em porcentagens de 
vermelho, verde e azul (RGB). Se saturarmos essas cores ao seu nível máximo, 
teremos luz branca. Se saturarmos o vermelho e o verde também aos extremos, 
mas excluindo o azul, teremos o amarelo”.
As cores RGB misturadas entre si ou duas a duas, em proporções diferentes 
ou iguais resultarão em todas as cores possíveis. Assim temos a Síntese Aditiva 
porque formamos as cores e o branco pela adição das cores básicas, também 
chamadas primárias ou fundamentais, ou seja, o vermelho, verde e azul. As com-
plementares ou secundárias são formadas pela combinação das básicas.
 Na imagem a seguir, na Síntese Aditiva, o Vermelho, Verde e Azul formam 
o Ciano, magenta e amarelo, e ao centro o Branco (RGB).
SÍNTESE SUBTRATIVA
Podemos formar cores por meio da 
mistura de pigmentos, na qual cada 
pigmento absorverá uma parte da luz 
branca até a eliminação total de luz 
refletida, chegando ao preto. Nesse 
caso, as cores primárias serão o ciano, o 
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E132
magenta e o amarelo. Quando unimos temos a formação da cor CMYK (BEAIRD, 
2008). 
Na imagem já descrita, na Síntese Subtrativa: podemos ver as 3 cores comple-
mentares unidas, o ciano, magenta e amarelo que formam novamente o vermelho, 
verde e o azul, sendo que no centro temos o preto.
PANTONE
Quando se fala em Pantone, temos a relação feitacom cores especiais que pro-
porcionam qualidade superior obtida pela seleção de cores na escala CMYK. 
Para Collaro (2012, p. 38): 
[...] a variação tonal das cores especiais pode ser obtida com um re-
curso conhecido como benday, por meio do qual se aplicam retículas 
de diâmetro dos pontos, que determina os tons diferentes da cor, que 
são definidos por porcentagens, que variam de 90% (mais escuro) a 5% 
(mais claro).
 
 
 
 
 
 
Roda De Cores
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
133
RODA DE CORES
 A roda das cores ou círculo das cores, conforme Beaird (2008, p. 46) “[...] é um 
diagrama simples, mas eficaz, desenvolvido para apresentar os conceitos e a ter-
minologia da teoria da cor”. A roda das cores tradicional é dividida em 12 fatias 
e cada fatia é uma cor primária, secundária ou terciária.
 ■ Cores primárias: vermelho, amarelo e azul. As cores primárias são as 
três cores de pigmentos que não podem ser misturados ou formados por 
qualquer combinação de outras cores. Todas as outras cores são obtidas 
a partir dessas três cores.
 ■ Secundárias Cores: verde, laranja e roxo. Essas são as cores formadas 
pela mistura de cores primárias.
 ■ Terciárias Cores: amarelo-laranja, vermelho-laranja, vermelho-púrpura, 
azul-violeta, azul-verde e amarelo-verde. Essas são as cores formadas pela 
mistura de um primário e uma cor secundária.
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E134
TIPOGRAFIA
A tipografia é o meio pelo qual uma ideia escrita recebe uma forma visual. A 
tipografia pode produzir um efeito neutro ou acabar despertando paixões, sim-
bolizar movimentos artísticos, políticos, culturais e filosóficos ou ainda exprimir 
a personalidade de uma pessoa ou uma empresa. 
Desenhos de tipos variam desde formas claras e distinguíveis de fácil 
leitura, adequadas para grandes quantidade de texto, até tipos visual-
mente mais fortes e atraentes usados em manchetes e anúncios publi-
citários. A tipografia está em constante evolução. Muitas fontes usadas 
hoje se baseiam em designs criados em épocas passadas. A indústria 
continua evoluindo e acelerando conforme a tecnologia torna o design 
mais rápido e mais fácil, enquanto cria algo novo ou adapta algo de 
uma época anterior (AMBROSE; HARRIS, 2012, p. 55).
TIPOS
Tipo é o desenho de uma determinada família de letras, por exemplo: Arial, Times 
New Roman, Verdana entre outras. As variações dos tipos podem ser: ligth, itá-
lico, negrito, sobrescrito, subscrito e sublinhado. Os tipos de uma determinada 
família são as fontes desenhadas para a elaboração de um conjunto completo 
de caracteres que consta do alfabeto em caixa alta e caixa baixa, números, sím-
bolos e pontuação.
Conforme Ambrose e Harris (2012, p. 56) “[...] o tamanho de um tipo 
é a medida vertical do corpo de um caracter tipográfico, incluindo o espaço 
acima e abaixo de seus contornos”. O caractere é sempre levemente menor que 
Tipografi a
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
135
a especifi cação do tamanho do seu corpo. Usam-se diferentes tamanhos de tipos 
para indicar uma hierarquia de importância, já que tendemos a ler letras de tama-
nhos grandes, sempre primeiro. 
Figura 10 - Tipos
Fonte: a autora. 
ANATOMIA DAS LETRAS
Tipos e famílias de tipos podem ser classifi cados de acordo com suas caracterí-
sitcas intrínsecas. Conforme Ambrose (2012, p. 58), “[...] muitos tipos derivam 
de desenhos criados nos últimos 500 anos, originalmente moldados em metal”. 
Embora, hoje com a era digital, esses tipos ainda contêm elementos associados 
da época em que foram criados, houve um aumento do número de fontes dis-
poníveis e se tornou mais simples a criação de uma nova fonte ou alteração de 
uma já existente.
 
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E136
DESCREVENDO O TIPO
Os tipos são compostos por um conjunto de elementos. Confi ra a seguir a ima-
gem e siga as explicações:
Figura 11 - Conjunto de elementos dos tipos
Fonte: Tipografi a ([2016], on-line)5.
 ■ Corpo: diz respeito ao tamanho do tipo, sendo defi nido pela altura do 
clichê2. O corpo é o tamanho que vai do ponto mais alto (da ascendente 
ou da versal) até o ponto mais baixo (descendente), com mais o acrés-
cimo de algum espaço extra. 
 ■ Altura-x: eixo que defi ne a altura das minúsculas, correspondente a 
altura da letra x minúscula. Essa é a medida da altura da fonte até o topo 
da minúscula. 
 ■ Altura da Versal: eixo que defi ne a altura das maiúsculas. Essa é a medida 
da base da fonte até o pico máximo das letras maiúsculas.
 ■ Linha de base: (Baseline) - eixo sobre o qual repousam todas as letras. É 
a linha imaginária onde ocorre o apoio das fontes.
 ■ Eixo: é a angulação do traço. Diz respeito ao eixo de inclinação princi-
palmente das letras: b, c, e, g, o, p e q.
 ■ Ascendentes: é a parte das letras: b, d, f, k, h, l e t que se estendem acima 
da altura de x.
2 Um clichê ou cliché (do francês cliché), em tipografi a, diz respeito a uma matriz gravada em placa metálica 
e destinada à impressão de imagens e textos.
Tipografia
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
137
 ■ Descendentes: é a parte das letras: g, j, p, q, y e por vezes a letra J (caixa 
alta), que se estendem abaixo da altura de x.
 ■ Serifa: são os “bracinhos” que acontecem no final de cada fonte, elas 
foram criadas no século passado, uma lembrança dos acabamentos tipo-
gráficos feitos em pena.
 ■ Haste: é exatamente a espinha dorsal da fonte, todo o alinhamento ver-
tical é feito por ela.
 ■ Bojo: é a barriga da fonte, uma fatia que nasce e morre com formas 
arredondadas.
 ■ Orelha: a fonte possui traços que saem da sua parte superior.
 ■ Remate: é a finalização da fonte na base inferior.
 ■ Ligadura: muitas vezes duas letras ao serem escritas seguidas criam um 
laço em si.
 ■ Terminal: o oposto do remate é a finalização da fonte na sua parte superior.
 ■ Barra horizontal: todos elementos das fontes que produzem uma para-
lela com a linha de base.
 ■ Oco: é todo o vazado de uma fonte, um buraco.
 ■ Eixo: linha imaginária que define o grau de inclinação da fonte de acordo 
do lado e o movimento feito pela pena. Mas, muitas vezes uma pena em 
um eixo pode desenhar uma fonte em outro eixo.
 ■ Abertura: todo espaço vazado na letra, por exemplo a letra ‘e’. É o espaço 
de abertura de acesso ao miolo da fonte.
ESTILOS DE FONTES
Você, caro(a) aluno(a), já deve ter visto em diversos softwares a utilização dos 
termos “Com Serifa” ou “Sem Serifa”, no momento de se escolher uma fonte. Para 
que você entenda um pouco mais, existem tipos com e sem serifa (ou sans-se-
rif, do francês) e é a principal forma de diferenciação das letras. Serifas são os 
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E138
pequenos traços, ou prolongamentos, que existem no final das hastes dos glifos.
Outro estilo de fonte muito utilizado são as Cursivas. Essas são tipos que 
usam como referência a escrita manual, logo, procuram reproduzir as caracterís-
ticas desse tipo de escrita. Possuem uma legibilidade complicada e sua utilização 
deve ser feita com cautela.
Veja os exemplos a seguir de letras com serifa, sem serifa e cursiva: 
 
CAIXA DE TIPOS
Quando nos remetemos ao tamanho que uma determinada letra fica ao ser 
escrita, é importante ressaltar que elas possuem três tipos de tamanhos: caixa 
baixa, caixa alta e versalete.
Caixa Baixa: é o conjunto de caracteres em letras minúsculas.Caixa Alta: é o conjunto de caracteres em letras maiúsculas.
Versalete: é o conjunto de caracteres em letras maiúsculas com a altura de 
minúsculas (altura de x).
Edição E Tratamento de Imagens
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
139
EDIÇÃO E TRATAMENTO DE IMAGENS
Caro(a) aluno(a), as imagens são ferramentas importantes em qualquer forma de 
comunicação, pois, elas transmitem mais fidelidade à mensagem que qualquer 
texto transmite. De acordo com os estudos de Ambrose e Harris (2012), as ima-
gens são os elementos gráficos que podem dar vida a um design. Podem ser como 
o foco principal em uma página, ou como elemento secundário. Independente 
da forma, as imagens são essenciais para a comunicação ou a identidade visual 
de um projeto web. 
As imagens desempenham várias funções, desde transmitir a dramati-
cidade de uma matéria jornalística, resumir e sustentar um argumento 
apresentado no texto até fornecer uma quebra visual para um bloco de 
texto ou espaço vazio. Elas são eficazes porque comunicam rapidamen-
te uma ideia ou instrução, fornecem informações detalhadas ou trans-
mitem uma sensação que o leitor pode compreender com facilidade 
(AMBROSE; HARRIS, p. 93, 2012). 
As imagens causam significados emocionais e culturais, por isso, são considera-
das importantes comunicadores. A maneira como as imagens são inseridas em 
uma página web afetam como elas são recebidas e avaliadas pelos consumidores. 
SEMIÓTICA
Em nossa vida é muito comum utilizarmos símbolos e também atribuirmos sig-
nificados para as mais diversas coisas. Nos estudos feitos por Ambrose e Harris 
(2012, p. 94), eles consideram que “[...] a semiótica é o estudo dos símbolos e ofe-
rece explicações sobre como interpretamos imagens”. Então, quando falamos de 
imagens, é importante entender que elas podem comunicar significados de três 
formas: 1) o signo ou o que ele mostra; 2) um sistema maior do qual a imagem 
faz parte; e 3) o contexto no qual a imagem é inserida, conforme a semiótica.
Como designer, devemos saber o que pretendemos transmitir utilizando 
as imagens e símbolos, para que não sejamos interpretados de forma errônea. 
Dessa forma, de acordo com as pesquisas de Ambrose e Harris (2012), existem 
três tipos principais de signos:
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E140
Símbolo: comunicam mais 
uma representação do que 
algo que realmente existe. 
 Os símbolos ao lado representam 
homem e mulher, embora não se 
pareçam em nada com um homem 
e uma mulher. 
Ícone: um ícone é um elemento grá-
fico que representa um objeto, uma 
pessoa ou outra coisa. Ele, normal-
mente, é a redução de um objeto de 
modo que seja instantaneamente 
reconhecido pelo que é. 
Esses ícones representam homem e 
mulher e são silhuetas simplificadas 
de um homem e de uma mulher.
Índice: um índice é um símbolo que 
cria uma ligação entre objeto e sig-
no. 
Esse símbolo do sapato, por exem-
plo, poderia ser um índice para mu-
lher, porque é claramente reconhe-
cido como feminino.
Caro(a) aluno(a) perceba que esses itens fazem parte do nosso dia a dia, mas 
muitas vezes não nos damos conta. Por isso, quando pontuamos anteriormente 
sobre a relevância que as imagens têm em nossa vida, você, como profissional 
da área de tecnologia, deve levar isso em consideração no momento de colocar 
seu projeto em prática.
Edição E Tratamento de Imagens
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
141
TIPOS DE IMAGENS
Os tipos de imagens se referem como as imagens são geradas, salvas e utilizadas. 
Dessa forma, existem dois tipos principais de imagens digitais: bitmap e veto-
res, conforme a categorização que segue, proposta por Ambrose e Harris (2012):
Rasterizadas: uma imagem rasterizada ou bitmap é qualquer imagem grá-
fica que seja composta por elementos de imagens ou pixels em um grid em que 
cada pixel contém informações de cor. Os gráficos de bitmaps normalmente 
não podem ser ampliados porque têm uma resolução fixa, ou seja, quando você 
redimensiona a imagem, ela pode ficar distorcida e irregular, pixelada. Imagens 
rasterizadas são imagens compostas de pixels, que apenas são reproduzidas cor-
retamente em um determinado tamanho e assim qualquer ampliação causará 
redução da qualidade. 
Figura 12 - Exemplo de imagem rasterizada
Fonte: Wikimedia ([2016], on-line)6.
Vetores: um vetor é feito de muitos objetos individuais e que podem ser amplia-
dos, definidos por uma fórmula matemática e não por pixels, o que os torna 
ampliáveis ou de resolução independente. As fontes, por exemplo, são vetores. 
A principal desvantagem de um vetor é que não são adequados para reprodu-
zir imagens realistas, porque não conseguem descrever os tons contínuos e sutis 
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E142
de uma fotografia. Como vetores são um processo matemático, eles podem ser 
ampliados infinitamente sem perda de qualidade ou resolução. 
Figura 13 - Exemplo de imagem normal e vetorizada
Fonte: Silva (2009, on-line)7.
RESOLUÇÃO DE IMAGEM E FORMATO DE ARQUIVO
Você caro(a) aluno(a), já deve ter se deparado com a situação de aumentar a reso-
lução da sua câmera digital para que sua foto ficasse com mais qualidade. Ou 
também, a situação de que um determinado software não suporta alguns forma-
tos de arquivo. Isso realmente acontece e é importante compreender um pouco 
sobre este contexto. Ambrose e Harris (2012, p. 96) explicam que “[...] compre-
ender alguns dos mecanismos sobre como as imagens rasterizadas funcionam 
pode ajudar o designer a obter bons resultados”. 
Edição E Tratamento de Imagens
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
143
Assim, o espaçamento dos pixels em uma imagem determina a sua resolução, 
que é medida em pixels por polegada (pixels per inch - ppi) também chamado 
ponto por polegada (dots per inch - dpi).
Quanto mais alta a resolução, maior o número de pixels ou de infor-
mação na imagem. Uma resolução mais alta significa que uma imagem 
pode conter mais informações e, assim, transições de cores e detalhes 
podem ser gravados em maior quantidade. Em resoluções baixas, uma 
imagem pode não conter informações suficientes para converter ou re-
gistrar detalhes e, é por isso que imagens de baixas resolução geralmen-
te têm áreas pixeladas (AMBROSE; HARRIS, p. 96, 2012). 
Veja a seguir algumas medidas utilizadas em imagens:
 ■ DPI (dots per inch - pontos por polegada): é uma medida que se refere 
a quantos pontos de tinta uma impressora pode depositar por polegada. 
A resolução padrão de tela é 72 dpi, mesmo para imagens que tenham 
resoluções mais altas. 
 ■ LPI (lines per inch - linhas por polegada): é uma medida que se refere 
a como as impressoras produzem fotografias que são reproduzidas como 
uma séries de pontos de meio-tom de diferentes tamanhos. Quanto maio-
res os pontos, mais escura a imagem será produzida e vice-versa. 
 ■ PPI (pixels per inch - pixel por polegada): é a medida de números de 
pixels exibida na imagem. 
Agora, a respeito do formato da imagem, podemos reconhecer os diferentes 
tipos por diversos fatores, como pela extensão do arquivo. Ex.: JPG (JPEG), 
PNG, BMP, GIF, EPS entre outros; como também pela qualidade da imagem, 
o que é muito difícil. Outra forma é verificar se a imagem possui animações, o 
formato Graphics Interchange Format (GIF), por exemplo, possui uma variação 
que possibilita a criação de imagens animadas (GIF animada). Vamos esmiuçar 
um pouco mais esses formatos de arquivos de imagem:
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENSReprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E144
 ■ JPEG: o Joint Photographics Experts Group (JPEG) é o formato mais 
comum e mais reconhecido e permite que você armazene imagens em 
qualidade suficiente ocupando o mínimo espaço possível. O JPEG é 
adequado para armazenamento de fotos digitais (imagens que contêm 
transações de cores suaves, sombras e brilho) e para compartilhar ima-
gens raster na Internet. 
 ■ PNG: a imagem Portable Network Graphics (PNG) é comprimida sem que 
exista perda na qualidade. Normalmente, o PNG é usado para armazenar 
gráficos com arestas definidas, textos gráficos e elementos gráficos (logos, 
designs e ícones). A vantagem principal do formato PNG é o armazena-
mento e uso dos estágios intermediários de edição. Isso acontece porque 
a compressão passa por qualquer um dos estágios de conservação sem 
perder qualquer tipo de qualidade.
 ■ PDF: o Portable Document Format (PDF) é familiar para todos que já tive-
ram contato com materiais impressos. Os layouts dos produtos impressos 
(flyers, brochuras e catálogos) são fornecidos para impressão por meio do 
formato PDF. Eles podem conter elementos de gráficos vetoriais e de ras-
treio, como texto, ícone ou até mesmo, vídeo. A singularidade do PDF é a 
sua versatilidade e popularidade. Muitos programas podem interpretá-lo 
e você pode abrir documentos em PDF usando não só programas espe-
ciais como o Adobe Reader, mas também o Microsoft Word.
 ■ SVG: o Scalable Vector Graphics (SVG) que significa “gráfico em vetor 
escalável”. É um formato usado para criar e armazenar imagens em vetor 
2D. Tratando-se de uma imagem em vetor, é possível ampliar totalmente 
ou em parte a imagem, sem que haja perda de qualidade. O SVG permite 
editar o texto da imagem em qualquer editor de texto.
Considerações Finais
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
145
As cores sempre estiveram presentes desde o começo da história do ho-
mem. Elas faziam parte mais das necessidades psicológicas do que das esté-
ticas, por exemplo, na história dos egípcios que sentiam na cor um profundo 
sentido psicológico, tendo cada cor como um símbolo. As cores têm a ca-
pacidade de liberar um leque de possibilidades criativas na imaginação do 
homem, agindo não só sobre quem admirará a imagem, mas também sobre 
quem a produz. Sobre o observador que recebe a comunicação visual, a cor 
exerce três ações: a de impressionar a retina, a de provocar uma reação e a 
de construir uma linguagem própria comunicando uma ideia, tendo valor 
de símbolo e capacidade. É tamanha a expressividade das cores que ela se 
torna um transmissor de ideias, tão poderoso que ultrapassa fronteiras es-
paciais e temporais. Não tem barreiras nacionais e sua mensagem pode ser 
compreendida até por analfabetos.
Fonte: Freitas (2007, on-line)⁸.
Ao escolher fontes, os designers gráficos consideram a história dos tipos e 
suas conotações atuais, bem como suas qualidades formais.
(Ellen Lupton)
TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
IVU N I D A D E146
CONSIDERAÇÕES FINAIS
Olá, aluno(a)! Chegamos ao final da nossa quarta unidade na qual aprendemos 
sobre a psicologia das cores e como ela influencia e afeta os sentimentos das 
pessoas. A escolha das cores é fundamental para o sucesso de um site. Ela pode 
enfatizar textos, imagens e caracterizar especialmente os elementos da página.
No decorrer desta unidade, vimos como a criação de cores se baseia nas 
propriedades fundamentais da luz que ocorrem na natureza e que essas cores 
podem ser criadas a partir do vermelho, do verde e do azul, sendo essa a base 
do modelo de cores RGB.
Além disso, estudamos a importância da Tipografia e como ela está em toda 
a parte, sendo ferramenta essencial para os designers gráficos. De forma com-
plementar, também discutimos um pouco a respeito dos elementos básicos dos 
tipos de letras, sua anatomia e seus estilos.
A importância dada às imagens bem tratadas dentro de uma página da web 
é muito grande, pois como a mídia digital é mais voltada ao aspecto visual é 
mais agradável que imagens bonitas e com efeitos mais interessantes que ilus-
tram as páginas de nosso site. Portanto, sempre que estivermos desenvolvendo 
ou criando um novo layout é importante que seja dada a devida atenção às ima-
gens de nossa página, pois um pequeno deslize criado por uma imagem mal 
elaborada ou maltratada pode fazer com que o visitante de nossa página perca 
o interesse naquilo que está sendo exibido.
O sucesso do site pode depender das imagens, principalmente se o objetivo 
for vender um produto ou mostrar a qualidade de um serviço. Portanto é preciso 
ter uma preocupação maior com as imagens e fotografias que serão utilizadas.
Preparado(a) para seguir em frente? Na próxima unidade, falaremos sobre 
as Ferramentas e software que são utilizados no Design Gráfico. Bons estudos!
147 
1. O sistema de cor CMYK trabalha com síntese subtrativa e o sistema RGB trabalha 
com síntese aditiva de cores. Sobre essas escalas de cores podemos afirmar que:
b) A escala CMYK deve ser utilizada quando se produz materiais para a inter-
net.
c) A escala CMYK é formada pelas cores ciano, magenta, amarelo e preto, e da 
combinação destas surgem outras cores.
d) RGB é a forma pela qual vemos o mundo em um modelo de cor reflexiva.
e) Quando se manuseia um arquivo em RGB a escala de intensidade vai de 0 a 
100, enquanto em CMYK vai de 0 a 255.
f ) Nenhuma das alternativas está correta.
2. Um designer deve conhecer os diferentes sistemas de cores na criação de ele-
mentos visuais, pois certas características levam em consideração o meio no 
qual serão utilizados. Por que é recomendado o sistema de cores RGB na criação 
de arquivos e elementos utilizados na internet? Explique como uma cor pode 
ser representada neste sistema, quando utilizada em código na programação 
de um site.
3. Um site responsivo deve se adaptar a diferentes resoluções de tela nos dispo-
sitivos que o acessam. Uma vez que imagens bitmap (mapa de bits) perdem 
resolução quando ampliadas, transformar todas as imagens do site em vetores 
é a melhor solução?
148 
4. A tipografia sempre foi o principal elemento de uma página impressa, mas nos 
dias atuais, com a crescente saturação visual e consequente ênfase em comu-
nicação, a tipografia atinge o seu ponto mais alto de prioridade no mundo do 
design gráfico. Com base nisso, analise as assertivas e assinale a alternativa que 
aponta a(s) correta(s):
I. A tipografia pode produzir um efeito neutro ou acabar despertando paixões, 
simbolizar movimentos artísticos, políticos, culturais e filosóficos ou ainda 
exprimir a personalidade de uma pessoa ou uma empresa.
II. Usam-se diferentes tamanhos de tipos para indicar uma hierarquia de im-
portância, já que tendemos a ler letras de tamanhos grandes, sempre pri-
meiro.
III. Podem ser como o foco principal em uma página, ou com o elementos se-
cundário, as imagens são essenciais a comunicação ou a identidade visual 
de um projeto web.
IV. É um nome, normalmente representado por um desenho (logotipo e/ou 
símbolo), que, com o tempo, devido às experiências reais ou virtuais, obje-
tivas ou subjetivas que vai se relacionando a ela, passa a ter um valor espe-
cífico.
V. O tamanho de um tipo é a medida vertical do corpo de um carácter tipográ-
fico, incluindo o espaço acima e abaixo de seus contornos.
 Assinale a opção com a sequência CORRETA:
a) Somente as afirmativas I e II estão corretas.
b) Somente as afirmativas I, II, III e IV estão corretas.
c) Somente a afirmativas I está correta.
d) Somente as afirmativas I, II e V estão corretas.
e) Todas estão corretas. 
5. As imagens causam significados emocionais e culturais a diferentes pessoas e 
são importantes ferramentas em qualquer forma de comunicação.A maneira 
como as imagens são inseridas em uma página web afetam como elas são re-
cebidas. Com base nisso, explique os tipos de imagens rasterizadas e imagens 
vetores. 
149 
DESIGN GRÁFICO E DESIGN EM MOVIMENTO: TIPOGRAFIA E EXPRESSÃO
A produção de uma imagem estável, imóvel, gerada a partir das possibilidades expressi-
vas da tipografia apresenta o desafio de condensar os significados daquilo que se preten-
de comunicar, mas por outro lado, favorece a realização da composição. Pesquisadores do 
processo de criação em arte, entendem que o artista é agente, espectador e testemunha 
da obra de arte que se concretiza por meio da interlocução entre sensação, pensamento 
e ação. De modo semelhante o designer, também é agente e espectador do seu próprio 
processo de criação, assim, tem a seu favor o tempo de fruição de tal imagem, pode in-
vestigar cada detalhe, divagar a respeito tecer considerações, experimentar novas confi-
gurações, realizar comparações simultâneas entre as imagens, aguardar para que os signi-
ficados possam emergir da interlocução entre o espectador e a configuração da imagem.
Um diferencial importante entre a imagem e a composição impressas e o vídeo encon-
tra-se na extensão e duração do tempo de leitura. No impresso, o tempo dedicado ao 
escrutínio da página, de seus elementos compositivos, estende-se indefinidamente, 
ajustado apenas pelo interesse despertado no observador – leitor. No audiovisual e, por 
extensão, nas peças videográficas, o contínuo temporal impõe o ritmo e a duração da 
leitura, delimitando as possibilidades de apreensão e compreensão da mensagem. A 
ordenação temporal dos elementos gráficos, tanto parece indicar a leitura da peça como 
pode impedir que se façam outras leituras possíveis.
Na produção do design audiovisual da imagem em movimento, o desafio sofre um des-
locamento. Já não é necessário condensar os significados em apenas uma única ima-
gem. Sabemos que a imagem em movimento é, na realidade, uma ilusão produzida pela 
combinação de uma rápida sucessão de imagens fixas, associada ao que é conhecido 
como retenção retiniana. Assim, por meio da imagem em movimento e de seu tempo, 
da mutabilidade das relações formais que se insinuam no trabalho estático e que agora 
se realizam no vídeo, da montagem e do áudio favorecem, ainda que em um curto es-
paço de 15 segundos, um acúmulo de significados próprios da linguagem audiovisual.
A imagem fixa traz, em si, elementos que na linguagem audiovisual ganham mobilidade, o 
que favorece a tarefa de construir significados, mas torna mais complexa a tarefa de manter, 
ao longo do movimento, todas as relações compositivas, incluindo o áudio que também faz 
parte desta linguagem. Define movimento como uma sequência organizada, na qual, even-
tos se sucedem de modo a criar uma ordem significativa, na qual cada dado acrescido não 
apenas realiza uma soma, como modifica tudo aquilo que antes foi apresentado.
Na linguagem audiovisual, uma série de elementos concorre e se agrega para a criação 
de significados e para cada escolha um resultado expressivo se apresenta. O “enqua-
dramento” proposto pela imagem fixa, ponto de partida para o desenvolvimento do 
trabalho, pode ganhar mobilidade deslocando-se de um “close-up” para um “plano ge-
ral”, dispersando o olhar do espectador, ou vice-versa. Também, pode adquirir outras 
configurações por meio do acréscimo ou decréscimo de elementos, deslocamentos dos 
objetos. O “movimento de câmera” é outro importante elemento da linguagem audiovi-
150 
sual. Quando simulamos panorâmica, travelling, dolly, zoom, estaremos criando ênfases, 
dirigindo o olhar do espectador, alterando as escalas dos elementos, imprimindo movi-
mento espacial, atribuindo pontos de vista à percepção do espectador.
É importante fazermos uma distinção entre as imagens cinematográficas, videográficas 
e o que aqui chamamos de videografismo. As primeiras dependem de uma contigui-
dade com o objeto que representa, uma fotografia, ou uma tomada de vídeo de uma 
cadeira vazia, depende da sua presença, mantém um vínculo indicial com seu referente. 
Em peças videográficas os objetos que se apresentam são linhas, texturas, cores; em 
princípio, não há objeto representado, há o objeto em si, os tipos que assumem formas, 
densidades, cores e movimento, que lhes são próprias, mesmo que eventualmente si-
mulem formas de objetos. Deste modo nos encontramos imersos em um importante 
universo do designer, a tipografia e o videografismo.
Se falamos em movimento, falamos necessariamente em velocidade, que no caso do 
videografismo pode ser manipulada para cada elemento da imagem, de forma indepen-
dente, criando velocidades relativas, atribuindo anima aos objetos, tornando-os expres-
sivos, por meio da sua transformação pelo movimento. Podemos também estabelecer 
relações entre imagens diferentes, por meio dos recursos de montagem como o corte, 
os fades, fusões entre outros tantos efeitos digitais de transição entre imagens seja para 
criar contrastes, conflitos, suaves dissoluções, revelações, continuidades.
Embora não estejamos formando músicos, o áudio faz parte da linguagem audiovisual, 
e o aluno deve desenvolver a consciência de sua importância. Devemos informar que 
estes alunos contam, em sua grade curricular, com uma disciplina introdutória, que os 
sensibiliza para a percepção e criação auditiva. Assim, por meio de um programa básico 
de composição musical, que oferece clips musicais prontos, os alunos criam suas pró-
prias composições, às vezes de maneira muito precisa.
[...] 
Inicialmente, consideramos as qualidades gráficas e expressivas da imagem, sua eloqu-
ência e coerência da composição de texto e imagem, sua originalidade e identidade. O 
segundo critério tem origem em um limite apresentado pela atual tecnologia. As defi-
nições da imagem videográfica ainda se estruturam em linhas e pontos ou, no caso da 
imagem digital, em pixels, gerando uma imagem mais texturada, inviabilizando sutile-
zas de cor, tonalidade, e escala que a imagem impressa permite. Assim, torna-se neces-
sário observar a adequação da imagem ao suporte digital videográfico, que exigem que 
os elementos da composição apresentem massa gráfica suficiente para garantir a boa 
definição da imagem, já que elementos muito pequenos ou linhas muito finas correm o 
risco de se tornarem ilegíveis ou pixelizados. 
[...]
Fonte: Schincario et al. (2007, on-line)9.
Material Complementar
MATERIAL COMPLEMENTAR
A Psicologia das Cores
Autor: Eva Heller
Editora: GC
Ano: 2016
Sinopse: esse livro busca abordar a relação das cores com os 
sentimentos e mostrar como as duas coisas não se combinam por acaso, já que as relações entre 
ambas não são apenas questões de gosto, mas sim experiências universais profundamente enraizadas 
na linguagem e no pensamento. Organizada em treze capítulos, correspondentes a treze cores 
diferentes, a obra oferece um painel de informações sobre as cores; de ditados e saberes populares 
até sua utilização na área de design de produto, os diversos testes baseados em cores, as terapias 
cromáticas, a manipulação de pessoas, os nomes e sobrenomes relacionados com as cores, entre 
outros dados.
Psicologia das Cores
Autor: Kacianni Ferreira
Editora: Wak
Ano: 2013
Sinopse: é um livro sui generis, que atrai por sua atualidade, 
diversidade e linguagem acessível. Nessa obra, além das características, classi� cações, dimensões, 
sensações, associações, efeitos e simbologias das cores, a autora aborda, de forma clara, concisa 
e interessante, diversos assuntos de estreita relação com as cores, além de dicas, perguntas 
interessantes e curiosidades. 
A importância da escolha da tipografi a na era dos smartwatches
Artigo que fala sobre como os UX Designers devem mudar a mentalidade “web” na 
hora de projetar experiências que acontecem nessa nova leva de relógios de pulsos 
inteligentes. Ótimo artigo. Disponível em: <http://arquiteturadeinformacao.com/
usabilidade/a-importancia-da-escolha-da-tipografia-na-era-dos-smartwatches/>.
9 princípios básicos de Design Responsivo em GIF’s
Artigo que mostra que projetar interfaces apenas para desktop e mobile é passado, 
à medida que mais e mais dispositivos estão surgindo. Fala sobre alguns princípios 
básicos de Design Responsivo para abraçar de vez o Design Líquido, em vez de 
combatê-lo. Excelente artigo. Disponível em: <http://arquiteturadeinformacao.com/
design-de-interacao/9-principios-basicos-de-design-responsivos-em-gifs/>.
REFERÊNCIAS
AMBROSE, G.; HARRIS, P. Fundamentos de Design Criativo. Porto Alegre: Bookman, 
2012.
BEAIRD, J. Princípios do Web Design Maravilhoso. Editora Alta Books: Rio de Ja-
neiro, 2008.
COLLARO, A. C. Projeto Gráfico: Teoria e Prática da Diagramação. Editora Summus, 
2012. 
REFERÊNCIAS ON-LINE
1 Em: <http://loja.orange.com/>. Acesso em: 10 out. 2016.
2 Em: <http://www.doriana.com.br/>. Acesso em: 10 out. 2016.
3 Em: <http://mmrguerra2009-nintendosdeplanto.blogspot.com.br/2012/07/nova-
-cor-de-3ds-divulgada-e-ja-venda.html>. Acesso em: 10 out. 2016.
4 Em: <http://www.rainhanoivas.com.br/vestidos/>. Acesso em: 10 out. 2016.
5 Em: <https://tipos.files.wordpress.com/2007/01/anatomia-desenhos.gif>. Acesso 
em: 10 out. 2016.
6 Em: <https://upload.wikimedia.org/wikipedia/commons/1/16/DigitalPicture.jpg>. 
Acesso em: 10 out. 2016.
7 Em: <http://ingridmertensanimations.blogspot.com.br/>. Acesso em: 10 out. 2016.
8 Em: <http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comu-
nicacao.pdf>. Acesso em: 10 out. 2016.
9 Em: <http://www.mackenzie.br/fileadmin/Graduacao/FAU/Publicacoes/PDF_IIIFo-
rum_b/MACK_III_FORUM_ZULEICA_SCHINCARIOL.pdf>. Acesso em: 10 out. 2016.
153
GABARITO
1. b) A escala CMYK é formada pelas cores ciano, magenta, amarelo e preto, e da 
combinação destas surgem outras cores.
2. O sistema de cor RGB é recomendado para uso na web, pois é utilizado em 
mídia digital, uma vez que considera fontes emissoras de luz e uma amplitude 
maior de cores em seu espectro. O sistema CMYK considera a síntese subtrativa 
de cor e diz respeito as cores que visualizamos de objetos após a reflexão da luz 
nos mesmos. A representação de cores em códigos no sistema RGB pode apa-
recer em hexadecimal, correspondendo a intensidade de cada uma das cores 
Red, Green e Blue.
3. Não. Imagens bitmap ou raster oferecem maior compatibilidade e leveza de 
carregamento. Existem opções como media queries, layout fluído e o uso de 
vetores apenas em alguns elementos do site como logotipos e ícones, que são 
alternativas mais viáveis do que somente o uso de vetores.
4. d) Somente as afirmativas I, II e V estão corretas.
5. Uma imagem rasterizada ou bitmap é qualquer imagem gráfica que seja com-
posta por elementos de imagens ou pixels em um grid em que cada pixel con-
tém informações de cor. Uma imagem vetorizada é feita de muitos objetos in-
dividuais e que podem ser ampliados, definidos por uma fórmula matemática e 
não por pixels, o que os torna ampliáveis ou de resolução independente.
U
N
ID
A
D
E V
Professora Esp. Janaína Aparecida de Freitas
FERRAMENTAS APLICADAS 
AO DESIGN GRÁFICO
Objetivos de Aprendizagem
 ■ Conhecer alguns softwares e ferramentas aplicadas ao Design Gráfico 
Web.
 ■ Conhecer algumas ferramentas utilizadas para Design Responsivo.
 ■ Entender o uso dos conceitos e ferramentas por meio de um Estudo 
de Caso.
Plano de Estudo
A seguir, apresentam-se os tópicos que você estudará nesta unidade:
 ■ Softwares e Ferramentas aplicadas ao Design Gráfico
 ■ Ferramentas para web design responsivo
 ■ Estudo de Caso
INTRODUÇÃO
Olá, aluno(a)! Estamos chegamos ao final do nosso livro e, nesta unidade, conhe-
ceremos alguns softwares, ferramentas e plug-ins disponíveis que podem ser 
aplicados ao design gráfico web. Para ser um web design é necessário ser mul-
tidisciplinar e, além do que foi aprendido, procurar estudar sempre, pesquisar e 
aprender, além das ferramentas que estão citadas no livro.
Nesta unidade, uniremos alguns dos conceitos que foram estudados durante 
o livro às ferramentas propostas. Essas ferramentas te ajudarão a evitar proble-
mas e otimizarão o tempo e a qualidade dos trabalhos desenvolvidos.
As ferramentas são de diversas categorias como software para visualização 
de imagens e edição de fotografias avançadas, ferramentas para alteração/criação 
de fontes, pintura e desenho, ferramentas para a criação de esquemas de cores 
harmoniosas, testes de resolução para sites e blogs em diferentes navegadores e 
sistemas operacionais e também a geração de ícones e gifs animados.
Também vamos conhecer algumas ferramentas para criação de protótipos e 
diagramas focados no Wireframes Web (conceitos vistos no capítulo III) e além 
de ferramentas para criação de grids, que alinham os elementos em posições oti-
mizadas na página e ferramentas voltadas ao web design responsivo.
Finalmente, para encerrar a nossa unidade, vamos ter um estudo de caso 
que colocaremos em prática a criação de um Design responsivo. Conheceremos 
algumas dicas importantes na hora de desenvolver um projeto web. No estudo 
de caso, veremos como você pode, por exemplo, trabalhar com apenas dois for-
matos de wireframe: um para computadores/tablets e um para smartphones.
Colocando em prática o que aprendemos, fica a dica: vale a pena estudar, 
pesquisar e procurar sempre testar diferentes abordagens até encontrar a que 
funciona melhor para você, sua equipe e seus clientes. Preparado(a) para conti-
nuar? Então, vamos seguir em frente. Ótima leitura e bons estudos!
Introdução
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
157
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E158
SOFTWARES E FERRAMENTAS APLICADAS AO 
DESIGN GRÁFICO
Caro(a) aluno(a), vamos conhecer alguns softwares, ferramentas e plug-ins dispo-
níveis que podem ser aplicadas ao design gráfico. Essas ferramentas lhe ajudarão 
a evitar problemas, além de otimizar o tempo e a qualidade dos trabalhos. Um 
web design deve ser multidisciplinar. Por isso, ainda existem mais coisas para 
você estudar, pesquisar e aprender, além das ferramentas que estão citadas no 
livro. É importante unir os conceitos com as ferramentas.
ADOBE CREATIVE SUITE CS6
O pacote de softwares mais usado pelos designers gráficos é a Suíte Adobe que 
incluí softwares como Photoshop (edição de imagens bitmap), Illustrator (cria-
ção e edição de imagens vetoriais), InDesign (diagramação) etc. Um dos maiores 
pontos positivos da Suíte Adobe é a interação entre os programas e a excelente 
qualidade dos softwares. 
Softwares e Ferramentas Aplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
159
Figura 1 - PhotoShop
Figura 2 - Illustrator
Fonte: Pita ([2016], on-line)1.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E160
ADOBE LIGHTROOM 4
O Adobe Lightroom é um programa para quem trabalha com grandes volumes de 
fotografias. Ele permite que se organize e edite fotografias de forma mais eficiente 
do que o Photoshop. Além de ferramentas de organização para sua biblioteca de 
fotos, suporta arquivos em diversos formatos (inclusive RAW). O software tam-
bém disponibiliza até os mais complexos ajustes fotográficos (ajuste de balanço 
de branco, correção de distorção de lente, ajustes de cor etc).
Figura 3 - Adobe Lightroom 4
Fonte: The App News ([2016], on-line)2.
GIMP E INKSCAPE
O GIMP (GNU Image Manipulation System) é um software open source de edi-
ção de imagens bitmap, sendo o mais próximo de um concorrente gratuito do 
Photoshop. Já, o InkScape, dentre suas funcionalidades, pode ser comparado 
com o Illustrator da Adobe.
Softwares e FerramentasAplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
161
Figura 4 - GIMP
Fonte: The Fearless Penguin ([2016], on-line)3.
 
Figura 5 - InkScape
Fonte: MacUpdate ([2016], on-line)4.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E162
COREL DRAW E COREL PHOTO PAINT
O Corel Draw ganhou mercado principalmente pelo preço mais acessível que 
o Illustrator e pela facilidade de uso. Toda essa facilidade, no entanto, complica 
na hora de trabalhar com recursos mais avançados. O CorelDraw é uma solução 
confiável e completa para a criação de comunicações visuais para qualquer meio. 
Já, o Corel Photo Paint possui ferramentas fáceis de entender. Sua área de 
trabalho é personalizável e as ilimitadas possibilidades criativas tornam esse 
aplicativo gráfico uma ferramenta poderosa para artistas e ilustradores digitais.
Figura 6 - CorelDraw
Fonte: Pro Crack Softwares ([2016], on-line)5.
Softwares e Ferramentas Aplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
163
ICONFINDER
IconFinder é um ótimo recurso 
on-line gratuito para web designers, 
que os ajuda a pesquisar milhares de 
ícones de web por palavras-chave ou 
pesquisá-los por conjuntos de íco-
nes e etiquetas. Encontrar ícones com 
IconFinder é muito fácil. Ele lhe dá 
uma opção para filtrar os resultados 
por tamanho dos ícones, cor de fundo 
e fazer download de qualquer ícone 
com um clique no formato PNG ou 
ICO. 
DAFONT 
Como estudamos no capítulo 
anterior, as fontes podem nos 
auxiliar no momento de desen-
volver uma comunicação visual 
eficiente para nossos clientes. 
Para isso, temos uma ótima 
alternativa que pode auxiliar os 
designers no processo de cria-
ção. O Dafont é um excelente 
site que permite que os web 
designers procurem diversas 
fontes por ordem alfabética, por 
temas, por autor ou pela popu-
laridade. A maioria das fontes 
é grátis para download.
Figura 7 - Milhares de ícones de web
Figura 8 - Dafont
Fonte: Interpretation By Design ([2016], on-line)⁶.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E164
CREATELY 
Creately vem com as melhores capacidades para tornar a colaboração entre os 
membros da equipe mais fácil e melhor. Hoje, além de apoiar a muitos tipos de 
diagrama é muito focado no Wireframes Web, sitemaps e fluxos de página que 
são usadas por designers e desenvolvedores web todos os dias. 
Creately é uma ferramenta super completa para a criação de diagramas 
dos mais diversos tipos, desde diagramas UML até fluxogramas e desenhos que 
mostrem detalhadamente o comportamento de uma rede de computadores, 
por exemplo. Uma característica do Creately é sua interface amigável e simples, 
com uma barra de ferramentas posicionada no topo da janela, reúne algumas 
das principais funções do serviço como: salvar, abrir, copiar, colocar, desfazer e 
muitas outras. Como é uma ferramenta on-line, ela se torna mais interessante 
do que suas concorrentes, pois pode ser acessada diretamente de qualquer com-
putador que tenha acesso à Internet.
Figura 9 - Creately
Fonte: a autora.
Softwares e Ferramentas Aplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
165
PIXLR 
Pixlr é um popular software de edição de fotografia avançada. Esta é uma alterna-
tiva próxima ao Adobe Photoshop. Você pode usar as camadas e uma variedade de 
filtros e efeitos. O interessante dessa opção é que ela está disponível gratuitamente. 
Figura 10 - Pixlr 
Fonte: a autora.
COLOR SCHEME DESIGNER 
Color Scheme Designer é uma ferramenta on-line que oferece uma ampla gama 
de ferramentas para ajudar os designers a chegar à paleta de cores desejadas. 
Possui uma interface baseada em web sofisticada, o que facilita muito sua uti-
lização. A melhor parte disto é que permite exportar a sua paleta de cores para 
diversos formatos. 
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E166
Figura 11 - Color Scheme Designer 
Fonte: Song and Dance ([2016], on-line)7.
COLOR IMPACT
Color Impact é uma ferramenta profissional para a criação de esquemas de cores 
harmoniosas, baseadas na roda de cores. Essa aplicação possui uma interface 
bem organizada e intuitiva. Os esquemas de cores podem ser exportados como 
paletas do Photoshop, arquivos CSS ou simplesmente copiados para o clipbo-
ard e colado em seu aplicativo de desenho favorito.
 
Softwares e Ferramentas Aplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
167
BRUSHEEZY 
Brusheezy é um site muito interessante, pois oferece 
uma série de brushes do Photoshop para download. 
A melhor parte é que Designers também são convi-
dados a contribuir com os seus conjuntos de brushes.
COLOROTATE 
ColoRotate é um serviço baseado na web que permite aos designers ver e editar 
cores em 3D. Esse aplicativo mostra o caráter multidimensional das cores e as 
relações entre as cores. ColoRotate também dá aos designers a possibilidade de 
editar plano e cores de fundo, bem como criar e adicionar em amostras de cores.
Figura 12 - ColoRotate 
Fonte: JuElpo Design ([2016], on-line)8.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E168
WUFOO
Wufoo é uma aplicação que permite gerar uma grande variedade de formas. 
Algumas das formas disponíveis incluem formulários de contato, pesquisas, convi-
tes, quizzes e planejadores. Há ainda modelos disponíveis que lhe darão um ponto 
de partida para os seus formulários, que você pode personalizar como desejar.
 
BROWSERSHOTS
Browsershots é uma ferramenta que faz screenshots do seu web design em diferen-
tes sistemas operacionais e navegadores . É uma aplicação web on-line de código 
aberto, que oferece aos desenvolvedores web uma maneira conveniente de tes-
tar a compatibilidade do navegador do seu site em um 
só lugar. Muito indicado para web designers 
que querem visualizar a compatibi-
lidade do site.
 
Softwares e Ferramentas Aplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
169
DROPLR
Droplr é uma ferramenta de compartilhamento desenvolvida para quem trabalha 
com criação para web (como designer e devs), seja em times pequenos ou gran-
des. Com o aplicativo Droplr, você pode capturar telas e criar imagens, GIFs e 
vídeos rapidamente. E o melhor de tudo é que compartilhar os links e transferir 
arquivos de dispositivo para dispositivo se tornam tarefas extremamente fáceis.
É muito fácil de usar: upload > compartilhe. Droplr está disponível para 
Windows, Mac, iOS e outros apps de terceiros. Você pode compartilhar códigos, 
vídeos, imagens, arquivos, documentos, notas e o que mais você pensar. Uma 
versão básica permite um compartilhamento mínimo.
Figura 13 - Droplr
Fonte: Droplr ([2016], on-line)9.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E170
TYPEKIT
O software TypeKit disponibiliza um 
banco de dados de fonte para serem 
usados no seu texto na web. É possí-
vel utilizar essas fontes, adicionando 
algumas linhas no código da página.
SIDR
Esse é um plugin jQuery 
para criar menus late-
rais. Se você já usou o 
Facebook mobile, pode 
querer uma implemen-tação parecida. Sidr te dá 
isso. É, provavelmente, a 
melhor ferramenta que 
você pode usar para colo-
car menus laterais nos 
seus projetos web sem ter 
que escrever uma única 
linha de código! Sidr traba-
lha para carregar os menus laterais em equipamentos touch screen e tem opções 
tanto para uso no lado direito como no esquerdo. Não é apenas um menu late-
ral com links, você pode adicionar conteúdo e outras coisas. E a melhor parte: 
é responsivo!
Figura 14 - Utilização de banco de fontes
Figura 15 - Utilização de banco de fontes
Softwares e Ferramentas Aplicadas ao Design Gráfico
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
171
MASONRY
Masonry é uma biblioteca JavaScript 
para grids de layout em cascata, para 
web designers. A ferramenta é um grid 
responsivo que alinha os elementos em 
posições otimizadas, de maneira arru-
mada, com base na disponibilidade de 
espaço vertical. Masonry usa JavaScript 
por padrão, mas também funciona com 
jQuery.
BALSAMIQ MOCKUPS
O Balsamiq Mockups é um software 
simples (Windows e Mac) para cria-
ção de Wireframes. Ele possui uma 
vasta biblioteca de componentes e 
ícones prontos para serem usados em 
seu projeto. Você simplesmente clica, 
arrasta e dimensiona os itens dese-
jados, podendo ainda fazer diversas 
customizações.
 
Figura 16 - Layout em cascata
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E172
FERRAMENTAS PARA WEB DESIGN RESPONSIVO
Caro(a) aluno(a), hoje em dia, com o crescimento acelerado do uso de disposi-
tivos móveis, as pessoas navegam mais na Internet por meio deles do que pelos 
computadores. Com isso, estamos inseridos em um universo em que o acesso à 
Web é feito por meio de vários tamanhos de tela.
Somado a isso, temos um consumidor cada vez mais exigente e que se habi-
tua com uma navegablidade de fácil intuição, no momento de surfar pelas ondas 
da Internet. Então, você como desenvolvedor web, precisa ficar atento a detalhes 
acerca da facilidade de uso de seu site. 
Nesse cenário, temos a necessidade de que as páginas para a internet se adap-
tem de acordo com os dispositivos que estão sendo utilizados para visitá-las. 
Surge, então, a responsividade. Com esse crescimento de uso nos mais diversos 
dispositivos móveis, é preciso, então, que o designer tenha acesso a ferramentas 
que atendam a essa necessidade. Confira agora algumas ferramentas para web 
design responsivo. 
WEBFLOW
O Webflow é um web app que se destaca na versatilidade. Se você usar ferramen-
tas de design só para a criação de interfaces, ficará satisfeito com os controles 
intuitivos do app. Mas há uma outra camada da ferramenta com certo apelo: a 
otimização e aceleração da hospedagem com backup de site para a criação de 
protótipos. É possível especificá-lo e ter uma produção de código pronta para 
Ferramentas Para Web Design Responsivo
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
173
ser hospedada, tudo dentro do Webflow. A ferramenta permite que você veja o 
projeto em tempo real, exatamente da forma como ficará. As funcionalidades e 
interações também são simples e permitem agilidade no processo.
Figura 17 - Webflow
Fonte: Webflow ([2016], on-line)11.
FROONT
O Froont é uma ferramenta que usa regras de breakpoints, controles de grid e 
uma porção de outros recursos focados em responsividade. Provavelmente, a 
maior diferença entre o Froont e as outras ferramentas tem a ver com a sua car-
teira. O aplicativo é totalmente grátis para publicação de sites públicos e oferece 
códigos HTML e CSS, que você gostaria de usar em qualquer lugar do projeto. 
O web app também tem um ambiente de testes facilitado e ajuste de breakpoints 
com foco no conteúdo. 
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E174
Figura 18 - Froont
Fonte: Slant ([2016], on-line)12.
EDGE REFLOW CC
O Reflow é o app de design responsivo. É focado em ajudar designers a comunica-
rem suas visões e intenções responsivas. No Reflow, a tela é fluída e os elementos 
são dependentes, permitindo que você comunique melhor como elementos se 
adaptam a diferentes tamanhos de tela, tanto para clientes (que são mais leigos) 
quanto para desenvolvedores. Ela auxilia no desenvolvimento de layouts adap-
táveis para múltiplos tamanhos de telas e/ou dispositivos, mantendo a estética 
desejada e seguindo todos os padrões da web.
Figura 19 - Exemplo de elementos de um site
Ferramentas Para Web Design Responsivo
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
175
MACAW
Macaw é uma ferramenta que tem interface de usuário compatível com CSS e 
breakpoints responsivos em uma tela fluída. O Macaw se define como “uma fer-
ramenta de design code-savy”. Isso significa que produzir códigos de qualidade 
é um recurso do app, algo que o diferencia da concorrência. Ele consegue esses 
códigos mais limpos por meio de um mecanismo chamado Alchemy. É ele que 
produz linhas de HTML e CSS dignas de um desenvolvedor experiente.
Figura 20 - Macaw
Fonte: Macaw ([2016], on-line)13.
IPLOTZ 
iPlotz é uma solução on-line – um autêntico representante da categoria SaaS 
(Software-as-a-Service) – para criação de protótipos de tela (user interface 
mockups). Com iPlotz é possível criar rapidamente Mockups e Wireframes nave-
gáveis e clicáveis para a prototipação de sites e aplicativos, em geral.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E176
Figura 21 - iPlotz 
Fonte: iPlotz Blog ([2016], on-line)14.
Estudo de Caso
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
177
ESTUDO DE CASO
DESIGN RESPONSIVO NA PRÁTICA: DO RASCUNHO AO DIGITAL 
Ao iniciar um projeto web, você pode estar se perguntando: Por onde começar? 
Para entender o básico para iniciar um projeto web, vamos começar com dicas 
de prototipagem para design responsivo e vamos criar um layout do wireframe ao 
design final. Assim, recomendo que você acompanhe este passo a passo, o qual 
você poderá adaptá-lo para o seu fluxo de trabalho pessoal. Essas dicas são um 
bom ponto de partida para você iniciar um projeto web. Preparados(a) para iniciar?
Conteúdo do projeto
O primeiro passo para iniciar um projeto web, neste caso, um site responsivo, 
é o conteúdo. O conteúdo dita qual é a melhor estrutura para o layout do site. 
Como saber qual conteúdo usar? Você poderá pensar: como o cliente do pro-
jeto. Mas, raramente, o cliente possui os textos, vídeos e imagens finais, prontos 
para serem usados. O ideal é sempre ter a noção de qual é o tipo de conteúdo 
que será utilizado.
No primeiro capítulo do livro, estudamos sobre algumas técnicas que ajudam 
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E178
a iniciar um projeto web. E vamos iniciar montando um briefing. Pois para ini-
ciar, é importante saber a resposta de algumas perguntas básicas sobre o tipo de 
conteúdo que você pretende apresentar ao seu cliente.
O que será exibido na página inicial? Notícias? Serviços? Produtos? Imagens? 
Qual o tamanho médio dos textos? Existirá um espaço destinado a anúncios 
publicitários? Qual é o formato do logotipo? Com estas respostas, está na hora 
de organizar todos estes elementos em uma estrutura lógica.
Vamos projetar um layout de uma página inicial de uma empresa fictícia 
(você poderá inventar um nome, conforme achar melhor) que deve conter as 
seguintesinformações:
1. Logotipo da empresa.
2. Navegação da página.
3. Banners apresentando produtos e serviços.
4. Blocos com imagens e textos curtos.
5. Créditos do designer.
Iniciando o layout
Por onde começar a criar o layout do nosso projeto web? Pelo papel. Você pode 
usar um bloco de notas, uma página em branco, um caderno, um rascunho, ou 
poderá usar um template impresso da internet, mas comece por um rascunho 
de wireframe no papel. Comece desenhando o básico: uma teia de navegação, 
do tipo “que-link-leva-para-onde” e o esqueleto básico do site.
Não se preocupe se não for bonito, é apenas um rascunho. Use quadrados 
para imagens e linhas para texto. O importante de que você e o resto da sua equipe 
tenham um ponto de partida para o site. O ideal é criar ao menos três versões 
principais: desktops, tablets e smartphones. Você pode se perguntar: Por quê? 
Precisamos ter um ponto de partida e escolher por qual dos três começar é uma 
questão pessoal ou de projeto. Vamos começar pelo desktop.
Estudo de Caso
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
179
Trabalhando com Grids
Aprendemos no capítulo 3 sobre Design Responsivo, no qual as páginas da web 
são adaptáveis, ou seja, o layout da página se adapta à resolução da tela do dispo-
sitivo do usuário. Seria como montar um quebra-cabeça no qual se pode esticar, 
encolher, quebrar e dobrar estruturas. Para realizar essa tarefa será muito mais 
fácil se construirmos um layout trabalhando com grids.
Nesta fase, não precisa criar um grid em seu CSS (embora seja uma prática 
recomendável), mas se o seu Wireframe (também falamos sobre ele no capítulo 
3) estiver organizado, com grids, ajuda bastante na hora de projetar o design. 
O primeiro passo é criar o grid (também visto no capítulo 3), que é basi-
camente um conjunto de linhas “invisíveis” que vão sustentar o design. Aqui, 
vamos ter que quebrar esta estrutura em pedaços menores e, para manter a sime-
tria o ideal é escolher um número par que possa ser divisível por 2, 3 e/ou 4… 
Por isto grids de 12, 16, 18 ou 24 colunas são bem comuns. Não se esqueça do 
espaço das margens entre as colunas.
Desktops
Agora, vamos a um exemplo de wireframe que vamos criar passo a passo. A estru-
tura é bem simples: um logotipo no canto superior esquerdo, um menu no topo 
à direita, um banner, 4 destaques com texto e foto e um rodapé.
Figura 22 - Exemplo de wireframe
Fonte: a autora.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E180
E, agora o mesmo modelo recriado no Photoshop. Mas, você pode usar outras 
ferramentas para criar o wireframes, como o Creately ou Balsamiq Mockups. 
 
Figura 23 - Modelo recriado no Photoshop
Fonte: Tableless ([2016], on-line)15.
Tablets
Para adaptar a técnica para tablets é simples. Diminua o número de colunas no 
grid. Se inicialmente tínhamos 16 colunas no desktop, teremos 10 no tablets, 
por exemplo. O conteúdo deve se rearranjar para caber nesta estrutura menor. 
Então no tablets ao invés de 4 destaques lado a lado temos duas fileiras com 2 
destaques cada. Para se adequar a essas mudanças as imagens ficaram maiores. 
Outra modificação, deve ser um ajuste no tamanho do texto do menu.
Estudo de Caso
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
181
 
Figura 24 - Modelo recriado no Photoshop
Fonte: Tableless ([2016], on-line)15.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E182
Smartphones
Para smartphones, onde a tela é ainda menor, é necessário rearranjar as estrutu-
ras novamente e fazer outros ajustes. Isto não significa necessariamente diminuir 
os elementos de tamanho. Lembre-se que a maior parte dos dispositivos móveis 
utilizam touch screens. Você deve adaptar os elementos considerando esta área 
de toque. Links muito pequenos e juntinhos são difíceis selecionar. O ideal é que 
o usuário possa navegar no site sem precisar dar zoom. Por isso, vamos usar um 
menu drop-down. Os destaques agora ocupam o espaço total do wrap. 
 
Figura 25 - Smartphones
Fonte: Tableless ([2016], on-line)16.
Estudo de Caso
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
183
Resoluções
Existem dezenas de resoluções diferentes e, embora este seja o objetivo final, é 
bem difícil ter um layout que vai ficar perfeito a cada ponto de quebra. O ideal, 
portanto, é conhecer os formatos mais comuns e tentar focar para que o design 
criado esteja funcionando perfeitamente para estas resoluções. 
A seguir, uma lista com as resoluções básicas que podem ser utilizadas:
 ■ 1200 pixels – Desktops com monitores widescreen.
 ■ 960 pixels – Tablets em formato paisagem e monitores antigos.
 ■ 768 pixels – Tablets em formato retrato.
 ■ 480 pixels – Smartphones em formato paisagem.
 ■ 320 pixels – Smartphones em formato retrato.
O mock-up
Hora de criar o mock-up no seu programa gráfico favorito. Você pode montar 
o seu próprio grid utilizando linhas guias ou baixar um modelo pronto como 
(Responsive Grid PSD ou o Frameless).
O design gráfico está sujeito aos desafios impostos pelas tendências inte-
lectuais e estéticas que influenciam o trabalho dos designers, que de modo 
geral, refletem as atitudes da sociedade.
(Ambrose e Harris)
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E184
Iniciando o desenvolvimento de um site
O ideal é criar modelos estáticos para serem aprovados pelos clientes antes de 
partir para a etapa de desenvolvimento. O modelo estático, mesmo se nenhum 
conteúdo for fornecido previamente, utilizar imagens e textos parecidos com os 
finais ajudam o seu layout a ser aprovado pelo cliente. Para o nosso exemplo, 
vamos usar site da empresa fictícia Space Tour.
Figura 26 - Exemplo de conteúdo
Fonte: Tableless ([2016], on-line)17.
Caro(a) aluno(a), mesmo com um conteúdo falso aplicado ainda é difícil de ima-
ginar como o produto final vai se comportar on-line, principalmente no caso 
de dispositivos móveis. Para que o cliente possa visualizar como o layout vai se 
comportar é interessante utilizar mock-ups de hardwares reais. Basta procu-
rar no Google que existem diversos recursos gratuitos para este fim. O site PSD 
Covers, por exemplo, possui actions e templates de Photoshop em alta resolu-
ção que podem ajudar bastante na apresentação final.
Estudo de Caso
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
185
Figura 27 - Exemplo para Tablet
Fonte: Tableless ([2016], on-line)18.
Figura 28 - Exemplo Smartphone
Fonte: Tableless ([2016], on-line)19.
Caro(a) aluno(a), com a prática, este processo se torna cada vez mais fácil e 
natural. Ao observar um layout, mentalmente, você consegue visualizar e, em 
alguns casos, estas fases deste processo podem ser puladas. Você pode, por exem-
plo, trabalhar com apenas dois formatos de wireframe: um para computadores/
tablets e um para smartphones. Existem pessoas que preferem ainda queimar 
completamente estas etapas e desenvolver diretamente no CSS. Cada um tem o 
seu modo de trabalho e nenhum é necessariamente melhor ou pior que o outro. 
Vale a pena testar diferentes abordagens até encontrar o que funciona melhor 
para você, sua equipe e seus clientes.
FERRAMENTAS APLICADAS AO DESIGN GRÁFICO
Reprodução proibida. A
rt. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
VU N I D A D E186
Design Responsivo é um princípio de desenvolvimento para Web cujo obje-
tivo é adaptar o layout das páginas aqualquer dispositivo, tela e resolução, 
com objetivo de garantir a boa experiência do usuário, possibilitando nave-
gação e leitura confortáveis sem comprometer o conteúdo. 
[...]
O conceito foi criado em 2010 no artigo “Responsive Web Design” escrito 
por Ethan Marcotte (2010) no blog “A List Apart”. O autor propõe que, em 
vez de desenvolver um design para cada dispositivo, deveria ser projeta-
do um único código que adaptasse o Layout para as diferentes telas, por 
meio de tecnologias padronizadas (HyperText Markup Language [HTML] e 
Cascading Style Sheets [CSS]). Antes do Design Responsivo, era comum a 
criação de uma ou mais versões Mobile do mesmo site, o que dificultava a 
manutenção do conteúdo.
Fonte: Silva (2014, on-line)20.
 
 
 
 
 
 
Considerações Finais
Re
pr
od
uç
ão
 p
ro
ib
id
a.
 A
rt
. 1
84
 d
o 
Có
di
go
 P
en
al
 e
 L
ei
 9
.6
10
 d
e 
19
 d
e 
fe
ve
re
iro
 d
e 
19
98
.
187
CONSIDERAÇÕES FINAIS
Prezado(a) aluno(a)! Chegamos ao final da última unidade do nosso livro. 
Estudamos nesta unidade alguns softwares, ferramentas e plug-ins disponíveis 
que podem ser aplicados ao design gráfico web.
Esperamos que a partir do conhecimento adquirido com estas ferramentas, 
você procure pesquisar mais, estudar mais, além das que foram citadas no livro, 
pois sempre surgem novas ferramentas, novos softwares para otimizar o trabalho.
O mercado de ferramentas e softwares para Design Gráfico é amplo, muito 
concorrido e com ótimas opções. Portanto, quanto mais conhecimento você tiver 
sobre elas, mas fácil se torna seu trabalho, pois muitas delas ajudam a otimizar 
o tempo e melhorar a qualidade, além de evitar problemas durante o desenvol-
vimento dos seus projetos.
Para encerrar o tópico, acompanhamos um estudo de caso, desde o início 
do seu planejamento, no qual colocamos em prática os conceitos que foram vis-
tos ao longo do livro, até o final, no qual visualizamos a criação de um Design 
responsivo com dois formatos de wireframe: um para computadores/tablets e 
um para smartphones.
Quando surgem novas tecnologias, a maneira como o usuário acessa, visu-
aliza e interage com uma página web muda, pois segue as novas tendências do 
mercado. Um Webdesign está em constante evolução e constante aprendizado.
Portanto, como futuros Web Designers fica a dica: sempre estude, pesquise 
e procure sempre testar diferentes ferramentas e abordagens até encontrar a que 
funciona melhor para você, sua equipe e seus clientes. Use a sua imaginação, a 
sua criatividade e inove! 
Desejamos sucesso em todos os seus projetos!
188 
1. Dependendo da implementação, sites responsivos podem acabar gerando pá-
ginas muito pesadas em dispositivos menores. Já que o código é um só para 
qualquer dispositivo, é comum que problemas de design e implementação for-
cem os navegadores a carregarem conteúdo desnecessariamente pesado em 
smartphones ou tablets. Com base nisso, defina o que é Design Responsivo e 
cite alguns sites que você conhece que são responsivos.
2. Wireframes são uma das partes mais importantes de um projeto web. Desen-
volver wireframes é uma etapa que não pode ser negligenciada, nem abando-
nada. A partir dessa informação, avalie a opção correta:
a. É uma representação de média ou alta fidelidade do projeto final a ser de-
senvolvido e ele, normalmente, simula a interface de interação com o usu-
ário final
b. É um roteiro, um guia visual que fornece a estrutura, o template que será 
usado pelo designer para construir o layout (visual) do seu projeto.
c. Representa visualmente a estrutura da informação, visualizar o conteúdo e 
demonstrar as principais funcionalidades do projeto de uma forma estática, 
é uma simulação de como a interface deve funcionar.
d. É um esboço de como você deseja abordar um projeto particular. Criar antes 
de começar o seu site facilita seu trabalho, pois te dá uma perspectiva global 
do projeto.
e. É uma tendência que se caracteriza pela simplificação dos elementos de in-
terface, tendo o foco na forma, funcionalidade e tecnologia. 
3. O grid nos oferece essa orientação para alinharmos e organizarmos os elemen-
tos com facilidade e precisão. De acordo com a forma dos objetos, eles ficam 
agradáveis e bem organizados. Com base nisso, analise as assertivas e assinale 
a alternativa que aponta a(s) correta(s): 
189 
I. O grid é uma ferramenta essencial para o design gráfico, pois é uma organi-
zação visual dos elementos dentro de um espaço no qual utilizamos linhas 
horizontais e verticais para alinhamento.
II. Grid é a organização visual dos elementos dentro de um espaço utilizando 
linhas horizontais e verticais que se cruzam entre si. 
III. A estrutura de informações no site fica mais concisa e melhor organizada, e 
como não existe padrão, o sistema de grid é feito de acordo com a necessi-
dade do projeto em questão.
IV. O conceito de divisão dos elementos de uma composição surgiu com as 
ideias matemáticas lançadas por Pitágoras e seus seguidores, os quais defi-
niram números como proporções e não unidades individuais.
V. Os itens relacionados entre si devem ser agrupados e aproximados uns dos 
outros para que sejam vistos como um conjunto coeso e não como um ema-
ranhado de partes sem ligação.
Assinale a opção com a sequência CORRETA:
a. Somente as afirmativas I e II estão corretas.
b. Somente as afirmativas I, II, III e V estão corretas.
c. Somente a afirmativas I está correta.
d. Somente as afirmativas I, II, III e IV estão corretas.
e. Todas estão corretas. 
4. O designer gráfico utiliza cores, formas, texturas, imagens, fotografias para mos-
trar um estado e assim convidar o usuário a visualizar e sentir o produto ou a 
página é uma forma de documentar as fontes de inspiração. Qual a maneira 
de visualizar a personalidade e a história de vida de um produto, empresa ou 
organização? 
5. Temos vários softwares, ferramentas, plug-ins disponíveis que podem ser apli-
cadas ao design gráfico. Com elas, podemos evitar problemas e otimizar o tem-
po e a qualidade dos trabalhos. Com base nisso, cite uma ferramenta para tra-
tamento de cor e uma ferramenta popular de edição de fotografia avançada. 
190 
[...]
Frameworks de Design Responsivo
Um dos principais objetivos da Engenharia de Software é o reuso. Por meio da reutiliza-
ção de software obtém-se o aumento da qualidade e redução do esforço de desenvolvi-
mento (GIMENES; HUZITA, 2006). Existem várias formas de reutilização de código, sendo 
uma delas os frameworks. O conceito de framework é definido da seguinte maneira: 
Frameworks, em desenvolvimento de software, é uma abstração que une có-
digos comuns entre vários projetos de software provendo uma funcionalidade 
genérica. Um framework pode atingir uma funcionalidade específica, por con-
figuração, durante a programação de uma aplicação (MULLER, 2008).
Em vez de começar todo projeto do zero, existem frameworks que já trazem uma base 
construída para continuar o desenvolvimento do site [...].
Bootstrap
O Bootstrap é um framework front-end para desenvolvimento de sites responsivos para 
Web. Criado em 2011 por Mark Otto e Jacob Thornton como uma solução interna do 
Twitter para resolver as inconsistências de código dentro de sua equipe de desenvolvi-
mento. Antes não existia nenhum padrão para estrutura de código usada pela equipe. 
Cada engenheiro tinha sua própria maneira de programar, o que dificultava na junção 
dos módulos do projeto posteriormente. A finalidade original do Bootstrap era incenti-
var o uso de uma única estrutura de código, nomenclatura de classes e etc. Pelas equi-
pes de engenharia da empresa. A iniciativa foi bem sucedida, resultando em menos in-
consistências e consequentemente maior rapidez nos projetos.
[...]
O suporte ao design responsivo foi introduzido na versão 2.0, apresentando um novo 
sistema de divisão do site em colunas ou grids que deveria ser ativado pelo usuário in-
cluindo um CSS adicional junto à meta tag [...].
A versão 3.0 do Bootstrap foi lançada no dia emque o projeto completou dois anos de 
existência. Na nova versão, o módulo de design responsivo deixou de ser opcional e foi 
incorporado ao framework vindo ativado por padrão.
[...]
Nessa versão o Bootstrap foi reescrito utilizando a abordagem mobile first, ou seja, tudo 
foi redesenhado de viewports menores até as maiores, focando nos aparelhos móveis e 
aumentando as escalas e proporções até as resoluções de tela maiores. Outras mudan-
ças foram o seletor de elementos mais organizado, a adoção do conceito de design flat, 
os plug-ins Javascript foram reescritos e os ícones foram substituídos por Glyphicons, 
que são ícones em formato de fonte.
Os Glyphicons foram criados pela empresa de mesmo nome e foram fornecidos de forma 
191 
gratuita somente para o uso do Bootstrap. Por terem sido concebidos no formato de 
fonte, os ícones se adaptam ao tamanho dos containers, possuem melhor contraste com 
o fundo do objeto e suas cores podem ser ajustadas para se adequar ao texto, reduzindo 
o trabalho do time de designers [...].
 
Skeleton
[...]
O Skeleton consiste em um grid responsivo que vai até 960 pixels e arquivos CSS para 
tipografia, botões, formulários e media queries.
 [...]
Comparação entre Frameworks
Nesta seção são estabelecidos algumas comparações sobre os frameworks abordados 
nas seções anteriores. Todos os citados são um ótimo ponto de partida para o desen-
volvimento rápido de sites responsivos. As soluções são extensivamente testadas antes 
de seu lançamento para o público e são continuamente aprimoradas e otimizadas com 
novas versões, sendo menos um trabalho para o desenvolvedor na construção de um 
site. Os três frameworks citados funcionam com um sistema de grid básico. Cada página 
é construída com linhas ou fileiras e cada uma contém o mesmo número de colunas. O 
Bootstrap e o Foundation utilizam 12 colunas por fileira enquanto o grid do Skeleton 
utiliza 16 colunas. Cada elemento pode ocupar quantas colunas for necessário, desde 
que uma linha no total ocupe 12 colunas ou 16 no caso do Skeleton.
O Skeleton é um framework leve e simples, porém seu template vai apenas até 960 pixels 
de largura. Se o layout do projeto ultrapassa essa medida ou é necessário dar suporte a 
resoluções maiores como, por exemplo, a resolução Full HD (1920 pixels x1080 pixels) é 
recomendado considerar outro framework para construir o site. Enquanto o Bootstrap e 
o Foundation têm vários componentes adicionais além do sistema de grid, o Skeleton 
tem uma abordagem mais “bare bone” (em tradução livre, básica). Ele até fornece alguns 
recursos pré-configurados como tabelas, formulários e botões, mas em quantidade bem 
menor que os seus concorrentes, sendo o que menos oferece widgets e elementos de 
interface de usuário por padrão dos três comparados. O objetivo do Skeleton é ser uma 
ferramenta que sirva para qualquer design e que mesmo básica ainda seja uma ferra-
menta para o desenvolvimento rápido de sites. É mais recomendado se já existe um 
layout e elementos prontos e só se quer utilizar a estrutura deste framework.
O Bootstrap é bastante popular, logo é comum encontrar na internet soluções e plug-ins 
para o framework e até templates prontos que utilizem sua estrutura de codificação. Isto 
inclui botões, formulários, barras de progresso, barra de navegação, breadcrumbs (auxi-
liares de navegação, geralmente no topo da página, que indicam o nível hierárquico do 
site) e vários elementos CSS por padrão. Também fornece elementos Javascript como 
192 
carousels, modals, alerts e tabs. Estes elementos são muito úteis para construir rapida-
mente um website com poucas linhas de programação. Também possui uma maneira 
bem intuitiva de mostrar ou esconder conteúdos de acordo com o dispositivo com no-
mes de classes como “visible-phone”, “visible-tablet”, e “hidden-phone”. No entanto, suas 
maiores críticas são os nomes muito grandes e pouco intuitivos das classes CSS e fun-
ções [...].
Fonte: adaptado Silva (2014, on-line)20.
Material Complementar
MATERIAL COMPLEMENTAR
Isto é Design Thinking de Serviços
Autor: Marc Stickdorn
Editora: Bookman
Ano: 2014
Sinopse: a fronteira entre produtos e serviços está cada vez mais difusa, é hora de pensarmos de um 
jeito diferente: isto é Design Thinking de Serviços. Escrito com as mesmas abordagens cocriativas que 
introduz, esse livro apresenta uma perspectiva interdisciplinar ao design de serviços – tema que vem 
despertando interesse dos mais diversos campos. O livro está estruturado em 3 seções: Fundamentos 
apresenta os conceitos do design thinking de serviços e traz uma seleção de perspectivas individuais, 
mostrando as semelhanças e diferenças entre as áreas envolvidas no processo. Ferramentas explica 
o processo iterativo do design de serviços e apresenta 25 ferramentas de design adaptáveis. Casos 
mostram como fundamentos, processos e ferramentas funcionam na prática por meio de estudos de 
caso internacionais. Ao � nal, artigos re� etem sobre a situação atual da pesquisa na área e inserem o 
design thinking de serviços em um contexto � losó� co.
O que todo Web Designer Precisa Saber 
Ar tigo que mostra as ferramentas que você precisa dominar para conseguir um trabalho na área 
de web design e tudo o que um Web designer precisa saber. Ótimo artigo. Disponível em: <http://
chiefofdesign.com.br/o-que-todo-web-designer-precisa-saber-ferramentas-de-web-design/>.
Os smartwatches e o design responsivo
Artigo que mostra como os designers do mundo todo precisaram se adaptar a essa nova 
realidade onde usuários acessam conteúdo web de dispositivos que possuem centenas de 
tamanhos de telas diferentes. Excelente artigo. Disponível em: <http://arquiteturadeinformacao.
com/responsive-design/os-smartwatches-e-o-design-responsivo/>.
REFERÊNCIAS
AMBROSE, G.; HARRIS, P. Fundamentos de Design Criativo. Porto Alegre: Bookman, 
2012.
REFERÊNCIAS ON-LINE
1 Em: <http://www.nvpita.com/adobe-illustrator.html>. Acesso em: 11 out. 2016.
2 Em: <http://www.theappnews.com/wp-content/uploads/2012/01/lightroom4_
beta.jpg>. Acesso em: 11 out. 2016.
3 Em: <https://thefearlesspenguin.files.wordpress.com/2012/06/screenshot-
-gimp2-8.jpg>. Acesso em: 11 out. 2016.
4 Em: <https://www.macupdate.com/app/mac/18954/inkscape>. Acesso em: 11 
out. 2016.
5 Em: <http://procracksoftwares.com/wp-content/uploads/2016/07/Corel-Draw-X-
7-Serial-Number-And-Keygen-Full-Download.-2.jpg>. Acesso em: 11 out. 2016.
6 Em: <http://www.interpretationbydesign.com/wp-content/uploads/2009/06/da-
font.jpg>. Acesso em: 11 out. 2016.
7 Em: <http://songanddance.typepad.com/song-dance/2013/06/color-scheme-de-
signer.html >. Acesso em: 11 out. 2016.
8 Em: <https://juelpodesign.wordpress.com/category/interiores/>. Acesso em: 11 
out. 2016.
9 Em: <http://droplr.com/blog/page/3>. Acesso em: 11 out. 2016.
10 Em: <http://codegeekz.com/wp-content/uploads/sidr3.jpg>. Acesso em: 11 out. 
2016.
11 Em: <http://insanetool.net/wp-content/uploads/2015/11/webflow.png>. Acesso 
em: 11 out. 2016.
12 Em: <https://www.slant.co/options/5285/~froont-review>. Acesso em: 11 out. 
2016.
13 Em: <http://tableless.com.br/macaw-o-que-voce-ve-e-o-que-voce-tem/>. Aces-
so em: 11 out. 2016.
14 Em: <https://iplotzblog.files.wordpress.com/2012/07/iplotz_large.jpg>. Acesso 
em: 11 out. 2016.
15 Em: <http://tableless.com.br/wp-content/uploads/2013/04/wireframe-desktop.
jpg>. Acesso em: 11 out. 2016.
REFERÊNCIAS
195
16 Em: <http://tableless.com.br/wp-content/uploads/2013/04/wireframe-smar-
tphone.jpg>. Acesso em: 11 out. 2016.
17 Em: <http://tableless.com.br/wp-content/uploads/2013/04/wifreframe.jpg>. 
Acesso em: 11 out. 2016.
18 Em: <http://tableless.com.br/wp-content/uploads/2013/04/mockup-ipad.jpg>. 
Acesso em: 11 out. 2016.
19 Em: <http://tableless.com.br/wp-content/uploads/2013/04/mockup-smartpho-
ne.jpg>. Acesso em: 11 out. 2016.
20 Em: <http://bsi.uniriotec.br/tcc/201412Almeida.pdf>. Acesso em: 11 out. 2016.
GABARITO
1. No Design Responsivo, as páginas da web são adaptáveis, ou seja, o layout dapágina se adapta à resolução da tela do dispositivo do usuário. O conceito de 
Design Responsivo pode ser definido como uma forma de tornar os sites mais 
adaptáveis, podendo facilmente ser visualizados e utilizados em qualquer tipo 
de dispositivo. Exemplo de site: g1.globo.com.
2. b) Wireframe é um roteiro, um guia visual que fornece a estrutura, o template 
que será usado pelo designer para construir o layout (visual) do seu projeto. 
3. 3. d) Somente as afirmativas I, II, III e IV estão corretas.
4. Um brandbook é uma maneira de visualizar a personalidade e a história de vida 
de um produto, empresa ou organização. Um brandbook tem mais a ver com 
linguagem, atitudes e ideias do que com produtos. 
5. Ferramenta para tratamento de cor: pode ser ColoRotate e Pixlr é um popular 
software de edição de fotografia avançada, esta é uma alternativa próxima ao 
Adobe Photoshop.
CONCLUSÃO
197
Caro(a) aluno(a), assim terminamos nossa jornada. Foram cinco unidades da disci-
plina de Design Gráfico que conhecemos o mundo encantado das imagens, foto-
grafias, cores e gifs animados que são usadas nas páginas Web.
Inicialmente, na primeira unidade, falamos sobre o Design Gráfico e como ele de-
pende do seu público para ter sucesso nos seus projetos. E para isso, é necessário 
entender o que o público deseja, o que ele realmente precisa e espera para se co-
municar. Os processos de designs, seus conceitos e técnicas que serão a base para 
o desenvolvimento do processo de design gráfico. Alguns dos conceitos que vamos 
estudar são: Brainstorming, Briefing, Design Thinking, UX Design e UI Design.
Na sequência, na segunda unidade, estudamos alguns elementos importantes que 
fazem parte da identidade visual, como o logotipo, o símbolo, a marca, as cores, o 
alfabeto usado e ainda alguns acessórios que ajudam a divulgar a empresa no mer-
cado como a mascote e os grafismos.
Depois, chegamos na terceira unidade na qual conhecemos algumas técnicas que 
são voltadas à criação da estrutura de uma página, como o layout visual, a criação 
de protótipos, de rascunhos, de esboços como: Wireframe, Protótipo, Mock-up e 
Storyboard e aprendemos um pouco sobre Design Responsivo, Flat Design e Ske-
uomorphism.
Na quarta unidade, estudamos sobre a teoria das cores, as propriedades fundamen-
tais da luz que ocorrem na natureza: essas cores podem ser criadas a partir do ver-
melho, do verde e do azul e essa é a base do modelo de cores RGB e o modelo de 
cores CMYK baseia-se na subtração da cor. Estudamos sobre a Tipografia e como ela 
é essencial para os designers gráficos. Aprendemos sobre a noção do pixel como 
uma medida da qualidade das imagens e sobre alguns tipos de imagens, como as 
imagens vetoriais e imagens rasterizada ou bitmap.
Na última unidade, conhecemos algumas ferramentas, softwares e plugins que são 
utilizados na área de Design Gráfico. Estas ferramentas irão te ajudar a evitar proble-
mas e que otimizarão o tempo e a qualidade dos trabalhos desenvolvidos. Assim, 
não pare por aqui! Desejamos a você muito sucesso, sempre!
CONCLUSÃO