Design

Gráfico
PROFESSOR
Esp. Renan Ferreira Venancio

ACESSE AQUI O SEU

LIVRO NA VERSÃO
DIGITAL!
 EXPEDIENTE

FICHA CATALOGRÁFICA

Coordenador(a) de Conteúdo C397 CENTRO UNIVERSITÁRIO DE MARINGÁ.

Larissa Siqueira Camargo Núcleo de Educação a Distância. VENANCIO, Renan Ferreira.
Projeto Gráfico e Capa Design Gráfico. Renan Ferreira Venancio. Maringá - PR:
André Morais, Arthur Cantareli e Unicesumar, 2022.
Matheus Silva
176 p.
Editoração
ISBN 978-85-459-2275-9
Lucas Pinna Silveira Lima
Design Educacional “Graduação - EaD”.
Rodrigo Cabrini Dall Ago 1. Design Gráfico. 2. Identidade Visual. 3. EaD. I. Título.
Curadoria
Emerson José Vieira CDD - 22 ed. 741
Eloá Lamin da Gama
Revisão Textual
Carla Cristina Farinha
Ilustração Impresso por:
Geison Ferreira da Silva
Eduardo Aparecido Alves Bibliotecário: João Vivaldo de Souza CRB- 9-1679
Fotos
Freepik; Shutterstock

NEAD - Núcleo de Educação a Distância

Av. Guedner, 1610, Bloco 4 Jd. Aclimação - Cep 87050-900 | Maringá - Paraná
www.unicesumar.edu.br | 0800 600 6360
02511314
Renan Ferreira Venancio

Olá, cara(o) aluna(o)! Sou o professor Renan Ferreira Ve-

nancio, autor dos conteúdos que você acessará neste li-
vro. Atualmente, também sou gestor de novos negócios e
o diretor de Design no escritório Cartograma® Branding,
o qual sou fundador. Sou graduado em Design e pós-gra-
duado em Gestão Estratégica de Design e Inovação, Ani-
mação Digital, Projetos de interiores e Direção de Arte.
Iniciei minha carreira em Design com 16 anos, quando
realizei um curso técnico de Web Design e consegui meu
primeiro emprego na área. De lá para cá, muitas coisas
novas surgiram e fui me apaixonando, cada dia mais, por
essa área. Hoje, 12 anos depois, utilizo Design Estratégi-
co aplicado em marcas, negócios e serviços para realizar
transformações na experiência de consumo nas empre-
sas de meus clientes.
Como professor, já escrevi alguns livros para discipli-
nas de Design de Embalagens, Modelagem Digital e Cria-
tividade e Branding para cursos de graduação e pós-gra-
duação. Gosto de atuar como professor universitário em
matérias de Design, Branding e Criatividade. O Design é
um campo muito vasto — e misto. E isso é ótimo, temos
inúmeras possibilidades como profissionais: desde uma
excelência operacional à uma visão estratégica aguçada.
Tudo isso pode o(a) ajudar a crescer nesse campo em
constante expansão. Espero que esta disciplina possa lhe
dar um vislumbre de uma das mais conhecidas e respei-
tadas áreas do Design: o Design Gráfico.
Bons estudos!

http://lattes.cnpq.br/0971998476241487
DESIGN GRÁFICO

O Design é um campo altamente difundido no mercado internacional. Amplamente

conhecido como ferramenta de agregação de valor para produtos e serviços nas últi-
mas décadas, acabou sendo um termo altamente difundido. Mas, de fato, o que é o
Design? Muitos se apropriam e utilizam deste tão famoso termo, mas se confundem
na hora de defini-lo como campo de conhecimento. Conhecer melhor a história e a
origem deste termo que é utilizado amplamente como jargão corporativo pode ajudar
você, estudante, a entender o real valor de sua futura profissão. Conhecer a história de
nossa profissão pode ser, além de inspiradora, muito útil para direcionar não só seu
trabalho, mas também sua carreira. Vamos saber mais?
As origens do Design como palavra se dão logo no final do século XIX. Inicialmente,
a palavra foi utilizada para tentar traduzir algo que, ainda, não era estudado cientifica-
mente: a experiência das pessoas em relação a um produto bem como a padroniza-
ção da qualidade desses produtos em sua produção. Ou seja, nossa profissão surgiu
com um foco bastante claro: como as pessoas, por trás do rótulo de consumidores,
experimentarão nossos projetos e, a partir desse pensamento, como nós podemos
transformar isso em algo padronizado?
É claro que a preocupação econômica era muito forte, visto que, até então, boa
parte da produção era quase (se não totalmente) artesanal. Dessa forma, o início do
pensamento de Design já se direcionava para as pessoas, para os processos e para a
sustentabilidade — nesse caso, a sustentabilidade econômica de uma solução. O que
isso pode representar para nós hoje? Bom, de maneira bem simples, muita coisa mu-
dou de lá para cá, mas esse pensamento ainda continua presente no Design. Por mais
que tenhamos diversas linhas de pensamento envolvidas com o Design (umas mais
artísticas, outras mais comerciais, outras, ainda, mais sociais), essa tríade foi forma-
lizada com a popularização do Design Thinking, pelo escritor Tim Brown — fundador
do principal escritório de Design de nossa contemporaneidade, o IDEO. Hoje, o De-
sign evoluiu de uma profissão puramente operacional para uma solução estratégica
e inovadora, utilizada por inúmeros negócios para transformar empresas em mais
competitivas, agradáveis e humanas.
 Até onde o Design pode chegar? Já se perguntou sobre isso? Além de realizar ima-
gens “bonitinhas” e produtos “estilosos”, o pensamento por trás do Design vai muito
mais a fundo que isso. Realize uma pesquisa, simples, mas muito importante, de como a
AIRBUS se tornou uma das marcas mais inovadoras do mercado ao aplicar o Pensamen-
to de Design (Design Thinking) em sua cultura organizacional. Procure artigos e livros a
respeito de como empresas, como a GE (General Electric), inovaram a experiência de se
realizar uma ressonância magnética com Design Thinking, reduzindo a taxa de rejeição
desses exames em pacientes crianças de 90% para menos de 15%.
Após sua pesquisa, redija um pequeno texto, explicando o que você entendeu sobre
o Design e até onde o pensamento de projeto utilizado no Design pode chegar.
Parece absurdo que uma forma de pensar possa mudar tanto o resultado de gran-
des corporações, não é mesmo? Não é apenas para as grandes, mas também para
as pequenas e médias. Existem diversos escritórios ao redor do mundo se respon-
sabilizando em disseminar o Design Thinking para empresários médios e pequenos.
Isso permite que as empresas atendidas e todas as comunidades envolvidas com elas
possam ser mais inovadoras, sustentáveis e humanizadas.
Apesar de nossa profissão exigir bastante técnica operacional, reflita um pouco:
será que executar objetos é realmente o ponto final de sua carreira? Todo esforço e
preocupação que nós, designers, aprendemos a ter, como profissionais, em relação
à experiência e à percepção das pessoas por trás do rótulo de consumidores podem
ser direcionados para outras conquistas muito maiores. Como futuro(a) designer, você
pode não imaginar, mas, um dia, você pode chegar a fazer parte de uma gestão ou
diretoria estratégica de alguma empresa. Esse é um futuro muito vislumbrado por di-
versos profissionais designers e, a cada dia que passa, vemos isso se concretizar ainda
mais. Como você ajudaria uma empresa a ser mais humana, sustentável e inovadora?
Essa visão apresentada pelo Design é novidade para a maioria das pessoas ainda.
Mas é importante que você consiga entender seu papel nisso tudo. Portanto, faça uma
lista de algumas empresas na sua região (duas ou três já são o suficiente), dê uma pes-
quisada sobre elas (em seus sites, mídias sociais e lojas) e elabore uma lista de ações
que cada uma dessas empresas poderia ganhar com a aplicação correta do Design. Elas
poderiam ser mais atraentes para seus públicos? Elas poderiam ter melhor experiência
de consumo? Ou poderiam ser mais organizadas? Mais profissionais? Cada empresa
é um contexto único, e saber identificar cada contexto faz e fará parte de seu traba-
lho daqui em diante. Teste isso desde já: o que cada uma dessas empresas, em seus
determinados contextos, poderia investir com Design que traria melhores resultados?
Redija um texto, de 20 linhas, explicando como o Design pode transformar a ex-
periência de uma pessoa com deficiência para realizar uma interação simples para os
demais, porém, para ela, é quase impossível. Por exemplo: como uma pessoa cega
pode se localizar em um hospital sem precisar passar a mão nas paredes, evitando,
assim, a contaminação de sua mão?
RECURSOS DE
IMERSÃO
REALIDADE AUMENTADA
Sempre que encontrar esse ícone,
esteja conectado à internet e inicie
o aplicativo Unicesumar Experien-
ce. Aproxime seu dispositivo móvel
da página indicada e veja os recur-
sos em Realidade Aumentada. Ex-
plore as ferramentas do App para
saber das possibilidades de intera-
ção de cada objeto.
RODA DE CONVERSA
Professores especialistas e convi-
dados, ampliando as discussões
sobre os temas.
PÍLULA DE APRENDIZAGEM
Uma dose extra de conhecimento
é sempre bem-vinda. Posicionando
seu leitor de QRCode sobre o códi-
go, você terá acesso aos vídeos que
complementam o assunto discutido.
Quando identificar o ícone de QR-CODE, utilize o aplicativo Unicesumar
Experience para ter acesso aos conteúdos on-line. O download do
aplicativo está disponível nas plataformas:
PENSANDO JUNTOS
Ao longo do livro, você será convida-
do(a) a refletir, questionar e trans-
formar. Aproveite este momento.
EXPLORANDO IDEIAS
Com este elemento, você terá a
oportunidade de explorar termos
e palavras-chave do assunto discu-
tido, de forma mais objetiva.
NOVAS DESCOBERTAS
Enquanto estuda, você pode aces-
sar conteúdos online que amplia-
ram a discussão sobre os assuntos
de maneira interativa usando a tec-
nologia a seu favor.
OLHAR CONCEITUAL
Neste elemento, você encontrará di-
versas informações que serão apre-
sentadas na forma de infográficos,
esquemas e fluxogramas os quais te
ajudarão no entendimento do con-
teúdo de forma rápida e clara
Google Play App Store
CAMINHOS DE
APRENDIZAGEM

1
11 2
47
PRIMÓRDIOS CONSOLIDAÇÃO E
DO DESIGN CONTEMPORANEIDADE
GRÁFICO DO DESIGN GRÁFICO

3
79 4 115
LINGUAGEM BRANDING,
VISUAL APLICADA IDENTIDADE
AO DESIGN VISUAL E LOGOS
GRÁFICO

5
141
INTRODUÇÃO
AO DESIGN DE
INTERFACES (UI)
1
Primórdios do
Design Gráfico
Esp. Renan Ferreira Venancio

Olá, caro aluno(a)! Bem-Vindo(a) à nossa primeira unidade da discipli-

na de Design Gráfico. Nesta primeira unidade, você terá a oportunida-
de de entender as origens do Design e da grande área que é o Design
Gráfico. Entenderemos como desenrolaram-se os pensamentos e as
filosofias envolvidos em nossa profissão nos dias de hoje e analisa-
remos como as técnicas artísticas e de impressão proporcionaram o
surgimento da profissão atual de designer gráfico.
UNIDADE 1

O Design é um campo, altamente, difundido no mer-

cado internacional. Amplamente conhecido como fer-
ramenta de agregação de valor para produtos e serviços
nas últimas décadas, acabou sendo um termo, altamen-
te, difundido. Mas, de fato, o que é o Design? Muitos
se apropriam e utilizam desse tão famoso termo, mas
se confundem na hora de defini-lo como campo de
conhecimento. No caso do Design Gráfico, isso é algo,
ainda mais, presente, visto que a barreira de entrada
nesse mercado é muito baixa. Uma vez que pessoas que
gostam de “criar imagens” consigam utilizar ferramen-
tas gráficas, é muito comum que elas se autointitulem
“designers”. Conhecer melhor a história e a origem des-
se termo que é utilizado, amplamente, como jargão cor-
porativo pode ajudar você a entender o real valor de sua
futura profissão. A história de sua futura profissão pode
ser, além de inspiradora, muito útil para direcionar não
só seu trabalho, mas também sua carreira.
É muito comum encontrar a falsa crença de que o
Design (como um todo mesmo, não, apenas, o Design
Gráfico) exige, puramente, a operação de softwares ou
aplicativos, sim, o computador é uma importante ferra-
menta para agilizar o trabalho de um designer, mas não
é nele que ocorre o design. A construção de um design
se dá na mente do designer, na sua criatividade e no
seu pensamento crítico.
Historicamente, muito antes de existirem os com-
putadores, já existiam designers. Mas mesmo hoje, de-
pois de quase cinco séculos que a palavra foi utilizada
pela primeira vez, temos muita dificuldade em encon-
trar uma definição assertiva de design. Em seu início,
o Design passou por fases puramente tecnicistas e por
fases muito filosóficas. Mas, nos dias de hoje, o designer
evoluiu para uma força estratégica poderosa, com capa-
cidades inovadoras que encantam os grandes empresá-

12
 UNICESUMAR

13
UNIDADE 1

rios. Como designers, podemos transformar empresas em mais competitivas,

agradáveis e humanas, e isso é uma forte potência econômica.
Até onde o Design pode chegar? Já se perguntou sobre isso? Além de
realizar imagens “bonitinhas” e produtos “estilosos”, o pensamento por trás
do Design vai muito mais a fundo que isso. Realize uma pesquisa, simples,
mas muito importante, de como a AIRBUS se tornou uma das marcas mais
inovadora do mercado ao aplicar o Pensamento de Design (Design Thinking)
em sua cultura organizacional.
Procure artigos e livros a respeito de como empresas, como a GE (Ge-
neral Electric), inovaram a experiência de se realizar uma ressonância mag-
nética com Design Thinking, reduzindo a taxa de rejeição desses exames em
pacientes crianças de 90% para menos de 15%. Após sua pesquisa, redija um
pequeno texto, explicando o que você entendeu sobre o Design e até onde o
pensamento de projeto utilizado no Design pode chegar.
Utilize seu diário de bordo para analisar os principais pontos da história do
design. Reflita como ocorreu a mudança de pensamento do pré para o pós-guer-
ra. Perceba a utilização das técnicas artísticas visuais para a criação de uma nova
forma de expressão visual. Análise qual era o foco dos artistas, que proporciona-
ram o nascimento do Design como profissão, em seus trabalhos. Por fim, mas
não menos importante, entenda como o pensamento racionalista e científico pro-
porcionou a elaboração de uma base técnica para a profissão de Design Gráfico.

14
 UNICESUMAR

O que, exatamente, é design gráfico? Bom,

caro aluno(a), antes de explorarmos a histó-
ria do Design Gráfico, precisamos, primeiro,
entender o que se entende por Design Gráfi-
co. A definição de Design, por si só, já pode
ser bastante confusa. Mas é necessário, antes
de tudo, entender como os diversos campos
do Design interagem entre si e quais são as
possibilidades futuras que existem nessas in-
terações para nós, como profissionais.
Nas últimas décadas, como afirma Hsuan-
-An (2017), a área de estudo do Design teve
um avanço significativo em nosso país, de-
vido à multiplicação do número de escolas
de design e à procura, cada vez maior, por
essa área do conhecimento, indicando uma
grande demanda de designers no Brasil. É
comum encontrarmos a falsa crença de que o
Design se trata de computadores e softwares,
em especial no âmbito gráfico, como apon-
ta Arntson (2006). De fato, o computador se
tornou uma ferramenta vital de trabalho em
nossa área, entretanto é, apenas, isso: uma
ferramenta. Seu papel é de ajudar o designer
a desenvolver um conceito original. Nós, de-
signers, somos os responsáveis pela pesqui-
sa, pelos conceitos e pelo desenvolvimento
visual de projetos em que trabalhamos, e
não o computador ou software.
Etimologicamente, design é um vocábulo
de origem imediata na língua inglesa. Como

15
UNIDADE 1

substantivo, design se refere tanto à ideia de um plano ou intenção quanto à

ideia de uma configuração ou estrutura — não, necessariamente, para coisas
fabricadas, já que é aceitável, em inglês, falar sobre o design de uma molécu-
la, por exemplo. Já em relação às origens mais distantes, podemos encontrar,
no latim, a palavra designare, um verbo que significa tanto designar quanto
desenhar. Podemos perceber que, mesmo em sua etimologia, o design apre-
senta certa ambiguidade. Entretanto podemos destacar a relação entre o aspec-
to abstrato de se projetar/conceber e a ação concreta de se configurar/formar
(CARDOSO, 2008). Bürdek (2006) corrobora resgatando a definição do Ox-
ford Dictionary a respeito da palavra design, que afirma que foi no ano de 1588
a primeira vez que o termo foi utilizado e descrito como “um plano desenvol-
vido pelo homem ou um esquema que possa ser realizado”.
Boa parte das definições, segundo Cardoso (2008), aceita que o Design
opera em ambos os níveis, projetando forma material a conceitos intelectuais,
ou seja, é uma atividade que gera projetos envolvendo planos, esboços ou mo-
delos. O Design, como profissão, é fruto de três grandes processos históricos
de escala mundial que ocorreram entre os séculos XIX e XX: a industrializa-
ção, a urbanização moderna e a globalização. Existem, em todos os proces-
sos, a necessidade de se organizar enorme número de elementos díspares (pes-
soas, veículos, máquinas, moradias, lojas, fábricas, legislações, entre outros) de
maneira harmoniosa e dinâmica. Pense, por exemplo, no imenso número de
desafios que está por trás de se preparar uma simples xícara de café:

“
Depois de plantado, colhido e ensacado, o café precisa ser transpor-
tado para um local onde será beneficiado: secado, torrado, moído e,
possivelmente, submetido a congelamento rápido e secagem a vácuo
(freeze-drying), processo pelo qual se fabrica o café instantâneo. Em
seguida, recebe a embalagem final, e é distribuído para o comércio
de varejo, só aí chegando às mãos do consumidor. Essa cadeira de
produção e distribuição pode envolver grandes distâncias, uma ou
mais unidades de beneficiamento e pelo menos três instâncias de
transporte (do campo para o porto, do porto para a fábrica, da fá-
brica para o comércio). Cada um dos elos da cadeia requer alto grau
de organização interna e coordenação com os outros, não somente
em termos de engenharia de produção e de transportes, como tam-

16
 UNICESUMAR

bém de sinalização, identidade visual e planejamento de interfaces.

Para culminar o aspecto distributivo, acrescentam-se ainda as de-
mandas ligadas à confecção de rótulos e embalagens, assim como
ao dimensionamento de campanhas de publicidade e marketing.
O resultado final é uma série longa e extremamente complexa de
decisões de planejamento e projeto, sem as quais seria impossível
para um cidadão europeu ou americano tomar sua canequinha de
Nescafé pela manhã. Ao considerar que duzentos anos atrás, nada
disso existia – nem os trens, nem os rótulos, muito menos os anún-
cios comerciais -, tem-se uma justa dimensão de quanto o mundo
mudou, e de quanto o design contribuiu para viabilizar essas mu-
danças (CARDOSO, 2008, p. 23).

A partir dessa introdução a respeito de Design, podemos, finalmente, focar-

-nos no seu âmbito gráfico. Como pudemos perceber com o exemplo anterior,
é alta a complexidade de nosso mundo contemporâneo, e nossa profissão está,
de maneira intrínseca, relacionada a nosso modo de vida. Qualquer disciplina
de Design pode ser encontrada na cadeia de eventos apresentada anteriormen-
te: embalagens (Design Gráfico); interfaces (Design de Interfaces); meios de
transporte (Design de Produto); e por aí vai.
O designer, então, é o profissional competente para criar (e aplicar) so-
luções eficazes para problemas, exigindo boa capacidade para geração de
ideias e de concretização delas. O desempenho do profissional depende
da pesquisa (de dados, informações e fundamentos), da criatividade e das
habilidades técnicas (desenho, prototipagem e visualização) (HSUAN-AN,
2007). O Design Gráfico, então, pode ser definido como a solução de pro-
blemas em uma superfície bidimensional. Entretanto essa definição tem se
expandido, visto que novos campos, como o Design de Interfaces (antiga-
mente chamado de Web Design) e o Design Digital, estão, cada vez mais,
abraçando aplicações 3D e aplicações baseadas em tempo, ou seja, na quar-
ta dimensão (4D) (ARNTSON, 2006).
De maneira mais específica, o designer gráfico, de acordo com Arntson
(2006), concebe, planeja e executa designs que comuniquem uma mensagem
específica para uma audiência específica dentro de determinadas limitações: fi-
nanceiras, físicas ou psicológicas.

17
UNIDADE 1

Continuando o exemplo da xícara de café, podemos analisar o design da

embalagem para entender essas limitações. Levando em consideração que
a embalagem do café é um invólucro plástico e será selada a vácuo, de ma-
neira a ser conformada em forma retangular, o designer gráfico deve pensar,
por exemplo, que tipo de impressão que o material plástico desse invólucro
é capaz de receber. De acordo com o tipo de impressão, pode ser que seu
projeto tenha um número limitado de cores. Sem contar a deformação que o
invólucro receberá, demandando alto nível de atenção nas áreas de “dobra”
do material, para não serem inseridas quaisquer informações importantes
dentro dessas áreas. Além de tudo isso, o designer é o responsável por pensar
em como a embalagem chamará atenção do consumidor quando ela estiver
na gôndola do supermercado.
O nascimento do Design Gráfico pode ser rastreado há 30.000 anos em pin-
turas rupestres ou há 550 anos, mais ou menos, com a invenção dos tipos móveis
de Gutenberg. Apesar da abismal diferença de anos, o fato é que houve uma
explosão do campo apenas no final do século XIX, com a Revolução Industrial
(ARNTSON, 2006). Com todas as transformações ocorridas nesse período (má-
quinas e trens a vapor, êxodo populacional das áreas rurais em direção às cidades,
inúmeras invenções e descobertas), a sociedade se esforçou para se adaptar a essa
nova realidade. Com o surgimento de polos urbanos, inicialmente na Inglaterra,
depois, espalhando-se pela Europa Ocidental e, depois, nos Estados Unidos da
América, as cidades começaram a se desenvolver mais rapidamente — mais tra-
balho, mais demanda, mais tecnologia. Foi nesse cenário, então, que o artesanato
começou a ser substituído pela “indústria do design” (AZAMBUJA, 2021).
Ilustrações e tipografia possuíam, segundo Conway (2006), uma longa
história. Entretanto foi, apenas, no século XIX que esses elementos foram
combinados de diversas formas, alterando a função da palavra e da imagem
dentro da sociedade industrializada. O cartaz (ou poster), combinando tipo-
grafia e ilustração em uma forma visual, assim como revistas, jornais e livros
necessitavam de novas formas de organização e “design” para sua impressão.
O espírito de inovação e progresso impulsionou a disseminação de in-
formação para a população de maneira mais ampla, em vez de centralizar-se
em uma elite afluente. Com a necessidade de disseminar informação, a co-
municação visual floresceu, rapidamente, nesse período. A primeira gravura
fotográfica em metal foi inventada em 1824. A primeira tela de meio-tom

18
 UNICESUMAR

surgiu em 1852. A primeira

impressão em meio-tom com
diferentes cores bem-sucedidas
apareceu em 1893. Os avanços
das impressões coloridas em
litogravura em pedra, na déca-
da de 1880, encorajavam artis-
tas e designers a trabalharem,
diretamente, na pedra (meio
utilizado), para realizarem
trabalhos de larga escala e alta
reprodução. Isso representava
uma nova liberdade criativa, já
que estavam livres dos aparatos
da impressão letterpress, que
utilizava tipos móveis e gravu-
ras em uma rígida grade (AR-
NTSON, 2006).

Figura 1 - Folheto para uma excursão de

trem, de 1876 / Fonte: Meggs (2009, p. 157).

Descrição da Imagem: na figura, vemos um folheto, branco, de 70 x 34 cm, com a propaganda para uma
excursão, no qual todo o texto e a moldura estão em vermelho e em inglês. No canto superior esquerdo,
lemos “1776” e, no canto superior direito, “1876”. De cima para baixo, vemos a maioria das palavras mais
importantes citadas em letras garrafais e, a partir da metade até o rodapé, vão diminuindo, gradativa-
mente, de tamanho para algumas informações. No alto, pegando a totalidade da folha de lado a lado,
lemos a palavra “centennial”, finalizando com ponto de exclamação. Abaixo dessa palavra, há uma linha
em vermelho e, abaixo dessa, na sua totalidade também, lemos as palavras “maryland”, tendo seu estilo
condensado e estendido, e “day”, finalizando com ponto de exclamação. Abaixo dessas palavras, há uma
linha em vermelho e, abaixo dessa, lemos “excursion tickets to Philadelphia” e, abaixo dessa escrita, le-
mos “Balto & Potomag rail road”. Por fim, lemos “at $4.50”, que é o preço da excursão, e as informações
técnicas em letras miúdas.

19
UNIDADE 1

Figura 2 - Pastilles Poncelet (1896), de Jules Cheret e Divan Japonais (1892), de Henri de Toulouse-
-Lautrec / Fonte: Arntson (2006, p. 20).

Descrição da Imagem: a figura apresenta duas litografias impressa em cores, de 80,3 x 60,7 cm, que estão,
atualmente, no Museu de Arte Moderna, de Nova York. A primeira, à esquerda, Henri de Toulouse-Lautrec,
apresenta uma mulher sob a chuva, com casaco amarelo bem como saia e chapéu vermelhos, ao lado de
um guarda-chuva voando. Riscos brancos populam a área total do cartaz que apresenta moldura em bege e
um fundo preto. Suas mãos estão juntas ao peito e há, à esquerda da mulher, um texto descritivo do evento.
A segunda litografia, à direita, Divan Japonais, apresenta um casal sentado em um divã: a mulher está com
vestido e chapéu pretos, segurando um leque com a mão direita e a outra mão está apoiada na cintura,
olhando para a esquerda, e o homem está vestindo terno e chapéu pretos, segurando, com a mão esquer-
da, uma bengala, olhando para baixo. Ao fundo, uma orquestra é apresentada em cores cinza e amarelo.
Ambos os cartazes apresentam seus títulos em tipografias de aspecto manual integradas às ilustrações.

A demanda de mensagens, cada vez mais, chamativas, também, permitiu a

ascensão do Design Editorial e da publicidade estadunidenses. Nessa época,
surgiu um dos principais nomes desse mercado: a Harper’s. A família Harper
havia lançado uma modesta firma de impressões em 1817 e, até meados do
século XIX, Harper and Brothers havia se tornado a maior firma de impres-
são e publicação no mundo. Em 1850, deu-se início a uma nova era da revista
pictórica com o lançamento da Harper’s New Monthly Magazine, com 144
páginas. A revista continha contos seriados de ficção e diversas ilustrações.
Poucos anos após, em 1857, surgiu a Harper’s Weekly, que funcionava como
uma revista de notícias e novidades. A famosa Harper’s Bazar foi lançada em

20
 UNICESUMAR

1867, com foco nas mulheres. Além disso, em 1879, surgiu a Harper’s Young
People para a audiência mais jovem (MEGGS, 2009).

Figura 3 - Pôster Harper’s Maga-

zine (1983), de Richard G. Tietze
Fonte: Meggs (2009, p. 182).

Descrição da Imagem: a figura apresenta uma ilustração binária, em branco e preto, dividida em três
zonas, com a área do meio fornecendo um fundo para a mensagem textual “Harper’s Magazine Christmas”,
enquanto separa as imagens. O pôster possui 41 x 28 cm. Na parte superior esquerda, vemos um trenó
parado sobre algo que remete à neve, tendo quatro alces seguindo em direção à direita da imagem. Na
parte superior direita, vemos uma figura que evoca a ideia do Papai Noel, olhando para a esquerda da
imagem, segurando, com as mãos, o topo de uma chaminé. Ao fundo, no horizonte, vemos, parcialmente,
a projeção da lua cheia com algumas nuvens. Na parte inferior da imagem, vemos cinco pessoas adultas
e duas crianças, sendo que um dos adultos tem, em mãos, um bandolim, o segundo, uma flauta, o ter-
ceiro traz, nas mãos, uma espécie de um livro e uma das crianças, uma corneta, enquanto os demais, ao
entorno, observam. Todos usam vestimentas típicas de inverno, com chapéus nas cabeças. Saindo dos
cantos inferior esquerdo e direito, vemos dois pés de poinsétia em formato de arbusto, dando efeito a
uma grande guirlanda que se encontra no centro da imagem. Sobre a parte central da guirlanda, lemos
em letras garrafais e em inglês “Harper’s Magazine Christmas”. Na parte superior central, está escrito
“december - 1883” e, na parte inferior, “harper and brothers”, “Franklin Square” e “New York”. As margens
estão representadas por uma moldura com simulações de varas que se cruzam nos cantos delas.

21
UNIDADE 1

Como afirma Hollis (2001), a Primeira Guerra Mundial, também, foi respon-
sável por estabelecer a importância do Design Visual. Diagramas, ilustrações
e legendas eram utilizados para instruir o público. Signos de identificação
para unidades militares eram, facilmente, compreendidos. Os posters uti-
lizavam o mesmo design econômico que as insígnias regimentais, mas com
ilustrações e slogans fortes. Os governos utilizaram esses materiais para fazer
propaganda com intuito de incentivar os cidadãos a participarem no esforço
da guerra. Em um aspecto mais técnico, os pôsteres realizados pelas nações
em guerra revelavam o estágio de desenvolvimento do Design Gráfico em
cada país (França, Grã-Bretanha, Itália, Império Austro-Húngaro, Alema-
nha, Rússia e, mais tarde, Estados Unidos da América).

Figura 4 - Os Britânicos Precisam de Você (1914), de Alfred Leet e Quero Você no Exército dos Estados
Unidos da América (1917), de James Montgomery Flagg / Fonte: Hollis (2001, p. 29).

Descrição da Imagem: a figura apresenta dois cartazes de guerra, em preto e branco. O primeiro, à es-
querda, apresenta, na parte central, o ministro da Primeira Guerra, Lorde Kitchener, que está utilizando
uniforme militar e apontando, com o dedo indicador direito, para o espectador. Acima dele, está escrito
“britânicos” e, abaixo, “juntem-se ao exército do seu país”. Esse cartaz, em especial, foi muito imitado,
inclusive pelo famoso cartaz de guerra estadunidense, Quero Você no Exército dos Estados Unidos da Amé-
rica, realizado por James Montgomery Flagg, que é o segundo cartaz apresentado à direita. Nele, vemos
a ilustração do famoso Tio Sam (Uncle Sam), de chapéu com faixa estrelada e terno smoking, apontando,
com o dedo indicador direito, para o espectador.

22
 UNICESUMAR

Movimento Arts And Crafts

Em 1861, como afirma Bürdek (2006), William Morris fundou a empresa

Morris, Marschall, Falkner & Co. na Inglaterra, com objetivo de renovação
das artes aplicadas. Com o tempo, formou-se o Arts and Crafts, o movimento
que serviu como reformador social e renovação de estilo. Com a nova junção
do projeto e da produção, o movimento era uma renovação das artes e dos
ofícios. Morris se voltava contra a estética das máquinas, e um exemplar des-
sa fase inicial do Design é a máquina de costura da Singer, de 1879, que teve
produção de 400.000 exemplares ao ano.

Figura 5 - Exemplar da máquina de costura da Singer, de 1879

Fonte: Móveis com memória (2014, on-line).

Descrição da Imagem: a figura apresenta uma fotografia de um exemplar da máquina de costura da

marca Singer, de 1879. Ela foi tomada, parcialmente, de cima para baixo, sob o olhar do espectador,
sendo possível ver que a roda de mão está para a lateral direita da imagem, enquanto o corpo da má-
quina de formas arredondadas, com peças circulares e ovaladas, é projetado para o lado esquerdo. Na
base, do lado direito, há uma espécie de etiqueta em metal dourado que remete à marca do fabricante.
Ela é toda em ferro, pintura na cor preta, com detalhes em metálico, porém, com o tempo, apresenta,
também, desgaste na pintura, deixando-a fosca em várias partes. A máquina está posicionada sobre uma
base coberta com um tecido de fundo branco com detalhes florais. Ao fundo, é possível ver o detalhe de
alguma mobília na cor marrom.

23
UNIDADE 1

Com abominação aos produtos baratos e desagradáveis pro-

duzidos em massa na era Vitoriana (1837–1901), o movimento
Arts and Crafts promovia o Design e o retorno do feito à mão.
Na Inglaterra, o arquiteto William Morris se tornou o líder do
movimento, devido à aptidão ao propósito, ao respeito à na-
tureza dos materiais e métodos de produção e à sua expressão
individual como designer e trabalhador. Entretanto foi John
Ruskin, autor e artista, quem inspirou a filosofia do movimen-
to (MEGGS, 2009). Ambos fundaram o movimento inspirado
pelos livros de Augustus Welby Northmore Pugin, especial-
mente Contrasts: or a Parallel between the Noble Edifices of the
Fourteenth and Fifteenth Centuries and Similar Buildings of the
Present Day: Shewing the Present Decay of Taste, de 1836 (Con-
trastes: ou um Paralelo entre os Edifícios Nobres dos Séculos
XIV e XV e Edifícios Semelhantes dos Dias Atuais: Mostrando
a Atual Decadência do Gosto, em tradução livre) e The True
Pinciples of Pointed Christian Architecture, de 1841 (Os Verda-
deiros Princípios da Arquitetura Cristã Pontiaguda, em tradu-
ção livre). Pugin, também, era conhecido por seu trabalho de
design de ourivesaria, cenógrafo e arquiteto (SILVA, 2005).
Segundo Meggs (2009), Ruskin questionava sobre como
a sociedade poderia “conscientemente ordenar a vida de seus
membros de modo a manter o maior número de seres huma-
nos nobres e felizes”, rejeitava a economia mercantil e buscava
a união da arte e do trabalho em serviço da sociedade. Sua
visão era de que a Renascença havia iniciado um processo de
separação da arte da sociedade, a industrialização e a tecnolo-
gia estavam, gradualmente, isolando o artista. Em sua visão, a
consequência dessa separação era um declínio da criativida-
de e dos projetos de design realizados por engenheiros sem
preocupação estética. Para Ruskin, coisas belas eram valiosas
e úteis justamente por serem bonitas, além disso, sua visão in-
cluía: a defesa de melhoria habitacional para os trabalhadores
industriais, um sistema nacional de educação e o direito à apo-
sentadoria para os idosos.

24
 UNICESUMAR

Figura 6 - Detalhe de desenho

de tecido de Rose, de 1883, feito
por William Morris / Fonte: Meggs
(2009, p. 188).

Descrição da Imagem: a figu-

ra apresenta o detalhe de uma
parte do desenho da estampa
de um tecido com diversas
abstrações naturalistas, sendo
elas: flores variadas em tons
laranja avermelhado, com des-
taque para as nove rosas com
seus caules amarelados com
espinhos, folhas em tons ver-
de e azul esverdeado e ramos
que se entrelaçam em forma
de arabescos, desenhando um
emaranhado floral. Também
vemos quatro pássaros em
tons amarelo e rosa claro, um
no canto superior esquerdo
da imagem e outro no canto
superior direito, tendo suas ca-
beças viradas um para o outro;
os outros dois estão no centro
da imagem, virado de costas
um para o outro, em que suas
longas caudas quase se tocam.
A imagem apresenta um deta-
lhe de espelhamento: o que é
visto da metade do lado direi-
to se repete igualmente para o
lado esquerdo.

De acordo com Silva (2005), os princípios fundamentais do movimento Arts and

Crafts não abrangiam um estilo próprio. O movimento buscava: uma unidade
de projeto; valorização do trabalho e do processo artesanal; liberdade individual
de expressão; levar arte a todos os cidadãos; uso de materiais naturais e locais;
projetar edifícios para fazer parte da paisagem; simplicidade e honestidade; e re-
gionalismo com a consciência da herança nacional. Azambuja (2021) afirma que
o objetivo mais importante do movimento era, portanto, determinar o valor do
trabalho do artesão, a partir da retomada de harmonia entre o trabalho do arqui-
teto, do designer e do artesão que existia anteriormente à Revolução Industrial.
Isso se concretizava com a defesa de uma arte “feita pelo povo e para o povo”.
O movimento Arts and Crafts é, amplamente, estudado por designers e
escolas de Design. O legado de seu pensamento e de seu trabalho influenciou
os principais nomes do design do século XX e, ainda, podemos encontrar
resquícios de sua filosofia em instituições e nos grupos de classe de designers.

25
UNIDADE 1

Um dos importantes movimentos, diretamente, influenciados pelo Arts

and Crafts foi o Kelmscott Press, fundado por William Morris e Emery Wal-
ker. Meggs (2009) apresenta como Emery Walker, em sua apresentação na
exibição Arts and Crafts Exhibition Society, defendeu a unidade de design
presente em manuscritos medievais e em livros impressos nos primórdios
da imprensa (até 1500). Walker afirmava que “o ornamento, seja ele qual for,
imagem ou grafismo, deve fazer parte da página, deve fazer parte de todo
o esquema do livro”. Sua visão era de que o design de um livro é similar à
arquitetura, exigindo um planejamento cauteloso em cada aspecto: papel,
tinta, tipografia, espaçamento, margens, ilustrações e ornamentos. Sem tal
planejamento, seria impossível alcançar design unificado (MEGGS, 2009).

Figura 7 - Marca da Kelmscott Press, projetada por William Morris, em 1892

Fonte: Wikimedia Commons (2009, on-line).

Descrição da Imagem: a figura apresenta a marca gráfica da Kelmscott Press, em representação binária,
em preto e branco. Conta com abstrações de uma árvore ao centro, enquanto abstrações de flores criam
uma moldura para a palavra Kelmscott em tipografia gótica. Na moldura, na parte inferior, é apresentado
o nome de William Morris, também em tipografia gótica, contando com um grafismo de ramo com folhas.
A árvore possui efeito em arabescos, em que os ramos formam um fundo preto, enquanto a moldura
apresenta-se em branco. No centro da imagem, há o desenho de uma faixa branca, onde os ramos
transpassam pela mesma, com a escrita da palavra Kelmscott em tipografia gótica com preenchimento
em preto. A escrita no rodapé tem a mesma forma da que se encontra no centro da imagem, inclusive
em relação ao preenchimento.

26
 UNICESUMAR

Segundo Meggs (2009), a Kemlscott Press buscava retomar a beleza dos

livros impressos nos primórdios da imprensa. Para isso, executavam-se
meticulosas impressões à mão, papéis feitos à mão, blocos de madeira cor-
tados à mão, iniciais e ornamentos similares aos utilizados por Erhard Ra-
tdolt no século XV. A firma de impressão se manteve ativa até 1898, dois
anos após a morte de Morris, tendo produzido mais de 18 mil volumes de
53 diferentes títulos.

Figura 8 - Página de título de The Works of Percy Bysshe Shelly (1895), de William Morris
Fonte: Meggs (2009, p. 193).

Descrição da Imagem: a figura apresenta a página espelho do livro The Works of Percy Bysshe Shelly,
com ilustrações, em branco e preto, de arabescos florais preenchendo quase todo o espaço das páginas,
enquadrando, à esquerda, o título The Poems of Percy Bysshe Shelly e, à direita, o texto introdutório. No
lado esquerdo, o título é apresentado dentro de um retângulo preenchido de arabescos florais e, no lado
direito, o texto da página é visto sobre um retângulo branco preenchido pelo poema.

27
UNIDADE 1

A influência da Kelmscott Press no Design Gráfico, em especial no design de

livros, não se limitou, apenas, ao direcionamento estilístico. O conceito de livro
bem projetado de Morris (com tipografias atraentes baseadas em letras antigas,
seu senso de unidade de design, com a atenção dada aos mínimos detalhes para
se relacionarem com o conceito geral) inspirou toda uma nova geração de de-
signers de livros. Seus livros alcançavam uma harmonia como um todo, suas
páginas tipográficas eram concebidas e executadas com a legibilidade em mente.

Figura 9 - Esboços de layout para The Bases of Design (1898), de Walter Crane
Fonte: Meggs (2009, p. 195).

Descrição da Imagem: a figura apresenta oito páginas espelho (spreads, ou páginas duplas) rascunhadas à
mão, com estilos de diagramação diferentes, dispostas duas a duas em quatro fileiras. As 16 páginas estão
em papel branco, com suas escritas em preto, rascunhadas à mão com estudos de diagramação diferente
para cada página. Também, vemos diferentes margens para cada página.

28
 UNICESUMAR

Art Nouveau

A disseminação do Art Nouveau ocorreu entre 1880 e

1914. Também era conhecido como Jugendstil, na Alema-
nha, e Sezession, no Império Austro-Húngaro. O movi-
mento ocorreu de maneira internacional, contando com
os arquitetos Henry Van de Velde, na Europa, Louis Sulli-
van, nos Estados Unidos da América, e Victor Dubugras,
no Brasil. Foi um período rico em soluções, e a análise
do trabalho desses três arquitetos permitiu a definição
de uma unidade fundamental e as mesmas diretrizes es-
téticas em qualquer objeto, desde uma capa de livro até
um edifício (SILVA, 2005). Ao contrário do Arts and Cra-
fts, segundo Azambuja (2021), o Art Nouveau, como seu
nome já afirma, desejava uma “arte nova” que se utilizasse
de novas possibilidades de construção, rompendo com a
arte do passado, para atingir uma linguagem decorativa
simplificada, com formas que apresentavam uma força ex-
pressiva e significados próprios.
Analisando as movimentações comerciais e culturais
da época, podemos encontrar uma das fontes de inspiração
para o movimento. De acordo com Meggs (2009), a cres-
cente troca e comunicação entre a Ásia e a Europa, durante
o final do século XIX, proporcionou uma colisão cultural.
Ambos, o Oriente e o Ocidente, experienciaram influências
recíprocas. A arte oriental proporcionou aos designers e ar-
tistas ocidentais a abordagem de espaço, cores, desenhos e
motivos, radicalmente, diferentes das tradições ocidentais,
ajudando a revitalizar o design gráfico da época. Especial-
mente, o estilo Ukiyo-e japonês, movimento artístico do
período Tokugawa (1603–1667), que significa “figuras de
um mundo flutuante”, cativou artistas europeus com seus
traços caligráficos, abstrações e simplificações do natural,
cores chapadas e silhuetas, uso ousado de formatos pretos e
uso de grafismos decorativos.

29
UNIDADE 1

Figura 10 - South Wind, Clear Dawn (1830–1832), de Katsushika Hokusai / Fonte: Meggs (2009, p. 211).

Descrição da Imagem: a figura apresenta xilogravura do Monte Fuji atingido pela luz do amanhecer,
contando com texto em japonês no canto superior esquerdo. O céu azul com nuvens em branco envolve
o Monte Fuji com sua metade superior em laranja e sua metade inferior em verde com texturas em preto.
A xilogravura possui 28,5 x 38,8 cm. O Monte Fuji, com seu topo coberto por neve, é atingido pela luz do
amanhecer, o que faz sua tonalidade superior ficar alaranjada, enquanto sua metade inferior apresenta as
árvores em tamanhos extremamente reduzidos a pequenos triângulos verdes que se estendem ao longo
da base do Fuji, atingindo, principalmente, a porção inferior esquerda da imagem, enquanto, ao fundo,
vemos o céu azul com um padrão de nuvens em formato de papel branco em escala.

O termo Art Nouveau surgiu em Paris, numa galeria do negociante de arte

Samuel Bing, que fez sua abertura, em 1895, como Salon de l’Art Nouveau (Sa-
lão Art Nouveau). Em conjunto de artes japonesas, “novas artes” de artistas
europeus e estadunidenses estavam à exposição e à venda. A galeria se tornou
um ponto de encontro internacional, onde muitos jovens artistas eram apre-
sentados (MEGGS, 2009). Segundo Meggs (2009), o Art Nouveau se configura
como um estilo transicional que evoluiu do historicismo, o qual dominou o
design pela maior parte do século XIX. Substituindo o uso das velhas formas e
estilos e rejeitando as abordagens do século XIX, o movimento se tornou a fase
inicial do movimento moderno — reparando o caminho para o século XX.

30
 UNICESUMAR

Figura 11 - Exemplo da Art Nouveau belga, Solvay Hotel, de Victor Horta, localizado em Bruxelas, Bélgica

Descrição da Imagem: na figura, há enquadramento do detalhe de uma porta em madeira, de cor mar-
rom claro caramelizado, com aspecto em verniz, também claro, com detalhes de talhamento em alto e
baixo relevo. Em partes, para ambos os lados da imagem, tendo, ao meio, o detalhe da madeira, vemos
dois espaços em vidro transparente e, sobre eles, a projeção de arabescos abstratos, em ferro, como se
saíssem de dentro da madeira e, assim, sobrepondo-se aos vidros, típicos da Art Nouveau.

O aspecto visual do movimento se caracterizou por

movimentos lineares orgânicos, o uso de cores e tex-
turas. Anteriormente, os ornamentos, frequentemente,
eram utilizados como elementos decorativos aplicados
à superfície dos edifícios ou dos objetivos, e, no Art
Nouveau, a forma básica dos objetivos ou dos edifícios
era envolta com o design do ornamento. Isso era um
novo princípio de design: a unificação da decoração,
da estrutura e da intenção de função. Além disso, por
conta de suas formas e linhas exigirem um processo
inventivo, em vez de copiativo (da natureza ou do pas-
sado), houve uma revitalização do processo de design
em direção à arte abstrata.

31
UNIDADE 1

Figura 12 - Antiga casa e ateliê de Victor Horta, em Bruxelas. Hoje, é onde reside o museu dedicado
à vida e obra do arquiteto belga

Descrição da Imagem: a figura apresenta uma fotografia da antiga casa e ateliê de Victor Horta, em
Bruxelas. Na fachada, vemos uma porta larga em bronze, à direita, e diversas janelas que apresentam
grades minuciosamente estilizadas no estilo Art Nouveau, em cor bronze, contrastando com paredes
acinzentadas. As janelas se dispõem ao lado da porta e acima, onde há grades que simulam uma espécie
de sacada, também com grades em bronze.

No âmbito gráfico, dois artistas franceses tiveram importante

papel na transição para o Art Nouveau: Jules Chéret e Eugè-
ne Grasset. Estes trabalhavam em Paris, em 1881, quando uma
nova lei de liberdade de expressão foi instaurada, permitindo
cartazes em quaisquer lugares, com exceção de igrejas, piscinas
e áreas designadas para publicações oficiais. Essa lei permitiu
grande avanço da indústria de cartazes, que contratou muitos
designers, impressores e afficheurs (responsáveis pela colagem
dos cartazes). Nessa época, o Arts and Crafts estava criando um
novo respeito para as artes aplicadas, e Jules Chéret participou
da consolidação desse caminho (MEGGS, 2009).

32
 UNICESUMAR

Gustav Klimt (1862–1918) é conhecido como um artista por

excelência do movimento Art Nouveau, mas ele foi um dos
vários artistas vienenses que se esforçou para se libertar das
restrições do estabelecimento de arte acadêmica do final do
século XIX. Suas obras deixam expressas as profundas mu-
danças que estavam ocorrendo na virada do século XIX para
o século XX. Apesar de estar envolvido no Art Nouveau como
artista, o estilo de suas obras é único e atípico. Suas obras,
frequentemente, eram revestidas ricamente de ouro, e sua
ideologia se estendia para sua estética, expressando uma ex-
ploração emocional e existencialista que buscava a liberdade
das amarras das convenções da época. Acesse QR Code para
ouvir o podcast a respeito da vida e obra desse grande artista.

Ainda de acordo com Meggs

(2009), Cherét é, atualmente,
considerado pai do cartaz mo-
derno e acreditava, desde jo-
vem, que o pôster pictórico im-
presso em litografia substituiria
o tradicional cartaz tipográfico
impresso em letterpress. Duran-
te a década de 1870, o artista
evoluiu do estilo Vitoriano e sua
complexidade para uma versão
simplificada de seus designs,
bem como aumentado, cada vez
mais, a escala de suas figuras e
seus letterings. Em 1884, alguns LOREM

dos pôsteres de Chéret foram

produzidos em tamanhos de até
DESIG
dois metros de altura.
IPSUM

LOREM
DOLOR

33

IPSUM
UNIDADE 1

Figura 13 - Palais de Glace, Champs-

-Élysées (Palácio do Gelo, Champs-
-Élysées) (1893), de Jules Chéret
Fonte: Meggs (2009, p. 215).

Descrição da Imagem: em pri-

meiro plano, há uma mulher, de
pele clara e cabelos loiros, que é
vista de costas, tendo a cabeça, le-
vemente, inclinada e voltada para
os olhos do observador. Ela é o
foco principal. O braço esquerdo
está, ligeiramente, voltado para
trás, e o dorso da mão toca suas
costas, enquanto o braço direito
projeta sua mão, vestida com
luva de inverno na cor cinza, para
frente, acima da sua cabeça. Na
cabeça, há um chapéu vermelho
com plumas no mesmo tom e o
casaco se apresenta, também, em
vermelho intenso. No pescoço, há
um boá de plumas brancas, que
faz contraste com o babado tam-
bém branco, que é visto no punho
da manga esquerda. Nos pés, há
sapatos especiais para patinação.
Em segundo plano, para sua fren-
te, indo para o lado direito, vemos
a silhueta de uma outra mulher e,
mais a frente dessa, outras duas
silhuetas, mas masculinas. Todos
estão sobre a pista de patinação
no gelo do Palácio do Gelo. Na
parte superior, em letras garra-
fais, lemos “Palais de Glace” em
azul marinho, mesma cor usada
para as palavras “Champs Ely-
sées”, também em letras garrafais
vistas no rodapé do pôster, que
possui 246 x 88 cm.

34
 UNICESUMAR

Chéret trabalhava, diretamen-

te, na pedra, ao contrário das
práticas comuns da época,
em que um artesão executa-
va, na pedra, os projetos dos
designers. Durante a década
de 1880, ele utilizou, majori-
tariamente, linhas pretas com
cores primárias (vermelho,
amarelo e azul) em seus traba-
lhos, alcançando alto nível de
vitalidade com essas cores vi-
brantes. Isso, somado a efeitos
sutis de sobreimpressão, per-
mitia que seus trabalhos alcan-
çassem uma incrível variedade
de cores e efeitos. Uma de suas
características mais marcantes
são as mulheres jovens e boni- Figura 14 - Pôster L’aureole du midi, Pétrole de Sureté
tas que ilustravam seus traba- (1893), de Jules Chéret / Fonte: MEGGS (2009, p. 215).
lhos, chamadas, pelo público
Descrição da Imagem: a figura apresenta duas perso-
admirado, chérettes. As figuras nagens crianças em justaposição com a tipografia. O
título é apresentado em arco na cor vermelha e mais
eram arquétipos, não, apenas, informações são apresentadas, ao centro, em amarelo
uma apresentação idealiza- com fundo azul. No canto inferior esquerdo, há informa-
ções sobre o produto apresentadas em azul. A persona-
da da figura feminina para a gem central, de pele branca e cabelos loiros, com vestido
vermelho de bolinhas brancas, segura uma lamparina,
mídia de massa, mas uma re- enquanto a outra, no canto inferior direito, de branca e
cabelos vermelhos, com vestido verde, segura um galão
presentação da mulher fran- de óleo para lamparinas. Ambas sobrepondo um fundo
azul que se torna amarelo ao interagir com a lamparina
cesa que usava seus vestidos e nas mãos da personagem central.
aparente estilo de vida como
inspiração. Seu trabalho é tido
como responsável por introduzir um novo papel modelo da mulher no final
da era vitoriana, estando relacionado à liberação feminina (MEGGS, 2009).
Segundo Meggs (2009), Grasset, artista de nacionalidade suíça, foi o primeiro
ilustrador e designer a ser comparado com a popularidade de Chéret. Ele havia
estudado, intensamente, arte medieval, e essa influência, somada com seu amor

35
UNIDADE 1

por artes orientais exóticas, foi refletida, fortemente, em seus designs para mó-
veis, vitrais, tecidos e livros. Uma conquista marcante, tanto para o design gráfico
quanto para a tecnologia de impressão, foi a publicação de Histoire des Quatre
Fils Aymon (Conto dos Quatro Filhos de Aymon), em 1883, com design e ilus-
trações feitos por Grasset. Foi impresso em aquatint-grain/color photo a partir
de placas realizadas por Charles Gillot. Com essa técnica, Gillot transformou as
ilustrações em aquarela de Grasset em um livro de ilustrações, completamente,
colorido. Eles colaboraram de maneira muito próxima por dois anos, exaustiva-
mente, para alcançarem o resultado final.

Figura 15: Página de título de Histoire des Quatre Fils Aymon (1883), de Eugène Grasset
Fonte: Meggs (2009, p. 216).

Descrição da Imagem: com zonas de separação para o espaço da página, Grasset unificou as letras, as
ilustrações e os grafismos decorativos em um design unificado. No centro da ilustração, vemos um cavaleiro
de armadura segurando uma lança em cima de um cavalo preto, os dois são vistos de perfil. No canto inferior
direito, também de perfil, há uma águia dourada que segura, em suas garras, uma espada sendo estrangulada
por uma mão desenhada com traços fortes. Posicionada como um recorte em primeiro plano, de cima a
baixo, próximo ao lado esquerdo da imagem, há uma régua com flores e folhas. Por fim, próximo ao canto
superior esquerdo, há um texto em francês “histoire de quatre fils aymon”. A ilustração possui 27,8 x 22,2 cm.

36
 UNICESUMAR

Figura 16 - Página de título do capítulo e página de texto de Histoire des Quatre Fils Aymon (1883), de
Eugène Grasset / Fonte: Meggs (2009, p. 216).

Descrição da Imagem: o layout apresenta uma unidade estrutural de tipografia, imagem e ornamento. A
ilustração, à esquerda, apresenta dois personagens com indumentária oriental em fundo amarelo e duas
áreas emolduradas para apresentar informações textuais, em fundos cinza e amarelo pálido, respectiva-
mente, e uma ilustração de ave, que aparece em fundo laranja. Já a ilustração, à direita, atravessa o texto
com a evolução gráfica de uma ave voando, sendo representados vários estágios de seus movimentos.
As ilustrações possuem 27,8 x 22,2 cm.

Em 1886, Grasset recebeu sua primeira comissão para um pôster, mas, logo,
suas donzelas esguias com túnicas longas e esvoaçantes, com poses estáti-
cas para anunciar tintas, chocolates e cerveja, começaram a agraciar as ruas
francesas. Com seu estilo, chamado “estilo livro de colorir”, que apresentava
contornos pretos grossos separando formas em áreas planas de cores, se-
melhantes aos vitrais medievais, as composições que ecoavam Botticelli e as
cores suaves contrastavam, fortemente, com o trabalho de Chéret — caracte-
rizado por composições informais e cores altamente brilhantes.

37
UNIDADE 1

Figura 17 - Salon des Cent (de 1894), de Eugène Grasset

Fonte: Meggs (2009, p. 217).

Descrição da Imagem: figuras recatadas, em vez de exuberantes,

projetavam uma mensagem muito diferente daquela de Chéret. A
personagem de pele branca e vestido laranja com cabelo vermelho
toma toda a área da ilustração dentro de uma moldura. Abaixo da
personagem, está escrito “exposition” e “E. Grasset” e, acima, “Salon
des Cent”. A personagem é vista de perfil, próximo ao lado esquerdo
da imagem, e sua visão é direcionada para o lado direito. Ela segura
um livro e um lápis com a mão direita, próximo de seu peito, e, com
a mão esquerda, segura uma flor perto de seu rosto, cujas as pétalas
são amarelas e o galho, marrom. A ilustração possui 60,6 x 41,3 cm.

38
 UNICESUMAR

Apesar de sua atitude aparentemente tradi-

cional, seus traços, suas cores subjetivas e os
onipresentes motivos florais apontavam, forte-
mente, para o Art Nouveau francês. Suas obras
incluem papéis de parede, design de tecidos, vi-
trais, tipografias e ornamentos para impressores
(MEGGS, 2009). Apesar dos diversos nomes de
destaque que existem dentro do Art Nouveau no
aspecto artístico, iremos nos focar em um últi-
mo artista que teve grande influência no design
gráfico, Alphonse Mucha.
Segundo Meggs (2009), o jovem artista tche-
co se aventurou para Paris com 27 anos, onde
passou dois anos estudando com apoio de um
benfeitor. Quando o apoio financeiro subita-
mente acabou, Mucha se viu em um período de
terrível pobreza. Foi, então, que sua forte habi-
lidade de desenho o ajudou a conquistar a acei-
tação como um ilustrador confiável. Na véspera
de Natal, em 1894, Mucha estava na companhia
de impressão Lemerciers, diligentemente, cor-
rigindo provas para um amigo que havia tirado
folga. Quando o gerente da firma surgiu com
uma demanda para o dia do Ano Novo, Mucha,
sendo o único artista presente, recebeu a co-
missão. Utilizando mosaicos bizantinos como
inspiração e motivos de fundo da composição,
Mucha produziu algo completamente distinto
de seus trabalhos anteriores. Apesar da parte
inferior do cartaz estar inacabada por causa do
prazo de uma semana para realizar o design, a
impressão e a colagem, a complexidade de seu
trabalho, em conjunto com as cores suaves, se-
parava seu trabalho do trabalho de Chéret, dei-
xando os parisienses maravilhados.

39
UNIDADE 1

Meggs (2009) afirma que, a partir do

primeiro dia de 1895, Mucha começou
sua ascensão meteórica. As tendências
pela Europa estavam convergindo para
o que seria rotulado de Art Nouveau.
Apesar de Mucha resistir o rótulo, por

Figura 19 - Pôster para papéis de cigarro Job (1897),

de Alphonse Mucha / Fonte: MEGGS (2009, p. 224).

Descrição da Imagem: a figura apresenta uma per-

Figura 18 - Pôster Gismonda (1894), de Al-
phonse Mucha / Fonte: Meggs (2009, p. 224).
Descrição da Imagem: a figura apresenta
uma personagem central que toma qua-
se toda a área do pôster com um vestido
exuberante em dourado e azul. Apresenta
uma coroa de flores em seu cabelo loiro e
um grande ramo de folhas em sua mão di-
reita, que tampa parte do título do cartaz.
Está localizada no centro da peça e, acima
dela, está escrito “Cismonda” e “Bernnardt”
e, abaixo, “Theatre Renaissance”. A figura
foi projetada em tamanho real, e sua forma
alongada produz uma sensação noturna. A
ilustração possui 216 x 74 cm.
sonagem de cabelos laranja esvoaçantes que toma a
área do cartaz e um cigarro em sua mão sobrepondo
o texto “job”, em um fundo marrom com molduras
em laranja. A ilustração possui 155,5 x 104,5 cm. A
mulher jovem, vista da cintura para cima, em perfil,
com olhos voltados para o lado esquerdo da ima-
gem, possui pele clara, cabelos alaranjados com um
adorno sobre eles, sendo volumosos e compridos,
indo até a linha da cintura, jogados para frente do
seu corpo. Apresenta o braço direito flexionado,
onde segura um cigarro que libera a fumaça que
sai estreita e vai se encorpando em forma de zig-zag,
passando por trás da mulher e indo em direção ao
topo do pôster. A mulher apresenta cabeça leve-
mente inclinada para cima, mostrando que o olho
está fechado e os lábios em vermelho, tendo a boca
levemente aberta. A marca do cigarro é apresentada
em letras garrafais em verde com bordas em laranja,
a mulher está à sua frente escondendo, parcialmen-
te, detalhes da palavra. No canto inferior direito,
vemos também a assinatura do artista.

40
 UNICESUMAR

acreditar que “arte é eterna e, as-

sim, nunca poderia ser nova”, o
desenvolvimento de seu traba-
lho, ao longo dos anos, tornou-
-se, inseparavelmente, ligado ao
difuso movimento internacio-
nal Art Nouveau.
Com o tempo e a evolução do
movimento em direção aos mo-
tivos florais, Mucha desenvolveu
seus grafismos, e seu tema mais
dominante era uma figura femi-
nina central envolvida de formas
estilizadas derivadas de plantas,
flores, vitrais bizantinos e, até
mesmo, de magia e ocultismo. Seu
trabalho era tão presente que, por
volta de 1900, o Le Style Mucha
era comumente utilizado para se Figura 20 - Pôster da exposição do Ministério do Co-
mércio da França (1904) na Louisiana Purchase Exposi-
referir ao L’Art Nouveau. As mu- tion, em Saint Louis, Missouri, de Alphonse Mucha
Fonte: Meggs (2009, p. 226).
lheres de Mucha projetavam um
senso arquetípico de irrealidade. Descrição da Imagem: a figura apresenta uma mulher,
Ao mesmo tempo que eram exó- com vestido laranja, apertando a mão de um estereo-
tipado nativo norte-americano com um típico cocar
ticas e sensuais, suas personagens vermelho de penas verdes em sua cabeça. A ilustração
está ao centro de uma moldura que possui seu título na
mantinham uma aura de inocên- parte superior: “Exposition Universelle & Internationale
de St. Louis”, ao centro de duas abstrações visuais de
cia e não expressavam nenhuma figuras do estereótipo nativo norte-americano. Na par-
idade específica, nacionalidade te inferior, são apresentadas informações adicionais
sobre a exposição. A ilustração possui 107,3 x 74,3 cm.
ou período histórico.
Até então, em nossa linha
do tempo, podemos perceber que a Arte está, intrinsecamente, ligada ao
que seria, posteriormente, definido como a profissão de designer gráfico.
As preocupações técnicas, racionais e estéticas já estavam se mesclando,
proporcionando o projeto de obras que atendesse às necessidades comer-
ciais e estéticas ao mesmo tempo. O Art Nouveau deixa presente a preocu-

41
UNIDADE 1

pação estilística dos designers, revelando forte ligação com a arte tradicio-
nal nesse aspecto, por mais que os nomes desse movimento desejavam se
afastar de tais visões.
É importante perceber como a mudança foi gradual, mas constante e muito
impactante na vida das pessoas. Percebe-se que esse impacto, ainda, não se li-
mitou, apenas, ao mundo da Arte, mas também influenciou a maneira de con-
sumo e, consequentemente, a maneira que as pessoas viviam em sociedade.
Com esse embrião racionalista implantado na mente dos designers e artistas,
perceberemos, em nossa próxima unidade, como isso foi um elemento-chave
na formalização do designer como um profissional diferente do artista e de
qualquer outro até então.

NOVAS DESCOBERTAS

Título: Design gráfico: uma história concisa

Autor: Richard Hollis
Editora: Martins Fontes
Sinopse: a história do design gráfico é uma das mais empolgantes e
interessantes da história cultural do século XX. Desde suas raízes, na
fase de desenvolvimento da imprensa, o design gráfico evoluiu como meio de
identificação, informação e promoção, tornando-se uma disciplina e profissão
por seus próprios méritos.

Bom, caro(a) aluno(a), você pode perceber, nesse início da linha do tempo
da história do Design Gráfico, que o pensamento racionalista começou a
ser implementado nas artes gráficas. Começou-se a pensar em uma produ-
ção que abandonava determinadas tradições e valorizava certas ideologias
iluministas. Com o tempo, esse início proporcionou os questionamentos
que permitiram o surgimento do Design. Este, ainda hoje, é tido como
uma profissão quase que sempre ligada, apenas, à técnica. Entretanto o De-
sign nasceu a partir de pensamentos e ideologias, e isso reflete muito nossa
atuação no mercado de trabalho.

42
 UNICESUMAR

Com essas primeiras décadas abordadas em nosso conteúdo, convido

você a refletir sobre como nossa profissão, ainda hoje, enfrenta diversos de-
safios que esses grandes nomes enfrentaram. Eles, também, passaram por
dificuldades e conflitos para introduzir uma nova forma de pensar e abordar
as artes gráficas, e, até hoje, seus nomes ecoam em nossa história, tão grande
foram suas contribuições para nossa profissão. Como você poderia ajudar o
Design, como classe e profissão, a enfrentar os desafios de desvalorização e
desentendimento tão comuns em nossa área?

43
Para nossa avaliação, caro(a) aluno(a), faça um Mapa da Empatia. Você abordou
conceitos e momentos importantes da história de sua futura profissão, e, com
certeza, o conhecimento que você obteve deve ter mudado a maneira como você
enxerga o Design, não é mesmo?

Quais são as NECESSIDADES?

Quais são as DORES?
2
Consolidação e
Contemporaneidade
do Design Gráfico
Esp. Renan Ferreira Venancio

Nesta segunda unidade, você terá a oportunidade de entender o pro-

cesso de consolidação do Design como profissão e suas principais
atuações no mercado contemporâneo. Entenderemos como os pensa-
mentos e as filosofias dos movimentos artísticos envolvidos no nasci-
mento do Design evoluíram para construir uma nova forma de pensar.
UNIDADE 2

A difusão e a consolidação do Design como pro-

fissão, ao redor do mundo, são muito recentes,
como veremos a seguir. Entretanto, em nosso
cotidiano, os profissionais de Design permeiam
inúmeros setores, indústrias e níveis administra-
tivos, desde empresas de comunicação até indús-
trias do agronegócio, operadores de software até
estrategistas de negócios. O Design é um campo
amplo, complexo e de grande valor para as trans-
formações que o mercado global está sofrendo
nas últimas décadas.
Entender o pensamento racionalista que per-
mitiu que ajudasse designers a se posicionarem
como uma nova classe de profissionais, entre
o público e a empresa, pode nos ajudar a com-
preender nossa função nesse relacionamento.
Então, como é possível identificar possibilidades,
até então, desconhecidas? Assim, convido-o(a) a
pensar na maneira como o pensamento e a ne-
cessidade de ordem ajudaram os grandes mestres
do passado a elaborarem um pensamento estru-
tural visual e gráfico, pois esse pensamento per-
meia nossa profissão até hoje.
Com a evolução das tecnologias gráficas, a
profissão de designer gráfico foi se tornando mais
popular. Hoje, de certa forma, um computador
comum pode permitir qualquer pessoa a realizar
um projeto de design gráfico e, até mesmo, impri-
mi-lo e usá-lo comercialmente sem muitas com-
plicações: cartões de visita, identidades visuais,
folhetos. Entretanto o lado técnico do Design é
muito presente. O designer gráfico não é um pro-
fissional de, apenas, uma ferramenta, mas um
profissional de múltiplas, e, em muitos casos, é ele
quem faz a sua própria ferramenta.

48
 UNICESUMAR

49
UNIDADE 2

Com a difusão dos smartphones, podemos realizar peças outrora comple-

xas e difíceis com muita facilidade. Por exemplo: uma foto de celular de uma
folha de árvore pode ser um elemento utilizado na produção de um cartaz de
uma exposição. O tradicional estúdio do designer se tornou, com o tempo, um
computador e, hoje, podemos ver ele se tornando um simples smartphone.
Utilize seu celular ou uma câmera fotográfica para produzir uma peça grá-
fica. Repense, por exemplo, a capa deste nosso livro. Como você pode utilizar
elementos de seu contexto para projetar esta capa? Você utilizaria fotos? Que
tipos de textos seriam necessários apresentar? Como você apresentaria esses
textos sem incluí-los no seu layout a partir de um computador? Esse é um exer-
cício de restrição. Restringindo suas ferramentas, você será capaz de encontrar
seu real potencial criativo. Não dependendo de “efeitos mágicos” de softwares
ou aplicativos, você precisará pensar por conta própria, contando, apenas, com
aquilo que você tem de tangível ao seu redor.
Utilize seu diário de bordo para analisar como ocorreu a consolidação do
profissional de design gráfico no mercado, da maneira que conhecemos hoje.
A mudança no Pós-Guerra, o pensamento racionalista e as expressões visuais
“puras e gráficas” são sintomas de uma mudança de pensamento muito pro-
funda que ocorreu na sociedade. Analise e entenda como isso ocorreu e, mais
importante, qual foi essa mudança.

50
 UNICESUMAR

O Modernismo e a
Bauhaus

Avançando na linha tempo, pas-

sando por movimentos artísticos
e culturais da virada e do início
do século XX, chegamos ao Mo-
dernismo, um importante mo-
vimento na história do Design
Gráfico e da Arte. Ele englobou
belas artes, design gráfico e ar- Figura 1 - Composição em Vermelho, Amarelo e Azul
quitetura, por meio de diversos (1927), de Piet Mondrian / Fonte: Meggs (2009, p. 332).
movimentos, como Cubismo,
Descrição da Imagem: a figura traz um quadro óleo
Futurismo, Suprematismo, Da- sobre tela, que apresenta quadrados brancos em ta-
daísmo, Construtivismo, De Stijl manhos variados e espaçados com linhas pretas, sendo
um deles visto tomando quase a totalidade da tela. Em
e Bauhaus, cujos artistas e desig- contraste aos formatos brancos, são apresentados, na
parte superior esquerda, um quadrado azul, na parte
ners atuavam em diversas cate- inferior direita, um pequeno retângulo vermelho e, na
parte inferior central, um retângulo amarelo. Tamanho
gorias (ARNTSON, 2006). de 40 x 50,5 cm.
As escolas De Stijl e Bauhaus
apresentam importante influên-
cia na história do Design como um
todo. Segundo Arntson (2006), De
Stijl se desenvolveu na Holanda por
artistas que decidiram evitar se en-
volver, diretamente, com a Primeira
Guerra Mundial. Ele surgiu no verão
de 1917, com o arquiteto, pintor e
poeta Théo Van Doesburg, como seu
fundador, contando com a presença
de artistas, como Piet Mondrian, Bart
Anthony Van Der Leck e Vilmos Hus-
zár. O grupo, também, contava com
arquitetos, dentre eles, estava Jacobus
Johannes Pieter Oud (ARNTSON,
2006; MEGGS, 2009).

51
UNIDADE 2

Era um movimento vanguardista que utilizava, como base, uma revista

de mesmo nome que surgiu como um experimento tipográfico e teve seu de-
sign projetado por Vilmos Huszar. Uma forte coerência estilística era presen-
te nos trabalhos do grupo, com o uso de cores primárias, formas retangulares
e composições assimétricas. O estilo ficou, internacionalmente, mais conhe-
cido pelas diversas pinturas não-figurativas de Mondrian (AYNSLEY, 2004).

Figura 2 - Páginas de rosto de De Stijl, de 1918, por Vilmos Huszár / Fonte: Meggs (2009, p. 333).

Descrição da Imagem: a figura apresenta uma página dupla com um estudo gráfico de figura/fundo
positivo/negativo e suas relações espaciais. À esquerda, é apresentado um texto, de forma centralizada,
com tipografia pesada enquadrado com linhas pretas, enquanto, à direita, uma abstração de retângulos
positivos e negativos em preto e branco toma a página. Aqui, o enquadramento com linhas pretas é visto
na lateral direita e inferior e as linhas em branco, na lateral esquerda e na parte superior da imagem.
Tamanho de 26 x 19,1 cm.

Segundo Meggs (2009), durante um período de tempo no final da década de

1910, as pinturas e os designs de Mondrian, Van Der Leck e Van Doesburg
eram bastante similares. Ambos tinham reduzido seus vocabulários visuais ao
uso de cores primárias e neutras, retas linhas horizontais e verticais e planos
chapados limitados pelos retângulos ou quadrados. Com sua linguagem visual
bem definida, o movimento buscava a expressão de uma estrutura matemática

52
 UNICESUMAR

e universal bem como a harmonia universal da natureza. Atentos aos aconte-

cimentos de seu tempo, os artistas desejavam expressar uma “consciência geral
de sua era”. Uma forma de mostrar sua crença de que a guerra era obsoleta e a
ciência, a tecnologia e o desenvolvimento político proporcionariam uma nova
era de objetividade e coletivismo. Essa visão ressoou em muitos filósofos eu-
ropeus que acreditavam que os valores anteriores à Primeira Guerra Mundial
tinham perdido sua relevância (MEGGS, 2009).
Por causa da Primeira Guerra Mundial, o pôster, a seguir, não pôde ser usa-
do: as companhias marítimas entre a Holanda e o Reino Unido foram cancela-
das no período. Na década de 1920, quando foi finalmente utilizado, seus textos
e cores foram alterados, deixando Van der Leck enfurecido. Esse exemplo é a se-
gunda impressão do pôster, e não o desenho original do artista (MEGGS, 2009).

Figura 3 - Pôster Linha Batavier (1916), de Bart van der Leck / Fonte: Meggs (2009, p. 333).

Descrição da Imagem: a figura apresenta um cartaz de design composto de cores planas e puras com
divisões espaciais, horizontais e verticais. O terço horizontal superior do cartaz apresenta três terços
verticais com representações gráficas de diferentes pessoas. À esquerda, vemos a representação de um
trabalhador, de camisa azul e calça marrom, um personagem uniformizado de marrom, à direita, uma
família composta de um homem, de terno preto, uma mulher, de vestido marrom, e uma criança, de
vestido azul, acompanhados de um trabalhador, de camisa azul e calça marrom. Nos dois terços verti-
cais restantes do cartaz, vemos a representação de um navio, de cor preta, com logo M em negativo em
quadrado vermelho. Tamanho de 72,4 x 108,9 cm.

53
UNIDADE 2

De acordo com Meggs (2009), os adeptos ao movimento acreditavam que a

beleza surgia da mais absoluta pureza de trabalho. Buscavam purificar a arte
ao banir as representações naturalísticas, os valores externos e a expressão
subjetiva. Um bom trabalho necessitava de uma harmonia universal, da or-
dem que permeia todo o universo.

Figura 4 - Capa para De Stijl, de 1922, por Théo van Doesburg / Fonte: Meggs (2009, p. 334).

Descrição da Imagem: a figura ilustra tipografias sem serifa, nas cores vermelha e preta, de tamanho
variado, são equilibradas assimetricamente nos quatro cantos de um retângulo implícito na página em
branco. Tamanho de 21 x 26 cm.

54
 UNICESUMAR

Figura 5 - Interior do Café L’aubette, em Estrasburgo, na França, por Theo van Doesburg
Fonte: Poulin (2012, p. 79).

Descrição da Imagem: a figura apresenta uma fotografia do interior de um café com paredes decoradas
de quadrados e retângulos, nas cores azul, vermelho, verde, amarelo, cinza, branco e preto. Os assentos
são divididos por pequenas divisórias, na cor branca, com bordas pretas, e o chão é composto de tacos
de madeira, tendo destaque para o corredor central, que evidencia o detalhe amadeirado separando os
espaços de assentos. No teto em branco, replica-se a decoração encontrada nas paredes e são vistas duas
fitas com várias luzes de foco voltadas com a iluminação para o teto, acompanhando no alto, as laterais
do corredor para ambos os lados.

A procura de uma forma de arte, puramente, de relacionamentos visuais

permaneceu como uma influência central nas disciplinas visuais de todo o
século XX. Uma das direções mais dominantes, dentro do Design Gráfico,
foi e tem sido o uso de construções geométricas organizadas em páginas im-
pressas. O trabalho de Mondrian, com pureza nas linhas, formas e cores,
para criar um universo de relacionamentos puros, harmônicos e ordenados,
foi um visionário protótipo de uma nova ordem mundial. A unificação dos
valores sociais e humanos, da tecnologia e da forma visual se tornou um ob-
jetivo para aqueles que desejavam uma nova arquitetura e um novo design
gráfico (MEGGS, 2009).

55
UNIDADE 2

Figura 6 - Catálogo, de 1930, por W. H. Gispen, exemplo de aplicação das ideias da De Stijl em designs
comerciais, em que a nova tipografia era combinada com fotografias / Fonte: Aynsley (2004, p. 55).

Descrição da Imagem: a figura traz a ilustração de duas páginas de um catálogo, onde temos fotografias
recortadas. À esquerda, vemos uma lâmpada envolta de tipografias pretas e vermelhas, enquanto, à direita,
uma foto de um artesão é apresentada com sua metade esquerda sob um filtro vermelho e sua metade
direita em preto e branco. Tipografias pretas e vermelhas sobrepõem e envolvem a foto do artesão.

Uma escola, em especial, marcou seu nome na história do design de maneira in-
comparável. A Bauhaus é a mais influente e reverenciada escola de Design. Essa
escola alemã definiu o design do século XX — em todas as disciplinas: gráfico,
mobiliário, produtos, arquitetura. Com a influência do Expressionismo, Dadaís-
mo, Construtivismo e da De Stijl em seus primórdios, a Bauhaus treinava artistas
e designers de todas as áreas. Ao final da década de 1920, sua visão enfatizava o
design gráfico funcional. Seu objetivo era reduzir o intervalo entre arte aplicada
e arte teórica, atribuindo igual importância em todas as áreas de arte e trabalhos
manuais. Valorizavam-se formas limpas e funcionais, entretanto seus estudantes
e artistas não se preocupavam em produzir obras de arte, mas, sim, bens com
design útil onde a forma estava, intrinsecamente, ligada à função. Foi nesse mo-
mento que surgiu o Design Industrial, e a contribuição dos artistas e designers
da Bauhaus, ainda hoje, é de grande influência no Design (ARNTSON, 2006).

56
 UNICESUMAR

Figura 7 - Edifício icônico, em Dessau, da escola de arte Bauhaus, projetado pelo arquiteto Walter
Gropius, em 1925. É uma obra-prima da arquitetura moderna

Descrição da Imagem: a figura apresenta uma fotografia, tomada durante a luz do dia, da fachada do
prédio da Bauhaus, em Dessau, Alemanha. Uma parede de vidro encontra uma parede pintada de cinza,
onde está presente, em branco, o nome da escola em sua tipografia original com letras volumétricas
apresentadas verticalmente. Ao entorno, vemos vias de acesso com a presença de calçamento e vegetação
rasteira e algumas árvores mais ao fundo.

Em 1919, quando Walter Gropius foi convidado a dirigir uma instituição que
unificava as artes aplicadas com as belas artes, ao ser permitido a dar o novo
nome da escola, batizou-a de Das Staatliche Bauhaus (Casa do Estado para
Construção), que abriu em 12 de abril de 1919. O manifesto da escola, escrito
por Gropius, foi publicado em jornais alemães no mesmo ano, definindo a filo-
sofia da nova escola.

Com seu manifesto inspirador, Gropius deu início à filosofia

da Bauhaus. Clique no QR Code para acessar nosso podcast
e ouvir o manifesto!

57
UNIDADE 2
Figura 8 - Selo da Bauhaus, de 1922, por Oskar
Schlemmer / Fonte: Meggs (2009, p. 346).
Descrição da Imagem: a figura traz a repre-
sentação do selo da Bauhaus, que apresenta
um design que denota a orientação geomé-
trica e a máquina emergente. A silhueta de
um rosto é formada com retângulos positi-
vos em um espaço negativo dentro de um
círculo. A tipografia com o nome da escola
acompanha o círculo, também, sendo en-
capsulado por outro círculo com traço mais
grosso, tudo visto em preto e branco.
A Bauhaus foi a culminação da preocu-
pação alemã do design para uma socie-
dade industrializada que começou no
início do século XX. Nos anos iniciais
de 1919 e 1924, em Weimar, a escola
era, intensamente, visionária, com o
desejo utópico de criar uma nova so-
ciedade espiritual, unificando artistas e
artesãos para construírem o futuro. Os
workshops de vitrais, madeira e me-
tal eram ensinados para os alunos em
aulas com um artista e um artesão na
mesma sala. Gropius estava, profunda-
mente, interessado no potencial sim-
bólico da arquitetura e na possibilidade
de um estilo de design universal como
um aspecto integrador da sociedade
(MEGGS, 2009).
Com o tempo, ideias avançadas e,
fundamentalmente, diferentes sobre
forma, cor e espaço foram integradas
ao vocabulário de Design — com a
entrada de Paul Klee e Wassily Kan-
dinsky, como professores da escola,
entre 1920 e 1922. O centro de edu-
cação da Bauhaus era chamado de
Vorkurs (Curso Preliminar), estabele-
cido por Johannes Itten. Seu objetivo
era liberar as habilidades criativas de
cada estudante, desenvolvendo um
entendimento da natureza física dos
materiais, ao mesmo tempo que se en-
sinavam os princípios fundamentais
de design por trás de toda arte visual.
Sua abordagem de experiência direta
58
 UNICESUMAR

desenvolvia a consciência perceptiva e as habilidades intelectuais e permitia

uma experiência emocional.

EXPLORANDO IDEIAS

A Bauhaus é o local onde normalizou-se a fluência do designer em diversas mídias e ma-

teriais. Até então, era muito comum os artesãos e artistas se focarem em, apenas, uma
única mídia para realizarem seus trabalhos. Mas o curso preliminar da escola garantia
que o aluno encontrasse e trabalhasse com diversos tipos de materiais, para entendê-los
e utilizá-los de maneira mais eficiente. Foi com esse pensamento que a Bauhaus tornou
possível o nascimento do Designer Industrial.
Para nós, designers contemporâneos, conhecer a história de maneira mais teórica pode
ser um pouco abstrato em relação ao conceito apresentado no Vorkurs. Entretanto, no
cotidiano do profissional de Design de Produto, essa fluência e flexibilidade são muito
reais e presentes. Nos dias de hoje, nossa indústria permite inúmeras formas e formatos
de cadeiras, mas, na época da Bauhaus, muitas das possibilidades que são “normais” para
nós eram impossíveis ou inexistentes.
Imagine, por exemplo, a construção de uma cadeira. Como poderíamos fazer o redesign
de uma cadeira tipicamente realizada em madeira (ou MDF) em metal, de maneira a res-
saltar as características desse novo material, em vez de tentar “imitar” a forma original
do objeto? Esse é um ótimo exercício quando estamos projetando e selecionando nossos
materiais. Em vez de se preocupar puramente com a forma, tente entender quais possi-
bilidades que o material que você terá à disposição o(a) oferecem. Sua forma final pode
usar de propriedades únicas desse material, tornando-se um projeto mais inovador.

Segundo Meggs (2009), por conta de con-

flitos entre a escola e o governo, onde as
autoridades insistiram em uma exibição
das conquistas da Bauhaus, ocorreu sua
primeira exibição em 1923, em que mais
de 15.000 pessoas participaram, contando
com visitantes internacionalmente acla-
mados. O cartaz preparado para a exibi-
ção, com design de Joost Schmidt, tra-
zia o novo símbolo projetado por Oscar
Schlemmer combinado com formas geo-
métricas e mecânicas, refletindo a visão da

59
UNIDADE 2

escola. Com ecos do Cubismo, Construtivismo e De Stijl, são apresentadas

evidências de que a Bauhaus combinava diversos estilos em novas aborda-
gens de design, como representado pelo pôster a seguir (MEGGS, 2009).

Figura 9 - Pôster de exposição da Bauhaus, de 1923, por Joost Schmidt / Fonte: Meggs (2009, p. 346).

Descrição da Imagem: a figura traz a representação de um pôster com fundo bege e as demais cores
estampadas em preto, vermelho e cinza, onde, em diagonal, vemos uma abstração de um ser humano,
onde o rosto da figura é substituído pela abstração do rosto humano, que é o símbolo da Bauhaus. Em
contraponto da figura, apresentam-se as informações textuais do cartaz: “Ausstellung”, “Weimar”, “1923”
e, acima da cabeça da figura, “Staatilithes Bauhaus”. Tamanho de 68,6 x 48,3 cm.

60
 UNICESUMAR

Segundo Meggs (2009), a tensão que sempre existiu entre a

Bauhaus e o governo de Weimar foi, ainda mais, intensificada
com a entrada de um regime conservador que assumiu o poder
e aplicou condições inaceitáveis à escola. Dessa forma, em 1º de
abril de 1925, alguns equipamentos e estudantes foram realoca-
dos de Weimar para Dessau, onde continuaram trabalhando tem-
porariamente, até que um novo complexo foi projetado e realiza-
do, sendo ocupado em 1926. Foi no período em que a Bauhaus
existiu em Dessau (1925–1932) que sua identidade e filosofia se
amadureceram e se consolidaram. As referências a De Stijl e ao
Construtivismo eram claras, entretanto a Bauhaus desenvolveu
um entendimento de princípios formais que poderia ser aplica-
do, inteligentemente, nos problemas de design. Nessa época, sur-
giu, também, a Corporação Bauhaus, com o objetivo de permitir
a venda de protótipos da escola para a indústria. Em
1926, seu nome foi alterado para Hochschule für
Gestaltung (Escola para Design), e a influente
Revista Bauhaus iniciou suas publicações. A
capa de revista, a seguir, foi composta em
câmera fotográfica, em vez de uma pran-
cheta, atingindo uma rara integração
de tipo e imagem (MEGGS, 2009).

61
UNIDADE 2

Figura 10 - Capa da Revista Bauhaus, de 1928, Figura 11 - Sobrecapa de três livros da Bauhaus,
por Herbert Bayer / Fonte: Meggs (2009, p. 350). de 1924–1930, por Laszlo Moholy-Nagy
Fonte: Meggs (2009, p. 350).

Descrição da Imagem: a figura apresenta a

fotografia de uma folha dobrada de um jornal
com um título chamativo na parte superior
“Bauhaus” sob um lápis e um esquadro ao cen-
tro e, logo mais à direita e abaixo, uma peça
volumétrica de um cone branco, uma esfera
branca e um cubo branco. Todos projetando
sombras sobre a palavra “Bauhaus”. Tamanho
de 29,8 x 22 cm.
Descrição da Imagem: a figura apresenta a
capa de um livro, que apresenta tipografia
branca e laranja sobre abstração gráfica de
uma foto em preto e branco. A informação
“Bauhaus Bücher 8” se apresenta acima da
composição, enquanto “Moholy-Nagy” E “Male-
rei Fotografie Film” são apresentadas na parte
de baixo. Tamanho de 23 x 18 cm.

Revista Bauhaus se tornou um importante veículo de disseminação das ideias

avançadas sobre teoria de arte e suas aplicações em arquitetura e design, junto
aos 14 Bauhausbücher (Livros Bauhaus) (MEGGS, 2009).
Em 1928, Walter Gropius renunciou seu posto para retomar sua prática
como arquiteto, ao mesmo tempo que outros importantes e influentes profes-
sores começaram a renunciar seus cargos. Após alguns anos, em 1932, o domí-
nio do partido nazista, no conselho da cidade de Dessau, conseguiu o cancela-
mento da permissão de atuação da Bauhaus e, em 1933, a escola foi finalmente
dissolvida. A perseguição nazista a muitos membros da Bauhaus os obrigou
a se juntarem ao êxodo de intelectuais e artistas, em especial para os Estados
Unidos da América. Em 1937, Gropius já lecionava arquitetura na Universida-

62
 UNICESUMAR

Figura 12 - Capa da Revista Bauhaus, de 1929, Figura 13 - Pôster da exposição de 1945, por Max
por Joost Schmidt / Fonte: Meggs (2009, p. 352). Bill / Fonte: Meggs (2009, p. 398).

Descrição da Imagem: a figura apresenta a Descrição da Imagem: a figura apresenta um

capa da Revista Bauhaus, de 1929. Na parte
superior, vemos, em uma tabela, algumas
informações editoriais da publicação e, logo
abaixo, do lado esquerdo, um grande título
“Bauhaus” é apresentado. À direita do título,
vemos o ano da publicação e mais algumas
informações editoriais. Na metade de baixo
da capa, vemos uma abstração geométrica de
diversos volumes de cubos, representando um
cômodo vazio com janelas que projetam som-
bras sobre os cubos em seu interior. Tamanho
de 29,8 x 22 cm.
pôster da exposição de 1975, no qual há foto-
grafias dispostas em quadrados de variados
tamanhos com formatos de diamante, alter-
nando entre filtros azuis, vermelhos e bran-
cos, criando um espaço para as informações
textuais: o título, ao centro, “Usa Baut”, e, abai-
xo, a data, “9. september - 7. oktober 1945”.
Tamanho de 128 x 90 cm.

de de Harvard, enquanto Moholy-Nagy estabeleceu a Nova Bauhaus em Chi-

cago, atualmente, chamada Institute of Design (MEGGS, 2009).
Durante a década de 1950, um movimento emergiu na Suíça e na Alemanha,
apesar de ser chamado de Swiss Design, ou Estilo Tipográfico Internacional. Seu
objetivo, como movimento, dominou o pensamento de muitos por todo o mundo,
mantendo-se como a principal força estilística por mais de duas décadas e, até hoje,
pode-se perceber que sua influência continua. Fotografias objetivas e textos que
apresentam a informação visual e verbal, de maneira limpa, clara e factual, livre dos
exageros da propaganda e da publicidade, além do uso de tipografias sem serifas

63
UNIDADE 2

alinhadas à esquerda são as características visuais desse estilo, que incluem uma
unidade de design atingida por organizações assimétricas dos elementos em uma
grade, matematicamente, construída, em que os fundadores do movimento acre-
ditavam ser a maneira mais legível e harmoniosa de se estruturar uma informação
— os fundadores viam a tipografia sem serifa como expressão de um espírito de
uma era mais progressiva (MEGGS, 2009).

Figura 14 - Pôster para o Museu de Rietberg, de Figura 15 - Pôster da produção teatral ao ar livre
1955, por Ernst Keller / Fonte: Meggs (2009, p. 396) de Basel de Giselle, de 1959, por Armin Hofmann
Fonte: Meggs (2009, p. 403).

Descrição da Imagem: a figura apresenta uma

abstração geométrica de uma águia vermelha
com cabeça voltada para esquerda, com listras
pretas em suas penas, na área superior do
cartaz. Ela está fincando suas garras em uma
cobra verde com sua cabeça perto da cabeça
da águia, com sua boca aberta e suas presas
à mostra. O corpo da cobra tem formato de
espiral com cantos quadrados e triângulos
vermelhos, servindo de listras que preenche
a área inferior do cartaz. Tamanho de 128,3
x 91 cm.
Descrição da Imagem: a figura apresenta uma
abstração geométrica de uma águia vermelha
com cabeça voltada para esquerda, com listras
pretas em suas penas, na área superior do
cartaz. Ela está fincando suas garras em uma
cobra verde com sua cabeça perto da cabeça
da águia, com sua boca aberta e suas presas
à mostra. O corpo da cobra tem formato de
espiral com cantos quadrados e triângulos
vermelhos, servindo de listras que preenche
a área inferior do cartaz. Tamanho de 128,3
x 91 cm.

Meggs (2009) afirma, entretanto, que mais importante que o visual dos traba-
lhos era a atitude desenvolvida pelos pioneiros a respeito de suas profissões. Eles

64
 UNICESUMAR

definiram o Design como uma atividade socialmente útil e importante. A

expressão pessoal e as soluções excêntricas eram rejeitadas em prol de uma
abordagem mais universal e científica para as soluções de design. Com isso,
os designers definiam seu papel não como artistas, mas como condutores
objetivos, para espalhar importantes informações entre os diversos com-
ponentes da sociedade. O ideal era atingir a clareza e a ordem. Acima de
todos os designers envolvidos, Ernst Keller pode ser tido como o principal
influenciador das qualidades e da disciplina do movimento.
Keller, continua Meggs (2009), entrou para a Zurich Kunstgewerbeschule
(Escola de Artes Aplicadas de Zurich), em 1918, para ensinar layouts publici-
tários, onde desenvolveu um curso profissional em design e tipografia. Seus
ensinamentos apresentaram um nível de excelência por mais de quatro dé-
cadas, abordando design de letras, de identidades corporativas e de pôsteres.
Em vez de privilegiar determinado estilo, ele defendia que a solução para um
problema de design deveria surgir de seu próprio conteúdo.
Théo Ballmer, que estudou com Keller em Zurich, trabalhou, bre-
vemente, na Bauhaus em Dessau, onde aplicou os princípios da De Stijl
de design de uma maneira original: com uma grade aritmética de ali-
nhamentos horizontais e verticais. Em 1928, seus cartazes apresentavam
alta harmonia formal, já que se utilizavam de uma grade ordenada para
construir formas visuais.
Já Max Bill, pintor, arquiteto, engenheiro, escultor bem como de-
signer gráfico e de produto, estudou na Bauhaus, de 1927 a 1929.
Após se mudar para Zurich, Bill abraçou os conceitos de Arte Con-
creta. Em 1930, ele formulou o manifesto de Arte Concreta, aclaman-
do por uma arte universal de absoluta clareza baseada na constru-
ção aritmética controlada. As pinturas de Arte Concreta utilizavam,
apenas, elementos matematicamente puros, como planos e cores. Por
não existir um significado externo a esses elementos, o resultado é
puramente abstrato, sendo a antítese do que é o Design Gráfico. En-
tretanto os conceitos de Arte Concreta podem ser aplicados ao aspec-
to estrutural do Design Gráfico (MEGGS, 2009).
A seguir, veremos um layout onde a precisão matemática do alinha-
mento da fonte, ao centro da página, cria harmonia e ordem em um
layout assimétrico (MEGGS, 2009).

65
UNIDADE 2

Figura 16 - Capa do livro Moderne Schweizer Architektur (1942), por Max Bill / Fonte: Meggs (2009, p. 398).

Descrição da Imagem: a figura apresenta a capa do livro Moderne Schweizer Architektur, em bege, com
layout puramente tipográfico em preto, onde apresenta-se uma hierarquia textual forte. Acima, em letras
maiores, lê-se “Moderne Schweizer Architektur”, seguido logo abaixo dos dizeres: “Architecture Moderne
Suisse” e “Modern Swiss Architecture”. Ao centro, apresentam-se informações em tamanho pequeno e,
por fim, abaixo da composição, tem-se uma informação em letras minúsculas. Tamanho de 22,7 x 22,7 cm.

Enquanto o movimento suíço estava em ascensão, diversas novas tipografias

sem serifa começaram a ser projetadas, em especial, na década de 1950. O
jovem suíço, trabalhando em Paris, Adrian Frutiger, completou uma família
tipográfica visualmente programada de 21 fontes, chamada Univers, para a
fundição de tipos Deberny & Peignot. Comparada às tipografias tradicionais

66
 UNICESUMAR

que se limitavam aos tipos regular, itá-

lico e negrito, a nova família apresen-
tava sete vezes mais variações. Frutiger
utilizou números para identificar suas
fontes de maneira mais lógica, dessa
forma, o tipo de peso regular é chama-
do de Univers 55. A família tipográfica
foi o resultado de três anos de trabalho,
a fundição Daberny & Peignot inves-
tiu mais de 200.000 horas de gravação
mecânica e retoques, para produzir
35.000 matrizes necessárias para pro-
duzir todos os caráteres das 21 fontes
da família (MEGGS, 2009).

67
UNIDADE 2

Figura 17 - Diagrama esquemático das 21 fontes Univers, de 1954, por Adrian Frutiger
Fonte: Meggs (2009, p. 401).

Descrição da Imagem: a figura traz a representação do diagrama esquemático das 21 fontes Univers,
apresentando a separação da versão original da tipografia em azul das demais configurações: versões
expandidas em vermelho, condensadas em amarelo e comprimidas em verde. Da esquerda para a
direita, temos a primeira coluna com quatro retângulos, um sobre o outro, todos preenchidos de cor
vermelha, tendo a palavra “univers” escrita em preto na metade inferior de cada um. No canto superior
esquerdo de cada retângulo, de cima para baixo, há os seguintes números respectivamente: 53, 63, 73
e 83. A segunda e a terceira colunas apresentam quatro quadrados em cada uma, um sobre o outro,
todos preenchidos de cor azul, tendo a palavra “univers” escrita em preto na metade inferior de cada
um. Em relação à segunda coluna, na parte superior esquerda dos retângulos, de cima par abaixo, há
os seguintes números respectivamente: 45, 55, 65 e 75. Em relação à terceira coluna, na parte superior
esquerda dos retângulos, de cima par abaixo, há os seguintes números respectivamente: 46, 56, 66 e 76,
e, nessa coluna, a palavra “univers” se apresenta em itálico. A quarta e a quinta colunas apresentam três
retângulos em cada uma, um sobre o outro, todos preenchidos de cor amarela, tendo a palavra “univers”
escrita em preto na metade inferior de cada um. Em relação à quarta coluna, na parte superior esquerda
dos retângulos, de cima par abaixo, há os seguintes números respectivamente: 47, 57 e 67. Em relação à
quinta coluna, na parte superior esquerda dos retângulos, de cima par abaixo, há os seguintes números
respectivamente: 48, 58 e 68 e, nessa coluna, a palavra “univers” se apresenta em itálico. Por fim, a última
coluna apresenta três retângulos, um sobre o outro, todos preenchidos de cor verde, tendo a palavra
“univers” escrita em preto na metade inferior de cada um. Na parte superior esquerda dos retângulos,
de cima par abaixo, há os seguintes números respectivamente: 39, 49 e 59. No rodapé, da metade para a
lateral direita, há a seguinte escrita: “21 variations sur un thème unique”, que, em português, quer dizer:
“21 variações sobre um único tema”.

68
 UNICESUMAR

Em meados da década de 1950,

Edouard Hoffman, da fundição de
tipos suíça HAAS, decidiu que a ti-
pografia Akzindenz Grotesk deveria
ser atualizada e refinada. Dessa forma,
Hoffman colaborou com Max Mie-
dinger e, juntos, produziram a Neue
Haas Grotesk. Entretanto, quando
ela foi ser produzida pela fundição D. Figura 18 - Fonte Helvética, de 1961, por Edouard
Hoffman e Max Miedinger
Stempel AG em 1961, a fonte foi no- Fonte: Meggs (2009, p. 401).
meada Helvetica — palavra derivada
de Helvetia, nome latino para Suíça. Descrição da Imagem: a figura apresenta a
versão básica da fonte Helvetica, lançada pela
Com suas suas formas bem definidas Stempel foundry, em 1961. Essa fonte se apre-
senta junto com algumas das variações desen-
e seu excelente ritmo de formas nega- volvidas posteriormente. De cima para baixo,
há as seguintes escritas: “Helvetica”, “Helvetica
tivas e positivas, a Helvetica se tornou Italic”, em itálico, “Helvetica Medium”, “Helvetica
Bold”, em negrito, e “Helvetica Bold Condensed”,
a tipografia mais utilizada internacio- em negrito condensado.
nalmente entre as décadas de 1960 e
1970. Mais tarde, com o advento da
tipografia digital e sua popularidade nos anos 1980, mais oito pesos foram
incluídos, surgindo, assim, a Neue Helvetica, em 1983.
Após o movimento modernista, diversos outros nomes e movimentos surgi-
ram, em especial nos Estados Unidos da América, como Paul Rand e Saul Bass.
Entretanto, para nosso livro, finalizaremos nesse ponto da linha do tempo da
história do Design Gráfico. Como você pode perceber, caro aluno(a), o Design em
si é muito recente e foi necessário décadas de muitas pessoas evoluindo filosofias,
movimentos e técnicas para chegarmos no “estado atual” de nossa área do conhe-
cimento. Mas, ainda, não se finalizou sua evolução. Com as novas disciplinas de
Design, como UX e Design de Serviços, emergindo para solucionar problemas,
cada vez mais, complexos, nossa profissão se apresenta com grande importância
no contexto das empresas mais inovadoras do mundo.
Portanto, não se limite a estudar, apenas, até este ponto da história de
nossa profissão. Você pode, facilmente, encontrar artigos de profissionais
atuantes do mercado que visam mostrar para o mundo como o Design pode
fazer o mundo ser mais empático e humano. No mercado atual, imerso em
tecnologia e nas demandas de mercado, o Design Gráfico se adapta para

69
UNIDADE 2

conquistar seu lugar de importância. Por mais que, ainda, estamos longe de
encontrarmos o Design considerado uma inteligência essencial para os ne-
gócios — algo de sua natureza —, nós podemos ver alguns desdobramentos
das filosofias e vertentes dessa história que estudamos nos principais cargos
que um designer gráfico pode assumir.
A faceta do Design Gráfico mais comum de nosso mercado, ainda hoje,
é seu lado mais comercial. Geralmente, sendo chamada, apenas, de Design
Gráfico, projeta cartazes, folders, banners, flyers e, até mesmo, anúncios para
mídias out of home ou para mídias digitais. Podendo ser um cargo dentro de
escritórios ou estúdios de design e dentro de uma agência de comunicação.
Essa faceta engloba, por exemplo, o Design de Sistemas de Identidades
Visuais, em que são projetados logos, logotipos e universos gráficos para
marcas e eventos. Essa vertente acaba entrando nas demandas de Branding,
ou Gestão da Marca, das empresas. Sendo este um investimento que tem tido
bastante crescimento nos últimos 20 anos em nosso país. Entretanto é preci-
so fazer uma leve distinção: Branding trabalha com estratégias de percepção
e de posicionamento das empresas, portanto, um projeto de identidade vi-
sual não configura um Branding — como vemos erroneamente no mercado
—, mas pode ser que esteja, sim, dentro de um projeto de Gestão da Marca
para se atingir uma percepção definida estrategicamente.

Figura 19 - Exemplo de logo institucional / Fonte: Sean e Morioka (2004).

Descrição da Imagem: a figura apresenta, em fundo branco, o logotipo KINETC, em verde, à direita, ao
lado de uma figura composta de diferentes elementos angulares, com cores que variam entre verde claro
e verde escuro e com espaçamento entre os elementos, formando um K em negativo.

70
 UNICESUMAR

Ainda com foco impresso, temos uma outra grande vertente do Design
Gráfico: o Design Editorial. Este campo se preocupa, entre outras coisas,
com a apresentação de uma relevante quantidade de texto como informa-
ção que deve ser “ingerida” de maneira mais agradável e intuitiva possível.
Muitos dos princípios deste braço do Design Gráfico, também, são encon-
trados em outros segmentos, como Design de Interfaces. Esse campo atua,
majoritariamente, com livros, revistas e catálogos, mas também pode en-
volver peças menos volumosas, como folders e painéis informativos. Uma
tangente desta vertente com a ilustração é o campo dos infográficos: o
Design de Informação. A preocupação com o leitor e sua facilidade de
absorver complexas informações —seja em forma de parágrafo, seja em
forma de tabelas e gráficos — estão presentes em ambas disciplinas.

Figura 20 - Infográfico para a Bloomberg Businessweek / Fonte: Caldwell e Zappaterra (2014).

Descrição da Imagem: a figura apresenta um mapa dos Estados Unidos da América, em branco, em um
fundo rosa claro, enquanto diversas tabelas, gráficos e informações populam toda a área da página.

71
UNIDADE 2

Ainda dentro do campo comercial, temos uma vertente que tangencia o De-
sign de Produto em alguns aspectos: o Design de Embalagens. Este campo
do Design Gráfico se preocupa com diversos aspectos da embalagem, tratan-
do-a como um produto de vida própria: possui vida-útil e ciclo de vida, afeta
questões sustentáveis, tem funções específicas que fogem do âmbito do pro-
duto embalado e preocupações estruturais, entre diversos outros aspectos. O
Design de Embalagem, muitas vezes, envolve a criação de uma nova forma
tridimensional, fugindo da natureza bidimensional do Design Gráfico. Entre-
tanto, mesmo envolvendo essa nova dimensão, essa vertente do Design precisa
manter todos seus aspectos projetuais para alcançar um projeto bem-sucedido.

Figura 21 - Design de embalagens para marca Travelings / Fonte: Fishel e Gordon (2007).

Descrição da Imagem: a figura apresenta três projetos de embalagens. A primeira embalagem, à esquerda,
apresenta um fundo oliva sólido, com textos em branco, na metade inferior da embalagem, e, do lado di-
reito, há uma garrafa, branca, com textos em oliva. Ao centro, temos a segunda embalagem, que apresenta
uma caixa com fundo oliva com uma textura de folha tomando toda sua área e, do lado direito, há uma
garrafa, branca, com texto em oliva. Por fim, a terceira embalagem, à direita, apresenta uma caixa em oliva
claro, com uma abstração de uma folha em branco e com texto em roxo e, do lado direito, há uma garrafa,
branca, com textos em roxo.

Um recente campo proporcionado pela disseminação da tecnologia na vida das

pessoas tem se tornado bastante difundido no mercado de Design: o Design de
Interfaces. Muitas vezes, chamado de UI Design (User Interface Design, ou De-
sign de Interface de Usuário), esse campo está muito próximo de um campo mais
estratégico e antropológico, o Design de Experiência de Usuário (UX Design).
Esses campos, embora serem vertentes de Design, são, drasticamente, diferentes.

72
 UNICESUMAR

O designer de experiência de usuário se preocupa, obviamente, com a ex-

periência dos usuários de um produto digital específico. Seu papel é encon-
trar a estratégia e o método mais adequados para transformar determinado
aplicativo/produto em algo mais agradável para seus usuários. Claramente,
essa agradabilidade pode envolver o lado visual, entretanto esse profissional
se foca na disposição e apresentação dos elementos, buscando entender quais
elementos e como cada um deles afeta a experiência de uso — é uma preo-
cupação, perante a “história de uso”, que esse produto proporciona, ou seja,
mais atrelada à dimensão temporal.
O designer responsável pelas interfaces de usuário, por sua vez, carrega
consigo uma herança do antigo “web designer”, ou o designer que era res-
ponsável por criar páginas eletrônicas. Seu papel, hoje, concentra-se em atin-
gir uma experiência estética que valorize o produto/aplicativo com o qual
trabalha. Existem diversas táticas de interface para transformar uma página
em algo mais persuasivo e chamativo, sendo este, também, seu papel. Entre-
tanto tais táticas não podem contradizer a experiência desejada — existindo,
dessa forma, uma hierarquia superior nas decisões de Experiência de Usuá-
rio, perante as decisões de Interface de Usuário.

Figura 22 - Diferentes tipos de botões / Fonte: Suarez et al. (2019, p. 222).

Descrição da Imagem: a figura apresenta uma série de 41 botões, em diferentes cores (azul, vermelho,
laranja, verde), em diferentes formatos (sólidos e, apenas, com borda) e em diferentes ícones (como Facebook,
Twitter, Linkedin, Pinterest, Tumblr, YouTube e Instagram). A primeira linha apresenta quatro botões, a se-
gunda, oito, a terceira, seis, a quarta, seis, a quinta, seis, a sexta, cinco, e a última linha apresenta seis botões.

73
UNIDADE 2

Por fim, saindo da esfera comercial, podemos falar de algumas áreas povoa-
das por inúmeros designers que, também, são importantes para nossa socie-
dade. O Design Autoral, que, muitas vezes, envolve ilustrações, ativismo e
intervenções artísticas, é um campo bastante movimentado. Nessa vertente,
os designers atuam como vozes de seus pontos de vista sobre os problemas
sociais. Desde lambe-lambe até intervenções artísticas em outdoors, o De-
sign Autoral pode ser muito envolvido com causas sociais. Ao mesmo tempo,
o Design Autoral pode ser utilizado pelos designers para realizar peças au-
torais, sem nenhuma intenção comercial ou social. Envolvendo técnicas 2D
e 3D, muitos designers utilizam esse espaço para construir peças impressas
ou digitais mais artísticas, expressando seus pontos de vistas estéticos — não,
necessariamente, perante um problema específico.

Figura 23 - Página dupla do sketchbook, por Sophie Blackall, de Nova Iorque / Fonte: Rothman (2011).

Descrição da Imagem: a figura apresenta a página dupla do sketchbook, que apresenta, na página direita,
uma mulher de costas sentada em um pano amarelo florido, usando biquíni branco de bolinhas pretas,
rodeada de pedras. As pedras são dispostas de maneira a popular tanto a página direita quanto a página
da esquerda. O fundo se apresenta em um leve laranja, assemelhando-se à cor de areia.

74
 UNICESUMAR

Com isso, caro(a) aluno(a), podemos entender um pouco melhor sobre a

situação contemporânea do Design Gráfico em nosso mercado. Como pode-
mos conferir, em nossa unidade anterior, o crescimento desse grande braço
do Design ocorreu muito integrado às novas tecnologias e podemos encon-
trar esse mesmo padrão em nossa contemporaneidade. O mundo digital está,
a largos passos, tornando-se o padrão de nossa civilização, e essa mudança
está sendo absorvida pelo Design Gráfico de maneira muito rápida. O sur-
gimento de novas profissões, como o UI Designer e o UX Designer, mostra
como as empresas de tecnologia precisam, cada dia mais, de designers para
produzirem produtos sustentáveis, factíveis e desejáveis.

NOVAS DESCOBERTAS

Título: Anatomia do design: uma análise do design gráfico brasileiro

Autor: ADG Brasil
Editora: Blucher, 2009.
Sinopse: este livro reflete a riqueza de nossas múltiplas influências cul-
turais e o talento de nossos profissionais na realização de trabalhos
diversos que, além de seu aspecto estético, que surpreende a cada projeto,
cumprem, com eficácia, os diferentes propósitos para os quais foram criados.
Esta obra revela a capacidade extraordinária que nossos designers têm de res-
ponder aos desafios colocados por um mercado, cada vez mais, exigente e às
soluções criativas adequadas às demandas do contexto em que se apresen-
tam. Com a publicação de Anatomia do Design, literatura que reflete o que de
melhor tem se produzido pelos designers gráficos brasileiros na atualidade,
a Editora Blucher reafirma a sua disposição em publicar obras de significado
cultural e de grande interesse para o nosso público.

Bom, caro aluno(a), com a evolução do pensamento de Design e a visão so-

bre o mercado atual do Design, você pode imaginar como nossa profissão
estará em alguns anos. O designer, como profissional, deixou de ser, primei-
ramente, um papel puramente estético e, com o tempo, também deixou de
ser um papel puramente técnico. Hoje, estamos vendo sua inserção nas es-
feras estratégicas dos negócios — definindo estratégias que afetam, direta-
mente, todos os consumidores de um produto ou aplicativo. É claro que essa
evolução não ocorreu isoladamente, a globalização e a evolução tecnológica

75
UNIDADE 2

sempre estiveram envolvidas. Portanto, sugiro que você faça

um exercício de futurologia.
Nesse momento, você é um(a) acadêmico(a) de um curso
de Design de Produto. Entretanto, analisando os movimentos
passados e as tendências futuras, qual será o caminho que você
tomará em sua carreira? Faça uma reflexão a respeito de seus so-
nhos em sua carreira e, ao mesmo tempo, exercite sua imagina-
ção sobre a evolução tecnológica. Crie uma linha do tempo para
os próximos 20 anos de sua carreira, refletindo e analisando
como a tecnologia evoluirá para, dessa forma, entender como
ela poderá afetar sua carreira daqui 5, 10, 15 e 20 anos.

76
Utilize o conteúdo de nossa unidade para projetar um mapa conceitual da linha
do tempo do Design Gráfico, em relação às suas vertentes artísticas, ao movi-
mento racionalista e à sua consolidação como um novo tipo de profissional. Por
fim, desdobre as áreas de atuação do Design Gráfico de acordo com as principais
áreas apresentadas nesta unidade.
3
Linguagem
Visual Aplicada
ao Design Gráfico
Esp. Renan Ferreira Venancio

Nesta unidade, você terá a oportunidade de entender como o Design

Gráfico utiliza os elementos de Linguagem Visual para construir peças
que conseguem se comunicar e, até mesmo, emocionar. Analisaremos
os principais elementos da Linguagem Visual a partir de seus usos em
peças comerciais de Design Gráfico.
 UNIDADE 3

A difusão do computador, no final da década de

1970, no meio profissional dos designers, permi-
tiu uma exponencial evolução de linguagem. De
lá para cá, a acessibilidade às ferramentas pro-

R
fissionais de Design Gráfico tem ficado cada dia
maior, permitindo que, progressivamente, mais
G
pessoas se envolvam com esse campo de traba-
lho e reduzindo a barreira de entrada no mercado
drasticamente. Em nosso país, temos, até mesmo,

B
uma piada cultural a respeito disso: a do sobrinho.
Você já ouviu essa piada? Trata-se de uma figura
que simboliza o puro amadorismo no âmbito co-
mercial — um jovem, menor de idade, que gosta
de computadores e sabe mexer em alguma ferra-
menta, como Corel Draw ou Adobe Illustrator —
e, no âmbito social, ela se torna uma imagem de
conquista em nosso campo.
Todos começam como amadores, mesmo
após uma faculdade ou curso técnico. Profissio-
nalismo é algo que se aprende no dia a dia do
trabalho, em especial nas profissões tidas como
criativas, nas quais as soluções ficam escondidas,
literalmente, abaixo do nosso nariz esperando
por um olhar atento e experiente em articula-
ções mais ousadas para se fazerem presentes.
“O sobrinho”, por mais que seja tido como uma
piada nas rodas de conversas dos profissionais,
representa, socialmente, uma conquista enorme:
nossa profissão está se tornando cada dia mais
acessível. Nos anos 1970, eram necessários mui-
tos esforços e oportunidades para se conquis-
tar um trabalho relacionado ao Design Gráfico.
Hoje, com qualquer smartphone, uma pessoa,
sem treino algum, pode realizar uma peça gráfica
sem gastar um único centavo com isso.

80
 UNICESUMAR

81
 UNIDADE 3

Parece “perigoso” isso, mas, na realidade, tal movimento deixa mais claro
algo que os designers sempre defenderam: não é a ferramenta que faz de-
sign, é a pessoa que faz design. As decisões e articulações não saem de um
aplicativo, mas da cabeça do designer operando esse aplicativo. Saber uma ou
uma centena de ferramentas não nos faz designers melhores, apenas desig-
ners mais eficientes, talvez. Saber usar os elementos da Linguagem Visual, de
forma a criar um design que emociona e, ao mesmo tempo, leva uma mensa-
gem, é o que, realmente, faz-nos profissionais de design melhores.
Esse “perigo” foi apontado por parte da comunidade de profissionais da
área no início da digitalização do processo de design e da difusão dos soft-
wares profissionais e aplicativos de smartphones capazes de criar peças grá-
ficas. Entretanto o perigo pode ser visto como algo bom: o Design Gráfico
tem se tornado, cada dia mais, popular, e sua extensão tem se tornado cada
vez maior. Cabe a nós, designers, valorizarmos nosso conhecimento técnico
e acadêmico mostrando o real potencial do design para as empresas.
A fim de compreendermos a democratização de ferramentas, aplicativos
e recursos para a produção de peças gráficas, buscando conhecer que fer-
ramentas estão a nosso dispor, utilizaremos uma ferramenta extremamente
popular para produzir uma peça gráfica: um smartphone. Utilize seu celular
para produzir um cartaz sobre a importância do designer para as empresas.
Não precisa ser algo complexo. Tente algo simples, como uma comparação
do “mundo sem Design” e do “mundo com Design”. Utilize esse exercício
para fortalecer sua prática criativa. Projetar dentro das restrições de um
smartphone nos exige trabalhar fora do pensamento “típico” de que precisa-
mos de um software altamente poderoso para realizar qualquer peça gráfica,
sendo que, na realidade, uma câmera fotográfica e uma caneta esferográfica
já resolveram muitos cartazes na história do Design Gráfico.
A partir desse exercício prático, levante algumas reflexões acerca do uso
que você fez dos elementos da Linguagem Visual para criar o design produ-
zido. Como você usou cada elemento para evocar uma mensagem específica?
Utilize seu diário de bordo para analisar como os elementos de Linguagem
Visual — que não são exclusivos do Design — são utilizados dentro do De-
sign Gráfico para trazer ao mundo mensagens poderosas e evocativas.

82
 UNICESUMAR

Vamos falar sobre Linguagem Visual e Alfabetismo Visual? A atividade de

visualizar algo diz respeito à nossa capacidade de conseguirmos criar imagens
mentais sobre esse algo. Com essa atividade, somos capazes de fazer um exer-
cício mental bastante mágico: ver uma coisa que não existe e nunca vimos
antes. E é essa capacidade que nos permite criar diversas imagens na nossa
própria imaginação e até, algumas vezes, nos permite o encontro de soluções
inesperadas. Essa habilidade está atrelada à nossa evolução como civilização:
a linguagem começou nas imagens, evoluiu para pictogramas, chegou às uni-
dades fonéticas e, finalmente, alcançou o alfabeto — que pode ser tido como
a matemática do significado. Cada novo passo dessa evolução permitiu uma
comunicação mais eficiente que a anterior (DONDIS, 1997).
Dentro dessa miríade de possibilidades linguísticas — do hieróglifo ao al-
fabeto —, o designer se posiciona como um articulador de significados. Ou
seja, por natureza, o designer deve interpretar os mais diversos tipos de lingua-
gem e, acima de tudo, articulá-las para alcançar objetivos específicos com seu
trabalho. Sendo mais específicos, Ambrose e Harris (2009) afirmam que o De-
sign Gráfico é uma disciplina visual criativa que abrange diversas áreas, como
a Direção de Arte, a Tipografia, a Editoração e a Diagramação, a Tecnologia

83
 UNIDADE 3

da Informação e muitas outras mais. Essa variedade apresenta um panorama

fragmentado, permitindo, assim, que designers possam se especializar e focar
em uma ou várias áreas dentro desse grande campo do conhecimento.
O desenvolvimento tecnológico colocou o designer como uma peça im-
portante no coração do processo criativo. É comum que um designer gráfico
gerencie um processo criativo enquanto realiza o trabalho braçal, utilizando
diversas disciplinas criativas e artísticas para o serviço. Com o tempo, as res-
ponsabilidades dos designers gráficos expandiram, incluindo acompanha-
mento técnico de impressões nas gráficas, programação de websites, fotogra-
fia, diagramação de layouts para publicações, ilustração, direção artística e, até
mesmo, execução de gráficos 3D.
Ainda segundo os autores, pensar o Design Gráfico como uma única ati-
vidade ou função é algo limitado. É muito mais útil entender que existe uma
abordagem específica que os designers gráficos utilizam para alcançar resul-
tados em suas atuações no mundo impresso ou no mundo digital. No final
das contas, os designers sempre possuem duas obrigações a serem cumpridas:
satisfazer o brief e executar o serviço.
Com o avanço da tecnologia, os designers serão responsáveis, cada vez mais,
por aspectos do trabalho criativo. Com a popularização das startups e dos aplica-
tivos para smartphones, é possível ver, hoje, uma grande demanda de designers
relacionados à interface (UI Designer — User Interface Designer, ou Designer de
Interface de Usuário) e à experiência de uso dessas interfaces (UX Designer —
User Experience Designer, ou Designer de Experiência de Usuário) – bem como
profissionais (não necessariamente designers) para construir textos que facilitem
as experiências projetadas pelo profissional de UX: o UX Writer.
Entender como funciona o processo de articulação necessária para se
construir um bom design é o mais importante — ainda mais com toda essa
evolução. É necessário compreender por que existe um designer responsável
por aquela tarefa e qual é o objetivo que aquela tarefa possui, para podermos
realizar um bom projeto de design — independentemente do ramo. A Lin-
guagem Visual é, talvez, a base mais preciosa de conhecimento para todos
esses ramos associados ao aspecto visual do Design. Ela engloba todos os
elementos visuais e seus significados, proporcionando a nós, designers, uma
biblioteca de possibilidades que nos guie na soma desses elementos na cons-
trução de nossos projetos.

84
 UNICESUMAR

O ponto é um elemento geométrico que possui zero dimensões e uma lo-

calização determinada por um conjunto de coordenadas. Ele é um elemento
fundamental de toda a comunicação visual, seus elementos e princípios. Sendo
o mais simples e puro de todos os elementos gráficos, o ponto é usado como
elemento essencial na geometria, na física, nos gráficos vetoriais e em diversos
outros campos de conhecimento. A linha é uma série de pontos, já uma massa
de pontos pode criar um formato e, até mesmo, uma forma (POULIN, 2011).
O ponto possui diversas definições, mas, como fenômeno abstrato, ele in-
dica uma localização precisa, por mais que não seja visto ou sentido. Essa lo-
calização não possui área ou dimensão, sendo a menor unidade de medida. Na
comunicação visual, o ponto pode tomar diversas formas e marcas. Pode ser
um elemento que se destaca isoladamente e se tornar um elemento integrado
a um coletivo maior. Ele pode ser realizado de inúmeras maneiras no âmbito
gráfico: um furo numa página, uma mancha circular isolada no canto da pági-
na e um minúsculo ponto preto em uma folha branca (POULIN, 2011). Já na
tipografia, o ponto representa o final definitivo de uma frase. Cada caractere de
um bloco de texto é um elemento visual singular, sendo assim, um tipo de pon-
to, também, é: um elemento finito em uma série (LUPTON; PHILLIPS, 2015).
A seguir, são apresentadas as diferentes configurações e utilizações de pontos.

Figura 1 - Diferentes utilizações

do ponto / Fonte: Samara (2014).

Descrição da Imagem: em
quatro quadrados cinzas
são apresentadas diferentes
configurações de pontos na
cor preta. Da esquerda para
a direita, no primeiro qua-
drado, há um ponto grande
ao centro; no segundo, um
ponto pequeno ao centro;
no terceiro, um ponto pe-
queno à direita; e, no quar-
to quadrado, há dois pontos
pequenos, um à direita e ou-
tro próximo ao centro.

85
 UNIDADE 3

Figura 2 - Diferentes utilizações de sequências de pontos / Fonte: Samara (2014).

Descrição da Imagem: em quatro quadrados cinzas são apresentadas diferentes configurações de pontos
na cor preta. Da esquerda para a direita, no primeiro quadrado, são apresentados cinco pontos alinhados
regularmente na vertical; no segundo, cinco pontos alinhados irregularmente na horizontal, com o primeiro
mais à esquerda, o segundo e o terceiro um ao lado do outro no meio, o quarto mais à direita e o quinto
colado na margem direita do quadrado; no terceiro, cinco pontos alinhados irregularmente na horizontal,
com os três primeiros um ao lado do outro, mais no centro, à esquerda do quadrado, o quarto no centro, à
direita, e o quinto à direita; e, no quarto quadrado, são apresentados três pontos alinhados na horizontal,
ao lado de um ponto mais acima, que é seguido de um último ponto mais abaixo, à direita do quadrado.

A linha pode ser entendida como uma série de pontos que estão adja-
centes um ao outro. A linha pode ser tanto infinita quanto finita, apre-
sentando duas pontas (LEBORG, 2004). De um ponto para outro, um
observador é capaz de traçar uma linha imaginária, por exemplo, quan-
do olhamos para o céu e conectamos as estrelas com linhas, gerando
figuras imaginárias. Pontos dispostos em uma linha reta e em um in-
tervalo constante são tidos como uma linha pontilhada. Outro aspecto
importante de se notar é que, se a linha é concebida como uma suces-
são de pontos em sequência, ela é, por natureza, um ponto em estado
de movimento. Tomando o lápis, como exemplo, a ponta dele gera um
ponto ao tocar o papel. Mas, ao tocar e mover o lápis, deixa uma marca
de uma linha, registrando esse movimento (FRUTIGER, 2007).
Lupton e Phillips (2015) complementam o conceito de linha afir-
mando que, como elemento geométrico, ela possui comprimento,
mas não largura. Podendo ser uma marca positiva ou negativa, as li-
nhas aparecem nas arestas dos objetos ou onde dois planos se encon-
tram. No aspecto gráfico, a linha assume diversos pesos e texturas,
podendo ser retas, curvas, contínuas ou interrompidas, e, quando
atinge determinado peso, a linha se torna um formato. A seguir, são
apresentadas as diferentes formas de utilizar linhas curvas, uma gra-
ficamente e outra fotograficamente.

86
 UNICESUMAR

Figura 3 - Estudo de variação de linhas curvas / Fonte: Lupton e Phillips (2015).

Descrição da Imagem: diversas curvas e círculos de cor vermelha são apresentados em um fundo com
sua metade de baixo em bege e sua metade superior em branco. Da esquerda para a direita, as linhas
curvas apresentam um engrossamento de peso. Algumas curvas apresentam linhas pontilhadas em suas
extremidades, com seu preenchimento em degradê vertical, de bege para vermelho.

87
 UNIDADE 3

Figura 4 - Mosaico de exercícios fotográficos com linhas / Fonte: Poulin (2011).

Descrição da Imagem: em um mosaico de três colunas por três linhas, são apresentadas nove imagens
nas cores vermelha, amarela e verde (em diversos tons). Em cada módulo do mosaico, é apresentada
uma fotografia que utiliza elementos e formas para a representação da linha como elemento gráfico.

Segundo Frutiger (2007), nosso campo de visão é muito mais horizonta-

lizado do que verticalizado, ou seja, nossa visão confere à horizontal um
significado totalmente diferente que a vertical, bem como a diagonal e a
curva. Uma torre de 300 metros é alta, enquanto uma caminhada de 300
metros é curta. O autor, ainda, define as linhas em horizontal, vertical, dia-
gonal e curva, atribuindo a elas os seguintes significados:

88
 UNICESUMAR

■ Horizontal: é uma dimensão concreta, pois podemos contar nossos

passos nela. Por isso, ela é mais tranquila e segura em comparação aos
demais tipos de linhas, pois pode-se controlá-la.

■ Vertical: a horizontal existe naturalmente, mas a vertical precisa ser cons-

truída. Nossa civilização gosta de se comparar à vertical por simbolizar
a ideia da vida que cresce e expande para cima. A vertical ocorre como
fenômeno na natureza (um raio cai em movimento vertical, assim como
uma fruta cai de seu pé na vertical).

■ Diagonal: com uma sensação de insegurança, a diagonal sempre é ava-

liada de acordo com o eixo mais próximo, se é o vertical ou o horizontal,
determinando, assim, se seu movimento está em queda (próximo do eixo
vertical) ou subindo (próximo do eixo horizontal).

■ Curva: existem dois tipos de

curvas, o primeiro é o da curva
geométrica, realizada com pre-
cisão, e o segundo é a curva re-
sultante do movimento natural
de uma mão desenhista. Todas
as curvas dependem de um raio
virtual, onde se encontra um
centro invisível.

O plano, também chamado de forma- Figura 5 - Mosaico de quatro quadrados com

exercícios de linhas / Fonte - Puhalla (2011).
to, ou, ainda, de superfície, é definido
como uma linha em movimento, se-
guindo a analogia da linha ser o ponto
em movimento, sendo uma superfície
que se estende em altura e largura.
Uma linha que fecha em si mesma cria
um formato, um plano dentro de uma
área limitada. Podemos considerar
os formatos como planos com ares-
Descrição da Imagem: em um mosaico de
duas colunas e duas linhas, quatro quadrados
pretos são apresentados, separados por duas
linhas brancas que se cruzam, uma na hori-
zontal e outra na vertical. Os quatro quadra-
dos pretos são atravessados por linhas curvas
brancas e um círculo branco. Uma linha curva
ultrapassa do primeiro para o terceiro e o
quarto módulo do mosaico, enquanto uma
segunda linha curva toma de uma diagonal
a outra do quarto módulo. O círculo toma a
área completa do segundo módulo.

89
 UNIDADE 3

tas para entender melhor como os softwares vetoriais trabalham (LUPTON;

PHILLIPS, 2015). O ponto é um dos elementos fundamental do dicionário
de Design Gráfico. Pode ser um ponto que se tornou muito grande e perdeu
sua identidade como ponto, tornando-se uma superfície, ou, ainda, uma linha
que se tornou muito grossa ou pesada e começou a apresentar características
bidimensionais aos olhos. Os exemplos de planos mais básicos são os qua-
drados, os círculos e os triângulos. Ainda temos os formatos mais complexos,
como ovais, retângulos, trapezoides, pentágonos, hexágonos e aí por diante.
Um formato pode adquirir características de sólido (preenchido) ou traçado
(em linhas), opaco ou transparente, liso ou texturizado (POULIN, 2011).

Figura 6 - Alfabeto de planos / Fonte: Lupton e Phillips (2015).

Descrição da Imagem: em fundo branco, são apresentadas letras construídas por planos, que se alternam
entre formatos opacos, de cores laranja claro, laranja escuro e vermelho, e entre formatos transparentes
apenas com suas arestas em linhas laranjas. Acima, encontra-se a palavra plane, que, traduzida para o por-
tuguês, significa plano, e, abaixo, encontra-se todo o alfabeto seguindo esse mesmo estilo de fonte e plano.

90
 UNICESUMAR

Para Poulin (2011), os formatos podem ser ou geométricos, ou orgânicos, ou,

ainda, aleatórios. Suas configurações determinam quais serão o sentido e a
mensagem transmitidos. Um formato suave e curvilíneo pode parecer caloroso,
em contrapartida, um formato afiado e angulado pode parecer frio e, até mes-
mo, ameaçador. Dessa forma, linhas retas e cantos angulados criam formatos
retilíneos e geométricos, enquanto linhas curvas criam formatos orgânicos e
amorfos. O autor destaca as principais características de cada tipo de formato:

■ Geométrico: são os formatos mais familiares (círculos, triângulos, qua-

drados e retângulos), por sermos apresentados a elas desde nossa infância.
São baseados em fórmulas matemáticas que relacionam os pontos e as
linhas. Seus contornos são regulares, podendo ser angulados.

■ Orgânico: são formatos derivados da natureza e de organismos vivos,

muito utilizados de maneira mais livre por serem irregulares e, normal-
mente, suaves.

■ Aleatório: são formatos sem senso de ordem, criados ao acaso. Não pos-
suem relacionamento ou semelhança com nenhum dos outros dois tipos
de formatos.

Frutiger (2007), em sua visão mais antropológica dos elementos gráficos,

atribui a cada um dos formatos básicos um significado diferente. O autor
considera que o Homem já nasce com certo senso geométrico, visto que di-
versas localidades de nosso planeta apresentam vestígios de sinais primitivos
com características idênticas, mesmo aquelas que remontam a tempos mais
remotos de nossa civilização.
O quadrado possui um caráter neutro e simbólico: uma área fechada, iso-
lada do mundo à fora. Na Pré-História, o quadrado representava os quatro
pontos cardeais, enquanto, no simbolismo chinês, as arestas do quadrado re-
presentavam os pontos mais distantes do planeta. Ao se tornar um retângulo,
ele se desfaz dessas características, sendo reconhecido, a partir daí, pela sua
maior dimensão: horizontal ou vertical. Além disso, quando o quadrado se
apoia em uma de suas pontas, torna-se um losango, um formato construído,
apenas, por diagonais, indicando intenção e energia (FRUTIGER, 2007). O

91
 UNIDADE 3

triângulo, por sua vez, que pode ser tirado de um losango cortado ao meio,
é sempre analisado a partir de um eixo vertical ou horizontal. Caso seja um
triângulo apoiado em sua base, pode remeter à ideia de estabilidade e firmeza,
como uma pirâmide ou montanha. Já no triângulo apoiado em uma de suas
pontas com sua base para cima, a sensação é de instabilidade, muito mais ativa,
servindo-nos de alarme (FRUTIGER, 2007).
Formatos arredondados apresentam-se mais suaves e mais humanos. O
círculo apresenta uma linha de retorno eterno, sem início ou fim, e, também,
um centro invisível e muito preciso. Primitivamente, o círculo era associado
ao sol, à lua e às estrelas. Atualmente, esse formato se associa à ideia de en-
grenagens que fazem as coisas girar (FRUTIGER, 2007).
É comum encontrarmos
pessoas utilizando os termos
forma e formato de manei-
ra cambiante. Entretanto cada
termo possui significado dis-
tinto. Os formatos possuem
bidimensionalidade, enquanto
uma forma precisa ser percebi-
da como tendo tridimensionali-
dade. Outros termos utilizados
para descrever a forma são vo-
lume e massa (POULIN, 2011).
Da mesma forma que um plano
é uma linha em movimento e
uma linha, um ponto em mo-
vimento, uma forma é um pla-
no em movimento. Um cubo,
por exemplo, possui oito vérti-
Figura 7 - Formatos amorfos / Fonte: Poulin (2011). ces que permite que 12 arestas
criem um espaço isolado dentro
Descrição da Imagem: em um fundo branco, são apre- dessa área tridimensional. Ou
sentados quatro formatos amorfos azuis em duas colu-
nas e duas linhas, sendo os dois de cima maiores e mais
seja, o volume é um espaço va-
compridos e os dois de baixo, menores e mais curtos. zio, definido por planos, linhas e
pontos (LEBORG, 2004).

92
 UNICESUMAR

As formas básicas são derivadas dos formatos básicos: o cubo vem do

quadrado, a esfera vem do círculo, o tetraedro vem do triângulo. Outra ca-
racterística das formas é que elas podem ser reais ou ilusórias. As formas
reais, como o nome sugere, possuem volume e peso físicos, enquanto as
ilusórias são representações bidimensionais que são percebidas como tridi-
mensionais (POULIN, 2011). Um objeto que possui tridimensionalidade,
portanto, possui altura, largura e profundidade. Mas uma folha de papel ou
sua simulação em tela de computador não possui uma profundidade real,
dessa forma, é necessário representar o volume a partir de convenções gráfi-
cas. Podemos utilizar a perspectiva linear, que simula distorções óticas, apre-
sentando objetos distantes com escala reduzida, enquanto objetos próximos
possuem escala aumentada. Existem, ainda, as projeções de axonometrias,
que representam o volume sem simular essas variações de escala, mantendo
os objetos em uma escala única e consistente, não importando sua “distância’
na composição (LUPTON; PHILLIPS, 2015).
A seguir, são apresentados alguns exemplos de aplicação da tridimensio-
nalidade em peças gráficas diferentes. As duas primeiras utilizam de grades
de linhas para gerar esse efeito, enquanto a terceira utiliza, apenas, a compo-
sição de formatos.

Figura 8 - Perspectiva de um ponto de fuga

Descrição da Imagem: em fundo branco, di-

versas linhas finas constroem cinco planos: um
abaixo, um acima, um à direita, um à esquerda
e outro ao centro da composição. As linhas se
direcionam ao centro e se intercruzam, criando,
assim, uma sensação de volume e distância.

93
 UNIDADE 3

Projeção ortogonal isométrica

Figura 9 - Perspectiva isométrica

Descrição da Imagem: em fundo branco, uma grid isométrica é apresentada com os eixos X, Y e Z des-
tacados em vermelho. Na parte superior esquerda, há um cubo, na parte superior direita, um cilindro, na
lateral esquerda, um tetraedro e, na inferior direita, um cone, todas as figuras geométricas apresentadas
na imagem são representadas em isométrica.

Arquitetos e designers utilizam as perspectivas de axonometrias para represen-

tar a escala, de maneira consistente, por toda a página ou composição. Alguns
jogos digitais, também, utilizam essa projeção, criando um mundo simulado
em isométrica, visto de cima, em vez de tentar representar uma experiência no
terreno do mundo (LUPTON; PHILLIPS, 2015). A textura é o grão tátil das
superfícies e ajuda as pessoas a entenderem a natureza das coisas. Uma rosa,

94
 UNICESUMAR

por exemplo, possui espinhos afiados e,

ao mesmo tempo, tem pétalas delicadas.
Uma rua recém-asfaltada pode indicar
uma experiência mais confortável de
direção. A textura dos elementos visuais
se assemelha às suas funções visuais, ou
seja, uma superfície elegante com uma
padronagem sutil aplicada pode ador-
nar um catálogo de um spa de luxo, en-
quanto a aspereza de uma madeira pode
representar o aspecto rústico de uma
barbearia em seu folheto (LUPTON;
PHILLIPS, 2015).
A textura é definida como o look and
feel (ver/visual e sentir/sensação) das su-
perfícies. Pode ser uma qualidade da su-
perfície de um objeto, apresentando ca-
racterísticas de lisa, áspera, suave, dura,
brilhante, difusa, arenosa, peluda, entre
outros aspectos. Ela enriquece a expe- Figura 10 - Logos que utilizam de formas
ilusórias / Fonte: Poulin (2011).
riência do leitor com a interpretação tá-
til por meios visuais — uma sinestesia.
Descrição da Imagem: em fundo branco,
Em conjunto com os demais elementos são apresentados três logos: um verde, um
amarelo e um vermelho, todos com o texto
visuais, pode comunicar uma varieda- “Cooper-Hewitt National Design Week”, texto
que representa a realização da Semana
de de diferentes emoções e mensagens Nacional de Design, realizada pelo Coo-
(POULIN, 2011). Ainda, segundo Pou- per-Hewitt, Smithsonian Design Museum,
museu destinado à arte e à área do design,
lin (2011), existem três diferentes clas- localizado na Museum Mile do Upper East
Side, em Manhattan, Nova York. O logo em
sificações de textura em comunicação verde apresenta diferentes silhuetas de
luminárias em espaço negativo em três
visual, apresentadas a seguir: planos retangulares de cantos arredon-
dados que simulam profundidade e vo-
lume. O logo em amarelo apresenta uma
■ Física ou Literal: são textura táteis, cadeira em espaço negativo em três planos
retangulares de cantos arredondados que
que existem, de fato, na superfície simulam profundidade e volume. O logo
em vermelho apresenta diferentes silhue-
de um material ou objeto, como tas de vasos em espaço negativo em três
planos retangulares de cantos arredonda-
madeira, areia, pelo, vidro, couro, dos que simulam profundidade e volume.
metal. Essa textura se diferencia

95
 UNIDADE 3

por poder ser sentida pelo espectador e, ao mesmo tempo, gerar ênfase,
ritmo, movimento, tensão, padronagem e contraste para a composição. Isso
significa que esse tipo de textura afeta, diretamente, os efeitos da mensagem
e significado da peça.

■ Visual: a ilusão de uma textura física ou da superfície de um objeto é a defi-

nição de uma textura visual. Esse efeito ilusório pode ser atingido com a uti-
lização de pontos, linhas, formatos e formas ou, até mesmo, por fotografias.

■ Implícita: é uma textura visual que não possui base nas texturas do mundo
real. Geralmente, são utilizadas em trabalhos de abstração.

Figura 11 - Textura visual em preto e branco

Descrição da Imagem: em um fundo preto, uma diversidade de asperezas, formadas por meio de riscos
em várias direções, são representadas em branco, formando uma superfície texturizada.

96
 UNICESUMAR

Nós aprendemos, como estudantes de Física no Ensino Médio, que a cor é uma
propriedade da luz. Entretanto muitas pessoas não entendem, completamente,
o que isso significa. A cor, nesse aspecto, pode ser separada em cor gerada pelo
o que o objeto absorve e reflete de luz e em cor que é emanada sobre o objeto
em questão. Ou seja, a luz incandescente é diferente da fluorescente, que é di-
ferente da luz do sol. É por esse movimento que devemos entender que cor de-
pende de luz. Ela não é um elemento absoluto e inalterável, pelo contrário, ela é
um elemento, dinamicamente, afetado pelo seu ambiente (ARNTSON, 2012).

Figura 12 - Diagrama exemplificando a separação das cores por um prisma

Descrição da Imagem: em fundo branco, um triângulo azulado é posicionado ao centro. Uma linha branca
surge da esquerda, com uma seta para direita, encerrando-se na aresta esquerda do triângulo. Dentro do
triângulo, um espectro de cores pastéis substitui a luz branca e cresce em escala, de maneira gradativa, da
esquerda para a direita. Após a aresta direita do triângulo, o espectro colorido segue em direção ao limite
direito da imagem, ultrapassando a delimitação do triângulo.

97
 UNIDADE 3

Poulin (2011) afirma que a cor é um dos elementos mais poderosos e comuni-
cativos da linguagem visual. Ela pode ser utilizada para atrair atenção, agrupar
elementos diferentes, reforçar significados e mensagens, aprimorar as com-
posições visuais, aumentar o interesse visual e, ao mesmo tempo, expressar
emoção e atitude, provocando uma resposta no leitor. Existem alguns termos
importantes para entendermos o trabalho com cor, segundo Puhalla (2011),
sendo os principais: a matiz, o valor (ou brilho) e a saturação (ou croma).
Lupton e Phillips (2015) aprofundam a explicação de cada elemento. Segundo
as autoras, a matiz diz respeito ao local da cor dentro do espectro cromático.
Sendo assim, um matiz vermelho pode parecer marrom quando em baixa sa-
turação e brilho. O valor, ou brilho, é a quantidade de luz característica da cor,
também pode ser chamado de luminância ou tom. Já a saturação diz respeito
à pureza da cor em relação ao cinza, ou seja, quanto mais saturado, menos as-
pecto de cinza a cor terá.

Saturação Valor
Mais Claro

Menos Escuro
Figura 13 - Faixas de saturação e valor para o matiz vermelho

Descrição da Imagem: em fundo branco, duas faixas verticais em formato de escala são apresentadas.
A primeira, com título de saturação, apresenta uma gradação do vermelho (mais saturado) para o cinza
(menos saturado). A segunda, com título de valor, apresenta uma gradação do branco (mais claro) para o
vermelho e do vermelho para o preto (mais escuro).

98
 UNICESUMAR

Uma ferramenta muito importante para o trabalho com cores é a roda cro-
mática. Ela permite visualizarmos todo o espectro de cores e entendermos as
relações entre cada uma delas. Os relacionamentos cromáticos são chamados
de harmonias cromáticas (LUPTON; PHILLIPS, 2015).
Samara (2014) apresenta alguns tipos de harmonias cromáticas mais comuns:

■ Análoga: são cores adjacentes uma à outra na roda cromática, como o

verde e o azul.

■ Complementar: são duas cores opostas entre si na roda cromática, como o

verde e o vermelho.

■ Triádica: diz respeito à seleção de três cores igualmente espaçadas dentro

da roda cromática, como o verde, o laranja e o roxo.

Harmonia Harmonia Harmonia

Complementar Análoga Triadica

Harmonia Harmonia Harmonia

Complementar-dividida Retangular Quadrada

Figura 14 - Tipos de harmonias cromáticas

Descrição da Imagem: em fundo branco, seis rodas cromáticas são apresentadas. A primeira apresenta
uma harmonia complementar entre amarelo e roxo. A segunda apresenta uma harmonia análoga entre
amarelo, amarelo-alaranjado e laranja. A terceira apresenta uma harmonia triádica entre amarelo, azul e
vermelho. A quarta apresenta uma harmonia complementar dividida entre amarelo e azul-roxo e verme-
lho bordô. A quinta apresenta uma harmonia retangular entre verde-amarelo, laranja-amarelo, azul-roxo
e vermelho bordô. A sexta apresenta uma harmonia quadrada entre amarelo, laranja, turquesa e roxo.

99
 UNIDADE 3

Olá! Agora, quero aproveitar a oportunidade para o(a) convidar

a ouvir nosso podcast. Neste podcast, falaremos a respeito de
temas importantes para a área. Acesse o nosso QR Code.

Agora que entendemos os elementos da linguagem visual, finalmente, pode-

mos olhar e compreender os aspectos da composição que são aplicados e exe-
cutados com esses elementos. Como você pode perceber, os elementos são re-
lativamente simples e em pouca quantidade, entretanto suas possibilidades são
infinitas. Junto às possibilidades de arranjo que conheceremos logo a seguir,
nós podemos realizar qualquer trabalho dentro do âmbito gráfico. Um dos
conceitos mais aplicados nas composições gráficas é o da unidade visual. O re-
sultado final, como uma imagem integrada, congruente e concordante entre si,
faz com que os elementos aplicados na composição pareçam pertencer àquela
peça naturalmente, em vez de parecer que alguém os forçou a se encaixarem
naquele espaço. É a ideia de que o todo é maior que a soma das partes, a con-
figuração final dos elementos possui valor por si só, afetando o significado de
todos os elementos, de maneira global, e permitindo que o leitor veja a compo-
sição como uma peça única, em vez de diversas peças separadas. Esse conceito
permeia todos os campos do Design (LAUER; PENTAK, 2012).
Algumas ferramentas de composição ajudam a nós, designers, a traba-
lharmos de forma mais eficiente. Samara (2014) traz uma série de aborda-

100
 UNICESUMAR

gens básicas para alcançarmos fortes composições. Iniciando pela visualiza-

ção da forma e do espaço, o autor aponta que o primeiro passo é decifrar o
que, exatamente, um elemento visual é: um ponto, uma linha, um plano ou
uma forma. Na foto de um tomate, por exemplo, ele pode ser tido como um
ponto, caso seja inserido com escala reduzida, e, ao mesmo tempo, pode ser
um círculo, caso seja utilizado com escala aumentada, ambas as situações são
demonstradas pelas imagens a seguir, observe:

Figura 15 - Tomates apresen-

tados em escala reduzida,
como pontos

Descrição da Imagem:
em fundo de madeira, so-
bre uma tábua de corte de
madeira, diversos tomates
vermelhos são empilhados
em um prato branco. Ao
lado do prato, outros di-
versos tomates vermelhos
também são posicionados,
sendo que um está partido
ao meio. No canto direito da
imagem, ao lado de alguns
tomates e acima da tábua
de madeira, é apresentada
uma faca de metal cinza.

Figura 16 - Tomate apresen-

tado em escala aumentada,
como formato

Descrição da Imagem: em
fundo branco, um único to-
mate vermelho é apresen-
tado, de forma a tomar a
área vertical quase inteira
da imagem.

101
 UNIDADE 3

Após identificar quais elementos visuais deverão ser utilizados na composi-

ção, começa-se o estudo do comportamento desses elementos para ver a rea-
ção de cada um dentro do grupo. Nessa etapa, precisa-se analisar, também,
como o espaço negativo fortalece ou enfraquece a configuração do grupo.
Para garantir uma experiência ótica engajadora e rica, é preciso compor os
espaços negativos e positivos, de maneira que o leitor perceba que os ele-
mentos estão interagindo de maneira tridimensional e existe algum tipo de
harmonia rítmica, por todo o layout, criando uma lógica para a peça. Muitas
vezes, essa lógica é descrita como tensão, já que é percebida como a vibração
ou a vivacidade que o leitor experimenta pelo layout (SAMARA, 2014). O
autor aprofunda, ainda mais, a explicação sobre a tensão, visto que, assim
como o termo implica pela sua semântica, a tensão não diz respeito, ape-
nas, aos relacionamentos formais e espaciais serem tratados de forma igual.
Alguns elementos precisam opor outros ou criar contraste, de forma que o
leitor consiga apreciar cada parte da composição com mais clareza — esses
relacionamentos se suportam e se reafirmam entre si.
Uma composição de sucesso organiza a variedade de elementos e as ca-
racterísticas composicionais, de forma a gerar tensão, para transmitir a sen-
sação de resolução. O espectador sente uma lógica por trás da peça, unifican-
do as relações individuais de cada elemento com o todo. Tenha sempre em
mente que essas relações são alteradas cada vez que um elemento qualquer
for alterado ou retirado. Ainda segundo Samara (2014), um último passo
para projetarmos uma forte composição visual é a definição clara de uma
hierarquia visual. Essa hierarquia deve ajudar o leitor a navegar ou entender
o conteúdo que é apresentado a ele — seja um texto, seja uma imagem. É
necessário definir qual é o principal elemento a ser usado — novamente, seja
um texto, seja uma imagem — e utilizar relações composicionais e elementos
visuais para destacá-lo. Nesse ponto, nós, como designers, podemos realizar
uma simples pergunta: o que o leitor precisa olhar primeiro? Com isso, além
de definirmos o ponto de entrada da peça, tal questionamento nos ajuda a
entender qual elemento deverá ter sua importância garantida, não podendo
competir com os demais elementos por atenção. Um layout realizado com
isso em mente garante que o leitor perceba, primeiro, aquilo que está em
ênfase e, depois, perceba as demais informações da peça.

102
 UNICESUMAR

Entendendo o processo que precisamos manter em mente na hora de pro-

jetarmos nossa composição visual, podemos, finalmente, falar dos relaciona-
mentos possíveis que uma composição pode apresentar. Esses relacionamentos
são utilizados para garantir a unidade e a hierarquia das informações dentro de
uma peça. O princípio visual da escala é definido como uma classificação pro-
gressiva relativa de proporção em grau de tamanho, quantidade e importância
em uma composição. Proporção e escala são princípios de design relaciona-
dos no aspecto das comunicações visuais. Proporção se refere ao relaciona-
mento de tamanho dos elementos em relação ao espaço que eles ocupam na
composição. Já a escala se refere ao tamanho comparativo dos elementos de
um design em comparação ao tamanho dos outros elementos ou ao tamanho
da composição em si (POULIN, 2011).
As comparações de tamanho, distância e peso que fazemos em nosso co-
tidiano podem ser muito úteis para nos garantir um referencial visual e, até
mesmo, uma orientação, quando formos definir a escala dos elementos em
nossos designs. Por exemplo: um arranha-céu pode ser muito grande, mas,
quando comparado com o Monte Everest, torna-se pequeno. Essa justaposi-
ção de elementos de diferentes escalas nos permite quantificar, imediatamente,
o contraste de escala entre os elementos (POULIN, 2011). A escala deve ser
considerada objetivamente e subjetivamente. Nos termos objetivos, a escala
se refere às dimensões literais de um objeto ou à relação de tamanho literal de
um artefato real e sua representação. Mapas impressos, por exemplo, possuem
uma escala exata onde cada centímetro do papel representa uma quantidade
absoluta de quilômetros no mundo real (LUPTON; PHILLIPIS, 2015).
Ainda temos os modelos em escala ou os desenhos técnicos, que utilizam
de escalas absolutas mais comuns, como 1:10 (um centímetro representa dez
centímetros na vida real), 1:5 (um centímetro representa cinco centímetros na
vida real) e 1:2 (um centímetro representa dois centímetros na vida real). Sub-
jetivamente, a escala se refere à impressão que uma pessoa possui do tamanho
de determinado objeto. Um livro em um quarto, por exemplo, pode possuir
uma escala pequena ou enorme, refletindo, além da maneira como o livro se
relaciona com nosso próprio corpo, o nosso conhecimento acerca dos outros
livros no mesmo quarto. Um dos erros mais comuns de designers inexperien-
tes é o de projetos que “faltam escala”, ou seja, não apresentam dicas que co-

103
 UNIDADE 3

nectam a composição com a experiência física de seus elementos. Um exemplo

disso são as peças que aplicam tamanhos similares para todos os elementos,
deixando-os estáticos e sem contraste (LUPTON; PHILLIPS, 2015).

Figura 17 - Exemplo de imagem que apresenta diferentes elementos sem contraste, deixando o
resultado sem escala

Descrição da Imagem: : em fundo branco, três edifícios são apresentados com o mesmo tamanho. O
primeiro apresenta uma base branca na parte de baixo, um corpo feito de vidros espelhados azuis e
uma torre branca à sua direita. O segundo é uma única torre cinza com janelas azuis e a cobertura em
forma de pirâmide. O terceiro é uma torre de vidros espelhados azuis e com duas faixas brancas em seu
topo e sua base.

Estruturas rítmicas, nas artes e no design, são, frequentemente, descritas

em termos do vocabulário musical. A conexão entre o ritmo visual e o musi-
cal pode ser considerada mais do que uma metáfora, já que, em alguns casos,
os ritmos visuais de alguns designs ressoam com memórias ou associações
de seus outros sentidos. Para que uma peça visual tenha ritmo, é necessário
existir repetição, exigindo a clara repetição de elementos idênticos, seme-
lhantes ou levemente modificados (LAUER; PENTAK, 2012).

104
 UNICESUMAR

Figura 18 - Exemplo de ritmo utilizando alternância de linhas convexas e côncavas de múltiplos pesos

Descrição da Imagem: sobre um fundo preto, é apresentado um conjunto de linhas brancas posicionado
no centro, do topo à parte inferior da imagem. Ainda que posicionado uniformemente entre si, o formato
das linhas se alterna entre curvas, ora convexo, ora côncavo, dando sensação de movimento e ritmo.

Não são, apenas, elementos abstratos que apresentam ritmo. As linhas vistas
em fotografias aéreas, por exemplo, também podem apresentar um ritmo
gráfico bastante nítido. Assim como em uma melodia, a repetição e a mu-
dança vivem em justaposição na vida real. Essa mesma aplicação pode ser
utilizada em trabalhos editoriais onde, ao longo das várias páginas de uma
publicação, as figuras, as tipografias, as cores e os fólios podem ser projeta-
dos conscientemente, para criar pontos focais e carregar o olhar do leitor por
toda a publicação. Geralmente, a utilização de uma grade invisível ao leitor
ajuda o designer a trazer ordem e progressão ao design, permitindo a utiliza-
ção de “elementos surpresa”, para criar variação e manter o interesse.

105
 UNIDADE 3

Figura 19 - As pessoas e suas posições evocam um ritmo caótico invadindo o ritmo ordenado e
constante da faixa de pedestres

Descrição da Imagem: a figura apresenta uma foto aérea de uma faixa de pedestres com dezenas de
pessoas atravessando sobre ela. As pessoas vêm e vão em todas as direções, estão vestidas com roupas
de diferentes cores e estilos.

O espaço é um elemento de design vital em todas as comunicações visuais,

entretanto, diferentemente de outros elementos, como linha, formato, cor e
textura, ele não pode ser colocado em uma composição. Ele se refere à área
existente entre, entorno, acima, abaixo ou dentro dos elementos. Ele pode ser
tanto bidimensional quanto tridimensional, podendo ser descrito como raso,
profundo, aberto, fechado, positivo, negativo, ambíguo ou ilusório (POU-
LIN, 2011). No âmbito gráfico, o espaço é identificado como espaço negativo
ou espaço em branco, ou seja, áreas vazias de informação. Sendo assim, as
áreas que contém elementos (formatos, formas, imagens, fotografias, entre
outros) são tidas como áreas positivas. A relação entre positivo e negativo,
em uma composição, pode criar uma ilusão de profundidade quando proje-
tada cuidadosamente, estabelecendo relações espaciais entre os elementos de
primeiro plano e os elementos de plano de fundo. Quando as áreas negativa
e positiva são iguais, a sensação de profundidade fica prejudicada, deixando
a composição visual mais estática (POULIN, 2011).

106
 UNICESUMAR

Figura 20 - Exemplo espaço negativo aplicado nas letras de “Negative Space”

Descrição da Imagem: em fundo branco, são apresentadas as palavras negative e space, que, em português,
querem dizer negativo e espaço, respectivamente, alternando entre espaço negativo e positivo com as cores
preto e branco para compor cada letra.

O contraste é um elemento que pode ser defini-

do como a justaposição de elementos dissimilares,
como cores, tons ou, até mesmo, significados. É o
princípio fundamental de prover ao espectador
uma diferença significativa entre duas coisas ou ob-
jetos: pequeno e grande, vermelho e verde, claro e
escuro, quente e frio. No campo das comunicações
visuais, o contraste é a diferença perceptível das ca-
racterísticas visuais que fazem um elemento distin-
guível dos demais ao seu redor. Pode ser atingido
ao exagerar determinada característica do elemento
— seu formato, sua cor, seu tamanho, sua textura —
em comparação aos demais elementos da composi-
ção, de maneira a aprimorar a mensagem transmi-
tida, deixando-a mais acessível e entendível para o
espectador. O contraste é uma ferramenta poderosa
para chamar atenção, ambientar uma emoção e es-
truturar a hierarquia dos elementos dentro de uma
composição (POULIN, 2011).

107
 UNIDADE 3

Figura 21 - Contraste entre claro e escuro é uma das formas mais tradicionais de se aplicar esse conceito

Descrição da Imagem: à esquerda, há um fundo preto e, à direita, um fundo branco. Na metade superior,
há um lápis de cor preta apontando para baixo e encostando sua ponta lateralmente com a ponta de um
lápis de cor branca, que está, na metade inferior, apontando para cima.

O equilíbrio acontece quando os elementos visuais, dentro de uma compo-

sição, estão distribuídos e arranjados, de maneira a transmitir a sensação de
estabilidade e harmonia. Esse princípio visual pode ser descrito como: formal
e simétrico; dinâmico e assimétrico; e radial. A nossa resposta ao equilíbrio,
geralmente, é intuitiva, estando conectada com nosso equilíbrio corporal como
seres humanos (POULIN, 2011). A simetria, de acordo com Leborg (2004),
ocorre quando objetos são dispostos em posições idênticas em ambos os lados
de determinado eixo. É possível que um elemento seja mono simétrico ou multi
simétrico, ou seja, simétrico em um único eixo ou simétrico em múltiplos eixos.
O conceito de multi simétrico do autor pode ser tido, também, como simetria
radial. Poulin (2011) apresenta a simetria como elemento fundamental e atem-
poral da percepção visual, fortalecendo, além do equilíbrio, a estabilidade e a
harmonia das composições. Entretanto, quando os elementos visuais estão em
completa simetria ou centralizados, eles apresentam um estado de equilíbrio
onde todos os elementos apresentam o mesmo peso. Essa composição é mais
estática, parada e balanceada.

108
 UNICESUMAR

A assimetria, o oposto da simetria, por sua vez, atinge seu

equilíbrio sem se basear no espelhamento dos elementos. O
equilíbrio alcançado com a assimetria exige um elemento mais
dominante, esclarecendo a hierarquia da composição. Seus re-
sultados apresentam mais dinamismo que as composições si-
métricas (POULIN, 2011). Segundo Poulin (2011), podemos
usar os elementos de design para nos ajudar a aperfeiçoar o
senso de equilíbrio de nossas composições. Existem variados
graus de balanço que podem ser atingidos em uma composi-
ção utilizando os seguintes elementos:

■ Cor: nossos olhos são mais atraídos pelas cores do que por
uma imagem neutra. Elementos pequenos vibrantes em
cor podem gerar muito mais peso visual do que elementos
grandes de cores neutras. Cores complementares tendem a
apresentar um peso visual muito maior, comparado ao peso
de cores análogas.

■ Direção: nossos olhos podem ser direcionados para uma

localização específica em qualquer composição de acordo
com o arranjo dos elementos. Se os elementos forem orien-
tados em uma direção específica, nossos olhos, também,
serão conduzidos por essa mesma direção.

■ Localização: um elemento menor localizado distante-

mente do centro da composição equilibrará um grande
elemento localizado proximamente ao centro da compo-
sição.

■ Formato: formatos pequenos e detalhados podem balan-

cear formatos simples maiores.

■ Textura: pequenas áreas com texturas detalhadas podem

balancear áreas maiores com texturas mais lisas e suaves.

109
 UNIDADE 3

Figura 22 - O equilíbrio visual também segue as leis físicas da gravidade, essa composição nos gera
estranheza pela sua irrealidade

Descrição da Imagem: em fundo branco, são apresentadas três esferas. Duas esferas brancas em cima
de uma superfície de madeira, sendo a esfera da esquerda menor e da direita, maior. A superfície de
madeira está apoiada em uma terceira esfera amarela, que, por sua vez, é grande e se encontra no meio
da imagem e da superfície de madeira, equilibrando-a.

Agora, cara(o) aluna(o), você possui um repertório vasto de elementos grá-

ficos para cada um de seus trabalhos. Um conselho profissional que gosto de
dar é: nunca subestime a capacidade de comunicação dos elementos bási-
cos. Dominar esses elementos e as relações entre eles é a principal forma de
conquistar uma fluidez de trabalho gráfico para todo e qualquer projeto que
você possa encontrar em sua carreira, não apenas para o âmbito bidimensio-
nal, mas também para o tridimensional. Trabalhar de maneira consciente e
intencional exige domínio do poder e significado de cada um dos elementos
apresentados aqui. Pratique, experimente, explore o máximo que você puder,
pois isso o(a) ajudará ajudar muito quando você se deparar com os desafios
do dia a dia em sua carreira.

110
 UNICESUMAR

NOVAS DESCOBERTAS

Título: Por que design é linguagem?

Autores: Vera Lúcia Nojima e Frederico Braida
Editora: Rio Books
Sinopse: o objetivo deste livro é o entendimento do viés interdisciplinar
do Design. É preciso percebê-lo como uma oportunidade para a (re)
visita a paradigmas e para a proposição de alternativas que tragam aportes
teóricos para a projetação. É preciso entendê-lo, fundamentalmente, como
sustentado no conceito de signo adaptável e cambiante. Em consequência, as
interações por ele (pelo Design) disparadas não são prioridade de um ou de
outro, mas constituídas em eventos comunicativos circunscritos à ideologia e
inscritos na novidade.

Cara(o) estudante, finalmente, chegamos ao fim de mais uma unidade. Para

fortalecer seu entendimento dos elementos fundamentais de Design, é ne-
cessário prestar atenção ao seu redor, e não, apenas, ler a respeito. Nossos
olhos são a principal ferramenta que temos para identificar a presença e a
utilização de cada elemento e de cada princípio. E, claro, não apenas nossos
olhos, mas todos nossos sentidos. O trabalho com sinestesia, também, segue
o mesmo conjunto de lógicas, com a diferença de exigir uma tradução do
sentido visual para o sentido tátil, auditivo ou qualquer outro. Da mesma
forma que nós, designers, acabamos traduzindo o conceito de ritmo para o
âmbito visual.

111
Utilize o conteúdo de nossa unidade para projetar um mapa conceitual dos ele-
mentos e princípios da Linguagem Visual. Relacione cada elemento e cada prin-
cípio, destacando e exemplificando sua aplicação gráfica (lápis e borracha sobre
papel já é o suficiente!). Sua resposta deverá conter cada elemento visual e sua
categoria — se é elemento ou princípio —, e minha sugestão é adicionar um pe-
queno resumo de sua aplicação ao lado, para ajudar a memorizar!
4
Branding,
Identidade
Visual e Logos
Esp. Renan Ferreira Venancio

Nesta unidade, você terá a oportunidade de entender como aplicar

os elementos de seu conhecimento de Design Gráfico na construção
de identidades visuais. Analisaremos a diferença de branding, siste-
ma de identidade visual e logo. Além disso, compreenderemos como,
exatamente, configura-se uma identidade visual, qual seu papel no
mercado e como produzi-la.
 UNIDADE 4

Com a difusão das ferramentas de design para a grande massa, no final da dé-
cada de 1980, a produção de peças gráficas começou a receber diversos inputs
de um número cada dia maior de criadores. No aspecto das identidades visuais,
isso não é diferente. As novas ferramentas e possibilidades geraram uma série
de quimeras visuais, com a mistura de vários estilos e técnicas, em especial, nos
anos 1990 e 2000. De lá para cá, muito se discutiu sobre um “bom logo”, com
diversos designers replicando princípios modernistas como respostas para essa
questão. Entretanto, o que é um logo? Para que serve? Qual sua função no mer-
cado? Responderemos a essas perguntas ao longo de nossa unidade. Mas, adian-
tando um pouco, podemos entender, desde o início, que o logo não é apenas um
desenho. Ele identifica uma empresa para seus potenciais consumidores. Seu
papel é muito maior do que ser um breve elemento estético na longa jornada de
consumo, como veremos nesta unidade. Identificar valores, personalidade e am-
bições de uma empresa em um desenho é algo bastante complexo, envolvendo a
multidisciplinaridade natural do profissional de design.
Da mesma forma como todas as outras peças de design, a criação de
identidade visual se popularizou e, hoje, pode ser encontrado um número
imenso de (autoproclamados) profissionais que fazem logos. Novamente,
essa diversidade de pontos de vista possui seu lado positivo e seu lado nega-
tivo. No lado negativo, não temos uma abordagem e uma formação correta
para a produção de uma identidade visual. Alguns criadores copiam solu-
ções estrangeiras para empresas de nosso país, o que não é ilegal (visto que
a empresa estrangeira não é registrada no Brasil), mas é imoral e antiético. É
possível encontrar esse tipo de “solução”, até mesmo, em prêmios renomados
de design. Em contrapartida, no lado positivo, temos uma discussão estética
com o máximo de pessoas envolvidas. Isso acelera a evolução da linguagem
gráfica contemporânea, permitindo que empresas e profissionais mais ante-
nados se destaquem, ao observar o comportamento do público às criações
que são disseminadas no mercado. Essa pluralidade gera representatividade
de inúmeros grupos sociais que, em um mercado “correto”, não existia.
Para proporcionar um conhecimento inicial sobre branding, identida-
de visual e logos, vamos, juntos, realizar uma atividade? Utilize seu celular
para tirar fotos do máximo de logos que conseguir em seu cotidiano. Faça
uma biblioteca pessoal (acervo) com essas fotos. Isso o(a) ajudará a entender
quais linguagens gráficas mais se destacam em sua cidade e região e, assim,

116
 UNIDADE 4

as especificidades encontradas nesse contexto. Dê um passo além: categorize

todas suas fotos. Atribua um nome a cada estilo gráfico diferente que você
encontrar e agrupe todas as soluções daquele estilo em uma pasta. Ao fazer
isso, você entenderá que, assim como em qualquer peça de design, identida-
des visuais possuem linguagens específicas. Afinal, Design é uma linguagem.
A partir da atividade proposta, que possibilitou a criação de um acervo
de logos que você encontra no dia a dia da sua cidade, analise como são os
elementos de uma Identidade visual e como são utilizados na construção de
projetos que conseguem evocar personalidade e emoções. Utilize seu diário
de bordo para anotar suas reflexões!

Uma confusão muito comum em nosso mercado diz respeito ao conceito de

marca. Fazendo uma rápida busca na Internet, podemos encontrar que marca
é o logo de uma empresa ou a identidade visual de uma empresa e, ainda, fazer
a marca de uma empresa significa fazer sua identidade visual. Essa confusão se
estende até o mercado de Design internacional: muitos profissionais vendem

117
 UNIDADE 4

um projeto de marca e executam uma identidade visual. Então, para evitar que
você tenha essa dúvida, alinharemos isso. Começando pelo termo mais difícil:
a marca. O que, exatamente, é uma marca? Neumeier (2006) explica o que uma
marca inicia pelo que ela não é: uma marca não é um logo; uma marca não é
uma identidade corporativa; uma marca não é um produto. Uma marca é o
sentimento intuitivo de uma pessoa sobre um produto, um serviço ou uma em-
presa. É um sentimento intuitivo por sermos seres intrinsecamente emocionais,
pois, no final das contas, uma marca é definida pelos indivíduos, e não pelas
empresas ou seus mercados — cada pessoa cria sua própria versão para si.
Apesar de não controlarem a criação de uma marca, as empresas po-
dem influenciar essa construção com suas comunicações, suas qualidades e
seus diferenciais. Quando uma boa parcela da população chega ao mesmo
sentimento intuitivo sobre a empresa, isso significa que a construção de
uma marca foi bem definida. Portanto, a marca não é o que nós, designers,
ou os empresários por trás das empresas dizem que ela é: uma marca é o
que as pessoas dizem o que ela é. O branding, que, em português, quer
dizer Gestão de Marcas, tem, como objetivo mais simples, a criação de di-
ferenciação, fazendo um produto ou serviço parecer ser diferente de seus
concorrentes de maneira positiva. Os valores da marca e sua filosofia são
suas bases para criar essa diferenciação diante dos competidores. Uma for-
ma de realizar identificação, a partir dessas bases, é a humanização da mar-
ca a partir de características humanas. Em geral, podemos resumir essas
características em cinco grupos: sinceridade (honestidade, genuinidade),
excitamento (ousadia, imaginação), competência (confiabilidade, respon-
sabilidade), sofisticação (glamour, romance) e rudeza (força, resistência)
(SLADE-BROOKING, 2016).
A Nike, assim como outras gigantes da indústria de bens de consumo,
construiu, ao longo de décadas, sua marca. O fato de conseguirmos reconhe-
cer que o texto “just do it”, ao lado de seu icônico swoosh, já a representa é a
prova de que a Nike atingiu o status de marca. Mas a parte mais importante é
que esse pequeno ponto de contato, um adesivo na parede, é capaz de ressaltar
algo muito maior: ousadia, persistência, atletismo, performance, dinamismo,
movimento, entre vários outros valores que a marca Nike demonstrou defen-
der ao longo de toda sua história.

118
 UNIDADE 4

Figura 1 - Exemplo de slogan de uma marca

Descrição da Imagem: em um quadro preto, é aplicada, em tipografia branca, a frase just do it (apenas faça,
em tradução livre) ao lado do símbolo da Nike, um elemento horizontalizado formado por curvas e diagonais.

Dentro desse grande espectro conceitual, existem os pontos de contato de uma

marca que são responsáveis em tangibilizar esses conceitos na vida das pes-
soas. Definindo esses pontos de contatos, existe a Identidade da Marca. Ela é
tangível e apela para os sentidos, podendo ser tocada, sentida, segurada, ouvi-
da, observada. Seu papel é acelerar o reconhecimento da marca, amplificar a
diferenciação e sintetizar grandes ideias em formatos acessíveis. A Identidade
da Marca é capaz de juntar elementos díspares em um sistema completo.
A Figura 2 apresenta um exemplo de uma assinatura vertical, referente à
uma identidade visual, intitulada brand name, e o símbolo que a acompanha,
elementos genéricos. Essa identidade visual pode ser utilizada por inúmeras
empresas, basta substituir o texto brand name pelo nome da empresa — inclu-
sive é essa a intenção desse layout, visto que é vendido em um site de vetores.
Esse exemplo não é uma marca, pois não existe uma estratégia de construção
de valor para o consumidor final fundamentando a criação desse logo.

119
 UNIDADE 4

Figura 2 - Exemplo de uma assinatura vertical de uma identidade visual

Descrição da Imagem: em um fundo branco, é apresentado um símbolo composto de três faixas azuis,
uma ao lado da outra, na posição vertical, localizadas ao centro da imagem. No espaço negativo entre
as faixas, encontram-se duas setas para cima e, logo abaixo do símbolo, o texto brand name, em cinza.

Finalmente, dentro da Identidade da Marca, temos a Identidade Visual, em

conjunto com uma série de outras identidades, como: Identidade Olfativa,
Identidade Fotográfica, Identidade Verbal, entre outras. Peón (2009) define
a identidade visual (corporativa) como um dos veículos que leva à marca.
Sendo o mais explícito, mas não o único. A autora traz o conceito de Sistema
de Identidade Visual (SIV), que é a maneira que se configura a identidade
visual. O SIV define os elementos básicos da identidade, como logotipo, sím-
bolo bem como cores e alfabeto institucionais, além de outros elementos de
apoio, como letreiros, uniformes, sinalização, embalagens, papelaria e ade-
sivos para frota. Nesse sentido, o SIV é o sistema de normatização que cria
unidade para todos os itens de uma organização.
Agora que compreendemos esse ponto crucial do nosso trabalho, pode-
mos focar em entender o que constitui uma Identidade Visual. Iniciando pelo
conceito de logo, segundo Adams e Morioka (2004), ele é o elemento visual
distintivo de uma organização, objeto, publicação, serviço, pessoa ou ideia.
Ele é capaz de facilitar a diferenciação, direcionar o foco corporativo, prover
uma clara identificação, expressar uma personalidade para a empresa, criar

120
 UNIDADE 4

credibilidade, trazer ordem para os inúmeros pontos

de contato, comunicar uma mensagem e, ainda, outros
elementos. O logotipo é uma assinatura que utiliza
apenas elementos tipográficos estilizados (ou não) para
representar sua empresa proprietária. Sua vantagem é
apresentar, apenas, o nome completo da empresa, supe-
rando problemas de reconhecimento, mais facilmente.
Sua desvantagem é que pode resultar em algo genérico,
e não memorável (ADAMS, MORIOKA, 2004).
Precisamos analisar a tipografia, como figuras de pa-
lavras e letras. Cada forma de cada letra, quando unida
em uma palavra, é capaz de transmitir uma mensagem.
Escolher a tipografia adequada para um logotipo é uma
tarefa complexa. Deve-se analisar as formas das letras, a
combinação de cada uma dessas formas na construção da
palavra, a legibilidade das letras, entre outros aspectos for-
mais que as letras apresentam.
É comum que designers iniciem sua busca de op-
ções com múltiplas fontes envolvidas, mas, depois que
um direcionamento tipográfico é estabelecido, esse nú-
mero tende a cair drasticamente, até sobrar apenas uma
fonte escolhida. Entretanto é comum que não seja tão
fácil assim, visto que, muitas vezes, é necessário editar
ou redesenhar algumas letras, para conseguir alcançar
uma identificação maior para o logotipo, melhor legi-
bilidade ou maior adequação das letras para o uso final
(ADAMS; MORIOKA, 2004). É importante lembrar
que a tipografia aplicada ao logotipo, que pode, ou não,
ser estilizada ou desenhada do zero, não, obrigatoria-
mente, define o alfabeto institucional. Ambas preci-
sam de sinergia entre si, mas a tipografia aplicada ao
logotipo pode ser uma fonte paga (como a Helvetica),
enquanto o alfabeto institucional pode ser uma fonte
gratuita (como a Poppins do Google Fonts), para não
gerar custos adicionais.

121
 UNIDADE 4

Figura 3 - Exemplo de logotipo

Descrição da Imagem: em fundo preto, é apresentado o logotipo Braun em branco, com a letra A, no
centro da palavra, mais alta que os demais caracteres. As letras são arredondadas e estão alinhadas no
centro da imagem, levemente na diagonal. Ao fundo, é possível observar uma construção distorcida, com
luzes acesas que se destacam no escuro da noite e do restante do fundo da imagem..

O símbolo, por sua vez, é a parte icônica do logo, podendo ser utilizado
com, ou sem, o logotipo. Os benefícios de um símbolo utilizado isolada-
mente é sua capacidade de comunicação de conceitos, de maneira mais
eficaz. Entretanto, sem o logotipo para indicar o nome, é muito fácil
acontecer problemas de reconhecimento da empresa — sendo necessá-
rio uma comunicação muito forte para garantir esse reconhecimento,
como é o caso da Nike e seu swoosh (ADAMS; MORIOKA, 2004). Um
outro exemplo de logo icônico, cuja comunicação se tornou tão forte
que reconhecemos a empresa a partir do símbolo utilizado isoladamen-
te, é o logo da Apple (ver Figura 4), empresa multinacional estaduni-
dense que tem o objetivo de projetar e comercializar produtos eletrô-
nicos de consumo, software de computador e computadores pessoais.

122
 UNIDADE 4

Figura 4 - Exemplo de símbolo

Descrição da Imagem: em fundo degradê, entre rosa e lilás, é apresentado o símbolo da Apple, uma maçã,
de cor branca, com uma mordida em seu lado direito, e uma folha em sua parte superior.

Por fim, mas não menos importante, temos a assinatura,

que é uma combinação distinta de configuração de for-
mas e dos outros elementos e, também, sinônimo de logo
(ADAMS; MORIOKA, 2004). As assinaturas podem apre-
sentar diversas configurações, mas podemos encontrar
dois tipos mais comuns: as assinaturas horizontais e as as-
sinaturas verticais. O que define o tipo de assinatura é a
maneira que os elementos são posicionados dentro da área
destinada a ela. Na horizontal, o logo e o símbolo apare-
cem lado a lado no eixo horizontal, enquanto, na vertical,
o logo e o símbolo aparecem um em cima do outro.

123
 UNIDADE 4

Assinatura

Logotipo Símbolo

Tagline

Figura 5 - Esquema de uma assinatura de identidade visual / Fonte: Wheeler (2009, p. 36).

Descrição da Imagem: em fundo branco, é apresentado um diagrama detalhando a assinatura de identidade

visual da Spectrum Health. No centro, encontra-se o logotipo, com a devida legenda “logotipo”, logo acima.
À direita do logotipo, encontra-se o símbolo, formado por um losango constituído por pontos azuis que se
tornam verdes, conforme vai chegando mais ao centro do losango, e, ao lado direito, encontra-se a legenda
“símbolo”. Abaixo do logotipo, encontra-se a tagline For a Better Life (para uma vida melhor, em tradução
livre) em texto azul. Enquadrando toda a composição, uma legenda assinatura é apresentada acima de tudo.

Como profissionais de design, precisamos entender que as cores afetam as

pessoas de jeitos específicos, de acordo com seu contexto e uso. Heller (2016)
afirma que cores e sentimentos se combinam a partir de experiências de vida
que se enraízam em nosso pensamento desde nossa infância. Cada cor age
de muitas formas, inclusive gerando efeitos emocionais contraditórios, pois
cada aplicação de cada cor depende de seu contexto de uso. O vermelho, por
exemplo, pode trazer uma sensação erótica, mas, ao mesmo tempo, é ca-
paz de remeter a algo brutal. Nenhuma cor está sozinha, elas sempre estarão
rodeadas de outras cores, outros signos, outros elementos. Mantenha isso
em mente quando encontrar as famosas falácias sobre psicologias das cores,
onde uma cor representa algo de forma obrigatória, totalizante e fixa.
Trabalhar com cores exige uma visão macro a respeito de seu uso: qual
será o ambiente de aplicação? Quais serão os elementos ao redor da apli-
cação? Quais serão as cores que estarão em volta da aplicação? Essas e
outras perguntas importantes devem ser feitas, sendo necessário que te-
nhamos sempre em mente que a cor deve ser analisada a partir do contex-
to e de aspectos físicos, emocionais e ambientais. As cores são subjetivas,
proporcionam conexões emocionais particulares com as pessoas. Para o

124
 UNIDADE 4

projeto de identidade visual, a cor serve, princi-

palmente, como aparelho mnemônico, ajudan-
do os consumidores a se lembrarem da empresa.
Da mesma forma, a cor pode direcionar o tom
emocional da empresa quando bem utilizada.
Por isso, a ideia de “possuir uma cor” é algo pre-
sente nas grandes empresas: a utilização repeti-
tiva e constante de uma única cor pode ajudar
em sua memorização na mente do consumidor
(ADAMS; MORIOKA, 2004).
Dentro do projeto de identidades visuais,
existem alguns sistemas de cores que precisamos
estar atentos para garantir que o resultado final
seja factível. O mais famoso é o CMYK, que é
o sistema de cores mais utilizado para impres-
são, sendo associado à impressão offset e à im-
pressão digital. CMYK é um acrônimo de Cyan
(ciano), Magenta (magenta), Yellow (amarelo), e
Key (chave) — sendo este último canal associado
à tinta preta, tida como chave para o contraste
das imagens. A cor resultante na impressão é re-
sultado da combinação de todos esses canais em
meios-tons (ADAMS, 2017).
O RGB, por sua vez, é o sistema de cores uti-
lizado pelas mídias baseadas em telas, como mo-
nitores, celulares e televisões. As telas apresentam
suas imagens utilizando a combinação de Red
(vermelho), Green (verde) e Blue (azul). Muitas
cores do sistema RGB não são possíveis de serem
impressas, por isso, cuidado com as cores fluores-
centes (ADAMS, 2017). Já O PMS (Pantone Mat-
ching System) é o sistema de reprodução de cores
padronizadas que assegura a cor correta no re-
sultado final da impressão com alta precisão. Seu
propósito é definir cores que possam ser impres-

125
 UNIDADE 4

sas em qualquer lugar do mundo (ADAMS, 2017). Tenha certeza de projetar

seu logo em ambos os sistemas de cores, RGB, CMYK e PMS, pois isso ga-
rantirá que seus projetos sejam executados com a cor correta.

Figura 6 - Círculo cromático

Descrição da Imagem: em fundo branco, é apresentado um círculo cromático com todas as cores e
variações de brilho. Ao centro, o brilho é menor, com cores mais escuras; nas extremidades do círculo, o
brilho é maior, com cores mais pastéis.

126
 UNIDADE 4

Além da seleção da cor para o logo, é necessário definir as cores institu-

cionais ou paleta cromática da identidade visual. Esta é um elemento de
grande importância e tem seu uso ligado à configuração de cada aplicação do
logo (PEÓN, 2009). Agora que vimos todos os elementos a serem trabalha-
dos dentro de uma identidade visual, podemos entender mais sobre o pro-
cesso de construção dela. Lembrando que todo projeto de Design se inicia
a partir de um briefing, garantindo que você, designer, entenda exatamente
qual é a necessidade do cliente.
Segundo Peón (2009), a etapa de concepção de uma identidade visual é onde
ocorre o rascunho de inúmeras alternativas e selecionam-se algumas soluções
para serem testadas com o público-alvo. Iniciando pela geração de ideias, pas-
sando para a seleção das alternativas, de acordo com o briefing do projeto, e
seguindo para o agrupamento das melhores soluções, ao conferir, com o cliente,
os direcionamentos para o refinamento das soluções iniciais em uma solução
preliminar. Com a solução preliminar em mãos, deve-se validá-la diante do pú-
blico-alvo (com questionários, entrevistas, formulários). Validando a alternati-
va, temos uma fase de refinamento dessa solução preliminar em solução final,
que será validada junto ao cliente, para uma aprovação final. Com a aprovação
do cliente, inicia-se o desenvolvimento de todas as variações dos elementos pri-
mários e secundários da identidade visual para a entrega final.
Como podemos ver, o trabalho é longo e exaustivo, mas necessário, para
garantir um resultado final que atinja os objetivos de negócio de nossos clien-
tes. É claro que não existem fórmulas mágicas ou padrões rígidos, você poderá
criar o seu próprio processo para sanar as necessidades da sua futura clientela.
Por isso, tenha em mente que o escopo anterior é uma sugestão já validada e
testada no mercado de escritórios de design, mas, ainda, pode ser melhorada.
Algumas das etapas apontadas por Peón merecem um aprofundamento maior
de nossa parte: rascunho de alternativas, solução preliminar e aprovação com
o cliente. Essas três fases envolvem pensamentos criativos diferentes.
A etapa de rascunhos se caracteriza pela busca de referências (em fo-
tos, outros logos e logotipos) e pelo desenho livre de ideias. Inicialmente, o
objetivo é mais exploratório, cujo objetivo é encontrar soluções diferentes
para o mesmo problema. Com o tempo, passa-se a refinar essas ideias ini-
ciais, buscando variações dessa mesma ideia para encontrar a forma que
melhor solucione o problema.

127
 UNIDADE 4

Figura 7 - Exemplos de rascunhos de um logo / Fonte: Gardner (2013, p. 98).

Descrição da Imagem: em papel, são apresentados doze rascunhos variados de um logo em formato de
pássaro e, também, cinco rascunhos com variações tipográficas para um logotipo. Todos os rascunhos
apresentam contornos na cor preta e estão distribuídos, de forma aleatória, pelo papel.

O mesmo deve ser feito com as tipografias: testar diversas fontes diferentes no
início, selecionar as mais próximas do resultado esperado e ir afunilando as al-
ternativas até encontrar a versão final de tipografia.

128
 UNIDADE 4

Figura 8 - Exemplos de busca por tipografia para logotipos / Fonte: Gardner (2013, p. 88).

Descrição da Imagem: em um quadro branco, são apresentadas três colunas, cada qual com dez linhas
da palavra permaguard em preto, escritas com tipografias diferentes. Sete das tipografias são destacadas
com um círculo magenta, duas na primeira coluna, duas na segunda e três na terceira.

Para a solução preliminar, é necessário ter alternativas diferentes em uma qua-

lidade quase final ou, até mesmo, já final. Diante dos testes com o público e o
cliente, a alternativa preliminar selecionada pode ser refinada e finalizada. Nessa
etapa, pode-se, ainda, trazer algumas variações de finalização para garantir que
foram exploradas as melhores possibilidades daquela solução.
A apresentação final para o cliente é um grande momento do projeto. É
onde todo o trabalho criativo envolvido finalmente será finalizado, para iniciar a
etapa de desenvolvimento, aplicação e execução do projeto de identidade visual.
Geralmente, essas apresentações envolvem aplicações do logo projetado nos mais
diferentes materiais — dependendo da natureza da empresa cliente. É impor-
tante permitir que o cliente visualize o resultado final de seu investimento antes
mesmo de iniciar a produção dos impressos, brindes ou peças de comunicação,
pois isso traz mais segurança a respeito da decisão importante que a empresa está
tomando. Por isso, a apresentação é um projeto à parte: ela deve contar a história
de seu projeto, apresentar o valor da alternativa final e, mais importante, deve
permitir um olhar ambicioso sobre o futuro da empresa por parte do cliente.

129
 UNIDADE 4

Figura 9 - Exemplo de alternativas preliminares. Figura 10 - Exemplo de alternativas preliminares.

Foco na diversidade de soluções Foco na variação de uma mesma solução
Fonte: adaptada de Gardner (2013, p. 93-94). Fonte: Gardner (201, p. 110).

Descrição da Imagem: três alternativas de Descrição da Imagem: em um fundo branco,

logos são apresentadas, duas em fundo preto
e uma em fundo bege. A primeira, em fundo
bege, apresenta uma estrela de oito pontas cin-
za, acima do texto “Feru” em preto. A segunda,
em fundo preto, apresenta a silhueta negativa
de uma ave dentro de um círculo bege, acima
do texto “Feru”, em bege. A terceira, em fundo
preto, apresenta um círculo cortado por diago-
nais repetidas que formam um x em branco, ao
lado esquerdo do texto “Feru Sport”, em bege.
três alternativas de logos circulares são apre-
sentadas em preto. A primeira apresenta uma
abstração de uma figura humana segurando
uma estrela, a segunda apresenta a mesma
abstração, mas com linhas circundando a es-
trela e a figura humana, e a terceira apresenta a
mesma abstração, mas com linhas evidenciando
as marcações longitudinais e latitudinais de um
globo implícito na área do círculo.

Figura 11 - As representações de aplicações podem ser fotomontagens, baseadas em fotos reais

Descrição da Imagem: a figura apresenta a fotografia de uma fachada de prédio com o logo da Vale, empre-
sa mineradora multinacional brasileira. O símbolo é formado por um V, verde, com detalhes, em amarelo,
em sua ponta direita. Ao lado direito do símbolo, está a tipografia “Vale”, em letras maiúsculas e preto.

130
 UNIDADE 4

Figura 12 - As representações de aplicações também podem ser produções completamente digitais,

envolvendo até técnicas 3D

Descrição da Imagem: em fundo cinza e branco, são apresentadas duas camisetas esportivas, uma de
frente e uma de costas. A da esquerda está de frente, tem uma manga amarela e outra preta, com o
texto “Lorem”, no peito, e o número sete, logo acima, à esquerda. A da direita está de costas, tem uma
manga amarela e outra preta, com o texto “Dolorsit”, na parte de cima, e o número sete, logo abaixo, em
escala aumentada.

Rian Hughes é designer, escritor e ilustrador que trabalha

em Kew, Londres. Ele desenhou logotipos para vários quad-
rinhos americanos e britânicos, incluindo Batman, James
Bond, Homem-Aranha e Os Vingadores. Em seu estudo de
caso no livro Really Good Logos Explained, ele registra dez
erros que designers cometem ao projetar um logo. Acesse o
QR Code disponível e dê o play para ouvir!

131
 UNIDADE 4

Com o logo apresentado e aprovado, finalmente, podemos dar início à etapa

de execução das demais peças da identidade visual. Peón (2009) configura os
projetos de sistema de identidade visual em extenso (para grandes empre-
sas), completo (para médias empresas) e restrito (para pequenas empresas):

■ Extenso – demanda grande número de aplicações e, consequentemente,

energia na gestão da qualidade e na manutenção. A lista de itens desse
tipo de projeto acaba dependendo muito das necessidades específicas da
empresa, não existindo um número específico para o total de aplicações.

■ Completo – permite um número de aplicações que possibilita a projeção

e implementação do sistema de identidade visual, de forma completa à
empresa. Novamente, não existe um número específico para o total de
aplicações, mas as aplicações desse modelo são em menor número, exigem
menor energia de gestão de qualidade e de manutenção.

■ Restrito – inclui poucos elementos e aplicações, que, muitas vezes, são

pouco diversificadas. Por falta de recursos operacionais e financeiros das
empresas, esses projetos não podem exigir gestão de qualidade e manu-
tenção tão dedicadas.

Essa separação pelo porte da empresa se baseia no fato de que, quanto maior
ela for, mais verba e envolvidos o projeto terá. Da mesma forma, uma alta
quantidade de aplicações e uma alta qualidade exigem muito mais energia
e verba da própria empresa-cliente para gerir todas essas aplicações. O que
é inviável para pequenas e microempresas (PEÓN, 2009). Existem inúme-
ros materiais que podem fazer parte de um SIV: adesivos para carros, peças
colaterais de comunicação, relatórios, apresentações institucionais, cartões
de visita, pastas para documentos, layout de fachada de loja, brindes, entre
muitos outros. Entretanto alguns acabam sendo mais comuns para todos os
tipos e tamanhos de projeto. Peón (2009) elenca alguns desses elementos
acessórios do projeto de identidade visual, que estão, diretamente, ligados à
forma como a empresa investirá na sua comunicação, sendo eles:

132
 UNIDADE 4

■ Grafismos – são elementos gráficos abstratos, em sua maioria. Sua

função é apresentar um conceito ou apoiar as comunicações visuais da
empresa em suas peças de comunicação. Não é um elemento essencial
para o SIV, entretanto pode ser utilizado para evocar ideias mais abs-
tratas, como jovialidade, solidez ou velocidade.

■ Normas para layouts – mais comum em projetos complexos ou exten-

sos, as normas para layout permitem a produção contínua de peças grá-
ficas em um mesmo padrão, podendo ser utilizadas em folders, convites,
flyers, relatórios, entre outros. As normas não precisam ser restritivas, é
preciso ter cuidado para não engessar, mas devem criar uma lógica que
proteja a imagem corporativa da empresa.

■ Mascotes – personagens humanizados que são utilizados para atingir

fatias específicas de público-alvo. São capazes de criar identificação entre
o público e a imagem corporativa da empresa, quando bem utilizados,
agregando valor à sua comunicação. É muito comum que os mascotes
não sejam criados dentro de um SIV, mas, sim, em um projeto posterior.
Por isso, é importante atualizar ou adequar as normas do sistema para
garantir uma harmonia entre o mascote e o logo da empresa.

133
 UNIDADE 4

Figura 13 - Exemplo de uma identidade visual que utiliza um mascote como símbolo

Descrição da Imagem: em um fundo laranja pastel, é apresentado um logo que conta com uma mascote
de cachorro ilustrado, de maneira lúdica, como símbolo, suas cores são laranja e branca, e ele está em pé,
isto é, com as patas traseiras no chão e as patas frontais erguidas. Suas orelhas estão eretas e sua língua
está para fora da boca. Logo abaixo, é apresentado o texto “Bibi”, em preto, e “Dog”, em laranja. Abaixo
da tipografia de Bibi Dog, é apresentado, em preto, o texto Tagline Here (tagline aqui, em tradução livre).

Com isso, caro(a) aluno(a), finalizamos

nossa unidade! Vimos, em detalhes,
todos os elementos necessários para se
compor uma identidade visual e o pro-
cesso de como projetar uma. Espero
que este conteúdo tenha mudado sua
visão a respeito dos logos e das marcas e
você possa fazer bom uso desse conhe-
cimento como profissional!

134
 UNIDADE 4

Figura 14 - Perceba como a papelaria apresenta um elemento gráfico feito com linhas que é repetido
em várias peças, esse é o grafismo

Descrição da Imagem: em fundo cinza, são apresentadas representações de 16 peças de papelaria. Da

superior esquerda para a inferior direita, encontram-se, respectivamente: agenda com lombada em es-
piral, papel timbrado, pasta para documentos, calendário, crachá, lápis azul, lápis branco, envelope para
documentos aberto, envelope para documentos fechado, envelope para documentos de tamanho menor
fechado, envelope para documentos de tamanho menor aberto, cartão de visita de frente, cartão de visita
de verso, caneca, CD, capa para CD e sacola de papel. Em todos os itens, é apresentado o mesmo grafismo
com repetição de linhas diagonais se cruzando em azul escuro e azul médio.

135
 UNIDADE 4

NOVAS DESCOBERTAS

Título: Sistemas de Identidade Visual

Autora: Maria Luísa Peón
Editora: 2AB
Sinopse: um manual objetivo para a projetação de sistemas de identi-
dade visual, abordando desde as questões de administração de proje-
tos até a implantação do sistema. Maria Luísa Peón, apoiada em sólida experiência, faz parte
de uma metodologia enxuta que permite o controle das variáveis aliado à economia de cus-
tos e prazos. Com isso, evita o etapismo que, fatalmente, é atropelado pelas demandas do
dia a dia profissional. Tal postura, no entanto, não deixa, de lado, o rigor metodológico exi-
gido por uma tarefa complexa, como a projetação de sistemas de identidade visual — sejam
eles para microempresas ou grandes conglomerados, sejam para instituições ou eventos.
O(a) profissional encontra, aqui, um guia consistente para o aperfeiçoamento de sua ativida-
de e, para o(a) estudante, é uma primeira oportunidade de mergulhar no fascinante universo
de um dos serviços mais requisitados aos designers gráficos.

Trabalhar com identidades visuais requer

muita organização e empatia. Entender de-
sejos de empresários para suas empresas e
transformá-los em aplicações visuais que aju-
dem essas empresas a se destacarem no mer-
cado é algo complexo e demorado. Exige uma
atenção aos detalhes da cultura da empresa,
de suas ações e políticas comerciais e de como
os consumidores percebem essa empresa.
Analise uma identidade visual de qual-
quer empresa de sua cidade, de preferência,
uma microempresa bastante tradicional,
uma pequena mercearia ou mercadinho de
bairro ou algo do tipo — essas empresas, ge-

136
 UNIDADE 4

ralmente, são as que menos investem em design. Utilizando seus novos co-
nhecimentos, como você avalia a atual identidade visual dessa empresa? Deixa
claro o que ela faz? Deixa claro qual sua personalidade? É parecida com a de
outras empresas do mesmo segmento? A partir dessa análise, como podemos
melhorar essa identidade? Precisamos redesenhar do zero? Podemos moder-
nizá-la para atingir um resultado mais satisfatório? Como podemos ajudar
essa empresa a ter uma percepção melhor perante seu público? Quais pontos
de contato estão envolvidos com essa identidade? Fachada, folhetos, vitrines?
Como podemos utilizar esses pontos de contato para ajudar a empresa a se
destacar em seu contexto?
Faça uma nova identidade visual para esse negócio com essas perguntas
em mente. Lembre-se, não é questão de bonito ou feio, mas, sim, de eficiente
ou não. Como você pode, como designer, produzir uma identidade visual que
ajude essa pequena empresa de bairro a expressar para as pessoas que ela pos-
sui boa qualidade de produtos e serviços? Reflita sobre isso enquanto rascunha
sua proposta de identidade visual.

137
Para concretizar melhor seu conhecimento, faça um mapa mental de todo o
conteúdo de nossa unidade. Inicie com o conceito de identidade visual ao centro,
desmembrando os seguintes elementos: logotipo, símbolo e assinatura e seguin-
do com os demais elementos: cor, tipografia, aplicações etc.
5
Introdução
ao Design de
Interfaces (UI)
Esp. Renan Ferreira Venancio

Olá, cara aluna(o)! Bem-Vinda(o) a nossa unidade a respeito de De-

sign de Interfaces. Nela, você terá a oportunidade de entender como
o Design Gráfico abrange o mundo das interfaces, digitais ou não.
Analisaremos o que exatamente é uma interface e qual processo de
design deve ser considerado no projeto de uma.
 UNIDADE 5

Com a constante atualização de ferramentas, mídias e meios de nossa ci-

vilização, o mercado de Design se expandiu para atender às necessidades
dos consumidores e das indústrias. Nesse movimento, uma área ganhou
bastante destaque no meio do Design Visual e do Design Digital: o Design
de Interfaces. Apesar de não ser algo novo — podemos encontrar as raízes
desse braço do Design nos projetos de maquinários para indústrias já na
primeira metade do século XX —, é um campo que tem ganhado bastante
visibilidade e valorização, visto que está em contato direto com o campo
da tecnologia de informação, um campo do conhecimento em expressivo
crescimento nas últimas décadas.
Junto desse novo e popular cargo, o designer de interfaces de usuário
(UI designer), hoje, temos outras novas profissões surgindo e se consoli-
dando nesse cenário de TI. Podemos citar o designer de experiência de
usuário (UX designer), o designer de serviço (service designer), o redator
de experiência de usuário (UX writer), entre outros. E você? Qual é o con-

142
 UNICESUMAR

tato que você possui com esse novo e famoso campo do Design contempo-
râneo em seu dia a dia? Já parou para pensar?
Assim, convido-o(a) a pensar e pesquisar sobre a evolução dos cargos
de Design relacionados ao mundo digital. Muitos desses cargos não eram
comuns há dez anos, e alguns sequer existiam nesse tempo. Nossa civilização
e suas tecnologias estão evoluindo em uma velocidade jamais vista, e nossa
profissão não seria diferente. A difusão dos smartphones e notebooks per-
mitiram a nós, designers, inúmeras possibilidades de criação — assim como
para todas as outras pessoas com acesso a essas tecnologias. Entretanto essas
ferramentas não fazem o trabalho por nós, o papel delas é facilitar a nossa
produção. Nos dias de hoje, um notebook bem equipado é capaz de substi-
tuir os equipamentos de um antigo estúdio de design por ferramentas com-
pletamente digitais, gerando mais rapidez e assertividade para o trabalho.
Entretanto, novamente, são apenas ferramentas. As habilidades para utilizá-
-las não garantem a habilidade necessária para se executar um bom design.
Tome cuidado, não confunda o profissional pela ferramenta.

143
 UNIDADE 5

Utilize lápis e papel para rascunhar os principais websites que você acessa
em seu cotidiano. Tente realizar isso, utilize, pelo menos, de três a cinco sites.
Identifique as lógicas visuais, os padrões internos de cada site. Além disso, ten-
te identificar as lógicas e os padrões que extrapolam cada site, ou seja, nesses
três ou cinco sites, quais são os padrões visuais que você é capaz de enxergar?
Cada novo projeto de interface precisa entender qual é o conteúdo mais im-
portante e como ele será apresentado ao usuário. Entretanto alguns padrões
de boas práticas são muito comuns nesse mercado. Utilize esse exercício para
aprender a enxergar além da camada mais superficial do projeto.
Utilize seu diário de bordo para registrar os padrões que você encon-
trou. As interfaces visuais seguem os mesmos princípios da Linguagem
Visual, utilize essa conexão para analisar e aprofundar seu entendimento
em cada padrão e aplicação dentro de uma interface.

A interface de usuário é o elemento mais importante de qualquer sistema

computadorizado, pelo fato de ela ser o próprio sistema para a maioria dos
usuários. Ou seja, ela pode ser vista, ouvida e tocada, mas as pilhas de milha-
res de linhas de código que formam o sistema permanecem ocultas. Dessa
forma, o objetivo de uma interface de usuário é simples: permitir o uso de
um sistema de maneira fácil, produtiva e agradável (GALITZ, 2007).

144
 UNICESUMAR

Ao procurarmos qualquer informação sobre interfaces no Google encon-

tramos uma infinidade de artigos a respeito de como construir websites, apli-
cativos e aplicações digitais. Entretanto os softwares de automação industrial
possuem desafios humanos tão complexos quanto qualquer interface mobile,
se não mais complicados e capciosos. Pare para pensar: o sabonete que você
utiliza para tomar banho, o carro que você dirige, a cerveja que você bebe,
a fralda que você utiliza em seus filhos. Todos esses produtos dependem de
softwares operados por pessoas que controlam máquinas e processos de pro-
dução em massa para produzir esses insumos para as pessoas. As pessoas,
ainda, fazem grande papel nessa cadeia de manufatura, mesmo com a pre-
sença da inteligência artificial e a automação. Uma alta qualidade de expe-
riência de usuário nas interfaces desses softwares pode significar ganhos ou
perdas críticas para qualquer indústria (WALTER, 2017).

Figura 1 - Exemplo interface industrial

Descrição da Imagem: em uma tela, é apresentado um esquema de uma indústria onde, da esquerda
para a direita, são apresentados dois funis que se conectam com dois carrinhos e, após um caminho
traçado na tela, chegam a uma área vermelha. Nas extremidades superior, inferior e lateral direita, são
apresentadas diversas informações numéricas.

145
 UNIDADE 5

Existem alguns grandes desafios que são específicos

das interfaces de softwares industriais, como o am-
biente de trabalho. Uma condição ruim de ilumina-
ção, por exemplo, pode afetar não só a produtivida-
de, mas a segurança das pessoas também. A maneira
como o ambiente é organizado, iluminado e proje-
tado afeta, diretamente, as decisões de experiência
de usuário nos softwares que serão operados nesse
ambiente. As distrações e limitações físicas podem
estar em qualquer detalhe no ambiente de trabalho,
e isso precisa ser levado em consideração no projeto
da HMI, ou human-machine interface (interface hu-
mano-máquina) (WALTER, 2017).
Por mais que sejam interfaces extremamente es-
pecíficas e adaptadas para um ambiente singular de
uso, as HMI, ainda, não são interfaces e não compar-
tilham de princípios com as interfaces mais popula-
res. Afinal de contas, ambas fazem parte da chamada
HCI, ou human-computer interaction (interação hu-
mano-computador), que é o estudo de como os hu-
manos interagem com sistemas computadorizados.
Dentro do HCI, existem tangentes de várias disci-
plinas, como psicologia, ciências da computação, er-
gonomia, engenharia e design gráfico. Toda vez que
uma pessoa interage com um sistema computadori-
zado, ela o faz a partir de uma interface de usuário
(UI — user interface) (STONE et al., 2005).
De acordo com Stone et al. (2005), um bom de-
sign de interface é importante pelo fato de estarmos
em contínuo contato com sistemas computadoriza-
dos em nosso cotidiano. Décadas atrás, o desenvol-
vimento de sistemas computacionais era caro e ex-
tremamente direcionado a tarefas específicas, sendo
comum a existência da linha de comando com uma
série de comandos obscuros que, apenas, os usuários

146
 UNICESUMAR

147
 UNIDADE 5

mais especialistas sabiam como executar. Com o passar do tempo,

a tecnologia se popularizou e não se restringe mais ao domínio
dos especialistas. Com a redução do preço dos PC, ou personal
computer (computadores pessoais), e das tecnologias baseadas em
computação, o público geral começou a consumir e utilizar coti-
dianamente esses produtos. Desse modo, surgiu a necessidade de
design e desenvolvimento de interfaces de usuário, que são capa-
zes de suportar as inúmeras tarefas que o mais variado perfil de
pessoas deseja realizar nesses sistemas.
Os usuários se sentem mais confortáveis com sistemas com-
putacionais de fácil uso e entendimento, pois os permitem atin-
gir seus objetivos com o mínimo de frustração possível. Um bom
design de interface encoraja uma interação intuitiva e engajadora
entre o sistema e o sistema em uso, permite o usuário perfor-
mar suas atividades e tarefas de maneira que esqueça que está
utilizando um equipamento e se foque, apenas, em sua ativida-
de. Entretanto é necessário notar que os termos “boa interface”
e “interface ruim” são subjetivos, ou seja, cada interface será boa
ou ruim de acordo com a pessoa que usará. Portanto, é preciso
analisar uma interface a partir de critério mais objetivo, ou seja,
sua usabilidade (STONE et al., 2005).
Segundo Stone et al. (2005), usabilidade é definida na parte 11,
do padrão ISO 9241, como o nível em que um produto pode ser
usado por seus usuários para atingir objetivos especificados com
eficácia, eficiência e satisfação em um contexto de uso especifica-
do. Eficácia é definida como precisão e completude com as quais
o usuário pode atingir um objetivo específico. Eficiência é definida
como os recursos gastos na relação entre a precisão e a completude
dos objetivos alcançados. Por fim, satisfação é definida como con-
forto e aceitabilidade do sistema de trabalho para seus usuários e de-
mais pessoas afetadas pelo seu uso. Essa definição, bastante técnica,
implica em dois principais aspectos: a interface precisa ser percebida
como usável pelo usuário específico, ou seja, o usuário para o qual
o sistema foi projetado e desenvolvido; e o foco para o design da
interface é estendido para além do ambiente imediato do usuário,

148
 UNICESUMAR

olhando para o contexto mais amplo dentro do qual o sistema opera

(o domínio, as tarefas e os ambientes que compõem uma organiza-
ção). Dessa maneira, um sistema que é utilizável em um contexto
pode ser completamente inutilizável em outro. Como designer de
interfaces, é importante que você considere o contexto no qual o sis-
tema será utilizado. Uma UI que seus usuários a achem agradável é a
chave para se ter um sistema mais bem aceito e para que os usuários
sejam mais produtivos (SONTE et al., 2005).
Quando falamos do conceito de usabilidade de uma interface,
já estamos dentro do campo da experiência de usuário. Segundo
Wilson et al. (2010), a boa e a má experiência de interface são fa-
cilmente identificadas, mas dificilmente definidas. Isso porque o
meio que ocorre a UX, ou user experience (experiência de usuário),
é individual, sendo uma experiência humana subjetiva. Projetar
boa experiência pode ser visto como a criação de uma boa música,
que envolve uma combinação de princípios matemáticos subja-
centes, a habilidade técnica de escrever e tocar os instrumentos e
o senso artístico necessário para saber como juntar tudo em uma
combinação agradável na consciência subjetiva da audiência.
Retirar qualquer um desses três elementos será impossível criar
uma nova música. A qualidade da música não é objetiva, mas, sim,
específica para o indivíduo que está ouvindo: um grupo de pessoas
gosta de música techno, enquanto outros gostam de rock, mas isso
não significa que techno rock são objetivamente bons ou ruins, sig-
nifica apenas que aquele grupo prefere aquele estilo. Dessa forma,
não existem UX objetivamente boas ou ruins, apenas, subjetivamen-
te, boas ou ruins para o usuário em questão. O processo de constru-
ção de ótimas experiências de usuário envolve a soma de várias dis-
ciplinas, como fatores humanos, ergonomia, engenharia, usabilidade
e arquitetura de informação. As habilidades técnicas de se construir
excelentes UX e UI exigem, também, o domínio do software utiliza-
do para o processo de design e o senso artístico para entender como
as diferentes perspectivas subjetivas dos mais diversos usuários ex-
perenciarão cada detalhe do sistema (WILSON et al., 2010).

149
 UNIDADE 5

Figura 2 - Exemplo de elementos de uma interface de web-aplicativo

Descrição da Imagem: a figura é a representação de elementos de uma interface de web-aplicativo, vista

em um fundo cinza claro, onde são apresentadas nove áreas de fundo branco. Em cada área, são apresen-
tados diferentes tipos de informações, algumas sendo números e gráficos, outras sendo apenas gráficos.

Uma boa UX aumenta o engajamento de usuário no sistema em questão.

Dessa forma, o UX design é o projeto e a manutenção do engajamento dos
usuários em um sistema. De acordo com Wilson et al. (2010), temos algumas
analogias para entender o que, exatamente, é esse engajamento:

■ Engajamento como imersão – jogar um ótimo videogame é o exemplo mais

intuitivo de engajamento. Essa profunda imersão ocorre quando o jogador
se torna menos ciente de seus arredores, e sua percepção de espaço, sepa-
rando-o, e a tela começam a desaparecer. Esse jogador experimenta o jogo
e seus personagens como um, como parte de si, e não como uma pessoa
sentada segurando um controle.

■ Engajamento como alcance de metas sem fricção – diferentemente dos

videogames, o objetivo de um sistema não é necessariamente entreter,
mas, sim, manter o usuário focado nos objetivos que ele está tentado a
alcançar. O sistema é apenas uma ferramenta para facilitar essa obtenção
de metas. Para atuar nesse papel, o sistema precisa ser o menos obstrutivo
possível, sendo claro e direto, com um caminho claro e sem fricção, para
o cumprimento das metas de seu usuário.

150
 UNICESUMAR

Olá! Agora, quero aproveitar a oportunidade para o(a) con-

vidar a ouvir nosso podcast. Neste, falaremos a respeito de
temas importantes para a área. No livro Customer Experience
(O que, Como e Por Que Agora), Don Pepper apresenta, em
seu capítulo introdutório “Onde a tecnologia encontra a hu-
manidade”, o lado histórico da experiência de uso das coisas
em nossa civilização. É uma reflexão que demonstra o lado
humano por trás da tecnologia e a experiência que surge
nessa tangente. Acesse o nosso QR Code para ouvir.

Como pode perceber, cara(o) aluna(o), a experiência e a usabilidade de uma

interface dependem diretamente de seus usuários e é por esse motivo que é
tão comum, no design de experiências, a execução de protótipos e testes com
usuários para garantir um resultado realmente satisfatório. Agora que enten-
demos o que exatamente é uma interface e os requisitos para construir uma
boa experiência para uma interface, podemos nos atentar aos elementos que
constituem uma interface.
Iniciaremos pelo conceito que define o trabalho do designer de interfaces
contemporâneo: as telas. O tamanho das telas que deverão ser trabalhas deve
ser mantido em mente logo no início do projeto. Uma unidade que precisa
ser definida com atenção logo no início é o PPI (pixel per inch — pixel por
polegada). Em algum momento na evolução tecnológica das telas, o padrão
de 72 ppi se tornou mais aceito. Entretanto isso mudou com o lançamento
dos smartphones com resoluções acima de 72 ppi, as chamadas retina displays.
Essa maior resolução trouxe para os usuários mais qualidade de resolução para
gerar textos e imagens mais nítidos. Isso causou mudanças na maneira como
os designers de interfaces projetam os sites: por exemplo, o iPhoneX usa uma
tela de 375 x 812 pixeis como resolução de base (também chamada de 1x),
entretanto sua quantidade real de pixeis é de 1125 x 2436 (três vezes maior,
também chamada de 3x), ou seja, sua resolução tem a densidade de 458 ppi
(MALEWICZ; MALEWICZ, 2020). É por esse motivo que a maior parte dos
softwares para design de interfaces já permite o designer inserir a resolução de
base (1x) e trabalhar em resoluções superiores, para exportar imagens e ele-
mentos preparados para esses dispositivos com resolução maior.
Entendendo com qual tela trabalharemos, é necessário manter em men-
te os conceitos de alcance dos dedos nas telas. Malewicz e Malewicz (2020)

151
 UNIDADE 5

afirmam que elementos aleatoriamente posicionados na tela podem gerar

complicações na utilização de dispositivos de mão. É necessário levar em
consideração que o típico uso de um smartphone se dá em apenas uma úni-
ca mão, com o dedão dessa mesma mão realizando a maioria das ações na
tela. Compreender o alcance do dedão na tela ajuda a posicionar os elemen-
tos mais importantes da navegação do produto nos locais mais acessíveis.

L R
REQUER AMBAS
AS MÃOS

REQUER UMA MUDANÇA

DE POSIÇÃO DA MÃO

FÁCIL ACESSO
PELO DEDÃO

Figura 3 - Área do dedão na tela de um smartphone / Fonte: Malewicz e Maleqicz (2020, p. 54).

Descrição da Imagem: em fundo branco, são apresentados dois retângulos na vertical, o da esquerda
com um L e o da direita com um R, na parte superior. No retângulo com L, há um círculo verde na parte
inferior esquerda, seguido de uma borda amarela, que é seguida por uma área vermelha que se estende
até a extremidade superior do retângulo. No retângulo com R, há um círculo verde na parte inferior direita,
seguido de uma borda amarela, que é seguida por uma área vermelha que se estende até a extremidade
superior do retângulo. À direita dos retângulos, existem três legendas. De cima para baixo, a vermelha
tem o seguinte dizer “requer ambas as mãos”; a amarela: “requer uma mudança de posição da mão”; e
a verde: “fácil acesso pelo dedão”.

Entendendo os princípios da usabilidade e ergonomia envolvidos na inter-

face, podemos nos atentar à parte mais tangível do processo, que envolve
rascunhos, desenhos e softwares. Iniciando pelo Fluxo de Usuário, que é uma
importante etapa de todas as interfaces, mas, infelizmente, ignorada por pro-
fissionais menos experientes. Segundo Mulligan (2021), o papel do designer
no projeto de interfaces é garantir uma experiência otimizada, o que exige
um pensamento direcionado à jornada do usuário no sistema. O Fluxo de
Usuário, por sua vez, é o método que nos ajuda a conceber a melhor jornada
possível dentro das funções do sistema.

152
 UNICESUMAR

O Fluxo de Usuário permite a nós, designers, entendermos o que, real-

mente, é importante e o que não é. De maneira simples, esse fluxo é apenas
um diagrama abstrato de como as pessoas se movem de uma página ou tela
para outra no sistema. É um caminho que as pessoas precisam seguir para
sair do ponto de entrada e alcançar determinado ponto desejado — podendo
ser uma função, uma página ou uma informação dentro do sistema, aplicati-
vo ou website (MULLIGAN, 2021).
No exemplo a seguir, você pode reparar como existem desenhos de telas
e setinhas conectando-as, isso já pode ser considerado um Fluxo de Usuário
(User Flow), pois está determinando os caminhos possíveis entre as diversas
telas de um aplicativo. Esse é um exemplo simples, mas imagine um website
de dez páginas ou um aplicativo de 50 telas. As coisas podem ficar realmente
complexas e confusas. Por isso, não subestime a importância dessa ferramen-
ta em seus projetos: prepare-se com boa jornada de usuário antes de pensar
em qualquer elemento visual.

Figura 4 - Exemplo de rascunho de fluxo de usuário

Descrição da Imagem: a figura traz uma base de fundo preto e, sobre ela, é apresentada uma folha de
papel branco, tipo um sulfite, com traçados de cor preta, contendo seis retângulos de tamanhos iguais,
sendo que cada um apresenta detalhes internos diferentes, que são conectados por diversas setas. Abaixo
da folha em foco, vemos, parcialmente, uma outra, contendo desenhos semelhantes à anterior. No canto
superior direito e sobre as folhas, temos uma caneta com corpo em tom claro com a ponteira preta.

153
 UNIDADE 5

Com o fluxo pronto, precisamos determinar a lógica da construção da inter-

face: o grid (ou grade). O grid é uma estrutura de linhas que ajuda o designer
a organizar as informações dentro de um layout. É como uma planta baixa
estrutural de todos os projetos que ajuda a fortalecer e criar o senso de hie-
rarquia entre os elementos, gerando melhor entendimento desses elementos.
Apesar de as linhas serem (usualmente) invisíveis no resultado final do pro-
jeto, qualquer mudança súbita fora da lógica construída por essa grade de
linhas já afeta a percepção do resultado final — sendo essa a diferença de um
bom para um ótimo projeto. É por esse exato motivo que o grid é um dos pri-
meiros elementos, se não o primeiro, a ser definido no projeto. Sua lógica e
linhas-guia permitem melhor consistência durante o projeto inteiro quando
definidas logo de início (MALEWICZ; MALEWICZ, 2020).
1 2 3 4 5 6 7 8 9 10 11 De acordo com Malewicz e Ma-
12

lewicz (2020), a maneira mais ade-

Figura 5 - Exemplo de grid para interfaces
Descrição da Imagem: a figura apresenta um
fundo branco, onde são apresentadas 12 colunas
vermelhas. Cada coluna é numerada na parte su-
perior das mesmas, iniciando, à esquerda, com
um e finalizando, à direita, com 12. Entre cada realizar isso, pode-se entender quais
coluna, existe uma área em branco com uma linha
vermelha fina.
quada de se iniciar a construção de
um grid é começar pela listagem de
telas necessárias e pela categorização
do conteúdo. As telas determinarão
a quantidade de colunas e a flexibi-
lidade do grid, enquanto os tipos de
conteúdo podem ser utilizados para
entender os tipos de estruturas que
precisarão ser encaixadas no grid. Ao
as necessidades que o grid deverá

Figura 6 - Exemplo de grid horizontal / Fonte: Malewicz e Malewicz (2020, p. 59).

Descrição da Imagem: em fundo branco, é apresentada uma série de dez retângulos verticais azuis. Entre
os retângulos, existem áreas azul claro que possuem bordas pontilhadas superior e inferior em azul. No
segundo retângulo, uma linha se destaca para baixo conectando com o texto “Gutter”. Entre o terceiro e o
quarto retângulos, uma linha invade a área azul claro e se conecta com a palavra “Column”.

154
 UNICESUMAR

atender e, dessa forma, definir um grid para o projeto inteiro, de maneira mais as-
sertiva. O grid na interface abrange duas dimensões: a horizontal e a vertical. Na ho-
rizontal, temos a composição do grid baseada em coluna (column) e calha (gutter).
Ambos os elementos possuem escala fixa ou flexível, dependendo da programação
do sistema (MALEWICZ; MALEWICZ, 2020).
Já na vertical, possuímos um elemento menos prevalente. Podemos trazer linhas
na vertical que ajudam a definir a altura dos elementos, as sessões e o espaço em
branco. O grid vertical pode ser mais eficiente em páginas focadas em conteúdo
textual, como blogs, notícias e portais. Seu objetivo principal é facilitar o entendi-
mento por parte do usuário em relação ao conteúdo, deixando mais confortável
a navegação em grande volume de conteúdo (MALEWICZ; MALEWICZ, 2020).
A presença das linhas verticais nos layouts permite, por exemplo, a de-
finição de linhas de tamanho fixo para a definição da altura do texto e da
entrelinha para gerar melhor legibilidade. Outra forma comum de utilização
de linhas nos grids é a utilização de um tamanho relativamente grande para
criar ritmo no posicionamento vertical dos elementos: por exemplo, em um
site preparado para resolução fullHD (1920 x 1080 px), podemos dividir a
altura total da tela (1080 px) em seis linhas espadas entre si por 180 px, para
usar cada linha como referência de posicionamento dos elementos ou, ainda,
para gerar espaço em branco — nesse caso, o espaçamento vertical mínimo
entre os elementos seria de 180 px.

figura 7 - Exemplo de grid vertical / Fonte: Malewicz e Malewicz (2020, p. 59).

Descrição da Imagem: em fundo branco, uma tabela de quatro linhas com bordas azuis é apresentada,
incluindo as bordas, onde cada linha horizontal possui uma linha pontilhada dividindo-as ao meio. De
baixo para cima, vemos o segundo e o terceiro espaços preenchidos em azul claro, sendo separados por
uma linha também em azul. Ao todo, temos seis espaços na horizontal.

Como os grids para interfaces se baseiam em colunas, em especial, pela fle-

xibilidade na dimensão vertical, podemos inserir elementos na vertical in-
definidamente, ou seja, uma página web, por exemplo, pode ser infinita na

155
 UNIDADE 5

dimensão vertical. É comum que as colunas acabem sendo utilizadas como

unidades para escala e posicionamento nesse contexto. Por exemplo: em um
grid de 12 colunas, podemos colocar uma foto cujo tamanho horizontal inicia
na terceira coluna e finaliza na décima coluna, enquanto seu tamanho vertical
é determinado em proporção à essa medida. Nesse exemplo, teríamos, em uma
interface, então, a tela dividida em 12 colunas iguais, onde as duas primeiras
(da esquerda para direita) estariam vazias, depois desse vazio, teríamos uma
foto que se estenderia até a décima coluna, onde iniciaria outro espaço em
branco, ou seja, a foto estaria centralizada com duas colunas de margem em
cada lateral. Em formato de texto, isso pode parecer bastante complexo, mas
experimente fazer isso em um papel e perceba como é mais fácil.
Por isso, uma recomendação nessa etapa é utilizar papel e caneta — claro, po-
de-se utilizar um software, mas dessa maneira mais artesanal acaba sendo mais
rápido. Estude as estruturas de conteúdo necessárias para o aplicativo/site/siste-
ma, determine as principais estruturas de apresentação desses conteúdos e analise
quantas colunas serão necessárias para “englobar” todas essas configurações. Exis-
tem diversos padrões sugeridos, como o Google Material Design, que possui uma
documentação bastante extensa. Independentemente do padrão utilizado (oito
colunas, 12 colunas, 16 colunas), o que importa é entender como cada estrutura
utilizará as colunas sem precisar de exceções (sete colunas e meia, por exemplo).
Via de regra, quanto mais complexo e complicado é o conteúdo do pro-
jeto ou o projeto em si, mais colunas serão necessárias — um grid de 16
colunas, por exemplo, para a resolução de monitores FullHD (1920 x 1080)
— para acomodar maior número de possibilidades. Enquanto um projeto
mais simples, de conteúdo ou estrutura, pode contar com um grid mais sim-
ples — talvez um de 12 colunas, para a resolução de monitores FullHD (1920
x 1080) (MALEWICZ; MALEWICZ, 2020).
De acordo com Malewicz e Malewicz (2020), existem tipos de grids que
precisam ser analisados antes de iniciar seu projeto. Iniciando pelo tipo fluído,
que possui uma margem externa como base principal para determinar, fluida-
mente, na tela, a largura das colunas. Esse tipo atribui à coluna um tamanho
variável, enquanto as calhas possuem um tamanho fixo, assim como a margem
externa. Esse é um dos mais comuns tipos de grids utilizados em websites e apli-
cativos nos dias de hoje, pois facilita o ajuste do conteúdo para uma infinidade
de dispositivos e tamanhos de telas.

156
 UNICESUMAR

A seguir, é apresentado um grid de quatro colunas com margem de 16

px e calha de 8 px em duas resoluções diferentes. Note como as colunas
alteram seu tamanho.

Figura 8 - Exemplo de grid fluído / Fonte: Malewicz e Maleqicz (2020, p. 60).

Descrição da Imagem: em fundo branco, são apresentados dois conjuntos. O primeiro, à esquerda,
possui cinco retângulos, sendo os retângulos das extremidades laterais mais largos. Entre os retângulos,
há uma área azul claro com bordas pontilhadas nas extremidades superior e inferior. O segundo conjunto
apresenta os mesmos retângulos do primeiro, entretanto as áreas azul-claros entre os retângulos são
drasticamente menores.

Um outro tipo de grid bastante comum é o grid fixo. Ele trabalha com valores
definidos tanto para as colunas quanto para as calhas. Dessa forma, caso a
tela seja maior que o grid, surge espaço em branco nas laterais. Esse tipo de
grid trabalha muito bem para websites e portais de notícia, pelo fato de que,
se esticarmos o conteúdo para mais de 1400 px, acabaremos com uma legi-
bilidade pior. Com esse tipo de grid, podemos fixar o tamanho máximo do
grid e deixar o espaço em branco nas laterais ir acumulando de acordo com
a resolução do usuário (MALEWICZ; MALEWICZ, 2020).
A seguir, é apresentado um grid de duas colunas com margem de 16 px e
calha de 8 px em duas resoluções diferentes. Note como o grid não depende
do tamanho total da tela: ele será apresentado com o mesmo tamanho em
ambas resoluções.

157
 UNIDADE 5

Figura 9 - Exemplo de grid fixo / Fonte: Malewicz e Malewicz (2020, p. 60).

Descrição da Imagem: em fundo branco, são apresentados dois conjuntos. Cada conjunto possui uma sombra
indicando suas extremidades. Dentro de cada conjunto, é apresentada uma mesma composição de três retângu-
los de linhas azuis, sendo os retângulos das extremidades laterais mais largos. Entre os retângulos, há uma área
azul claro com bordas pontilhadas nas extremidades superior e inferior. A área branca, em torno da composição
à esquerda, é mais larga, deixando um espaço vazio entre os retângulos e a sombra. Enquanto a área branca,
em torno da composição à direita, é justa, acabando exatamente onde os retângulos de linhas azuis acabam.

Com nossa jornada de usuário e nossa lógica de construção definida, pode-

mos, finalmente, começar a nos preocupar com os elementos visuais que esta-
rão no produto final de nosso trabalho. Na etapa de design visual da interface,
nós, necessariamente, trabalhamos com softwares gráficos, como Adobe XD,
Adobe Illustrator, Figma, Axure RP, Sketch, Adobe Muse, entre vários outros.
Geralmente, as ferramentas direcionadas para design de interfaces trabalham
gráficos vetoriais, ou seja, elementos visuais representados por cálculos ma-
temáticos que garantem sua qualidade final, mesmo se forem esticados ou
aumentados — diferentemente de fotos, que são gráficos rasterizados. Sendo
assim, trabalhar com interfaces é, a maior parte do tempo, mover diversos
objetos na tela — em especial, objetos retangulares, que são os elementos mais
populares dentro das interfaces (MALEWICZ; MALEWICZ, 2020).
Malewicz e Malewicz (2020) apresentam o conceito de Modelo Caixa
(Box Model) como o método mais básico de definição de um objetivo dentro
de uma interface digital. Este modelo é amplamente utilizado no mercado,
pois engloba tanto o lado do design quanto do código dos aplicativos, sites e
sistemas. Ele consiste em quatro elementos principais:

■ Margem interna (inner margin) – também chamada de padding. Repre-

senta a quantidade de área segura dentro de um objeto, ou seja, área onde
o texto não invadirá.

■ Margem externa (outer margin) – também chamada apenas de margem.

É a área fora do objeto que permite seu posicionamento com área segura
suficiente, atendendo às necessidades de seu contexto.

158
 UNICESUMAR

■ Preenchimento (fill) – também chamado de fundo (ou background) do ob-

jeto. Pode ser uma cor, um degradê ou, até mesmo, uma foto — podendo,
ainda, ter variados níveis de opacidade. Se um objeto não possui um preen-
chimento e uma borda, ele será invisível ao usuário, mesmo ainda sendo um
elemento ativo no produto final. Também, é possível combinar diferentes
tipos de preenchimento dentro de um objeto: por exemplo, utilizar uma foto
e adicionar um degradê transparente sobre ela para gerar um efeito colorido.

■ Borda (border) – é a linha que contorna o objeto. Pode ser interna (inner
border, ou borda interna em tradução livre), externa (outer border, ou borda
externa em tradução livre) ou ainda entre as outras duas (center border, ou
borda central em tradução livre). Apenas a borda interna não faz o objeto
ter suas medidas alteradas, as outras duas afetam diretamente sua escala.
Esse elemento pode ter diferentes pesos (1 pixel, 10 pixels e quaisquer outras
medidas mais) e estilos (pontilhada, solida, colorida ou em degradê).

Objeto

Margem Interna Borda Margem Externa

Figura 10 - Gráfico do box model / Fonte: Malewicz e Malewicz (2020, p. 60).

Descrição da Imagem: em fundo branco, temos um retângulo branco com bordas pontilhadas azuis,
onde é apresentado, com o texto, o objeto em seu centro. Imediato à sua borda, é apresentado um re-
tângulo cinza com bordas azuis pontilhadas, seguido por um retângulo sem preenchimento com bordas
azuis pontilhadas mais grossas. Na sequência, há um outro retângulo sem preenchimento com bordas
azuis pontilhadas, entretanto mais finas. Por fim, um último retângulo com preenchimento azul claro é
apresentado com bordas azuis pontilhadas.

159
 UNIDADE 5

A seguir, é apresentado um exemplo de interface. Repare como os ele-

mentos principais são, de fato, apenas retângulos. Retirando as cores, as
ilustrações, os ícones e os textos, o que nos resta é apenas retângulos com
cantos arredondados. Por isso, uma recomendação para você que iniciará
seus estudos e projetos em interface é que se preocupe, primeiro, com a

Figura 11 - Exemplo de interface para aplicativo mobile

Descrição da Imagem: em fundo cinza, são apresentadas seis telas de um aplicativo mobile. Nas telas,
existem diversas combinações de elementos laranjas e roxos em fundos brancos.

160
 UNICESUMAR

estrutura dos objetos (a lógica ou grid de construção, os posicionamentos

e espaçamentos) e seus textos, só depois aplique cores, ícones e ilustrações.
Dessa forma, você se preocupa em montar um “esqueleto” bem definido
antes de se focar em aspectos que podem ser alterados mais facilmente.

161
 UNIDADE 5

São nos objetos que nós, designers, atuamos com o aspecto visual do projeto.
A composição final que se forma, na tela, pela soma de todos os objetos, é,
de certa forma, muito parecida com uma página de revista ou um cartaz —
ambos necessitam a aplicação dos princípios da linguagem visual e das cores.
De certa forma, é nesse momento que você, cara(o) aluna(o), pode se sentir
mais livre para realizar um ótimo resultado visual.
Com as novas tecnologias e o aumento da complexidade das interfaces, a
construção de objetos um a um acaba se tornando improdutiva. Sem contar
que um time de designers trabalhando em um mesmo projeto pode acabar
perdendo o foco da linha visual definida no início do projeto. Pensando nis-
so, podemos trazer para nosso projeto o sistema de design (design system).
Segundo Suarez et al. (2019), o design system une o time de designer e de-
mais envolvidos em uma linguagem visual em comum, reduzindo os erros e
acelerando o processo de design. Ele é capaz de criar uma ponte entre times
trabalhando remotamente, permite aumentar a escala do projeto sem com-
prometer sua qualidade e facilita a etapa de prototipagem do produto final.
Sobre o sistema de design, Perez-Cruz (2019) afirma a necessidade de en-
tender o propósito do projeto para se criar objetos e componentes com uma
única direção de pensamento dentro do sistema. Algumas perguntas podem
ajudar nesse aspecto:

■ O que esse sistema/produto servirá para a sociedade?

■ Qual o escopo desse sistema/produto?

Com essas duas perguntas, nós, designers, somos capazes de compreender

os limites do projeto bem como sua função social. A função pode direcio-
nar os aspectos visuais (como escala e posicionamento dos elementos),
enquanto o escopo do sistema/produto definirá quais elementos construi-
remos dentro de nosso design system.
A seguir, temos o exemplo de um design system. Perceba como são ele-
mentos diversos espalhados em uma tela única e, apesar de parecerem “re-
petitivos”, cada elemento possui uma função específica e distinta. Algumas
vezes, é necessário pensar em variações de cores e escala, mas, via de regra,
o primeiro passo de um design system está em atender às funções requisita-

162
 UNICESUMAR

das pelo sistema. Nesse exemplo a seguir, podemos perceber que o produto
final terá players de vídeo como elemento importante de sua experiência,
já que boa parte do sistema de design se preocupa com estados diferentes
de um player de vídeo.

Figura 12 - Exemplo de design system

Descrição da Imagem: em fundo branco, são apresentados mais de 100 elementos de interface que
utilizam as cores azul claro, azul, vermelho e amarelo.

Agora que entendemos o caminho mental e operacional da construção de

uma interface bem como os elementos envolvidos em sua construção, pode-
mos nos atentar a alguns tipos de projetos dessa natureza que são mais co-
muns, os quais você, como designer, poderá encontrar em sua carreira caso
deseje seguir no ramo de interfaces.
Websites são, talvez, os projetos mais comuns que exigem interfaces. Mas,
mesmo com sua popularidade, não significa que a exigência de qualidade seja
menor. Nos últimos anos, o ramo de T.I., envolvido com o desenvolvimento
web, passou por uma grande profissionalização e, consequentemente, os cam-
pos do design envolvidos também. Esse campo exige muitas vagas de UI desig-
ners e UX designers, portanto, pode ser uma ótima porta de entrada.

163
 UNIDADE 5

Figura 13 - Exemplo de website institucional / Fonte: Wood (2014, p.13).

Descrição da Imagem: em fundo preto, temos um menu vertical na lateral esquerda, onde é apresentado
a logo ATHLON, e, no canto superior esquerdo e abaixo dela, mais algumas informações pertinentes ao
site. Ao centro, é apresentada uma grade de fotografia de pessoas em um fundo azul, num total de 18
fotos, sendo dispostas em três linhas com seis fotografias em cada uma, sendo homens e mulheres, cada
um com uma expressão facial, vistos da cintura para cima. Na parte inferior, são apresentados textos com
localização de escritórios da empresa e uma imagem de fundo azul aparece recortada, na extremidade
direita, com efeito de transparência.

Aplicativos e web-aplicativos, tam-

bém, exigem múltiplos times de de-
sign. Essa área é bastante próxima
dos websites — visto que web-aplica-
tivos são, de fato, sites —, entretanto
a funcionalidade é completamente
diferente. O objetivo de aplicativo, ou
web-aplicativo, é servir uma função
específica para seus usuários, e seu
sucesso não depende apenas do su-
cesso comercial da empresa dona do
website, mas também do sucesso da
experiência de usuário do aplicativo,
ou web-aplicativo.

164
 UNICESUMAR

Figura 14 - Exemplo de web-aplicativo

Descrição da Imagem: em fundo cinza escuro, uma interface de uma caixa de e-mails é apresentada. De
frente para o(a) observador(a), temos, à esquerda, uma coluna com 12 linhas, a contar do título da mesma,
enquanto, ao centro, em fundo branco, são apresentadas 12 linhas, a contar também do título na parte
superior da imagem, cada qual com um título e uma data. Na extremidade direita, em fundo cinza, um
bloco de texto é apresentado com os botões REPLY e SPAM na sua extremidade inferior.

Interfaces de softwares desktop são mais tradicionais, exigindo, muitas vezes,

em suas vagas de trabalho, designers de interfaces com habilidades de pro-
gramação em linguagens específicas. Aqui é onde as ferramentas são criadas,
então, o domínio e a excelência devem ser habituais. Os softwares, assim
como os web-aplicativos, são ferramentas projetadas para determinadas fun-
ções, exigindo otimizações em cada detalhe de seus códigos — inclusive na
parte da interface. Aqui estão, também, as interfaces para softwares especia-
lizados em indústrias.

165
 UNIDADE 5

Figura 15 - Exemplo de interface de software

Descrição da Imagem: a figura apresenta um monitor retangular com sua base de cor preta posicionado
sobre uma bancada de cor escura. À frente dele, há um teclado uma caneca em tom esverdeado e um vasinho
branco com uma planta nele. Na frente do teclado e do monitor, vemos, parcialmente, uma figura humana
em meio perfil, com blusa branca, que olha para o monitor, enquanto a mão direita está sobre o mouse e a
esquerda, sobre o teclado. O restante do espaço vemos de forma embaçada, mas é possível identificar, na lateral
esquerda, um sofá bege e uma pessoa deitada nele, com as mãos para o alto manuseando algum objeto. Ao
fundo, há uma parede em tom acinzentado, seguindo para a direita com detalhes em branco vistos em forma
de nichos. Na tela do monitor, vemos um fundo cinza com uma interface onde, à esquerda, há uma longa
lista em fundo cinza escuro. À direita, uma outra lista de textos em branco é apresentada. No centro, há uma
representação tridimensional de um espaço com elementos vermelhos e brancos e uma iluminação amarelada.

Um ramo bastante desejado é o de design de interfaces para jogos. Seja

pelo ambiente criativo, seja pela ludicidade, esse ramo é bastante complexo
e exige grande quantidade de pessoas envolvidas em cada projeto. Uma
interface de jogo pode ser vista como uma interface de um aplicativo ou
um software desktop. Entretanto sua função é facilitar o engajamento do
jogador ao máximo, de maneira que a interface “desapareça” e, apenas, a
experiência do jogo permaneça. Talvez, esse princípio acaba sendo muito
mais presente nesse ramo do que nos outros, o que pode dar a impressão de
ser mais simples, entretanto a complexidade de funções e interações exis-
tentes nos jogos não é menor do que um aplicativo ou software qualquer.

166
 UNICESUMAR

Figura 16 - Exemplo de interface para jogos / Fonte: Wood (2014, p.125).

Descrição da Imagem: em fundo ilustrado, como uma planície, é apresentada uma grade com diversos
personagens ilustrados de maneira lúdica, sendo zumbis, estrelas, plantas e girassóis. Na parte superior
esquerda, temos o logo com os dizeres “PELANZEN GEGEN ZOMBIES” e, na inferior esquerda, “POPCAP”.
Na parte inferior central, há um texto em alemão ao lado de um troféu dourado e, na parte inferior direita,
a mão de um zumbi ilustrada de maneira lúdica saindo da terra. Junto a tudo isso, vemos várias tonalida-
des de cores apresentadas na interface, como amarelo, branco, azuis, verdes, vermelhos, entre outras.

Com isso, cara(o) aluna(o), finalizamos

nossa unidade. Vimos, em detalhes, o
pensamento por trás de uma boa ex-
periência de usabilidade bem como os
elementos necessários para se construir
qualquer interface. Espero que esse con-
teúdo possa o(a) ajudar a conhecer mais
sobre esse vasto campo do conhecimen-
to e, se você se interessou, servir de base
para uma longa jornada nessa área!

167
 UNIDADE 5

NOVAS DESCOBERTAS

Título: Não me faça pensar

Autor: Steve Krug
Editora: Alta Books
Sinopse: quantas vezes você se sentiu perdido(a) em um site? Quantas
outras falhou ao tentar entender como funcionava um aplicativo? Na
maioria das vezes, a culpa não é sua. Muitos são os sites ou aplicativos com
falhas de desenvolvimento que dificultam sua compreensão e uso. Profissio-
nais de usabilidade estão aí para assegurar que isso não aconteça, indo na raiz
do problema, identificando, por meio de testes, os pontos em que os usuários
“travam” e propondo soluções.

Agora, cara(o) aluna(o), você conhece melhor o campo de interfaces. É um

campo bastante popular, mas, infelizmente, acaba sendo visto, por muitos
profissionais, como algo puramente estético, esquecendo toda a carga fun-
cional que uma boa interface exige. Essa é só uma introdução, mas você
está preparada(o) para se aventurar nesse grande campo de conhecimen-
to, caso deseje. Como qualquer área do design, produzir ótimas interfaces
exige prática e muito conhecimento. Por isso, pratique, rascunho e explore
o máximo de interfaces que você puder. Tente desconstruir interfaces que
você experimentou e gostou, também. Tudo isso o(a) ajudará com os futu-
ros desafios de sua carreira.

168
Para concretizar seu conhecimento desta unidade, faça um mapa mental sobre
todo o conteúdo que tratamos aqui. Inicie com as bases intangíveis de uma
interface, como o conceito de usabilidade e ergonomia, em relação ao disposi-
tivo envolvido. Passe para os elementos intangíveis que permitem a construção
lógica de uma interface, como o grid. Por fim, defina os elementos tangíveis que
estarão presentes no produto final de seu projeto.
UNIDADE 1

ARNTSON, A. E. Graphic Design Basics. 5. ed. Belmont: Wadsworth Publishing, 2006.

AZAMBUJA, C. S. História da arte e do design. Curitiba: Intersaberes, 2021.

BÜRDEK, B. E. História, teoria e prática do design de produtos. São Paulo: Bllcher, 2006.

CARDOSO, R. Uma Introdução à História do Design. 3. ed. São Paulo: Blucher, 2008.

CONWAY, H. Design History: A Students’ Handbook. Abingdon-on-Thames: Taylor & Francis

e-Library, 2006.

HOLLIS, R. Design Gráfico: Uma História Concisa. São Paulo: Martins Fontes, 2001.

HSUAN-AN, T. Design: Conceitos e Métodos. São Paulo: Blucher, 2017.

MEGGS, P. B. História do Design Gráfico. 4. ed. São Paulo: Cosac Naify, 2009.

MÓVEIS COM MEMÓRIA. Memórias Partilhadas: Cabeça de Máquina de Costura Singer, 1879
(3537406). 24 set. 2014. Disponível em: http://moveiscommemoria.blogspot.com/2014/09/cabe-
ca-de-maquina-de-costura-singer.html. Acesso em: 4 ago. 2022.

SILVA, J. C. C. da. O Desenvolvimento do design e a evolução do pensamento artístico na

Europa até o início do século XX. 2005. Dissertação (Mestrado em Arquitetura) – Universi-
dade Federal do Rio Grande do Sul, Porto Alegre, 2005. Disponível em: https://lume.ufrgs.br/
bitstream/handle/10183/13939/000652837.pdf?sequence=1&isAllowed=y. Acesso em: 4 ago.
2022.

WIKIMEDIA COMMONS [Sem título]. 2009. 1 fotografia. Disponível em: https://upload.wikime-

dia.org/wikipedia/commons/0/0c/KelmscottPressColophone.jpg. Acesso em: 4 ago. 2022.

UNIDADE 2

ARNTSON, A. E. Graphic Design Basics. 5. ed. Belmont: Wadsworth Publishing, 2006.

AYNSLEY, J. Pioneers of Modern Graphic Design: A Complete History. London: Octopus Pu-
blishing Group, 2004.

CALDWELL, C.; ZAPPATERRA, Y. Editorial Design: Digital and print. London: Laurence King Pu-
blishing, 2014.

FISHEL, C.; GORDON, S. K. The Little Book of Big Packaging Ideas. Beverly: Rockport Publi-
shers, 2007.

MEGGS, P. B. História do Design Gráfico. 4. ed. São Paulo: Cosac Naify, 2009.

POULIN, R. Graphic Design + Architecture: A 20th-Century History: A Guide to Type, Image,

170
Symbol, and Visual Storytelling in the Modern World. Beverly: Rockport Publishers, 2012.

ROTHMAN, J. Draw In: A peek into the inspiring sketchbooks of 44 fine artists, illustrators, gra-
phic designers & cartoonists. Beverly: Quarry Books, 2011.

SEAN, A.; MORIOKA, N. Logo design workbook: a hand-ons guide to creating logos. Beverly:
Rockport Publishers, 2004.

SUAREZ, M. et al. Design Systems Handbook. Düsseldorf: InVision, 2019. Disponível em: ht-
tps://www.designbetter.co/design-systems-handbook. Acesso em: 5 ago. 2022.

UNIDADE 3

AMBROSE, G.; HARRIS, P. The fundamentals of Graphic Design. Worthing: AVA Publishing,
2009.

ARNTSON, A. E. Graphic Design Basics. 6. ed. Belmont: Wadsworth Publishing, 2012.

DONDIS, D. A. Sintaxe da linguagem visual. 2. ed. São Paulo: Martins Fontes, 1997.

FRUTIGER, A. Sinais e símbolos: desenho, projeto e significado. 2. ed. São Paulo: Martins Fon-
tes, 2007.

LAUER, D. A.; PENTAK, S. Design Basics. 8. ed. Belmont: Wadsworth Publishing, 2012.

LEBORG, C. Visual grammar. New York: Princeton Architectural Press, 2004.

LUPTON, E.; PHILLIPS, J. C. Graphic Design: the new basics. 2. ed. New York: Princeton Archi-
tectural Press, 2015.

POULIN, R. The Language of Graphic Design: an illustrated handbook for understanding fun-
damental design principles. Beverly: Rockport Publishers, 2011.

PUHALLA, D. M. Design Elements: Form & Space: a graphic style manual for understanding
structure and design. Beverly: Rockport Publishers, 2011.

SAMARA, T. Design elements: a graphic style manual – understanding the rules and knowing
when to break them. Beverly: Rockport Publishers, 2014.

UNIDADE 4

ADAMS, S. The Designer’s Dictionary of Color. New York: Abrams Books, 2017.

ADAMS, S.; MORIOKA, N. Logo design workbook: a hands-on guide to creating logos. Beverly:
Rockport Publishers, Inc., 2004.

GARDNER, B. Logo Creed. Beverly: Rockport Publishers, 2013.

171
HELLER, Eva. A psicologia das cores: como as cores afetam a emoção e a razão. São Paulo:
Gustavo Gili, 2016.

NEUMEIER, M. The Brand Gap: How to bridge the distance between business strategy and
design. San Francisco: New Riders, 2006.

SLADE-BROOKING, C. Creating a Brand Identity. London: Laurence King Publishing, 2016.

PEÓN, M. L. Sistema de identidade visual. Rio de Janeiro: 2AB, 2009.

WHEELER, A. Designing brand identity: an essential guide for the entire branding team. 3. ed.
New Jersey: John Wiley & Sons, 2009.

UNIDADE 5

GALITZ, W. O. The Essential Guide to User Interface Design: An Introduction to GUI Design
Principles and Techniques. 3. ed. Hoboken: Wiley Publishjing, 2007.

MALEWICZ, M.; MALEWICZ, D. Designing User Interfaces. 2. ed. [S.l.: s. n.], 2020.

MULLIGAN, T. UX/UI Design 2021-2022 Tutorial: The complete step by step guide to UX/UI De-
sign and best practices for designers with no experience. [S.l.: s.n.], 2021.

PEREZ-CRUZ, Y. Expressive Design Systems. New York: A Book Apart, 2019.

STONE, D. et al. User Interface Design and Evaluation. Amsterdam: Elsevier, 2005.

SUAREZ, M. et al. Design Systems Handbook. Düsseldorf: InVision, 2019. Disponível em: ht-
tps://www.designbetter.co/design-systems-handbook. Acesso em: 5 ago. 2022.

WALTER, J. UX for the Industrial Environment, Parte 1. UX Matters, 7 ago. 2017. Disponível em:
https://www.uxmatters.com/mt/archives/2017/08/ux-for-the-industrial-environment-part-1.
php. Acesso em: 29 ago. 2022.

WILSON, R. et al. Effective UI. Sebastopol: O’Reilly MediaCanada, 2010.

WOOD, D. Interface Design: an introduction to visual communication in UI design. London:

Bloomsbury Publishing, 2014.

172
UNIDADE 1

1. Como você pensava e se sentia em relação ao Design antes? E agora, depois desta nossa
unidade? O que você enxergava nos trabalhos de Design antes? E agora, depois desta
nossa unidade? O que você buscava ouvir a respeito de Design antes? E agora, depois
desta nossa unidade? Ainda concorda com o que ouvia? E como você falava a respeito
de Design antes? E agora, depois desta nossa unidade? Por fim, quais são as suas dores
e suas necessidades, a partir desse seu novo ponto de vista após nossa unidade?

Antes: design é uma profissão que exige apenas

domínio técnico.

Depois: design é uma profissão que exige um

pensamento específico.

Antes: design gráfico Antes: design gráfico é

é estética. softwares de computador.

Depois: design gráfico Depois: design gráfico é um

utiliza a estética com processo criativo.
um propósito.

Antes: design gráfico é fazer coisas bonitas.

Depois: design gráfico é projetar soluções gráficas.

Quais são as NECESSIDADES?

Quais são as DORES?
Antes: aprender softwares. Antes: fazer projetos bonitos.

Depois: aprender o pensamento de design. Depois: fazer projetos que solucionem algo.

UNIDADE 2

Na sua timeline, deverá conter:

1914 a 1918 — Primeira Guerra Mundial.
1917 — Fundação da De Stijl.

173
1919 — Fundação da Bauhaus.
1923 — Primeira exibição da Bauhaus.
1925 a 1932 — Período de permanência da Bauhaus em Dessau.
Década de 1950 — surgimento do Estilo Tipográfico Internacional.

UNIDADE 4

Ao centro, identidade visual e um resumo de o que é.

Em segundo nível: logotipo, símbolo, assinatura — cada qual com sua definição.
Em terceiro nível: cor institucional, alfabeto institucional — cada qual com sua definição.
Em quarto nível: mascote, grafismo, normas para layout — cada qual com sua definição.

UNIDADE 5

Ao centro: interface.
Em primeiro nível: intangíveis.
Em segundo nível: usabilidade e sua definição.
Em terceiro nível: experiência de usuário e sua definição.
Em quarto nível: jornada de usuário.
Em primeiro nível: tangíveis.
Em segundo nível: design systems e sua definição.
Em terceiro nível: objeto e sua definição.
Em quarto nível: margem interna, margem externa, preenchimento e borda — cada qual
com sua definição.

174