DESIGN GRÁFICO

Professora Esp. Janaina Aparecida de Freitas

GRADUAÇÃO

Unicesumar
 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
C397 CENTRO UNIVERSITÁRIO DE MARINGÁ. Núcleo de Educação a
Distância; FREITAS, Janaina Aparecida de. Isabela Agulhon
Iconografia
Design Gráfico. Janaina Aparecida de Freitas.
(Reimpressão revista e atualizada)
Ana Carolina Martins Prado
Maringá-Pr.: UniCesumar, 2017. Projeto Gráfico
197 p. Jaime de Marchi Junior
“Graduação - EaD”.
José Jhonny Coelho

1. Design 2. Gráfico . 3. EaD. I. Título. Arte Capa
André Morais de Freitas
CDD - 22 ed. 741.6
CIP - NBR 12899 - AACR/2 Editoração
Fernando Henrique Mendes
Revisão Textual
Daniela Ferreira dos Santos
Ficha catalográfica elaborada pelo bibliotecário
Kaio Vinicius Cardoso Gomes
João Vivaldo de Souza - CRB-8 - 6828 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.
 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,
Diretoria de
transformamos também a sociedade na qual estamos
Planejamento de Ensino
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
Diretoria Operacional
este processo, pois conforme Freire (1996): “Os homens
de Ensino
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.
AUTOR

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.
APRESENTAÇÃO

DESIGN GRÁFICO

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

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!
 09
SUMÁRIO

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
 10
SUMÁRIO

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
 11
SUMÁRIO

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
Professora Esp. Janaína Aparecida de Freitas

HISTÓRIA DA ARTE E DO

I
UNIDADE
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
 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,
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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!

Introdução
16 UNIDADE I

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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?

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 17
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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?

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áfico

18 UNIDADE I

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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

■■ 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

20 UNIDADE I

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

 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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

22 UNIDADE I

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

 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).
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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)

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-

História da Arte e do Design Gráfico

24 UNIDADE I

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 é

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 25

INTRODUÇÃO AO PROCESSO DE DESIGN

Conforme Lupton (2013, p. 04), “[...] o processo de design é uma mistura de ações
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Introdução ao Processo de Design

26 UNIDADE I

Sobre a capacidade de ser criativo, Lupton (2013, p. 04) explica:

praticamente qualquer pessoa pode aprender a melhorar suas capaci-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Briefing
28 UNIDADE I

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 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?
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

O que você realmente quer? O que você

não quer de jeito nenhum? Quais preo-
O QUE ELE cupações te atormentam? O QUE ELE
ESCUTA? Quais suas maiores aspirações? VÊ?
Como o ambiente te Como você percebe as
influencia? O que seus opções? Como é a casa dos
amigos, vizinhos e seus vizinhos, amigos e
familiares te dizem? Quem familiares? O que as outras
realmente influencia? O pessoas estão fazendo por
que eles esperam? O que a ai? O que aparece na mídia
mídia diz?
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 QUAIS SÃO OS

DORES? OBJETIVOS?
O que pode dar errado? O que seria muito Qual o projeto ideal? Onde você quer
ruim se acontecesse? Quais obstáculos estão a chegar? O que é extremamente desejável?
sua frente? Qual o maior obstáculo entre você Como você mede o sucesso?
e suas aspirações?

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.

Design Thinking
30 UNIDADE I

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
OB

observam as “coisas”, que se

transforma numa poderosa
SE

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
ferramenta, composta de
RV

Ferramenta inferências e ciclos de teste.

AÇ

utilizada para ver

“coisas” que outros
ÃO

não veem, ou seja,

temos que ver e ouvir IMAGINAÇÃO
tudo que for referente
ao projeto que está
ÃO

sendo desenvolvido,
cuidadosamente e
AÇ

de uma maneira
UR

sensível. Ferramenta
responsável pelo
FIG

entendimento, à
tradução da ideia do
N

cliente.
CO

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:

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 31

IMERSÃO COCRIAÇÃO PROTOTIPAÇÃO

Conjunto de técnicas Nessa fase, designers, Protótipos de baixo

para conhecer em clientes e demais custo são feitos para
profundidade as ne- interessados criam e que as soluções
cessidades e expecta- desenvolvem juntos sejam experimenta-
tivas do cliente. as possíveis soluções. das antes de imple-
mentadas.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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
el
áv

Út
Us

il

Estimular Contar
os Boas
Desejável
Sentidos Histórias

Figura 5 - Boas experiências criam emoções - A Santíssima Trindade das experiências digitais
Fonte: Negrini (2004, p. 45).

Design Thinking
32 UNIDADE I

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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: <[Link]

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 33
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Sprinting
34 UNIDADE I

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 6 - Exemplo de Layout de Jornal

Figura 7 - UX Design
Fonte: Ferreira (2014, p. 05).

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 Lado emocional

Elementos consistentes Facilidade de uso
O famoso designer 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.

Sprinting
36 UNIDADE I

■■ 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?

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 37

Criar websites pelo simples ato de criar, não irá agregar valor a sua marca e
ao seu negócio.
(José Roberto Martins)
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Considerações Finais
38 UNIDADE I

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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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, vamos seguir para a próxima unidade.
Boa leitura e bons estudos!

HISTÓRIA DA ARTE E DO DESIGN GRÁFICO

 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 depende do 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

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áfico: 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
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: <[Link]
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: <[Link]

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: <[Link]
 47
REFERÊNCIAS

Á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.
Professora Esp. Janaína Aparecida de Freitas

II
UNIDADE
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
 51

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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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
52 UNIDADE II

IDENTIDADE VISUAL

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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
 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,
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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
54 UNIDADE II

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:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Logotipo Símbolo Marca

forma particular e sinal gráfico que conjunto formado

diferenciada com a substitui o registro do pelo símbolo e pelo
qual o nome da nome da empresa. logotipo.
empresa é registrada
nas aplicações.

■■ 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
 55

SÍMBOLO LOGOTIPO
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 2 - Assinatura visual é a combinação do logotipo com o símbolo

Fonte: Liberato (2013, pg 16).








Identidade Visual
56 UNIDADE II

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,

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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,

IDENTIDADE VISUAL
 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.








Estudo da Percepção da Marca

58 UNIDADE II

CRIAÇÃO DE CONCEITOS, LOGOTIPO E LOGOMARCA

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

IDENTIDADE VISUAL
 59
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 4 - Exemplo de logomarca

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 5 - Exemplo de abstrata

Fonte: Wikipedia ([2016], on-line)1.

Criação de Conceitos, Logotipo E Logomarca

60 UNIDADE II

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 6 - Exemplo de imitativa

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 7 - Exemplo de logo original e criativa

IDENTIDADE VISUAL
 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Criação de Conceitos, Logotipo E Logomarca

62 UNIDADE II

Ambos signos identificadores estão

Logo- formalmente integrados e constituem
símbolo uma unidade gráfica indissociável.

Ambos signos são formalmente

Logotipo independentes e têm capacidade de
com identificação tanto em conjunto como
símbolo separados.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Em alguns casos o símbolo alcança
um nível de imposição tão grande
Apenas que pode prescindir totalmente o
símbolo logotipo.

O logotipo está inserido em um fundo

Logotipo sem autonomia no processo de
com identificação da marca.
fundo

O logotipo está acompanhado de

Logotipo algum sinal acessório sem autonomia
com no processo da marca.
acessório

Representação exclusivamente
Logotipo tipográfica, caligráfica ou manuscrita
do nome.
puro

Figura 10 - Tipos de Logotipos

Fonte: Liberato (2013, p. 13).

IDENTIDADE VISUAL
 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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

-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 fidelizaram por 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

Branding
64 UNIDADE II

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:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
■■ Ó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

IDENTIDADE VISUAL
 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Brandbook
66 UNIDADE II

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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”

IDENTIDADE VISUAL
 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”.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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”.

Brandbook
68 UNIDADE II

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 13 - Exemplo de Brandbook da marca “Coca-Cola”
Fonte: Calameo ([2016], on-line)3.

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.








IDENTIDADE VISUAL
 69

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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

ponente cognitivo relaciona-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).

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)

Considerações Finais
70 UNIDADE II

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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!

IDENTIDADE VISUAL
 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áfico

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áfico 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 unifica 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: <[Link]
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: <[Link]

Outro trabalho interessante de brandbook é o da marca do Carrefour. Acesse o link a seguir para
visualizar o brandbook.
Disponível em: <[Link]
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 fique por dentro de tudo sobre o
brandbook.
Disponível em: <[Link]
brand-book-o-livro-que-guarda-a-essencia-da-marca/>.
 77
REFERÊNCIAS

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 de Identidade 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: <[Link]
png>. Acesso em: 5 out. 2016.
2
Em: <[Link]
-de-o-boticario-e-assim/>. Acesso em: 05 out. 2016.
3
Em: <[Link] Acesso em: 05 out.
2016.
4
Em: <[Link]
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.
Professora Esp. Janaína Aparecida de Freitas

III
UNIDADE
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
 81

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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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
82 UNIDADE III

LAYOUT E COMPOSIÇÃO

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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
 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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
84 UNIDADE III

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, ainda não importa a linguagem a ser usada, o ponto essencial é

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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
 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.







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
86 UNIDADE III

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

LAYOUT E COMPOSIÇÃO
 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Protótipo
88 UNIDADE III

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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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 Rascunho, representa-
rápida. ção preta e branca da
interface.
Protótipo Esqueleto reutilizável para o Interativo.
desenvolvimento da interface.
Teste de usabilidade do usuário.
Mock-up Coletar feedback e conseguir Visualização estática,
vender a ideia do produto. simulação da aparência
do produto.
Fonte: a autora.

LAYOUT E COMPOSIÇÃO
 89

STORYBOARD

Storyboards 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 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,
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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).

Storyboard
90 UNIDADE III

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á-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

LAYOUT E COMPOSIÇÃO
 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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Flat Design
92 UNIDADE III

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

LAYOUT E COMPOSIÇÃO
 93
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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).

Skeuomorphism
94 UNIDADE III

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á-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

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
Os usuários se sintam satis-
desejada, seja ela um tópico de conteúdo, um
feitos com o design, porém
link para outra página ou um campo de um
atentos ao conteúdo.
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.
O bloco de navegação principal deve ser clara-
mente visível na página, com cada um dos links
Os usuários possam
acompanhado de um título. Devemos facilitar
percorrê-lo facilmente via
a localização dos itens separando visualmente
navegação intuitiva.
os conteúdos, assim, permitimos que o usuário
mantenha o foco na informação.

LAYOUT E COMPOSIÇÃO
 95

Mesmo que haja diferenças dramáticas entre

Os usuários reconheçam layout da página inicial e o restante do site, é
cada página como perten- imprescindível a coesão entre tema ou estilo
cente ao site. 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:
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

■■ 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.

Definição do Bom Design

96 UNIDADE III

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):

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
[...] 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.

LAYOUT E COMPOSIÇÃO
 97
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 simplificar 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,
identificaçã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 afins ao site, como anúncios ou links para outras páginas.

Anatomia de Uma Página da Web

98 UNIDADE III

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.).

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

LAYOUT E COMPOSIÇÃO
 99

TEORIA DO GRID
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Teoria do Grid
100 UNIDADE III

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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: Fotografia Fácil ([2016], on-line)1.

LAYOUT E COMPOSIÇÃO
 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Teoria do Grid
102 UNIDADE III

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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:

LAYOUT E COMPOSIÇÃO
 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Teoria do Grid
104 UNIDADE III

CONTRASTE

No contraste se dois elementos não forem exatamente os mesmos, diferencie-os

completamente. Para Beaird (2008) “[...] o contraste é definido como a justapo-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
sição de elementos gráficos 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

LAYOUT E COMPOSIÇÃO
 105

deles uma figura 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Teoria do Grid
106 UNIDADE III

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 é

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

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)

LAYOUT E COMPOSIÇÃO
 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,
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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!

Considerações Finais
 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, pois cria 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. Profissionais 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: <[Link]
mobile/o-que-e-responsive-web-design/>.
 115
REFERÊNCIAS

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: <[Link]
-[Link]?w=620>. Acesso em: 10 out. 2016.
2 Em: <[Link] Acesso
em: 10 out. 2016.
3 Em: <[Link] 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.
Professora Esp. Janaína Aparecida de Freitas

IV
TRABALHANDO COM

UNIDADE
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
 119

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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

enfatizar textos, imagens e caracterizar 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
120 UNIDADE IV

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Associações de Cores
122 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Associações de Cores
124 UNIDADE IV

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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. Na

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Associações de Cores
126 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 127

exemplo, o site da Nintendo 3DS, exposto na figura a seguir:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Associações de Cores
128 UNIDADE IV

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 129
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Temperatura da Cor
130 UNIDADE IV

VALOR DA COR

Para Beaird (2008, p. 44) “[...] a medida da claridade ou obscuridade de uma

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 131

SISTEMAS DE CORES: CMYK, RGB E PANTONE

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Sistemas de Cores: CMYK, RGB e Pantone

132 UNIDADE IV

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Quando se fala em Pantone, temos a relação feita com 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).








TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 133

RODA DE CORES
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Roda De Cores
134 UNIDADE IV

TIPOGRAFIA

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 135

a especificaçã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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 10 - Tipos
Fonte: a autora.

ANATOMIA DAS LETRAS

Tipos e famílias de tipos podem ser classificados 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.

Tipografia
136 UNIDADE IV

DESCREVENDO O TIPO

Os tipos são compostos por um conjunto de elementos. Confira a seguir a ima-

gem e siga as explicações:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 11 - Conjunto de elementos dos tipos
Fonte: Tipografia ([2016], on-line)5.

■ Corpo: diz respeito ao tamanho do tipo, sendo definido 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 define 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 define 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 tipografia, diz respeito a uma matriz gravada em placa metálica
e destinada à impressão de imagens e textos.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

■■ 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

Tipografia
138 UNIDADE IV

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:

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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).

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

Edição E Tratamento de Imagens

140 UNIDADE IV

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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ê
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Edição E Tratamento de Imagens

142 UNIDADE IV

de uma fotografia. Como vetores são um processo matemático, eles podem ser
ampliados infinitamente sem perda de qualidade ou resolução.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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”.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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).
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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:

Edição E Tratamento de Imagens

144 UNIDADE IV

■■ 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-

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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)

Considerações Finais
146 UNIDADE IV

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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!

TRABALHANDO COM CORES, TIPOGRAFIA E IMAGENS

 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

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, classificaçõ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 tipografia 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: <[Link]
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: <[Link]
design-de-interacao/9-principios-basicos-de-design-responsivos-em-gifs/>.

Material Complementar
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: <[Link] Acesso em: 10 out. 2016.
2
Em: <[Link] Acesso em: 10 out. 2016.
3
Em: <[Link]
-[Link]>. Acesso em: 10 out. 2016.
4
Em: <[Link] Acesso em: 10 out. 2016.
5
Em: <[Link] Acesso
em: 10 out. 2016.
6
Em: <[Link]
Acesso em: 10 out. 2016.
7
Em: <[Link] Acesso em: 10 out. 2016.
8
Em: <[Link]
[Link]>. Acesso em: 10 out. 2016.
9
Em: <[Link]
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.
Professora Esp. Janaína Aparecida de Freitas

FERRAMENTAS APLICADAS

V
UNIDADE
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
 157

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-
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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
158 UNIDADE V

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 159
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 1 - PhotoShop

Figura 2 - Illustrator
Fonte: Pita ([2016], on-line)1.

Softwares e Ferramentas Aplicadas ao Design Gráfico

160 UNIDADE V

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).

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 161
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 4 - GIMP
Fonte: The Fearless Penguin ([2016], on-line)3.

Figura 5 - InkScape
Fonte: MacUpdate ([2016], on-line)4.

Softwares e Ferramentas Aplicadas ao Design Gráfico

162 UNIDADE V

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 6 - CorelDraw
Fonte: Pro Crack Softwares ([2016], on-line)5.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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á
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Figura 7 - Milhares de ícones de web

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 8 - Dafont
Fonte: Interpretation By Design ([2016], on-line)⁶.

Softwares e Ferramentas Aplicadas ao Design Gráfico

164 UNIDADE V

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,

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Softwares e Ferramentas Aplicadas ao Design Gráfico

166 UNIDADE V

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Softwares e Ferramentas Aplicadas ao Design Gráfico

168 UNIDADE V

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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,
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Softwares e Ferramentas Aplicadas ao Design Gráfico

170 UNIDADE V

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 14 - Utilização de banco de fontes

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
Figura 15 - Utilização de banco de fontes
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!

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

por padrão, mas também funciona com

jQuery.

Figura 16 - Layout em cascata

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.

Softwares e Ferramentas Aplicadas ao Design Gráfico

172 UNIDADE V

FERRAMENTAS PARA WEB DESIGN RESPONSIVO

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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 APLICADAS AO DESIGN GRÁFICO

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 Para Web Design Responsivo

174 UNIDADE V

Figura 18 - Froont

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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 APLICADAS AO DESIGN GRÁFICO

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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 Para Web Design Responsivo

176 UNIDADE V

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
Figura 21 - iPlotz
Fonte: iPlotz Blog ([2016], on-line)14.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 177
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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

Estudo de Caso
178 UNIDADE V

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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
seguintes informaçõ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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Estudo de Caso
180 UNIDADE V

E, agora o mesmo modelo recriado no Photoshop. Mas, você pode usar outras
ferramentas para criar o wireframes, como o Creately ou Balsamiq Mockups.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 181
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 24 - Modelo recriado no Photoshop

Fonte: Tableless ([2016], on-line)15.

Estudo de Caso
182 UNIDADE V

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

Figura 25 - Smartphones
Fonte: Tableless ([2016], on-line)16.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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.
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

■■ 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)

Estudo de Caso
184 UNIDADE V

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.

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 185
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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.

Estudo de Caso
186 UNIDADE V

Design Responsivo é um princípio de desenvolvimento para Web cujo obje-

tivo é adaptar o layout das páginas a qualquer 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

Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.
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.








FERRAMENTAS APLICADAS AO DESIGN GRÁFICO

 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
Reprodução proibida. Art. 184 do Código Penal e Lei 9.610 de 19 de fevereiro de 1998.

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!

Considerações Finais
 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 em que 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

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 final, artigos refletem sobre a situação atual da pesquisa na área e inserem o
design thinking de serviços em um contexto filosófico.

O que todo Web Designer Precisa Saber

Artigo 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://
[Link]/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: <[Link]
com/responsive-design/os-smartwatches-e-o-design-responsivo/>.

Material Complementar
REFERÊNCIAS

AMBROSE, G.; HARRIS, P. Fundamentos de Design Criativo. Porto Alegre: Bookman,

2012.

REFERÊNCIAS ON-LINE

1
Em: <[Link] Acesso em: 11 out. 2016.
2
Em: <[Link]
[Link]>. Acesso em: 11 out. 2016.
3
Em: <[Link]
-[Link]>. Acesso em: 11 out. 2016.
4
Em: <[Link] Acesso em: 11
out. 2016.
5
Em: <[Link]
7-Serial-Number-And-Keygen-Full-Download.-[Link]>. Acesso em: 11 out. 2016.
6
Em: <[Link]
[Link]>. Acesso em: 11 out. 2016.
7
Em: <[Link]
[Link] >. Acesso em: 11 out. 2016.
8
Em: <[Link] Acesso em: 11
out. 2016.
9
Em: <[Link] Acesso em: 11 out. 2016.
10
Em: <[Link] Acesso em: 11 out.
2016.
Em: <[Link] Acesso
11

em: 11 out. 2016.

12
Em: <[Link] Acesso em: 11 out.
2016.
13
Em: <[Link] Aces-
so em: 11 out. 2016.
14
Em: <[Link] Acesso
em: 11 out. 2016.
15
Em: <[Link]
jpg>. Acesso em: 11 out. 2016.
 195
REFERÊNCIAS

16
Em: <[Link]
[Link]>. Acesso em: 11 out. 2016.
17
Em: <[Link]
Acesso em: 11 out. 2016.
18
Em: <[Link]
Acesso em: 11 out. 2016.
19
Em: <[Link]
[Link]>. Acesso em: 11 out. 2016.
20
Em: <[Link] Acesso em: 11 out. 2016.
GABARITO

1. 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. Exemplo de site: [Link].
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.
 197
CONCLUSÃO

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!