elementos do projeto grafico

Prévia do material em texto

CAPÍTULO 2 
 ELEMENTOS DO PROJETO GRÁFICO
 51Elementos do Projeto Gráfico
O centro visual de todo impresso ou de uma tela é o layout, onde e como os recursos, 
controles e conteúdo estão dispostos. O layout fornece a estrutura para esses elementos. Também 
fornece a hierarquia, salientando para os usuários o que é importante ou não. Para entender 
melhor o layout, é preciso entender os elementos que o compõem (SAFFER, 2007, p.120).
2.1 Sistema de Grid
Um sistema de grid é uma ferramenta que ajuda designers a padronizar a informação de 
maneira coerente. Começa-se dividindo a tela ou o papel em algumas partes básicas. O grid é 
a sugestão de uma linha guia do projeto. Eles não formam áreas rígidas, pois, se necessário, 
elementos são sobrepostos - como imagens - ou blocos maiores de informação são criados. O 
grid ajuda a visualização da hierarquia das informações dispostas, além de manter o ritmo e 
fluxo dos elementos - na tela e no papel52.
Timothy Samara, autor do livro Grid: Construção e Desconstrução define:
Um grid consiste num conjunto específico de relações de alinhamento 
que funcionam como guias para a distribuição dos elementos num 
formato. Todo grid possui as mesmas partes básicas, por mais complexo 
que seja. Cada parte desempenha uma função específica; as partes 
podem ser combinadas segundo a necessidade, ou omitidas da estrutura 
geral a critério do designer, conforme elas atendam o não às exigências 
informativas do conteúdo (SAMARA, 2007, p.24).
As partes básicas são margens, guias horizontais, zonas espaciais, marcadores, módulos, 
colunas e calhas (figura 35). Margens são “os espaços negativos entre o limite do formato e o 
conteúdo que cercam e definem a área viva onde ficarão os tipos e as imagens”. As proporções 
da margem ajudam a estabelecer a dinâmica entre os elementos da composição, além de serem 
usadas para orientar o foco visual, repousar os olhos ou ser usada como uma área para inserção 
de informações secundárias. Guias horizontais ou flowlines são “os alinhamentos que quebram o 
espaço em faixas horizontais”, ajudam a orientar os olhos e são usadas para criar diferentes inícios 
ou pausas para textos e imagens. Zonas espaciais são “grupos de módulos que, juntos, formam 
campos distintos” cada campo pode receber uma função específica ao apresentar a informação; 
por exemplo, pode-se reservar um campo para imagens e outro para textos, cada um pode ter 
diferentes formatos dentro do grid. Marcadores são “indicadores de localização para textos 
secundários ou constantes, como cabeçalhos, nome de seções, fólios, ou qualquer outro elemento 
que ocupe sempre a mesma posição em qualquer página”. Módulos são “unidades individuais 
de espaços separadas por intervalos regulares que, repetidas no formato da página, criam colunas 
e faixas horizontais”. Colunas são “alinhamentos verticais que criam divisões horizontais entre 
as margens. A quantidade de colunas é indeterminada; às vezes têm a mesma largura, às vezes 
têm larguras diferentes, correspondendo a informações específicas”53. Calhas ou gutters são “os 
espaços em branco que separam as linhas e colunas” (SAFFER, 2007, p.123, tradução nossa). 
52 Ibid, p.123
53 Ibid, p.25
 52Elementos do Projeto Gráfico
Margens
Guias Horizontais (flowlines)
Calhas (gutters)
Zonas Espaciais
Marcadores
MódulosColunas
Figura 35 - partes básicas do grid
Existem diferentes tipos de grids (figura 36), como o grid retangular que possui uma 
estrutura mais simples é geralmente usado para acomodar textos longos e corridos, o grid 
de colunas que costuma beneficiar a informação descontínua, pois “as colunas podem ser 
dependentes umas das outras no texto corrido, independentes para pequenos blocos de texto 
ou somadas para formar colunas mais largas”, o grid modular é geralmente utilizado em 
projetos muito complexos, como o de um jornal, os módulos proporcionam maior controle da 
informação e o grid hierárquico que se adapta às exigências do projeto, esse tipo de grid, seja 
em livros, cartazes ou páginas de internet, “é uma abordagem quase orgânica dos elementos 
e da informação que ainda unifica arquitetonicamente todas as partes do espaço tipográfico” 
(SAMARA, 2007, p.26 a 29).
 53Elementos do Projeto Gráfico
Grid Retangular
Grid Modular
Grid de Colunas
Grid Hierárquico
Figura 36 – grids: retangular, 
modular, hierárquico e de colunas
Saffer demonstra que vários grids se tornaram padrão no design de interfaces, como os 
vistos em layouts de diferentes aplicativos, como o Microsoft PowerPoint e o iTunes da Apple 
(figura 37), o painel da esquerda é fino e há uma grande janela central, junto com linhas e botões 
acima e abaixo dessa janela. Existe também exemplo usado pelos usuários de e-mails e leitores 
de RSS. Outro exemplo é o comum grid de três colunas para web sites. Saffer mostra que alguns 
aplicativos que parecem ter a disposição livre, como o Internet Explorer e as telas simples de 
telefones celulares, costumam possuir grids simples (figura 37) (SAFFER, 2007, p.124 a 126). 
Microsoft Power Point/ iTunes
E-mail/ RSS
Web sites comuns
Internet Explorer
 54Elementos do Projeto Gráfico
Microsoft Power Point/ iTunes
E-mail/ RSS
Web sites comuns
Internet Explorer
Figura 37 - exemplos de grids
Revista Super
A revista Superinteressante possui um grid fluido, baseado em quatro colunas, que podem 
ser agrupadas ou dissociadas em várias outras. Como a revista possui muitas ilustrações e 
quadros, além das seções de infográficos, esses possuem um grid independente, assim o texto 
é diagramado de acordo com a ilustração. Serão analisados infográficos da revista, e como 
esses não possuem grid fixo, a ênfase estará nos elementos de navegação da página. A figura 
 55Elementos do Projeto Gráfico
38 foi retirada da edição 248 da revista Superinteressante em janeiro de 2008, página 36 e 37, 
acompanhado de um possível diagrama da página. A figura 39 foi retirada da edição 278 da 
revista Superinteressante em maio de 2010, página 44 e 45.
Figura 38 - exemplos de grid da 
revista Superinteressante
 56Elementos do Projeto Gráfico
Figura 39- exemplos de grid da 
revista Superinteressante
Site Super
O site da revista Superinteressante possui diversas seções, a que será usada para a escolha 
dos infográficos será a Multimídia. Ele está hospedado no site da Editora Abril, logo a página 
da revista possui um menu da Editora Abril. Existe também um banner publicitário e a seguir 
o menu principal do site da Superinteressante, com as seções do site, busca e um botão para 
a página principal. Logo abaixo aparece o nome da seção em que o usuário se encontra e o 
 57Elementos do Projeto Gráfico
infográfico da página inicial da seção. A seguir, nessa janela existem links para as matérias 
relacionadas ao infográfico. Abaixo existe um banner publicitário e ao lado o menu secundário 
que mostra as seções para os infográficos digitais ao lado existe outro banner publicitário e um 
navegador de páginas logo abaixo. No final da página existem dois menus terciários, o primeiro 
da Editora Abril e o segundo da revista Superinteressante.
 58Elementos do Projeto Gráfico
Barra de navegação do Mozilla
Banner publicitário
Menu primário da revista
Nome da 
seção
Chamada
Janela do infográfico digital
Links relacionados
Banner 
publicitário
Barra de navegação do Windows
Menu da Editora Abril
Barra de 
rolagem da 
página
Banner 
publicitárioMenu secundário da 
seção Multimídia
Navegador de páginas
Menu terciário da Editora Abril
Menu terciário da Revista Superinteressante
Figura 40 e 41 - exemplos de grid 
da revista Superinteressante
A figura 40 foi retirada do site da revista Superinteressantee então foi elaborado um 
possível grid para a página mostrada (figura 41). Pode-se concluir que identificar os grids 
utilizados é importante para compreender a maneira que a informação é organizada, facilitando 
assim a comparação entre mídia digital e impressa pretendida por este trabalho.
 59Elementos do Projeto Gráfico
2.2 Tipografia
Robert Bringhurst autor de Elementos do Estilo Tipográfico, define tipografia como “o 
ofício que dá forma visível e durável – e, portanto existência independente – a linguagem 
humana”. Um dos princípios da tipografia é a legibilidade (BRINGHURST, 2005, p.17 e 23). O 
fato é que existem muito a se discutir sobre a tipografia, desde a estrutura do tipo até a discussão 
da escolha de uma fonte de acordo com gosto pessoal. Para analisar infográficos impressos e 
digitais é necessário discutir os seguintes elementos: usabilidade, categorias, alinhamento de 
texto e hierarquia tipográfica. 
Lucy Niemeyer mostra que a usabilidade é um elemento importante para o uso da 
tipografia em projetos. Os requisitos de usabilidade podem ser determinados por três critérios 
ergonômicos, são eles: legibilidade, leiturabilidade e pregnância. A legibilidade é “o atributo de 
caracteres alfa-numéricos que possibilita que cada um deles seja indentificável dos outros. Isto 
depende de algumas características como espessura da haste e forma do caractere” (SANDERS 
& MCCORMICK, 1993, in Niemeyer, 2003, p. 68), ou seja, quando as formas de diferentes 
letras podem ser diferenciadas com facilidade, pode-se dizer que o tipo é altamente legível. 
A alta legibilidade é importante em livros e impressos com leitura intensa. “Se um texto não 
é muito legível, esta característica vai afetar de modo determinante a velocidade com que o 
texto é lido e aumentará o esforço mental necessário para indentificar corretamente as letras 
e a consequente compreensão do texto”. Lucy Niemeyer ressalta que a legibilidade também é 
afetada por fatores ambientais, como a iluminação, grau de contraste letra e fundo e fadiga visual 
do leitor (NIEMEYER, 2003, p. 70 e 71). A leiturabilidade é “a qualidade que torna possível 
o reconhecimento do conteúdo da informação em um suporte quando ela está representada 
por caracteres alfanuméricos em grupamentos com significação, como palavras, frases ou 
texto corrido” (SANDERS & MCCORMICK, 1993, in Niemeyer, 2003, p. 73). Ela depende 
do espaço entre os caracteres, de sua combinação, dos espaços entre as linhas e das margens, 
mais do que da configuração do caractere. Ou seja, para um alto nível de leiturabilidade “a 
composição do texto deve possibilitar o fácil acesso à informação contida nas palavras (...) 
e depende também da dificuldade do vocabulário, da estrutura frasal e do grau de abstração 
presentes nas relações expressas pelas palavras” (Niemeyer, 2003, p. 72). A pregnância 
é “a qualidade de um caractere ou símbolo que faz com que ele seja visível separadamente 
do seu entorno” (SANDERS & MCCORMICK, 1993, in Niemeyer, 2003, p. 74). A variação 
do corpo, peso, entrelinha, inclinação são importantes para tornar partes do texto pregnantes 
(Niemeyer, 2003, p. 73).
Dan Saffer categoriza as fontes em serifadas e não serifadas. As serifadas, como 
Garamond e Times, são mais fáceis de ler em longos textos. Para James Craig serifas não 
somente facilitam o fluxo horizontal como também quando reduzidas, ajudam a identificar as 
letras individualmente (CRAIG, 1992, p.123,), isto pode ser comprovado comparando a parte 
superior das fontes Arial e Times (figura 43).
 60Elementos do Projeto Gráfico
As sem serifa, como Helvetica e Arial, são tradicionalmente usadas em curtas passagens de texto, 
porque suas características facilitam a leitura vertical. Além disso, as fontes sem serifa se tornaram a 
escolha padrão para projetos que serão mostrados em telas, algumas fontes, como Verdana e Georgia, 
foram especificamente desenhadas para a tela, suas características estruturais as permitem se adaptar às 
mudanças de resolução da tela e são confortáveis para leitura (SAFFER, 2007, p. 128). 
Ellen Lupton ainda ressalta quatro formas de alinhamento do texto. O justificado, quando as 
margens esquerda e direita do bloco de texto são regulares, esse tipo de alinhamento produz uma forma 
limpa na página, no entanto, podem aparecer alguns vazios no texto, que é forçado a caber em uma 
coluna com o mesmo cumprimento. O alinhamento à esquerda, quando “a margem esquerda é dura 
e a direita é suave”, esse tipo de alinhamento respeita o fluxo do texto e não produz o espacejamento 
irregular, é preciso ter cuidado para que não apareça uma linha diagonal do texto, pois o efeito visual 
é desconfortável. Dan Saffer comenta que o alinhamento à esquerda é o mais legível comparado aos 
outros54. O alinhamento à direita, quando “a margem direita é dura, a esquerda é suave”, força o leitor 
a achar uma nova posição no início de cada linha, geralmente é usado para legendas, notas marginais, 
barras laterais, citações, olhos de texto e outras passagens que comentam o texto ou a imagem. O 
centralizado, quando “linhas irregulares são centralizadas entre as margens esquerda e direita”, é usado 
para textos clássicos e formais, no entanto é estático e convencional (LUPTON, 2006, p. 84 e 85).
A hierarquia tipográfica “indica um sistema que organiza o conteúdo, enfatizando alguns 
dados e preterindo outros”. Ajuda o leitor a se localizar no texto. Cada nível da hierarquia deve ser 
indicado por um ou mais elementos, que podem ser: espaciais - como o recuo, entrelinha ou posição 
na página - ou gráficos - como tamanho, estilo, cor ou fonte55. Ellen Lupton acrescenta em relação 
à hierarquia na internet:
A maioria dos sites são controlados por hierarquias de um modo ainda mais 
sistemático que nos documentos impressos. A estrutura de arquivos de um 
site vai de uma raiz de diretórios que possuem vários níveis de conteúdo. 
[...] A organização do site reflete-se na interface – da navegação à forma do 
conteúdo. A tipografia ajuda a elucidar a hierarquia que governa todas essas 
características. [...] Folhas de estilo tipográfico ajudam a pesar o conteúdo 
recolhido, ajudando o usuário a encontrar o que quer56.
Revista Super
Segundo Gabriel Gianordoli, existem três famílias tipográficas utilizadas pela revista 
Superinteressante. A Leitura News, fonte serifada utilizada em blocos de textos maiores, como 
Figura 43 - exemplos das fontes 
Arial e Times, respectivamente
54 Ibid, p.131
55 Ibid, p.94
56 Ibid, p.99
 61Elementos do Projeto Gráfico
matérias ou textos descritivos das seções da revista (figura 44). A Gloriola, fonte sem serifa 
(figura 45). É a fonte padrão para as legendas, títulos de seção e também para os títulos de 
matérias, mas pode ser substituída – de acordo com a proposta visual da matéria. E a Omnes, 
uma fonte rounded, que é usada em títulos de legenda e números (figura 46). 
Figura 44 - Leitura News
Figura 45 - Gloriola
Figura 46 - Omnes
Site Super
Os elementos do site, como o nome das seções e chamadas, possuem uma fonte padrão de 
internet, que se aproxima Gill Sans (figura 47). 
 62Elementos do Projeto Gráfico
Figura 47 - Gill sans
2.3 Material e Formato
2.3.1 Papel
Existem características comuns a todos os papéis e elas são importantes para determinar a 
escolha do insumo para o projeto gráfico. São as seguintes: sentido da fibra que é a direção na 
qual as linhas se alinham quando o papel é feito, é importante porque “afeta a capacidade de dobra 
e impressão”. O sentido da página ideal para uma revista é o paralelo à lombada, pois facilita as 
páginas de serem viradas facilmente; o peso é o referente em quilogramas a uma resma; o corpo 
é o termo usado para descrever o volume, a espessura do papel, é o corpodo papel que determina 
a espessura de uma revista; opacidade é a “capacidade de um papel receber tinta sem que essa 
seja vista do outro lado, quando se vira a folha”, a opacidade é afetada pelo peso e o corpo do 
papel, “quanto mais pesado e volumoso, maior é o número de fibras a retardar a passagem da 
luz, portanto maior é sua opacidade”; a cor existe uma ampla variedade de cores e também 
uma gama de brancos, “a brancura do papel é controlada pela adição de alvejantes, tinturas 
fluorescentes, pigmentos e outros aditivos. Ela vai de um branco cremoso a um branco azulado e 
inclui qualquer branco imaginável entre eles.” A cor do papel afeta tudo o que é impresso sobre 
ele; o acabamento é o termo que “designa o modo pelo qual a superfície do papel foi tratada [...] 
quanto mais calandrado57 e prensado for o papel, mais fino ele será e, portanto, terá menor corpo 
e menor opacidade” (CRAIG, 1980, p.130 a 132).
Segundo Gabriel Gianordoli a revista Superinteressante utiliza na capa o papel couché 
115g/m2 no formato fechado 26,5cm x 20,2cm, 4/4. Para James Craig, autor do livro Produção 
Gráfica o papel couché “geralmente é brilhante e revestida com uma camada de cola e 
pigmento. Muito indicada para impressão em cores”. No miolo é usado o papel SC, Super 
Calandrado, com 52g/m2, 4/4 que possui uma opacidade entre 10 e 15%, dependendo da 
imagem impressa no verso, o que não atrapalha a leitura, mas interfere na página anterior 58.
57 “A função da calandra é aumentar a lisura e o brilho da superfície do papel, operação que não difere muito da 
passagem a ferro de uma camisa recentemente lavada” (CRAIG, 1980, p.129).
58 Ibid, p.133
 63Elementos do Projeto Gráfico
2.3.2 Tela
O monitor ou ecrã, segundo o Dicionário Aurélio é “o aparelho eletrônico, ou parte dele, 
que comanda o funcionamento de outros aparelhos ou partes de aparelhos”. São dois tipos: 
os catódicos e os planos. Os catódicos são maioria em escritórios e são monitores volumosos 
e pesados que possuem um consumo elétrico elevado. Os planos equipam os computadores 
portáteis, os assistentes pessoais (PDA) e os aparelhos foto numérico, bem como um número 
cada vez maior de computadores de escritório. Ocupam pouco espaço, são leves e consumem 
pouca energia.
Nos monitores coloridos, as cores provêm de três feixes distintos de luz, referentes às 
cores: vermelha, verde e azul, que formam a escala RGB.
Existem algumas características técnicas importantes para a tela são elas: a dimensão é 
medida em polegadas59 da diagonal da tela; a definição é o número de pontos (pixel) que o monitor 
possui, este número de pontos está geralmente entre 640x48060 e 2048x1536, mas resoluções 
superiores são tecnicamente possíveis. Existem definições de tela recomendadas para a dimensão 
de cada monitor (figura 48); a resolução é o número de pixels por unidade de superfície, chamado 
de DPI – dots per inch61 – uma resolução de 300 dpi significa que uma polegada quadrada possui 
300 colunas horizontais por 300 colunas verticais de pixels. A resolução ótima para apresentar 
imagens na tela é a 72 dpi porque a imagem possui tamanho menor e é mais fácil de ser carregada 
pelo computador e não demonstra problemas de leitura em tela.
59 Uma polegada equivale a 2,54cm.
60 Ou seja 640 pontos de comprimento e 480 pontos de altura.
61 Pontos por polegada.
Dimensão
(em polegadas)
Dimensão
(em centímetros)
Definição
(em pixels)
15 38 800x600
17 43 1024x768
19 48 1280x1024
21 53 1600x1200
Figura 48- tabela com a relação 
entre as dimensões das telas de 
computador
O site da revista Superinteressante foi desenvolvido para ser utilizado na resolução de 
tela 1024x800 pixels e funciona também na resolução 800x600 pixels. Em relação à internet, o 
carregamento da templates do site da revista são rápidos. O site depende da conexão do usuário 
para carregar a página, tanto em javascript e html. Portanto, funciona bem mesmo em uma 
conexão discada.
Material e formato são importantes para a análise comparativa entre o digital e o impresso, 
já que se trata do papel da tela. Eles, digital e impresso, têm diferenças cruciais para a interação 
do usuário ou leitor. Um exemplo é a possibilidade de manusear a revista, já o para o site é 
 64Elementos do Projeto Gráfico
preciso utilizar intermediários, como mouse, tela, sistema, internet, para que o usuário possa 
usufruir plenamente do sistema. Ainda sim no site fica mais interessante, porque é possível utilizar 
de recursos multimídia – vídeos, animações, zoom - impossíveis no impresso. Entendendo o 
universo que separa os infográficos digitais e impressos, é possível fazer uma crítica e análise 
condizente com as duas plataformas.
2.4 Leis da Gestalt 
As leis da Gestalt serão utilizadas para embasar e dar sustentação as leituras visuais que serão 
importantes para o trabalho. Para isso é preciso elucidar as seguintes leis: unidade, segregação, 
unificação, fechamento, boa continuação, proximidade, semelhança e pregnância da forma.
As unidades (figura 49) são “os elementos que configuram a forma” (GOMES FILHO, 2008, 
p.103). João Gomes Filho, no livro Gestalt do Objeto, ainda complementa o conceito de unidades:
Um elemento que se encerra em si mesmo ou que faz parte de um todo 
[...] pode ser compreendido como o conjunto de mais de um elemento, 
que configura o todo propriamente dito, ou seja, o próprio objeto [...] 
Uma ou mais unidades formais são percebidas dentro de um todo 
por meio de pontos, linhas, planos, volumes, cores, sombras, brilhos, 
texturas e outros atributos – isolados ou combinados entre si. No caso de 
um obejto ser constituído por um conjunto de numerosas unidades [...] 
pode-se adotar o critério de eleger unidades principais62. 
O sumário da edição 288 da Super (figura 49) forma uma unidade como um todo, no entanto 
cada círculo é uma unidade que pode ser considerado dentro do todo.
Figura 49 – sumário da edição 288, 
representando as unidades
 62 Ibid, p.29
 65Elementos do Projeto Gráfico
Segregação “é o ato de separar, perceber ou identificar as unidades” 63. “Pode-se segregar 
uma ou mais unidades, dependendo da desigualdade dos estímulos produzidos pelo campo visual 
– em função das forças de um ou mais tipos de contrastes” 64. Podem ser utilizados diversos meios 
como: pontos, linhas, planos, volumes, cores, sombras, brilhos, texturas, relevos e outros. A figura 
50, retirada da edição 274 da Super, mostra diversas unidades segregadas de diferentes formas – 
tamanho e cores dos círculos.
Figura 50 – exemplo de segregação, 
os círculos coloridos mostram as 
diferentes informações e também a 
congruência entre elas
Figura 51 – exemplo retirado do 
livro de GOMES FILHO (2008, 
p.31) que demosntra os graus de 
qualidade da unificação
A unificação da forma “consiste na igualdade ou semelhança dos estímulos produzidos 
pelo campo visual.” Ocorre quando os príncipios de harmonia, equilíbrio visual e coerência do 
estilo formal, das partes ou do todo, estão presentes num objeto ou numa composição. As leis da 
proximidade e semelhança auxiliam para evidenciar a unificação. A unificação se manifesta em 
graus de qualidade, ou seja, varia em razão de uma melhor ou pior composição, como o exemplo 
da figura 51, no primeiro quadro, há uma unificação perfeita, pois possui equilíbrio e harmonia 
segundo as leis da Gestalt; no segundo quadro a unificação é prejudicada por uma unidade vazada 
e outra amarela, ruídos visuais; no terceiro quadro é ainda mais prejudicada pelo vazio de duas 
unidades e pelo ruído causado pelo círculo verde e; no quarto quadro a unificação desapareceu, pois 
está desordenado e irregular ”65 . A figura 52 mostra algumas imagens análogas ao exemplo anterior 
retiradas da revista Super, edições 284, 288, 282 e 292respectivamente. 
 63 Ibid, p.103
64 Ibid, p.30
65 Ibid, p.31
 66Elementos do Projeto Gráfico
O fechamento “apresenta características espaciais que dão a sensação de fechamento 
visual dos elementos constituintes da forma”66. Essa sensação provém da continuidade de 
uma ordem estrutural definida, por meio de agrupamento os elementos constituem uma figura 
total que dá a impressão de ser fechada e completa. Um exemplo é a figura 53, retirada da 
edição 280 da Super, em que pode-se ver uma banana formada por várias partes.
Figura 52 – exemplos de graus de 
unificação retirados das edições da 
Superinteressante. Para o contexto 
da revista, pode-se afirmar que a 
primeira imagem possui unificação 
perfeita, a segunda possui a 
unificação prejudicada, a terceira 
é mais prejudicada e a quarta não 
possui unificação
 66 Ibid, p.103
 67Elementos do Projeto Gráfico
A boa continuação é “o padrão visual originado por configurações que apresentam 
sequências ou fluidez de formas”67, ou seja, é a organização das formas de maneira coerente, 
sem quebras ou interrupções que gera a fluidez visual. É também a tendência dos elementos 
acompanharem uns aos outros, de maneira a permitir a continuidade de um movimento para 
uma direção já estabelecida e para isso, utiliza-se de elementos como pontos, linhas, planos, 
volumes, cores, texturas, brilhos, degradês e outros. Busca-se inclusive, a forma mais estável 
estruturalmente em termos perceptivos. A figura 54, retirada da edição 282 da Super, é um 
exemplo de boa continuação.
Figura 53 – exemplo de fechamento
Figura 54 – exemplo de boa 
continuação
A lei da proximidade demonstra que “elementos ópticos próximos uns dos outros tendem 
a ser vistos juntos e, por conseguinte, a constituírem um todo ou unidades dentro do todo”68. 
Elementos próximos, com as mesmas características de forma, cor, tamanho, entre outros, terão 
maior tendência a ser agrupados e a constituir unidades. A semelhança de forma e cor “desperta 
também a tendência de se construir unidades, isto é, de estabelecer agrupamentos de partes 
67 Ibid, p.33
68 Ibid, p.34
 68Elementos do Projeto Gráfico
semelhantes”, o infográfico na página a seguir, retirado da edição 280 da Super, ilustra bem 
ambas as leis (figura 55)69. 
A pregnância pode ser definida da seguinte maneira:
Um objeto com alta pregnância é um objeto que tende espontaneamente 
para uma estrutura mais simples, mais equilibrada, mais homogênea e 
mais regular. Apresenta um máximo de harmonia, unificação, clareza for-
mal e um mínimo de complicação visual na organização de suas partes ou 
unidades compositivas (figura 56)70.
Figura 55 – infográfico que 
representa bem as leis de 
proximidade e semelhança
Figura 56 – exemplo de pregnância
2.5 Controles 
Atualmente grande parte de aplicativos e dispositivos projetados por designers de interação 
possuem algum tipo de controles visíveis para o usuário usar para manipular recursos do produto, 
por exemplo o mostrador e o controle do volume de um som stereo. Os controles fornecem os 
affordances necessários para entender o que o produto é capaz de realizar e também fornecem 
o poder para perceber a capacidade do produto (SAFFER, 2007, p.136).
69 Ibid, p.35
70 Ibid, p.36