Prévia do material em texto

E-book 3
DIREÇÃO 
DE ARTE
Ricardo Alexandre Bontempo
Neste E-Book:
INTRODUÇÃO ����������������������������������������������������������� 5
O ESPAÇO GRÁFICO ����������������������������������������������� 6
A estrutura do impresso e a diagramação ������������������������������7
DIAGRAMAÇÃO��������������������������������������������������������11
Princípios básicos:������������������������������������������������������������������12
Criando um rafe ����������������������������������������������������������������������12
GRID - DEFINIÇÃO E ELEMENTOS ��������������������15
O que é diagramar? �����������������������������������������������������������������17
Elementos de um grid �������������������������������������������������������������20
Tipos de Grid ���������������������������������������������������������������������������23
LAYOUT - DEFINIÇÃO E DIAGRAMAÇÃO ������26
Layout nas artes gráficas �������������������������������������������������������28
Quem faz o projeto do layout? �����������������������������������������������28
Necessidade de layout �����������������������������������������������������������29
LAYOUT PERFEITO, ESPAÇO GRÁFICO E 
DIAGRAMAÇÃO�������������������������������������������������������31
O equilíbrio de cores ���������������������������������������������������������������31
As imagens������������������������������������������������������������������������������32
Menos é mais, na maioria das vezes ������������������������������������33
As fontes ou tipografia �����������������������������������������������������������35
Manter um padrão visual ��������������������������������������������������������35
Benchmarking �������������������������������������������������������������������������37
Crie personas ��������������������������������������������������������������������������37
2
Diagramação e layout �������������������������������������������������������������38
Layout clássico (2:3) ��������������������������������������������������������������40
Layout números Fibonacci �����������������������������������������������������42
ESTUDO DE CASO ������������������������������������������������ 44
O QUE É GRID ���������������������������������������������������������47
COMPOSIÇÃO BÁSICA DA GRID �����������������������51
A GRID COMO PRINCÍPIO DE 
CONSTRUÇÃO �������������������������������������������������������� 53
O USO DE “GRIDS” ������������������������������������������������56
VANTAGENS E BENEFÍCIOS DE UMA 
“GRID” �����������������������������������������������������������������������59
GRID RESPONSIVO ������������������������������������������������61
MALHA GRÁFICA ���������������������������������������������������63
Forma e Função de uma malha ���������������������������������������������66
Especificidades da malha gráfica digital�������������������������������69
Fatores que condicionam a criação da malha ����������������������70
GRIDS PARA DESIGN RESPONSIVO ����������������73
Tecnicamente falando, design responsivo é um 
conceito, não é uma técnica ��������������������������������������������������73
Como escolher o número de colunas? ����������������������������������75
GRID DOS DESIGNERS�����������������������������������������77
GRID SYSTEM DO BOOTSTRAP ������������������������79
MOBILE FIRST �������������������������������������������������������� 80
O Bootstrap é Mobile First �������������������������������������������������81
Container ���������������������������������������������������������������������������������82
Grid System, ou o Bootstrap Grid ������������������������������������������82
3
LAYOUTS COM O BOOTSTRAP �������������������������85
ESTUDO DE CASO �������������������������������������������������88
A importância do web site responsivo para a 
publicidade das marcas: estudo de caso do site da 
marca C&A ������������������������������������������������������������������������������88
4
INTRODUÇÃO
Neste e-book abordaremos o conceito de espaço 
gráfico, diagrama e diagramação.
Estudaremos sobre o que é um rafe ou rough, o pro-
cesso de criação, o que é grid e sua definição na 
diagramação� Também apresentaremos o conceito 
de layout, sua aplicação e necessidade nas artes 
gráficas e o papel do profissional que o desenvolve.
Também vamos desenvolver o conceito de Grid, bem 
como os elementos que a compõem, seus benefícios 
e o melhor formato� Veremos que o grid tem o pa-
pel de fortalecer os layouts, facilitando e unificando 
processos, promovendo a coerência entre layouts 
diferentes, simplificando a edição do site.
Estudaremos o grid para design responsivo, os cálcu-
los envolvidos (números de colunas, porcentagens) 
e o conceito de Bootstrap, no qual o framework as-
sume, inicialmente, que a tela é de um dispositivo 
móvel, com tamanho pequeno, podendo adaptar-se 
a todos os conteúdos para o tamanho menor, ligado 
ao conceito de mobile first�
A partir deste conceito entenderemos como criar 
layouts com o Bootstrap e também outros layouts�
5
O ESPAÇO GRÁFICO
O espaço gráfico é o conceito usado da área de 
Design Gráfico para definir o tipo de área no qual 
haverá a aplicação de um logotipo, da marca de uma 
empresa. Define-se o tipo de superfície para o de-
senvolvimento do projeto: papel, metal, vidro, etc� 
Nesse contexto, o espaço gráfico também pode ser 
considerado uma capa de revista, um livro, a primeira 
página de um jornal�
O projeto gráfico se materializa através de um pro-
cesso que engloba diversas operações e estratégias 
que resultam no impresso físico, finalizado. É o res-
ponsável por dar suporte e constituição do espaço 
gráfico.
Estas operações correspondem desde a definição do 
suporte adequado, a realização da imposição e im-
pressão das páginas, a aplicação de revestimentos, o 
refile, o acabamento dos cadernos e a montagem do 
miolo até a encadernação e distribuição das revistas, 
envolvendo o gerenciamento de sua produção�
SAIBA MAIS
“Mesmo com todos avanços tecnológicos os ali-
cerces do design gráfico como Espaço Gráfico, 
Diagramação, Layouts estão ligados à tradição 
livreira”. O designer gráfico da atualidade não pode 
simplesmente ignorar as forças que, dentro; ou fora 
6
do seu campo, influenciaram a forma e a funcio-
nalidade do layout de uma página�
A tecnologia da imprensa deu ao homem, com o 
livro, a primeira “máquina de ensinar”, na expressão 
de McLuhan� De posse do saber e armado com 
uma perspectiva visual e um ponto de vista uni-
forme e preciso, o liberta da tribo, a qual explode, 
vindo, nos dias de hoje transformar-se nas grandes 
multidões solitárias dos imensos conglomerados 
individuais� (McLuhan, 1971, p�1)
Um meio de comunicação é produto cultural, ca-
racterístico de uma sociedade industrial em que 
o design gráfico, enquanto tal, necessariamen-
te tem como função transcrever a mensagem a 
ser transmitida - seja de qual enfoque for - para o 
código simbólico estabelecido, sob pena de não 
efetivar-se enquanto prática comunicacional� E é 
“exatamente por isso que ele surgiu - e por isso 
surgiu exatamente quando surgiu”�
McLUHAN, M� Os meios de comunicação como 
extensões do homem� SP:Cultrix, 1971�
A estrutura do impresso e a 
diagramação
Diagramas são a base formal para os meios impres-
sos, servindo como guias, visando agilizar o proces-
so de produção� Nos diagramas são organizados 
conteúdos determinados em um espaço, sendo que 
um bom diagrama permite ao designer uma grande 
7
quantidade de possibilidades, sempre dentro de uma 
estrutura�
Diagrama
1. Representação gráfica de fatos, fenômenos etc.; 
gráfico, esquema. 2. Traçado em linhas gerais; 
delineação, bosquejo�
São aplicados os diagramas a uma extensa variedade 
de produtos impressos como soluções básicas de 
design� Há quem defenda e quem não aceite esses 
sistemas� Defensores dizem que quando utilizados 
com sensibilidade e habilidade, os diagramas au-
xiliam na produção de efeitos estéticos funcionais 
e agradáveis. Já os detratores afirmam que os dia-
gramas,quando caem nas mãos de designers não 
habilidosos, podem ser como camisas de força�
A utilização dos diagramas se dá para projetos vi-
suais complexos e também para projetos de peque-
nas proporções� Os projetos de caráter complexo 
consistem na adaptação de textos e imagens para 
uma programação visual pré-estabelecida (folder, 
embalagem, revista, jornal, etc�) com foco no equi-
líbrio das informações, textos e imagens� O uso de 
diagramação simples pode ser o desenvolvimento de 
uma prancha e todo o conteúdo (texto ou imagem) 
que será lido por outras pessoas segue um caminho 
todo desenvolvido para que o leitor não se perca�
Diagramação é o nome dado ao ato de ordenar, com-
binar elementos nos espaços midiáticos, coorde-
8
nando o material gráfico com o jornalístico, com o 
objetivo de persuadir que o lê�
O diagramador tem por papel dotar as mensagens 
de estrutura visual, com o intuito de permitir ao leitor 
discernir rápida e confortavelmente o que lhe inte-
ressa� As decisões dependem do tipo de mensagem 
que é veiculada, pelo tipo de consumidor da mensa-
gem e pelo grau de interesse que se busca transmitir 
pela mensagem� Quem trabalha como diagramador? 
Geralmente, são profissionais formados em designer 
gráfico que trabalham com diagramação, pois é pre-
ciso dominar programas como Photoshop, Autocad, 
InDesign, entre outros�
A área que a impressão ocupa é denominada “man-
cha” e determina o formato do impresso� Há a de-
codificação dessa área em dois momentos, sendo 
o primeiro deles quando o leitor observa a massa 
gráfica em conjunto, identificando subáreas como 
ilustrações, títulos, brancos, gráficos, texto, etc.; o 
segundo momento ocorre quando o leitor se detém 
nos detalhes de subáreas�
Manchas pesadas, ou seja, com muita área impressa, 
faz com que a relação de proximidade entre o leitor 
e o veículo se abale. É preciso que haja abertura de 
novos espaços, então o designer gráfico, mesmo 
preso ao diagrama, precisa oferecer ao leitor um local 
de introspecção onde suas ideias possam circular�
São elementos principais do trabalho gráfico: branco 
do suporte e preto do impresso� O branco corres-
ponde a todos os espaços e a disposição do arranjo 
9
tipográfico, e o preto representa o grafismo impresso, 
inexistindo a necessidade de distinção entre cores�
A referência ao preto e branco não significa minimi-
zar a importância das cores para o design gráfico, 
somente aponta para a abordagem na qual o foco 
de atenção está na relação impresso-suporte�
Diante de uma comunicação escrita, o leitor leva sua 
visão ao lado superior esquerdo do papel, já que na-
turalmente o início do texto se encontra ali. A grafia 
ocidental (da esquerda para a direita) e horizontal é 
a base para os olhos do leitor�
Dessa forma, a visão segue em diagonal para o lado 
inferior oposto, seguindo do lado superior esquerdo 
para o lado inferior direito� O designer tem o papel 
de preencher as zonas mortas, espaços vazios, e o 
centro óptico da página com elementos que atraiam 
o leitor e tornem a leitura ordenada, sem haver des-
locamentos bruscos�
Por mais que existam arranjos visuais centrados 
tecnicamente, o senso intuitivo de equilíbrio e a per-
cepção do homem mostram-se mais exato� Não há 
regras rígidas para desenhar ou diagramar páginas 
de veículos impressos, mas há princípios invariáveis�
Para Celso Kelly, “a arte gráfica começa pela dia-
gramação, desdobra-se na escolha dos tipos, com-
plementa-se na confecção das manchetes” (Kelly 
apud Silva, 1985, p�28)� A diagramação estabelece 
as relações do gráfico com o assunto tratado, ao 
passo que as ilustrações trazem mais calor ao texto�
10
DIAGRAMAÇÃO
Diagramação corresponde à disposição de um con-
teúdo de notícia ou informação sobre um suporte 
material, seja ele impresso, eletrônico, digital.
“Diagramar é criar e executar (���) a distribuição grá-
fica das matérias a serem publicadas no veículo im-
presso” (RABAÇA, 2002: p�222)�
Diagramação
Elaboração de leiaute ou esquema (de dimensões 
e formato iguais aos da publicação) em que apa-
recem devidamente calculados e representados 
todos os elementos (textos, legendas, fotos, ilustra-
ções etc�) que compõem o material a ser impresso�
A diagramação é uma técnica que utiliza elementos 
determinados como títulos, fotografias, ilustrações, 
infográficos, textos, legendas, etc. Tais elementos 
são usados para atender à necessidade editorial: 
imagens, tamanho de fontes tipográficas, boxes e 
todos os elementos visuais que precisam ser pen-
sados e posicionados para estar em consonância 
com as necessidades editoriais�
Diagramação é a técnica que distribui no espaço 
gráfico delimitado os elementos gráficos, seja em 
uma página impressa ou em meios eletrônicos e 
digitais, seguindo uma hierarquia de informações 
determinada por editores e diretores de arte� O dia-
11
gramador tem por finalidade encontrar o equilíbrio 
na distribuição dos elementos gráficos na página, 
propiciando maior conforto na leitura�
Princípios básicos:
 ● O trabalho de editoração é um trabalho multidisci-
plinar� A editoração consiste em gerenciar a produção 
de publicações, sejam elas periódicas ou não (livros, 
revistas, álbuns, CDs, websites, etc)� Envolve editores, 
redatores, revisores, diretores de arte, fotógrafos, 
ilustradores e o diagramador;
 ● O trabalho do diagramador não é isolado, mas em 
conjunto com todos esses profissionais coordenados 
pelos editores e diretores de arte;
 ● Os editores e diretores de arte estabelecem dire-
trizes editorias e artísticas que formam a identidade 
corporativa e visual da publicação;
 ● A cada edição da publicação é necessário analisar 
os conteúdos para estabelecer a ordem de prioridade 
dos elementos que serão inseridos na publicação e 
em cada página;
 ● Esta dinâmica de decisões estabelece o primeiro 
princípio básico da diagramação: a hierarquia da 
informação�
Criando um rafe
Rafe ou Rough é uma expressão utilizada para de-
nominar os rascunhos ou desenhos preliminares 
que profissionais de Marketing desenvolvem antes 
12
de elaborar um serviço para o cliente� Geralmente o 
rafe ocorre após a elaboração do briefing em uma 
agência de marketing digital�
Rough
É a terminologia inglesa usada para denominar 
os rascunhos ou desenhos preliminares que os 
profissionais de Marketing elaboram antes de de-
senvolver efetivamente um determinado serviço 
para um cliente� 
Figura 1: Rafe de layout. Fonte: criadodesign.blogspot.com.
Após a produção e a aprovação do rafe, os profissio-
nais da agência de marketing passam para a criação 
do layout ou arte final do projeto. O rafe, portanto, 
encontra-se entre o briefing e o layout.
13
http://criadodesign.blogspot.com/2014/03/rough-ou-rafe.html
O rafe proporciona diversas vantagens aos proje-
tos de marketing para e-commerce, como se nota 
a seguir:
 ● Mais economia: Os Rafes podem ser produzidos 
em guardanapos, sulfite, folhas de caderno ou qual-
quer outro tipo de papel barato;
 ● Facilidade para testar: como só são necessários 
um lápis e um pedaço de papel barato, é possível 
rabiscar inúmeras possibilidades sem se preocupar 
com perdas;
 ● Mapeamento: ao criar um esboço inicial, você 
tem uma visão mais ampla do projeto, o que abre 
oportunidades para melhorias durante a criação da 
arte final;
 ● Compreensão veloz e profunda: um Rafe pode fa-
zer com que a equipe de trabalho entenda o projeto 
melhor e mais rapidamente, o que diminui o tempo 
de desenvolvimento;
 ● Identificação de problemas: rascunhos, ainda que 
feitos com desenhos infantis, permitem a equipe 
de trabalho identificar e solucionar erros de projeto 
antecipadamente�
14
GRID - DEFINIÇÃO E 
ELEMENTOS
Grid é uma malha construída com diversos retângu-
los, usada para ordenar elementos gráficos. O grid 
tipográfico corresponde a um sistema de planejamen-
to geométrico que divide a informação em partes e 
ajudam o observador a entender o significado entre 
os elementos informativos, sejamestas imagens 
ou palavras�
Grid
Grid é uma malha construída com diversos retân-
gulos, usada para ordenar elementos gráficos. Tem 
por objetivo resolver visualmente uma composição 
e obter coesão no layout O grid sempre é cons-
truído após a definição do conceito do trabalho, o 
conteúdo determina a estrutura do grid�
Para alguns designers gráficos, o grid é uma parte 
que oferece precisão, ordem e clareza ao processo 
de trabalho� Na década de 80, um movimento dissi-
dente ocorreu, havendo um esforço para demonstrar 
os limites desse método�
15
Figura 2: Dois rostos ou uma taça? Fonte: Elaboração própria.
Uma das maiores vantagens de se usar grids em 
um trabalho é a clareza, organização e facilidade de 
distinção entre as diversas informações que constam 
no layout (tanto na hora de criação pelo designer, 
quanto pelo usuário que consegue navegar com uma 
facilidade muito maior pelo trabalho)�
Nos primeiros impressos encontram-se grids defi-
nidos e é possível encontrar o termo grids na arte, 
na arquitetura, e na Gestalt� Os grids atingiram força 
após a revolução industrial pelos estudos realizados 
por Theo van Doesburg e Jan Tschichold no livro The 
New Typography (1928), e do movimento racional 
da Bauhaus�
Durante a Segunda Guerra, a Suíça manteve-se neutra 
e acabou acolhendo refugiados intelectuais, sendo 
que esses artistas e designers refugiados ajudaram 
16
a formalizar e promover o uso da ferramenta que se 
tornou um ícone do design e do movimento suíço 
principalmente com seus cartazes famosos até os 
dias atuais�
Figura 3: Fonte: IMDB.
O que é diagramar?
Diagramar é o ato de organizar elementos gráficos 
como textos e imagens em um espaço, que pode 
ser um jornal, revista, folder, página de um site, etc�
17
https://www.imdb.com/title/tt0027194/mediaviewer/rm22100736
Uma boa diagramação depende da observância aos 
princípios básicos do design. É preciso conhecer o 
público-alvo que se pretende alcançar, tendo noção 
de faixa etária, nível social, nível de escolaridade, etc�
A página precisa ser pensada com relação à hie-
rarquização, isto é, as informações devem estar or-
ganizadas pela importância e na ordem pela qual é 
desejado que sejam lidas�
Na diagramação os padrões de identidade são funda-
mentais. É preciso atentar-se a esses padrões, uma 
vez que, antes que o consumidor leia a diagramação, 
a primeira impressão será a que permanecerá� Por 
essa razão é necessário padronizar os elementos que 
compõem o projeto (tipografias, cores, elementos 
gráficos, etc.) a fim de que o cliente sinta segurança 
na hora fechar um trabalho, conseguindo identificar 
a marca sem ser necessário ver o logotipo, mas con-
siga diferenciar títulos, subtítulos, textos e legendas, 
com o objetivo de serem reconhecidos facilmente 
pelo leitor�
Elementos gráficos, tipografias (limitando-se a duas 
ou três para manter a uniformidade) e cores escolhi-
das precisam remeter ao assunto tratado na página, 
padronizando a publicação�
Há casos que ganham destaque por seguir os fun-
damentos e acabam sendo exemplo de boa diagra-
mação, como o do designer David Carson, o qual 
não utiliza padrões, organização ou hierarquização, 
mas atende perfeitamente ao seu público-alvo�
18
Na opinião de David Carson não havia necessidade 
de grids, da hierarquia de informação, seja no layout, 
seja na tipografia, sendo que o racionalismo do grid e 
outras regras tipográficas não servem como resposta 
à complexidade do mundo pós-moderno� Suas obras 
foram consideradas como forma de neo-dadaísmo, 
em razão do tratamento dado para a tipografia, o 
qual se assemelha aos dadaístas de 1910, que não 
se preocupavam com a lógica e clareza da informa-
ção), considerando mais importante a atitude do que 
o conteúdo da leitura�
SAIBA MAIS
Segundo Lupton (2006), as grades “dividem o espa-
ço em unidades regulares” (p�113)� Trata-se de uma 
estrutura modular que define “sistemas para a dispo-
sição de conteúdo em páginas, telas ou ambientes 
construídos” (p� 113)� Gruszynski e Calza (2013) com-
plementam o conceito evidenciando que uma grade 
é geralmente dividida por eixos verticais e horizontais 
(invisíveis), dedicada a facilitar o alinhamento de ele-
mentos visuais presentes em alguma composição�
A partir do formato daquilo que se quer diagra-
mar, são as linhas, as colunas e as margens que 
organizam o plano onde os elementos do leiaute 
são distribuídos� A partir da grade é possível dizer 
quais informações são as principais (as primeiras 
a serem identificadas) e as secundárias, servindo 
como um “guia” para o olhar do leitor�
Fonte: file:///Users/gildosantos/Downloads/
GTMIDIMP_PI-THAN-%20Flavia�pdf
19
Elementos de um grid
Margens: correspondem aos espaços que restam 
entre o tamanho da folha e as áreas utilizadas para 
diagramação, tais quais guias e colunas, sendo que 
nessa área constarão informações secundárias ou 
de descanso para os olhos�
Figura 4: Margens. Fonte: Elaboração própria.
20
Guia Horizontal: corresponde às faixas horizontais 
que ajudam na estrutura e alinhamento do texto, 
guiando os olhos por ocasião da escrita, sendo uti-
lizada para a criação de pontos de partida ou pausas, 
fazendo haver maior criatividade�
Figura 5: Guias horizontais. Fonte: Elaboração própria.
21
Colunas: correspondem aos alinhamentos verticais, 
os quais são cruzados com as guias horizontais, ge-
rando divisões horizontais entre as imagens, sendo 
que a quantidade e a largura de colunas pode diferir 
de acordo com cada designer, conforme o trabalho 
ou quantidade de texto�
Figura 6: Colunas. Fonte: Elaboração própria.
22
Módulos: correspondem a unidades individuais, tais 
quais quadrados originados da junção da coluna com 
a guia horizontal, sendo separadas por espaços de 
iguais medidas, quando repetidas por toda a página 
formam colunas e faixas horizontais�
Zonas Espaciais: correspondem a um grupo de mó-
dulos, formando um campo diferente e cada zona 
espacial pode receber uma informação, tal qual foto, 
coluna com texto�
Marcadores: estão localizados na parte externa, na 
margem, sendo secundários ou informações cons-
tantes, que ocupam o mesmo lugar na página (ca-
beçalho, rodapé, nome do livro)�
Figura 7: Colunas. Fonte: Elaboração própria.
Tipos de Grid
Retangular: Este é o mais simples dos grids, apresen-
tando-se com texto longo corrido, tal qual um texto 
científico ou livro e, por apresentar esse formato, 
tende a ser cansativo, sendo necessário a criação de 
23
uma forma de estímulo para a leitura (espaçamento, 
tamanho do tipo ou imagem)�
De Colunas: Grid de colunas tem por característica 
ser flexível, sendo utilizado para a separação de di-
ferentes tipos de texto ou informação, podendo ser 
composto por grids diferentes, sendo que cada um 
tem destinação a um tipo de conteúdo (site em que 
cada grid possui um tipo diverso de menu e imagem)�
Modular: Grid modular apresenta coluna com muitas 
guias horizontais, criando módulos. É muito utilizado 
para informações tabulares, formulários, gráficos, 
diagramas, tendo vantagens se comparado a outros 
grids (simplicidade, unificação de tipos de conteúdo, 
combinação de 1, 2 e 3 larguras modulares)�
Hierárquico: Neste grid a largura das colunas e entre 
colunas é variada� Um exemplo de grid hierárquico 
e a página da Internet, pois o conteúdo dinâmico da 
maioria dos sites e o redimensionamento das janelas 
possuem flexibilidade na largura e no comprimento.
Ter conhecimento sobre qual o melhor grid para o 
tipo de peça que se está produzindo é altamente 
influente na qualidade do produto final. Saber utilizar 
o grid como uma ferramenta de organização, dispo-
sição e hierarquização do conteúdo é um diferencial 
que traz mais qualidade, praticidade e agilidade para 
o trabalho de um designer�
24
SAIBA MAIS
Design gráfico é a área do conhecimento e a prá-
tica profissional específicas que tratam da organi-
zação formal de elementos visuais-tanto textuais 
quanto não textuais que compõem peçasgráficas 
feitas para reprodução, que são reproduzíveis e que 
têm um objetivo expressamente comunicacional� 
(VILLAS-BOAS, 1999, p�17)�
O design editorial é uma das especialidades do 
design gráfico e corresponde ao projeto visual de 
uma edição� Entende-se por edição o processo de 
planejamento envolvendo textos e imagens que 
irão compor uma publicação, sendo ela periódica 
ou não� Livros, jornais, revistas, e-books, são pro-
dutos de design editorial, onde mensagens visu-
ais e textuais são ordenadas visando cumprir os 
objetivos de comunicação�
FIQUE ATENTO
Clique aqui para saber mais a respeito de diagra-
mação, grid e temas estudados nessa aula�
25
https://www.youtube.com/watch?v=eVf3BAnneJQ
LAYOUT - DEFINIÇÃO E 
DIAGRAMAÇÃO
Layout é um termo da língua inglesa, mas está intro-
duzido em dicionários de língua portuguesa, podendo 
ser traduzido como “disposição” ou “plano” e é bas-
tante usado no âmbito das tecnologias�
A noção de layout é utilizada para designar o esque-
ma de distribuição dos elementos dentro de um de-
senho. É hábito que um desenhador que se costuma 
dedicar à criação de páginas web desenvolva um 
layout e o apresente ao seu cliente para que este o 
aprove e decida sobre a distribuição dos conteúdos�
Nos três campos semânticos dos quais o layout faz 
parte, o significado representa a ideia de:
 ● esquema;
 ● plano inicial;
 ● amostra;
 ● desenho;
 ● arranjo;
 ● formato pré-estabelecido�
O layout pode ser considerado um modelo que apre-
senta tabelas ou espaços em branco� A partir do 
layout a página web inicia o seu desenvolvimento 
com os seus conteúdos específicos.
26
O layout pode ser composto por um retângulo em 
modo de cabeçalho e por três colunas, sendo este 
esquema genérico, podendo ser usado para desen-
volver múltiplos sites (páginas), o cabeçalho, pode 
incluir-se o encabeçado da página (como o nome 
de uma empresa ou de uma publicação), na coluna 
da esquerda apareceriam as partes do site (Quem 
somos, O que fazemos, etc�), a coluna do meio seria 
destinada ao desenvolvimento dos conteúdos e a 
coluna da direita, às publicidades�
No âmbito da Internet é comum a oferta de layouts 
gratuitos, bem como que os próprios utilizadores 
sejam responsáveis por personalizá-los com os 
seus conteúdos� O criador só exige que apareça a 
sua menção em algum lado da página web para que 
possam entrar em contato caso necessitem de um 
projeto mais complexo�
REFLITA
Embora o grid não seja visível no trabalho finaliza-
do, sua influência é evidente no posicionamento 
dos diferentes elementos de design� A variedade 
de layouts produzidos a partir de um grid básico 
demonstra a flexibilidade que essa estrutura ofe-
rece� (Ambrose & Harris, 2009, p�55)�
27
Layout nas artes gráficas
É dentro das artes gráficas (também referidas pelo 
termo design gráfico) que a palavra layout mais apa-
rece. O layout pode ser definido como um rascunho 
do trabalho a ser impresso, mas não se deve entender 
por rascunho algo feito às pressas somente como 
uma ideia geral do trabalho final. O layout é a parte 
mais refinada do trabalho do profissional da área. E 
envolve toda a estética do projeto final.
O layout precisa englobar todas as minúcias do que 
será a versão definitiva do projeto (seja ele impresso 
ou lançado online)�
Quem faz o projeto do layout?
O profissional responsável pela elaboração do layout 
é o designer gráfico. Esta profissão requer conheci-
mentos das áreas de:
 ● psicologia;
 ● comunicação (incluindo a comunicação visual);
 ● estudo da arte;
 ● ciência da cognição�
Todas as teorias estudadas garantem ao profissional 
o conhecimento para que o produto final desenvol-
vido a partir do layout atinja eficientemente a sua 
finalidade.
Hoje, além de faculdades voltadas para várias es-
pecializações dentro desta área, existem também 
28
cursos de mestrado e doutorado voltado para a for-
mação de designers�
Layout
Layout é uma palavra inglesa, muitas vezes usada 
na forma portuguesa “leiaute”, que significa pla-
no, arranjo, esquema, design, projeto� Na área da 
arte gráfica, o layout é um esboço ou rascunho 
que mostra a estrutura física de uma página de 
um jornal, revista ou página na internet (como um 
blogue, por exemplo)� O layout engloba elementos 
como texto, gráficos, imagens e a forma como 
eles se encontram em um determinado espaço� O 
layout gráfico pressupõe o trabalho de um designer 
gráfico, que vai trabalhar no formato e números de 
página e suas margens, números de colunas de 
texto e outros aspectos relevantes�
SAIBA MAIS
Clique aqui e veja mestrados na área de Design 
fora do Brasil�
Necessidade de layout
Alguns tipos de projetos que necessitam da criação 
estética de um layout prévio:
 ● branding (criação de uma identidade corporativa);
 ● design das embalagens;
29
https://www.master-mestrado.com/universidades/Italia/MFI/
 ● design de games (vídeo games, jogos para com-
putadores, jogos online);
 ● web design (para quaisquer trabalhos voltados 
para a publicação na internet);
 ● design editorial (voltado para jornais, revistas, con-
teúdos escritos em geral);
 ● sinalização;
 ● design digital;
 ● tipografia.
30
LAYOUT PERFEITO, ESPAÇO 
GRÁFICO E DIAGRAMAÇÃO
Antes de iniciar a criação de um layout, o designer 
precisa entender qual é o objetivo desta peça e para 
qual público ele se destina� O projeto deverá ser in-
terpretado de acordo com o briefing disponibilizado 
e pode ser ter como objetivo atrair novos clientes, 
impulsionar a venda de um determinado produto, 
anunciar uma promoção, informar o lançamento de 
uma nova marca, entre outros� Portanto, desenvolver 
um layout de qualidade é uma regra básica para gerar 
resultados e fixar a marca junto ao consumidor. Por 
este motivo, selecionamos oito dicas básicas para 
que a peça de comunicação seja eficiente.
O equilíbrio de cores
É extremamente importante que as cores utilizadas 
no layout tenham alguma relação com as atividades 
da empresa e com o que a peça deseja transmitir�
Cada cor é interpretada de forma distinta e, por conta 
disso, geram sensações diferentes� Uma dica para 
trabalhar com cores é não exagerar nas saturações�
Abaixo, listamos algumas sensações que as cores 
podem transmitir:
31
As imagens
Figura 8: Poster do filme Jurassic World. Fonte: kknews.cc.
32
https://kknews.cc/culture/9362z2l.html
Os erros mais comuns de layout aparecem ao in-
serir imagens, uma vez que o público alvo deverá 
interpretá-las e compreendê-las de forma precisa e 
rapidamente, sem desprender do objetivo propos-
to no briefing e mantendo a identidade da marca. 
Procure imagens que atinjam com eficiência este 
público e, se necessário, desenvolva-as em estúdio�
Fique atento aos direitos da imagem, mesmo as que 
não possuam pessoas� Imagens visíveis em sites de 
busca não significam que sejam gratuitas ou “sem 
donos”� Ao escolher uma pessoa pública para re-
presentar sua marca, produto ou serviço, lembre-se 
que a semelhança é um dos elementos utilizados 
no marketing e o comportamento e atitudes desta 
celebridade pode ser aplicada a sua empresa�
Por estas razões, escolha fotos indiscutíveis, de 
boa qualidade e que mantenham o foco, pois o 
contrário fará o consumidor perder o interesse pela 
comunicação�
Menos é mais, na maioria das 
vezes
A principal ferramenta do layout deve ser a missão 
crítica, ou seja, o objetivo a ser obtido pela empresa� 
Em sites, por exemplo, os ícones devem ser distri-
buídos de maneira simples e possuindo frases de 
inventivo como “compre agora”, “entre em contado”, 
“faça seu cadastro”, por exemplo e visa a funciona-
lidade e praticidade de encontrar as informações�
33
Quando a arte é pensada para meios impressos, es-
ses pequenos conceitos também devem ser aplica-
dos� O chamado “call to action” ou, em português, 
chamando para ação, deve estar claro e pode ser 
“ligue agora”, “visite nosso site” entre outros�
O contraste entre cores faz com o que o público 
preste mais atenção em um determinadoelemento 
e layouts clean transmitem confiança e credibilidade.
Portanto, não carregue o layout com muitas infor-
mações� Escolha uma ou duas fontes, selecione as 
cores e imagens mais adequadas� Trabalhe com gri-
ds e a regra dos terços�
Figura 9: Fegra dos três terços. Fonte: designculture.com.br.
34
https://designculture.com.br/a-regra-dos-tres-tercos
SAIBA MAIS
Para entender o que é a regra dos três terços e seu 
funcionamento, clique aqui para ver mais� 
As fontes ou tipografia
Semelhantemente com as cores, as fontes do layout 
podem transmitir uma imagem inapropriada se uti-
lizadas de forma incorreta ou carregarem a arte� 
Inúmeras fontes, com diferentes efeitos, tamanhos 
e detalhes, podem tirar a atenção das informações e, 
até mesmo, causar a impressão de que está lidando 
com uma empresa desorganizada�
Manter um padrão visual
É importante criar um padrão nos seus layouts para 
que o cliente não sinta como se estivesse conhe-
cendo uma nova empresa cada vez que recebe um 
material da sua empresa� Este padrão faz com que 
o cliente associe sua empresa a uma determinada 
cor ou estilo� Um exemplo disso é a cor vermelha e 
as letras diferenciadas em branco que identificam a 
Coca-Cola, cujo formato da garrafa também remete 
ao produto�
35
http://designculture.com.br/a-regra-dos-tres-tercos
Figura 10: Poster do Festival Anti-Racismo. Fonte: kknews.cc.
O objetivo é fazer com que o consumidor associe 
um determinado um padrão o cliente não ficará to-
talmente seguro�
36
https://kknews.cc/zh-sg/game/gbb8k9l.html
Benchmarking
Benchmarking consiste no processo de comparação 
de serviços, produtos e práticas empresariais, sendo 
um instrumento de gestão empresarial que se realiza 
através de pesquisas de comparação das ações de 
cada empresa� O objetivo do benchmarking é buscar 
a melhoria de funções e processos das empresas, 
com o intuito de vencer a concorrência por meio de 
estratégias e criação de ideias novas�
Recomenda-se que, antes da criação do seu layout, 
você analise os de seus concorrentes e veja quais 
são suas propostas quanto à cores, fontes, padrões, 
erros e acertos� Não copie o layout de outras empre-
sas e sim, use-os como exemplos�
Crie personas
Personas são exemplos que humanizam e individu-
alizam um mercado-alvo específico. Os personas 
auxiliam na criação de usuários hipotéticos que re-
presentam o seu público-alvo� O principal objetivo da 
criação de personas consiste na tentativa de iden-
tificar e conhecer o seu cliente em um nível mais 
individualizado�
Nesse contexto, entender quais os sites que o seu 
público acessa, qual o tipo de conteúdo é relevante 
deve lhe orientar na composição estrutural do seu 
layout� Pontos importantes como, por exemplo, a 
quantidade de informações em cada bloco de texto, 
37
qual o posicionamento ideal para uma chamada, 
podem ser orientados na perspectiva experimental 
da criação de personas�
Com essas dicas ficará mais acessível criar um bom 
layout e ter uma empresa bem qualificada no merca-
do, além de impulsionar o desempenho das ações 
promocionais�
Diagramação e layout
Distribuir os elementos do design em uma página 
de revista exige muita pesquisa e conhecimento, 
criar um amplo projeto para padronizar as páginas 
promovendo assim uma identidade única e incorrup-
tível atendendo uma exclusividade pode configurar-
-se como um diferencial apresentado pela revista� 
Medidas, tamanhos e alinhamentos dos elementos 
visuais da revista (que vão desde fólios até texto 
corrido) são colocados em grids a fim de atender 
a alguma proporção, para que haja uma harmonia 
visual na distribuição�
SAIBA MAIS
Clique aqui e assista ao vídeo: Grids no design 
gráfico: o que você precisa saber antes de começar 
a usar - Produção: Walter Mattos�
38
https://www.youtube.com/watch?v=TtNb8UFLaQo
Figura 11: Exemplo de proporção de uma página. Fonte: Criado por 
Freepik.
A proporção é usada para criar uma dinâmica 
entre os diferentes elementos de um design. 
Ela pode ser equilibrada ou privilegiar certos 
elementos, como imagens. (Ambrose & Harris, 
2009, p.38).
Em geral, os grids orientarão todo o decorrer da re-
vista, a sua importância deve ser levada em conta 
na hora de apresentar este conteúdo para o público 
alvo� Outro objetivo após realizar o estudo dos grids 
é fazer com que os eles não sejam perceptíveis para 
o leitor, ele deve apenas focar a atenção nos conte-
údos da revista�
39
Grids também podem ser usados para orde-
nar o fluxo de uma página, determinando os 
pontos de entrada, o deslocamento de um 
design em função da localização de um eixo 
e a interação do espaço em branco com os ou-
tros elementos da página. (Ambrose & Harris, 
2009, p.117).
Na apresentação dos elementos do design, mesmo 
atendendo a apenas um tipo de grid, ele pode ser 
muito versátil e dinâmico, assim a revista pode ofe-
recer inúmeros tipos de distribuição de elementos 
na página sem distorcer a proporção previamente 
estipulada�
Dispor os principais elementos visuais nos focos 
ativos de uma composição ajuda a atrair a atenção 
para eles, conferindo certo equilíbrio ao todo da 
composição� Usar a regra dos terços para posicio-
nar elementos introduz espaçamento proporcional 
ao design, o que ajuda a estabelecer um equilíbrio 
esteticamente agradável� (AMBROSE & HARRIS, 
2009, p�50)�
Layout clássico (2:3)
Os grids que compõem o projeto podem ser desenha-
dos de diversas maneiras, podendo criar proporções 
diferenciadas aplicando alguns princípios matemáti-
cos� (AMBROSE & HARRIS,2009)� O modelo de layout 
40
clássico foi criado e desenvolvido pelo tipógrafo Jan 
Tshichold (1902-1974), este layout apresenta um 
princípio matemático que é realizado através de uma 
base em uma página nas proporções 2:3, sendo que 
a altura da mancha gráfica é a mesma que a largura 
de toda a página que foi aplicada este layout�
Da mesma maneira que a largura da margem interna 
torna-se a metade da largura da margem externa, 
conforme apresentada�
Figura 12: Fonte: Ambrose e Harris, Gavin e Paul. Grids. 1ª Edição. 
Porto Alegre: Bookman, 2009, p. 46.
O layout clássico pode ser desenvolvido utilizando 
linhas diagonais e paralelas dentro das páginas deli-
mitando cada módulo, mas em geral o mesmo traba-
lho destina-se a realizar este layout quando dividimos 
a página verso ou reto 19 em um grid 9x9, e a sua 
mancha gráfica que será utilizada no projeto será 
41
de apenas 2/3, ou seja, utilizar apenas 6 módulos 
de largura e 6 de altura, podendo ter um tipo de grid 
simétrico ou assimétrico dependendo do projeto�
Layout números Fibonacci
A sequência de números Fibonacci é um grid ba-
seado em unidades que pode ser utilizada a fim de 
obter proporções para a divisão harmônica de uma 
página, tendo como base as proporções da razão 
áurea 8:13� (Ambrose & Harris,2009)�
Na sequência Fibonacci, cada número é resul-
tado da soma dos dois números que o antece-
dem, e isso pode ser usado para determinar o 
valor de diferentes unidades em uma página. 
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233...
(AMBROSE & HARRIS , 2009, p.47).
O grid composto pelas unidades da sequência 
Fibonacci pode ser aplicados dividindo a página em 
tamanho e largura de módulos de modo que suas 
unidades em números se assemelhem exatamente 
aos números do padrão Fibonacci�
42
Figura 13: Fonte: Ambrose e Harris, Gavin e Paul. Grids. 1ª Edição. 
Porto Alegre: Bookman, 2009, p. 47.
Desta maneira, para deixar uma composição harmo-
niosa, as margens externas e internas, e os módulos 
e margens superior e inferior devem estar apresen-
tados nos números da sequência Fibonacci�
43
ESTUDO DE CASO
A comunicação visual de bulas de remédios: análise 
ergonômica da diagramação e forma tipográfica com 
pessoas de terceira idade� A comunicação visual é o 
meio necessário para transmissão de informações� 
Considerando-se que as bulas de remédios oferecem 
dificuldades de legibilidade para o consumidor da 
terceira idade propõe-se uma análisede sua com-
posição gráfica da bula de remédio feita por investi-
gação ergonômica textual quanto à sua adequação 
tipográfica e de diagramação.
O estudo realizou pesquisa descritiva com análise da 
bula de medicamento e de duas coletas de dados por 
entrevista individual com pessoas acima de 65 anos� 
A análise da bula do Medicamento X, conforme fato-
res de legibilidade, apresenta inadequação quanto à 
confusão entre letras e seu tamanho reduzido para 
a distância de leitura que são combinados com as 
alterações visuais do envelhecimento�
A primeira coleta confirma essas dificuldades de 
leitura da bula do Medicamento X� A segunda cole-
ta de dados consistiu da apresentação da bula do 
Medicamento X comparada com dois modelos que 
se diferenciaram quanto à tipografia Arial e Times 
New Roman, porém, com uma mesma diagramação, 
obedecendo aos fatores de legibilidade de texto de 
Dull (1995) � Os resultados de melhor legibilidade 
para a bula indicam o modelo com tipo Arial� Conclui-
se pela necessidade de equilíbrio entre diagramação 
44
e tipografia para uma comunicação visual de bulas 
de remédios�
A comunicação visual é o tema principal deste artigo, 
considerado meio necessário para transmissão de 
informações� A bula de remédio é imprescindível 
na vida do cidadão, principalmente, para os da ter-
ceira idade que são consumidores habituais deste 
documento técnico de consulta pública cujo texto 
possui uma forma de diagramação e tipografia ca-
racterísticas� No entanto, sob ponto de vista da área 
de comunicação visual, observa-se que as bulas de 
medicamentos, apesar de apresentarem todas as in-
formações necessárias ao usuário, conforme Portaria 
n�110 (Brasil, 1997), expedida pela Agência Nacional 
de Vigilância Sanitária, órgão do Ministério da Saúde, 
sua composição textual quanto aos aspectos tipo-
gráficos e de diagramação apresentam os seguintes 
problemas: tamanho da fonte, espaçamento entre 
as linhas do texto, organização textual, uso maciço 
de negrito e outros�
Tais problemas, acarretam dificuldade visual relacio-
nada à incompreensão do texto e cansaço da vista 
do leitor, razão pela qual o texto da bula de remédio, 
destinado à informação técnica do farmacêutico, 
do médico e, principalmente, do leigo, necessita de 
investigação quanto à sua adequação ergonômi-
ca visual� No caso do leitor leigo de terceira idade, 
principal consumidor de medicamentos, sua aco-
modação visual deficitária torna ainda mais difícil a 
visualização e compreensão da informação de bulas 
de remédios� Tendo isso em vista, propõe-se uma 
45
análise da composição gráfica da bula de remédio 
feita por uma |52| investigação ergonômica quanto a 
sua adequação tipográfica e de diagramação, direcio-
nado ao leitor de bula de remédio da terceira idade�
A partir desta proposta, tem-se como objetivo realizar 
estudo ergonômico de comunicação visual da bula de 
remédio como documento informacional mediante 
coleta de dados com pessoas da terceira idade a fim 
de propor adequações de tipografia e diagramação. A 
colaboração da tipografia e diagramação apresenta-
das em uma forma ergonômica correta no conteúdo 
de um texto informacional importante e necessário 
como o da bula de remédio que é fundamental à saú-
de do cidadão, facilita a visualização e compreensão 
textual pelo consumidor de terceira idade�
Fonte: infodesign.emnuvens.com.br
46
https://infodesign.emnuvens.com.br/public/journals/1/No.1Vol.12004/InfoDesign_v1_n1_2004_02_Fujita.pdf?download=1
O QUE É GRID
Grid é uma estrutura projetual, técnica e funcional, e 
na área do design gráfico tem o papel de auxiliar os 
profissionais na composição ordenada e racional dos 
elementos que compõem a peça, garantindo equilí-
brio visual, organização e uso correto de espaços�
A grid atua como um princípio que ordena a informa-
ção, fazendo com que seja inserido o que é neces-
sário com base numa estrutura “fantasma” existen-
te por trás dos restantes elementos� Tecendo uma 
comparação, pode-se dizer que a grid se assemelha 
à estrutura de um edifício, no qual serão montados 
os blocos para construção posteriormente, sendo 
estes blocos (em design gráfico) os elementos co-
locados e estruturados para tornar a comunicação 
mais simples compreensível e impactante (formas, 
linhas, imagens, texto, cor, alinhados como um es-
queleto pré-definido).
De acordo com esse princípio é possível atingir um 
resultado comunicacional mais objetivo, impesso-
al e sem haver a interferência dos sentimentos do 
designer, afastando o projeto do uso de técnicas 
persuasivas com um intuito mais comercial�
47
SAIBA MAIS
“Nos meados dos anos de 1950, o Estilo interna-
cional já havia se firmado como metodologia do 
desenho na Europa e nos Estados Unidos”� Os 
principais professores, como Emil Ruder, Armin 
Hoffman e Josef Muller-Brockman, pregavam a 
superioridade universal de suas soluções minima-
listas, rigidamente controladas pelo sistema grid, 
adotado como uma forma eficiente para unificar 
todos os elementos inseridos dentro destes siste-
mas de identidade visual das grandes empresas 
multinacionais e entidades empresariais� (Bomeny: 
2009, p� 204)�
Maria Bomeny, em sua tese de mestrado, afirma que 
o uso da grid dominou no princípio o design europeu 
e americano “transformando-se em uma maneira 
eficiente de unificar os programas de comunicação 
das grandes entidades empresariais� Tais empre-
sas conseguiram se beneficiar desses aspetos de 
unificação e otimização dos custos por meio dos 
sistemas de identidade baseados no grid, agilizando 
o processo pelas fórmulas pré-estabelecidas”�
Mesmo sendo utilizada com maior peso em design 
editorial, a grid é também usada em outras áreas de 
design, nos seus variados projetos, como em ele-
mentos da identidade visual institucional, nas emba-
lagens, no webdesign, no design de CD’s, sinais, etc�
48
Web design
Especialidade em que o foco é a criação de inter-
faces visuais, layouts, banners, projetos ou scripts 
para páginas da web (Internet), com o intuito de 
melhorar a estrutura dos sites, tendo em conta as 
informações que o cliente forneceu para atrair o 
seu público-alvo�
SAIBA MAIS
A introdução do conceito da grid constitui resulta-
do do desenvolvimento mundial pós-guerra� Nesta 
época a demanda na área de publicidade foi tão 
grande que era necessário instituir e desenvol-
ver um design raciona e funcionalista, poupando 
recursos materiais e tempo� A maior parte dos 
designers funcionalistas deste período trazia uma 
ideologia da escola alemã Bauhaus, introduzida 
em 1919 sob direção do arquiteto Walter Gropius, 
introduzindo na década vinte um o conceito de 
ordem e racionalismo, com intuito de colocar fun-
cionalidade e clareza em projetos�
Disponível neste link�
Grid
Estrutura projetual, técnica e funcional, e na área 
do design gráfico tem o papel de auxiliar os pro-
fissionais na composição ordenada e racional dos 
49
http://designculture.com.br/a-grid-como-principio-de-construcao-projetual
elementos que compõem a peça, garantindo equilí-
brio visual, organização e uso correto de espaços�
A introdução do conceito da grid constitui resultado 
do desenvolvimento mundial pós-guerra� Nesta épo-
ca a demanda na área de publicidade foi tão grande 
que era necessário instituir e desenvolver um design 
racional e funcionalista, poupando recursos materiais 
e tempo� A maior parte dos designers funcionalistas 
deste período trazia uma ideologia da escola alemã 
Bauhaus, introduzida em 1919 sob direção do arqui-
teto Walter Gropius, introduzindo na década vinte um 
o conceito de ordem e racionalismo, com intuito de 
colocar funcionalidade e clareza em projetos�
50
COMPOSIÇÃO BÁSICA DA 
GRID
A grid é composta por elementos, conforme mostra 
da figura abaixo. Destacam-se:
 ● Margem: espaço reservado para não ser ocu-
pado por nenhum dos elementos que compõem 
o projeto;
 ● Guias: são linhas de orientação para ordenar as 
partes da peça, auxiliando no controle de elemen-
tosfora do definido;
 ● Módulo: é a unidade que compõe a malha 
construtiva;
 ● Colunas: são espaços verticais nos quais são 
inseridos o texto e a imagem em causa;
 ● Marcador: são elementos que ajudam na na-
vegação do documento, tais como a numeração, 
cabeçalho, rodapé�
51
Coluna Marcador
MargemMódulo Guias
Figura 14: Fonte: Elaboração própria.
52
A GRID COMO PRINCÍPIO 
DE CONSTRUÇÃO
A grid pode ser considerada um princípio de orga-
nização de elementos, sendo fundamental para a 
composição espacial no design gráfico, bem como 
pode influenciar na maneira em que é realizada a 
organização de um quarto, da cama�
Ao construir um projeto gráfico é necessário realizar 
um estudo prévio do que será incluído (imagens, tex-
to, formas, efeitos) para então ser constituída a grade 
que auxiliará no resultado visualmente equilibrado�
Como um princípio de construção, a grid possibilita 
que tudo aquilo que está na página relacione-se en-
tre si, em razão das linhas de orientação, forma-se 
uma relação dos elementos, havendo uma harmonia 
visual que torna a comunicação mais fácil, fazendo 
com que o trabalho torne-se mais atrativo e simples�
São exemplos de grid para manter a identidade da 
publicação: revistas, jornais, livros� Existem elemen-
tos da grid que são mantidos e transmitem o mesmo 
conceito em todas as páginas (uniformidade, orga-
nização e limpeza no projeto são vistos em diversas 
edições)�
53
Figura 15: Exemplo. Fonte: Acervo do autor
Os softwares de paginação transformaram-se em 
pontos fundamentais para a criação de uma grid 
uniforme para projeto mais exigentes com relação 
à uniformização e padronização do conceito visual�
Diferentemente de uma tela, a grid pode ser utilizada 
e ter adicionada a criatividade para tornar-se uma 
peça mais atrativa e persuasiva. Seu uso não signifi-
ca que haja menor criatividade, uma vez que o toque 
criativo eleva o nível de um trabalho�
A grid pode ser considerada mais do que uma sim-
ples estrutura por trás de um resultado que se visa 
obter, pois constitui um meio pelo qual o profissional 
é auxiliado para ordenar elementos� Muitas vezes se 
vê um designer organizar objetos em sua mesa com 
54
recurso em um pensamento baseado na grid, sem a 
necessidade de haver linhas orientadoras visíveis�
O designer é capaz de olhar para informações e 
detectar a ausência de uma estrutura coerente que 
poderia auxiliar na composição de um texto, das ima-
gens em uma página�
Há designers que começaram com o uso da grid 
sem jamais tê-la conhecido, e posteriormente pude-
ram relacionar sua experiência prática com estudos 
teóricos� Em que pese essa ocorrência, é certo que 
o princípio da grid como base construtiva sempre 
existiu para orientar um pensamento, para obter re-
sultados harmoniosos e funcionais, para compor 
peças hierárquicas e equilibradas�
A grid está sempre presente, e mesmo quando o 
objetivo for desconstruir a ideia de composição recor-
rendo a grid, é importante estudar e conhecer muito 
bem como funciona esse princípio, pois somente 
depois de aprendê-lo será possível desconstrui-lo�
55
O USO DE “GRIDS”
A ferramenta grid foi criada na Suíça e criaram raízes 
na cultura do design de impressão, por outro lado, 
fatores como a inconsistência do CSS em todos os 
navegadores e a falta de formação entre os web de-
signers terminou por abafar a implementação das 
“grids”�
Com o desenvolvimento nos padrões web, houve 
o surgimento novamente do interesse nas “grids” 
entre os inovadores desta comunidade, aumentando 
a quantidade de estruturas de “grids” baseadas em 
CSS (como o 960 Grid System e Blueprint)�
Estes surgiram e ganharam popularidade rapidamen-
te, com base na redução significativa do tempo de 
desenvolvimento, bem como fornecendo a mesma 
estrutura e unidade que as “grids” proporcionaram 
aos layouts do universo “offline” durante tanto tempo.
A grid, além de fortalecer os seus layouts, também 
irá facilitar e unificar ambos os processos; design e 
desenvolvimento, facilitando a coerência entre os 
vários layouts, simplificando futura edição do site. 
Escolher e usar uma estrutura pré-fabricada parece 
ser uma resposta óbvia, mas estes nem sempre são a 
resposta apropriada, especialmente para um projeto 
mais simples�
O número de colunas na “grid” mestre e as folhas de 
estilo adicionais podem ser complexas demais para 
o que se busca obter, especialmente em se tratan-
56
do de um layout simples� Já a criação de uma grid 
personalizada dará ao projeto uma finalização ao 
design única que tanto se pretende�
Figura 16: Exemplo de grid em colunas. Fonte: Acervo do autor.
57
Figura 17: Exemplo. Fonte: Acervo do autor.
FIQUE ATENTO
Grid é uma malha que divide a tela em partes pro-
porcionais e possibilita a distribuição do conte-
údo de forma uniforme, proporcionando equilíbrio 
visual e estrutural� Construir um Design Responsivo 
se torna muito mais fácil se ele for apoiado em 
um Grid Flexível�
Clique aqui e assista o vídeo sobre criação de um 
grid responsivo�
58
https://www.youtube.com/watch?v=Ml36qp6Dmds
VANTAGENS E 
BENEFÍCIOS DE UMA 
“GRID”
O sistema de grid é positivo, pois permite projetar 
em proporções, balançando todos os diferentes ele-
mentos no design do layout�
Esta “grid” deve ser sempre muito flexível, de modo 
que se ajuste às necessidades das diferentes partes 
do site� Além disso, permite haver uma coerência, 
uniformidade, familiaridade�
Determinados sites podem funcionar com uma va-
riedade inúmera de layouts, porém, a maioria não 
funciona dessa maneira, de sorte que a grid pode 
auxiliar na estruturação dos diferentes layouts do 
site, facilitando codificar o projeto, aplicando o efeito 
modular de código CSS para toda a estrutura do site�
O uso de grids torna-se mais necessário conforme 
crescem os formatos, os meios e as tecnologias, 
como o “Responsive Design”, fazendo com o que o 
layout torne-se mais familiar e coerente�
São benefícios para o usuário da grid:
 ● Facilita a leitura e o escaneamento dos elementos;
 ● Melhora a experiência visual;
 ● Menos esforço cognitivo para interpretar o 
conteúdo;
59
 ● O olho humano percebe a distribuição proporcional 
dos elementos e associa as informações com maior 
facilidade�
Quanto aos benefícios para o designer, podemos 
citar:
 ● Rapidez para adicionar, alterar e mover elementos;
 ● Padrões de espaçamento e alinhamento propor-
cionam uma linha de trabalho uniforme;
 ● Linguagem visual comum em toda a página;
 ● Mantém a consistência do trabalho caso outro 
designer mexa no arquivo�
 ● Quanto aos benefícios para o desenvolvimento, 
destacam-se:
 ● É o caminho para que o layout que irá ao ar fique 
o mais pixel perfeito possível;
 ● Atualização do layout de maneira consistente;
 ● Rapidez na construção do front-end do site�
60
GRID RESPONSIVO
O design responsivo é aquele que consegue respon-
der ao tamanho da tela para se adequar da melhor 
forma� Ao invés de criar dois sites separados, sendo 
um para mobile (smartphones e tablets) e um para 
desktops, faz-se apenas um site adaptável a qualquer 
tela em que ele for carregado�
Responsivo
Que responde de forma rápida e adequação à 
situação, na informática é um site ou página da 
internet programada para apresentar diferentes 
configurações, adequando-se automaticamente 
formato do ecrã em que é exibida�
 ● Design adaptivo ou responsivo: o site é construído 
de modo a se adaptar da melhor forma possível à 
tela em que está sendo carregado� Utiliza-se um mix 
do design fixo e do design fluído;
 ● Design fluído ou líquido: este tipo de design se 
preocupa em construir tudo em porcentagens, nun-
ca utilizando números fixos na sua construção. O 
tamanho do site será, por exemplo, 80% da tela� Na 
TV ele ocupará 80%, no desktop 80% e no celular, 
80%� Na utilização desta técnica geralmente há uma 
versão para celular e uma para desktop da mesma 
forma, mas a vantagem é que dentro do desktop ele 
irá se adaptar melhor a váriostamanhos de tela, ao 
contrário do fixo, que será igual para todos;
61
Ao criar-se um layout responsivo, é necessário sa-
ber que tudo funciona com base em porcentagens 
(%)� O Grid Fluído, como o nome diz, sempre dará a 
impressão de ocupar toda a tela�
Mas, qual o melhor formato?
O formato 960gs foi bastante utilizado ao longo 
dos anos, quando a resolução mais popular era 
1024x768px� Atualmente 13,28% dos monitores uti-
lizam 1024x768px como resolução�
A grande maioria utiliza 1366x768px como resolu-
ção, isto é, utilizar o Grid 960g pode tornar o design 
limitado e preso a uma grade ultrapassada� O mais 
comum, tem sido utilizar uma largura de 1140px, para 
que o grid se adapte bem às maiores resoluções de 
monitores�
A razão para trabalhar com 12 colunas, que é o for-
mato mais utilizado, se deve em razão da flexibilidade 
proporcionada e por ser capaz de dividir o layout 
uniformemente. É possível dividir 12 por 2, 3, 4 e ter 
uma serie de modulações disponíveis (2 x 6, 3 x 4) 
e também em várias outras combinações� Se dividir 
12 colunas por 2, conseguirá ter 6 conjuntos de 2 
colunas sem que reste nenhuma coluna�
O número de colunas pode variar de projeto para pro-
jeto� Quanto maior o número de colunas, (14 ou 21) 
maior será a quantidade de possibilidades para divi-
dir o layout� Geralmente esse tipo de Grid é utilizado 
quando se tem muito conteúdo editorial e o design é 
projetado com uma largura de 1140px ou mais�
62
MALHA GRÁFICA
Malhas gráficas (ou grids) são matrizes com base ge-
ométrica, cuja função é a de estruturar o layout de pe-
ças de design (digitais, impressas, tridimensionais)�
Em produtos online, o uso de grids tem por objetivo 
orientar o equilíbrio e a consistência de modelos visu-
ais, principalmente em projetos que envolvem grande 
número de informações e processos complexos de 
desenvolvimento, atualização e uso�
As malhas gráficas auxiliam a organizar a apresenta-
ção, a localização do conteúdo e das funcionalidades, 
permitindo aos usuários ter um melhor controle da 
sua experiência de uso� Também facilitam o posicio-
namento dos elementos, seja em diversos pontos da 
mesma página, seja entre diferentes telas ou páginas�
Figura 18: Exemplo. Fonte: Acervo do autor.
63
Estas duas páginas mostram uma aplicação original 
de malha gráfica. Na página principal, os links da bar-
ra de navegação do alto associam-se diretamente à 
diagramação das chamadas embaixo� A associação 
é reforçada também pelas linhas que definem as 
colunas de textos e pelas cores associadas a cada 
área principal�
Os sistemas das malhas são compostos de uma 
série de colunas, com larguras iguais ou diferentes; 
espaços entre colunas e de linhas de base (para ali-
nhamentos horizontais de elementos)�
Estas referências orientam o posicionamento de 
elementos das interfaces digitais, ajudam na com-
posição dos elementos e no estabelecimento de 
conjuntos consistentes entre páginas, bem como 
na construção da narrativa de cada usuário�
A malha gráfica pode dispor os elementos do layout 
da interface de diversas maneiras:
 ● Layout líquido: se adapta às diferentes resoluções 
de tela, mas nem sempre é otimizado para disposi-
tivos móveis;
 ● Portais com grande volume de acessos diários, 
tais como: Amazom�com e Americanas�com prefe-
rem usar este modelo de configuração para incluir o 
maior número possível de compradores�
Com o uso de telas mais largas, o design líquido 
pode ajudar a explorar melhor o espaço disponível�
64
 ● Layout com adaptação da estrutura visual a di-
versas resoluções de tela (design responsivo): a 
adaptação dos elementos editoriais e funcionais 
ao formato permite que cada dispositivo seja usado 
para a otimizar suas características;
 ● Posicionamento centralizado do conteúdo: a loca-
lização centralizada do conteúdo entre duas colunas 
mais estreitas pode ser necessária em sites com 
longas barras de navegação e pequenas unidades 
de conteúdo (ou publicidade) posicionadas nas la-
terais� Faz-se necessário ter cuidado para manter os 
espaços de respiração que valorizam cada elemento� 
Exemplo: National Archives;
 ● Posicionamento da navegação à esquerda da tela: 
permite que os elementos se localizem de acordo 
com o modelo mental da maioria dos usuários (de 
cultura ocidental)� Este modelo é mais tradicional e 
talvez o mais usado até agora, e pode associar o site 
a modelos não tão inovadores� Pode também estar 
associado à confiabilidade e ao conforto de leitura. 
Exemplo: Wikipedia;
 ● Posicionamento da navegação à direita da tela: atu-
almente é mais comum situar o conteúdo à esquerda 
da tela, com as barras de navegação, publicidade e 
conteúdo de apoio à direita� Sites de notícias e blogs 
costumam adotar este formato, bem como sites que 
não podem ficar restritos a uma navegação no alto.
65
Forma e Função de uma malha
Há aspectos estéticos, editoriais e funcionais que 
influenciam na criação de uma malha. Ao visualizar 
uma página ou interface, o usuário nota a sua forma 
e cria uma ideia geral de seu conteúdo e de suas 
funcionalidades�
A experiência de ver e usar leva o usuário a entrar 
em contato mais profundo com os condicionantes 
da forma (conjunto de forças que atuam para que 
um sistema tenha uma configuração).
Uma malha pode ordenar um conjunto de elementos 
em um determinado espaço, mas a ordenação não 
é obrigatória�
O princípio conceitual-funcional é mais um siste-
ma de pensamento visual do que um sistema de 
alinhamentos e seu uso facilita o posicionamento 
dos elementos da interface e do conteúdo em coor-
denadas definidas, além de permitir que haja sentido 
de localização para o deslocamento dos usuários 
nos diferentes canais e seções�
66
Figura 19: Exemplo. Fonte: Acervo do autor.
SAIBA MAIS
Embora o layout do site abaixo tenha sido redese-
nhado, as três telas abaixo podem ilustrar o uso 
consistente de malha� A coluna de texto à direita 
da página que abre a seção (imagem do alto) é 
mais estreita, com a publicação de links laterais� 
Diferentes cores (amarelo, verde, vermelho e azul) 
sinalizam as quatro principais áreas de conteú-
do� Os sublinks relativos a cada uma destas áreas 
ocupam o espaço imediatamente abaixo do link 
principal, fortalecendo visualmente sua associação 
visual ao título da página, situado na área com 
fundo de cor logo abaixo da imagem�
67
Figura 20: Exemplo. Fonte: Acervo do autor.
A mesma coluna se alarga nas páginas mais internas 
(imagens abaixo), valorizando o conteúdo do que 
os links e elementos de navegação� A seção a que 
cada página pertence está diferenciada na barra de 
navegação, para facilitar a localização dos usuários 
dentro da estrutura�
Figura 21: Exemplo. Fonte: Acervo do autor.
68
O sentido de localização interno também é facilitado 
pela barra de links (“breadcrumb”) que substitui o 
título da seção nas páginas mais internas A divisão 
da interface em diversas colunas que sinalizam o 
acesso às funcionalidades e ao conteúdo, ajuda a 
navegação� Os espaços em branco também têm 
função de auxílio, pois buscam atingir o equilíbrio 
entre os elementos dominantes e os elementos mais 
discretos, como entrelinhas, legendas, espaços entre 
colunas�
Figura 22: Exemplo. Fonte: Acervo do autor.
Especificidades da malha 
gráfica digital
O design de malhas para a web e dispositivos móveis 
de modo geral é diferente do das malhas usadas 
para produtos gráficos impressos. A diferença em 
questão ocorre em razão da grande quantidade de 
69
dispositivos e canais de acesso à web, com diferen-
tes tamanhos, resoluções de tela, e para adaptar-se a 
estas condições, as malhas gráficas para interfaces 
de dispositivos digitais precisam se flexibilizar.
Os usuários podem personalizar suas configurações, 
como as barras dos browsers, ou o uso de dois mo-
nitores, ou telas ampliadas, afetando o modo como 
as malhas aparecem�
O tamanho dos pixels pode variar, o que cria diver-
sas variações de layouts para diferentes usuários,conforme o tipo de dispositivo utilizado�
Diferentes tipologias não renderizam de modo homo-
gêneo nas telas de todos os dispositivos� Há usuários 
que ampliam ou reduzem a tela default, o que gera 
inúmeras variações visuais, cujo layout nem sempre 
é controlado�
Renderizar
Renderização é o processo pelo qual se obtém o 
produto final de um processamento digital qual-
quer� Este processo aplica-se essencialmente em 
programas de modelagem 2D e 3D, bem como áu-
dio e vídeo�
Fatores que condicionam a 
criação da malha
A criação de malhas, além de visar à concepção de 
modelos para atender aos condicionantes visuais e 
70
conceituais, também considera aspectos conceitu-
ais e funcionais ligados aos resultados que se visa 
alcançar�
Diante da necessidade de uma interface que dê valor 
às imagens de paisagens, com navegação distribuída 
entre um menu principal, outro secundário, e mais 
textos e imagens pequenos, como o espaço da tela 
pode ser organizado?
É possível atender à citada necessidade de várias 
maneiras� A escolha de soluções depende do grau 
de prioridade dos objetos (quais devem ficar mais ou 
menos destacados?), das condições de usabilidade 
(qual a sua localização e tamanho?), das conven-
ções consolidadas em relação a estes elementos, 
que podem condicionar seu posicionamento e di-
mensionamento (onde a maioria dos usuários está 
acostumada a encontrá-los?)�
Para um site genérico é possível utilizar uma base de 
960px, com 12 e 16 colunas, como as encontradas no 
site 960 Grid System� Em caso de sites responsivos, 
pode-se optar por uma malha de 1200 ou 1280 dpi, 
como encontramos em http://1200px.com/�
Pode-se utilizar os modelos responsivos baseados 
nas malhas do Bootstrap 3 para desktop, com base 
em 1170px� No caso de aplicativos móveis, pode-se 
usar malhas baseadas em 4 ou 8 colunas. Diversos 
sites oferecem arquivos PSD para a formatação básica 
no Photoshop.
71
A consistência e a harmonia que se originam da 
composição equilibrada conferida pelas malhas 
colaboram para uma experiência de uso em que a 
interface, com todos os seus atributos de qualidade, 
somados às ações de cada usuário, estabelece uma 
interlocução produtiva�
72
GRIDS PARA DESIGN 
RESPONSIVO
Há quem pense que o responsável pela criação de 
um Design Responsivo seja apenas o time de design 
(Ai ou UID), que faria a entrega dos PSD’s com os 
layouts em pelo menos três resoluções, para desktop, 
tablet e mobile� Na realidade, o responsável por fa-
zer do design responsivo ou não é o desenvolvedor 
front-end�
Quando não se tem o desenvolvedor front-end na 
agência, a comunicação entre os times de design 
precisa ser perfeita, caso contrário, há grandes chan-
ces de um resultado sair abaixo do esperado�
Tecnicamente falando, design 
responsivo é um conceito, não é 
uma técnica
Figura 23: Exemplo de design responsivo. Fonte: Acervo do autor.
73
O design responsivo representa a adaptação de uma 
interface a qualquer resolução de tela, adaptando a 
experiência de navegação conforme as necessidades 
dos usuários e ao tipo de mídia� Ele é o melhor amigo 
da experiência do usuário�
Utiliza medidas relativas para que o layout de um site 
possa aumentar ou diminuir de tamanho de acordo 
com o tamanho da área de visualização�
Na prática, é possível ter todo seu conteúdo adaptado 
a uma resolução de mobile, por exemplo, e mesmo 
assim ele pode não ser responsivo� Isso ocorre por-
que se o design fluído de um blog de receitas so-
mente diminuir o site para caber em uma resolução 
mobile, o sidebar encolherá e ocupar cerca de 30% 
da tela do smartphone, e o restante do conteúdo 
ocupará os 70% restantes, caracterizando-se uma 
experiência de uso negativa�
O design responsivo atuaria com o papel de adaptar o 
conteúdo para uma melhor experiência, transforman-
do o sidebar em um menu de navegação, liberando 
espaço para o conteúdo do blog, isto é, encolhe o 
conteúdo e adapta os elementos para que o usuário 
acesse o melhor conteúdo e navegação�
Para tanto, é necessário ter técnica, sendo a melhor 
delas o design responsivo fluido, pois é responsivo 
(garante melhor experiência ao usuário) e utiliza a 
técnica de design fluido na construção da base em 
HTML e CSS, garantindo que o conteúdo seja flexível.
74
Como escolher o número de 
colunas?
A escolha do número de colunas depende do pro-
jeto� O formato mais utilizado é o de 12 colunas, 
sendo a razão para trabalhar com ele a flexibilidade 
proporcionada e por ser capaz de dividir o layout 
uniformemente�
É possível dividir 12 por 2,3,4 e ter uma serie de modu-
lações disponíveis (2 x 6, 3 x 4) e também em várias 
outras combinações�
Dividindo 12 colunas por 2, haverão 6 conjuntos de 
2 colunas sem que reste nenhuma coluna�
O número de colunas pode variar de projeto para pro-
jeto, sendo que quanto maior o número de colunas, 
maior será a quantidade de possibilidades para dividir 
o layout� Geralmente esse tipo de Grid é utilizado 
quando se tem muito conteúdo editorial e o design 
é projetado com uma largura de 1140px ou mais�s
Calculando as porcentagens
Os desenvolvedores da PopUp Design explicam de 
um jeito bem fácil como calcular a porcentagem de 
um elemento� Se temos as dimensões abaixo no 
Photoshop:
75
Figura 24: Exemplo. Fonte: Acervo do autor
O wrap nesse caso é o contexto� Para calcular o si-
debar (o objeto), fazemos assim: sidebar ÷ wrap = re-
sultado� Para descobrir a porcentagem é necessário 
multiplicar o resultado por 100� No caso do sidebar 
temos 300 ÷ 960 = 0�3125, e multiplicando o resul-
tado por 100, temos finalmente nossa porcentagem, 
que é 31�25%�
76
GRID DOS DESIGNERS
Há diversas formas de se criar um Grid de marcação 
(o qual se sobrepõe sobre seu design no Photoshop 
ou qualquer outra ferramenta visual, quando não se é 
programador e não criará um Grid em CSS e HTML), 
sendo possível criá-lo manualmente, utilizar Actions 
no Photoshop entre outras maneiras�
Para construir um Grid Flexível, quando se desenvol-
ve um layout responsivo, a parte mais difícil acaba 
ficando para os desenvolvedores front-end. É preci-
so converter pixels em porcentagens e EM’s e fazer 
cálculos�
Figura 25: Exemplo. Fonte: Acervo do autor.
Gridpak é um excelente gerador de Grid Flexível que 
pode evitar alguns cálculos� Basta digitar a quanti-
dade de colunas que se deseja, o valor do padding 
entre as colunas e o valor da calha. Define-se um 
breakpoint e exporta-se seu Grid em PNG, CSS entre 
outros formatos�
O número de colunas de um Grid costuma diminuir a 
medida que a resolução de tela diminui, e isso ocor-
re porque se diminuir o tamanho da tela, há que se 
77
aumentar o tamanho dos elementos, e um Grid com 
poucas colunas acaba aumentando a proporção dos 
elementos�
Se destina a criar um espaçamento entre seus 4 lados e a área de 
conteúdo do box. As propriedades para declarar padding, definem 
a uma dos quatro espaçamentos entre a área das bordas e a área 
de conteúdo de um elemento HTML e são as listadas a seguir:
Padding-top Se destina a criar um espaçamento define o 
interno em um um espaçamento
Padding-right define o espaçamento à direita;
Padding-botton define o espaçamento inferior;
Padding-left define o espaçamento à esquerda;
Padding maneira abreviada para definir todos os 4 
espaçamentos�
Tabela 1: Padding. Fonte: Elaboração própria.
O mais comum é utilizar sempre um número par para 
as colunas� Sendo assim, para tablets, o número de 
colunas costuma ser de 8 e para smartphones 6, 
sendo que 8 e 6 colunas permitem uma serie maior 
de modulação disponível�
Será que o Grid limita a criatividade? Não, além de 
trazer organização e clareza para o design, nada im-
pede que sejam criadas áreas no layout que podem 
ser “Grid Free”, isto é, espaços para aplicar uma ilus-
tração ou algo do tipo�
O Grid também pode ser usado em qualquer formato 
de design, seja ele horizontal, vertical� Ele não deve 
limitar a criatividade, sendo apenas uma ferramenta 
paramelhorar o seu trabalho�
78
GRID SYSTEM DO BOOTSTRAP
O Bootstrap funciona com um sistema de grids (gra-
des) para posicionar os elementos na página� Esse 
mecanismo funciona tal qual uma espécie de tabela 
abstrata, sendo responsivo (responsive), orientado a 
dispositivos móveis (mobile first) e se ajusta de acor-
do com a tela (fluid), quando ela muda de tamanho 
ou de orientação�
FIQUE ATENTO
É extremamente importante que você entenda, 
e domine, esse grid system para trabalhar bem 
com o Bootstrap� Para tanto, clique aqui e assista 
o vídeo de sugestão�
79
https://www.youtube.com/watch?v=2t9mKvCu2AQ
MOBILE FIRST
Mobile First é um conceito que se aplica aos proje-
tos web, tendo por foco inicial de arquitetura e de-
senvolvimento os dispositivos móveis e desktops� 
Essa técnica tem se tornado muito popular entre os 
profissionais de marketing e tecnologia. O conceito 
de Mobile First foi elaborado por Luke Wroblewski�
Em projetos web o foco precisa estar no usuário para 
que possa ter a melhor experiência possível e cumpra 
sua missão no website� Ao realizar um projeto primei-
ramente para mobile é necessário saber ser sucinto 
e fazer uso da melhor maneira dos poucos espaços 
disponíveis nas telas dos dispositivos móveis, auxi-
liando os usuários a realizar suas desejadas tarefas�
O crescimento móvel no Brasil é uma realidade e os 
projetos web precisam aplicar o conceito de Mobile 
First para explorar seu potencial e facilitar, além de 
uma melhor experiência para os usuários, o uso 
da segunda tela pelos usuários� Segunda Tela (ou 
Second Screen) é um termo que se refere a um dis-
positivo eletrônico adicional (smartphone ou tablet) 
que permite ao consumidor interagir com o conteúdo 
que está a consumir, como filmes, música ou jogos 
eletrônicos.
Se os websites são projetados com o conceito de 
Mobile First, a interação dos usuários com suas in-
terfaces é facilitada e torna-se agradável quando 
a atenção é dividida com outras telas como a TV� 
80
O conceito e uso do Mobile First deve ir além dos 
aplicativos�
O Bootstrap é Mobile First
Isso significa que o framework assume, inicialmente, 
que a tela é de um dispositivo móvel, com tamanho 
pequeno, dessa forma, ele adapta todos os conteú-
dos para o tamanho menor�
Framework
Um framework em desenvolvimento de software, 
é uma abstração que une códigos comuns entre 
vários projetos de software provendo uma funcio-
nalidade genérica� Um framework pode atingir uma 
funcionalidade específica, por configuração, duran-
te a programação de uma aplicação� Ao contrário 
das bibliotecas, é o framework quem dita o fluxo 
de controle da aplicação, chamado de Inversão 
de Controle�
Em seguida, verifica o tamanho real da tela e ajusta 
os itens para que fiquem posicionados corretamen-
te, conforme o tamanho e a resolução� Ao projetar 
e implementar o layout e o design do site (ou app) é 
necessário projetar primeiro para as telas menores 
(celulares), depois para telas médias (tablets) e, por 
fim, para telas maiores (desktops, etc.). Esta é à base 
do conceito de Mobile First�
81
Container
No Bootstrap, existe o conceito de container� O con-
tainer é uma div, a qual garante que o layout ficará 
alinhado na página, e com margens para as laterais� 
Também centralizará o conteúdo na tela do browser 
e, dependendo do tamanho da tela, o container defi-
nirá automaticamente as larguras do layout para que 
o conteúdo seja melhor visualizado�
É preciso utilizar um container para englobar o po-
sicionamento de todos os elementos do layout da 
página� Dependendo do dispositivo e da orientação 
tela, o container poderá ficar com o tamanho de acor-
do com a tabela abaixo:
Figura 26: Medidas dos dispositivos. Fonte: Acervo do autor.
Grid System, ou o Bootstrap Grid
O Bootstrap possui um mecanismo de grades (Grid 
System) para calcular as posições dos itens na tela�
Bootstrap
É um mecanismo de grades (Grid System) para 
calcular as posições dos itens na tela� Esse grid 
system é responsivo, mobile first e flexível. Ele 
pode aumentar, ou diminuir, conforme a tela mude 
82
(ou o viewport)� Para isso, ele usa aquelas classes 
e conceitos que você viu anteriormente, além de 
algumas combinações para gerar layouts mais 
semânticos�
O grid system é responsivo, mobile first e flexível, 
podendo aumentar, ou diminuir, conforme a tela mude 
(ou o viewport), mas para fazê-lo, utiliza aquelas 
classes e conceitos que vistos anteriormente, além 
de algumas combinações para gerar layouts mais 
semânticos.
Figura 27: Exemplo de Bootstrap. Fonte: Acervo do autor.
Neste exemplo tem-se:
Cada linha cinza-escuro é uma row, ou seja, uma div 
com a class=”row” (mas pode ser qualquer outra tag 
de estrutura)�
Cada item dentro das rows é uma column, ou seja, 
uma div com um prefixo de coluna (class=”col-md-1″, 
como na primeira linha por exemplo)� A primeira linha 
tem doze colunas de tamanho unitário (12 * 1= 12)� 
83
A segunda tem duas colunas tamanhos 8 e 4 (8 + 4 
= 12)� A terceira tem três colunas de tamanho quatro 
(3 * 4 = 12)� E a última tem duas colunas de tamanho 
6 (6 + 6 = 12)�
REFLITA
Lembre-se que o grid system padrão do Bootstrap 
utiliza 12 colunas para criar o container (é possível 
mudar isso, criando uma build personalizada do 
Bootstrap)�
Para adaptar um design de website, ou de web 
app, ao Bootstrap você pode pegar o projeto desse 
design e dividir em 12 partes iguais verticalmente� 
Depois, basta fazer os ajustes necessários para 
que a estrutura se encaixe no grid�
O maior benefício disso é que deixa os layouts ma-
tematicamente corretos, e flexíveis para qualquer 
tamanho de tela�
84
LAYOUTS COM O 
BOOTSTRAP
Bootstrap inclui um sistema de grid fluido responsi-
vo, mobile first que balança apropriadamente até 12 
colunas como dispositivo ou viewport de tamanho 
aumentado. Possui classes predefinidas para opções 
de layout fácil, assim como mixins poderosos para 
geradores de layouts mais semânticos�
Viewport
O viewport é a área onde seu website aparece. É a 
área branca da janela quando você abre o browser� 
O viewport sempre vai ter o tamanho da janela� 
Mas a forma como os elementos são renderizados 
vai depender bastante do dispositivo�
O sistema de grid é utilizado para a criação de layout 
de páginas através de uma série de linhas e colunas 
que abrigam seu conteúdo� A forma de trabalho do 
sistema de grid do Bootstrap:
 ● Linhas (row) devem estar localizadas dentro de 
um container (largura fixa) ou container-fluid (largura 
cheia) para alinhamento e padding adequado;
 ● Usar linhas para criar grupos horizontais de 
colunas;
 ● Conteúdo deve ser localizado dentro das colunas, e 
apenas colunas podem ser filhas imediatas de linhas;
85
 ● Classes de grid predefinidos como.row e.col-xs-4 
estão disponíveis para fazer rapidamente layouts em 
grid� Less mixins também podem ser usados para 
mais layouts semânticos;
 ● Criar colunas calhas (lacunas entre colunas com 
conteúdo) através de padding� Esse padding é des-
locado em linhas para a primeira e última coluna por 
margem negativa nos rows;
 ● A margem negativa se deve porque os exemplos 
abaixo estão sem endentação (recuo). É dessa forma 
que o conteúdo dentro de colunas de grid é alinhado 
com conteúdo sem grid;
 ● Colunas de grid são criadas em um número espe-
cífico de 12 colunas disponíveis que você pretende 
o que desejar abranger� Por exemplo, três colunas 
iguais faria uso de três�col-xs-4;
 ● Se mais que 12 colunas são colocadas dentro de 
uma única linha, cada grupo de colunas extras se-
rão, como uma unidade, colocadas dentro de uma 
nova linha;
 ● Classes de grid aplicadas para dispositivos com 
largura de tela maiores ou iguais aos tamanhos de 
ponto de parada, e sobrescreve classes de grid di-
recionadas em dispositivos menores� Portanto, por 
exemplo, aplicando qualquer classe�col-md-* para 
um elementos não irá apenas afetar seu estilo em 
dispositivos médios mas também em dispositivos 
grandes se uma classe�col-lg-*não está presente�
86
São os principais tipos de layout:
Figura 28: Principais tipos de layout. Fonte: Acervo do autor
SAIBA MAIS
É possível criar diversos tipos de layouts usando 
as combinações de rows, columns e classes de 
prefixo, tudo depende de um bom protótipo e da 
marcação correta para encaixar os itens no grid 
system do Bootstrap�
Para conhecer os tipos de layouts que existem, 
clique aqui�
87
https://metamidia.com.br/blog/tipos-de-layout-de-sites-para-empresas.html
ESTUDO DE CASO
A importância do web site 
responsivo para a publicidade 
das marcas: estudo de caso do 
site da marca C&A
Os web sites responsivos são sites que se adap-
tam nas plataformas desktop, tablet e smartphone� 
Traçou-se a história da marca e sua relevância para 
o segmento de lojas de departamento do país, além 
de conceituar o comportamento do consumidor na 
internet� Através do método de pesquisa qualitativa, 
o focusgroup, constatou-se que os sites adaptáveis 
em dispositivos móveis transmitem com maior fa-
cilidade as informações, a importância da inovação 
das marcas junto com a tecnologia e a decisão de 
compra dos consumidores na internet se baseia mui-
to na funcionalidade do site�
Ao elaborar um projeto de web site responsivo é ne-
cessário o planejamento do layout adequado para 
todas as plataformas� Os layouts de sites cada vez 
mais se tornam descomplicados e interativos, dan-
do ênfase nos produtos e serviços que oferecem� A 
dinâmica do web site responsivo é fundamental para 
a navegabilidade nas plataformas, pois o usuário que 
estiver acessando de um smartphone não quer se 
sentir oprimido em deixar de realizar uma interação� 
Portanto as mesmas funções do site deverão estar 
88
dispostas em todas as plataformas sem perder a 
identidade da marca no layout�
Com o surgimento da era digital, o ser humano pas-
sou a desenvolver habilidades que se tornaram re-
levantes para a obtenção de conteúdo em um curto 
espaço de tempo� A facilidade do acesso à informa-
ção é um dos fatores significativos para que cada 
vez mais usuários integram-se na era da internet� 
Com a popularização da internet, empresas viram 
oportunidades de se projetarem no mercado digital� 
Porém, como o espaço da internet é para todos, mui-
tos concorrentes se lançaram também e métodos 
da comunicação digital começaram a ser estudados 
para se obter destaque no processo de escolha dos 
consumidores� O comércio social não está relacio-
nado apenas a motivar as pessoas a falarem sobre 
sua marca nas redes sociais, mas incentivá-la a fa-
zerem compras por meio do canal social� Sobre a 
importância das marcas como a C&A estarem no 
meio digital, constatou-se diferentes opiniões� Para 
o Participante 1, um dos aspectos de relevância é “ 
facilitar a vida das pessoas, para gente que não quer 
ou não pode ir na loja comprar”, um dos principais 
benefícios é a comodidade que a loja virtual oferece 
aos clientes e também a acessibilidade do produto 
para pessoas que moram em cidades que não há 
a loja� Completando a percepção, o Participante 2 
afirma “eu acho muito básico até para lojas peque-
nas e locais ter um site, por exemplo, eu quando vou 
comprar uma coisa que eu sei que tem na cidade 
89
antes de sair de casa, acesso o site e vejo se tem o 
que realmente procuro�”
Ao analisar as respostas dos integrantes do grupo 
focal é Torres (2009) explica que na busca por infor-
mação, o consumidor sabe, por experiência, que a 
Internet é uma grande fonte de informações, e que 
as ferramentas de busca são a porta de entrada para 
encontrá-las� Assim, toda vez que necessita de uma 
informação, o consumidor elabora uma pergunta, 
na forma de um conjunto de palavras, e por meio de 
uma ferramenta de busca faz a pesquisa e utiliza 
os resultados para se informar e instruir� Portanto, o 
ambiente digital é uma porta de entrada para intera-
ção de marca com o consumidor comunicando que 
a empresa se importa e está disposta a responder 
qualquer dúvida perceptível que os consumidores ao 
sair de casa para efetuar possíveis compras, primei-
ramente pesquisam nos sites das empresas se con-
tém o produto específico e qual seu custo. Ou seja, o 
consumidor faz um planejamento de pesquisa antes 
de sair para procurar nas lojas físicas, possibilitando 
efetuação a compra com rapidez e excelência�
As marcas que apostam no marketing digital devem 
acompanhar cada evolução para não se desatualizar� 
A venda de dispositivos móveis foi tão voluptuosa 
e repentina que os mecanismos de navegabilidade 
dos sites tiveram que ser alterados�
Os usuários digitais procuram respostas rápidas para 
o que desejam saber, portanto o site precisa estar 
apresentado com layout leve, flexível e que permite o 
90
fácil acesso as informações, para que o usuário não 
interrompa sua busca� Para analisar como funciona 
o web site responsivo da C&A foi necessário utilizar a 
comparação do site da Grazziotin que não se adapta 
aos dispositivos móveis e entender a importância da 
responsividade em sites de lojas de departamento 
no ambiente digital�
Fonte: bibliodigital.unijui.edu.br�
91
http://bibliodigital.unijui.edu.br:8080/xmlui/bitstream/handle/123456789/3813/Ediana%20Tanise%20Steffen.pdf?sequence=1
Referências Bibliográficas 
& Consultadas
ALVES, Marcia Nogueira� Mídia e produção au-
diovisual: uma introdução� Curitiba: InterSaberes, 
2012�
ALVES, Marina� Criação Visual e Multimídia� São 
Paulo: Cengage/ Thonson learning, 2010�
ARNALD, Dana� Introdução à história da arte� São 
Paulo: Ática, 2008�
BAER, Lorenzo� Produção gráfica� São Paulo, 
SENAC: 2009�
BENJAMIN, Walter� “Visão do livro infantil”� 
In.:Reflexões sobre a criança, o brinquedo e a edu-
cação� São Paulo: Duas Cidades, Ed� 34, 2002�
BERTOMEU, João Vicente Cegato� Criação na pro-
paganda impressa� São Paulo: Futura, 2002�
BIGAL, Solange� O que é criação publicitária ou (O 
estético na publicidade)� 2� ed� - São Paulo: Nobel, 
1999�
BOMENY, Maria H� W� O panorama do design grá-
fico contemporâneo� Tese para obtenção do título 
de Doutor�
Faculdade de Arquitetura e Urbanismo de São 
Paulo - FAUSP, 2009�
BUORO, Anamelia Bueno� O olhar em construção: 
uma experiência de ensino e aprendizagem da arte 
na escola� 6�ed� São Paulo: Cortez, 2003�
CESAR, Newton� Direção de arte em propaganda� 
Brasília: Senac, 2008�
___________� Os primeiros segredos da direção de 
arte� São Paulo, Ed� Senac, 2011�
COBRA, Marcos, URDAN; Andre Torres Marketing 
Básico. 5�ed - São Paulo - Atlas 2017�
COLLARO, Antonio Celso� Produção gráfica: arte 
e técnica na direção de arte� São Paulo: Pearson 
Prentice Hall, 2012�
COOPER, Alan� The inmates are running the 
asylum: why hightech products drive us crazy 
and how to restore the sanity. Indianapolis: Sams 
Publishing, 1999�
DONDIS, Donis A� A sintaxe da linguagem visual� 
São Paulo: Martins Fontes, 1991
DORNELLES, Cassio Sclovsky Grinberg� Relações 
Públicas: construindo relacionamentos estratégi-
cos, Porto Alegre, EDIPUCRS, 2016�
GIULIANI, Antonio Carlos� Marketing contempo-
râneo: novas práticas de gestão: com estudos de 
casos brasileiros� São Paulo - Saraiva, 2016�
GOLEMANN, Daniel� Inteligência Emocional: Teoria 
Revolucionária� Rio de Janeiro: Editora Objetiva, 
1995�
KAPFERER, Jean-Noel; As Marcas, capital da 
empresa: criar e desenvolver marcas fortes� Porto 
Alegre: Bookman, 2003�
KELLER, K� L�; MACHADO, M� Gestão estratégi-
ca de marcas� São Paulo: Pearson Prentice Hall, 
2006�
KOTLER, Philip� Administração de marketing� Trad� 
Bázan Tecnologia e Lingüística� 2� ed� São Paulo: 
Prentice Hall, 2000�
KRESS, G� VAN LEEUWEN� Reading images: the 
grammar of visual design� London; New York: 
Routledge, 2006 [1996]�
LEITE, Francisco; BATISTA, Leandro Leonardo� A 
publicidade contra-intuitiva e o efeito ricochete� 
Revista Galáxia, São Paulo, nº15, 2008�
LUPTON Ellen� Intuição, Ação, Criação� GG Brasil 
Editora, 2013�
__________ Ellen� Pensar com tipos� São Paulo: 
Cosac Naify, 2006�
McLUHAN, M� Os meios decomunicação como 
extensões do homem� SP: Cultrix, 1971�
MONNERAT, Rosane Mauro� A publicidade pelo 
avesso: propaganda e publicidade, ideologias e mi-
tos e a expressão da idéia: o processo de criação 
da palavra publicitária� Niterói: Editora EdUff, 2003�
PEDROSA, Israel� Da Cor à Cor Inexistente� Senac, 
São Paulo: 2010�
PERASSI, R� Do ponto ao pixel: sintaxe gráfica no 
videodigital� Florianópolis, SC: CCE/UFSC, 2015�
PINHEIRO, A�C�F�B�; CRIVELARO, M�Conforto 
Ambiental - Iluminação, Cores, Ergonomia, 
Paisagismo e Critério para Projeto. Érica. Ambrose 
e Harris, Gavin e Paul� Grids� 1ª Edição� Porto 
Alegre: Bookman, 2009�
RABAÇA, Carlos A� e BARBOSA, Gustavo 
Guimarães� Dicionário de Comunicação� 2a� ed� 
revista e atualizada� Rio de Janeiro: Ed� Campus, 
2001�
Rocha, João Carlos� Cor luz, cor pigmento e os 
sistemas RGB E CMY� Disponível em: http://www.
belasartes.br/revistabelasartes/downloads/arti-
gos/3/cor-luz-corpigmento-e-os-sistemas-rgb-e-
-cmy.pdf
SCHWARTZ, Tony� Mídia: o Segundo Deus, São 
Paulo: Summus Editorial, 1985�
SILVA, Rafael Souza� Diagramação: o planejamen-
to visual gráfico na comunicação impressa. SP: 
Summus, 1985�
TOMIYA, Eduardo� Gestão do Valor da Marca, 
Senac: Rio de Janeiro, 2010�
TORRES, Cláudio� A Bíblia do Marketing Digital� 
São Paulo: Novatec Editora, 2009�
VÉRON, Eugene. A Estética. São Paulo: Ed. Formar, 
1994�
	_GoBack
	Introdução
	O ESPAÇO GRÁFICO
	A estrutura do impresso e a diagramação
	DIAGRAMAÇÃO
	Princípios básicos:
	Criando um rafe
	GRID - DEFINIÇÃO E ELEMENTOS
	O que é diagramar?
	Elementos de um grid
	Tipos de Grid
	LAYOUT - DEFINIÇÃO E DIAGRAMAÇÃO
	Layout nas artes gráficas
	Quem faz o projeto do layout?
	Necessidade de layout
	LAYOUT PERFEITO, ESPAÇO GRÁFICO E DIAGRAMAÇÃO
	O equilíbrio de cores
	As imagens
	Menos é mais, na maioria das vezes
	As fontes ou tipografia
	Manter um padrão visual
	Benchmarking
	Crie personas
	Diagramação e layout
	Layout clássico (2:3)
	Layout números Fibonacci
	Estudo de Caso
	O QUE É GRID
	COMPOSIÇÃO BÁSICA DA GRID
	A GRID COMO PRINCÍPIO DE CONSTRUÇÃO
	O USO DE “GRIDS”
	VANTAGENS E BENEFÍCIOS DE UMA “GRID”
	GRID RESPONSIVO
	MALHA GRÁFICA
	Forma e Função de uma malha
	Especificidades da malha gráfica digital
	Fatores que condicionam a criação da malha
	GRIDS PARA DESIGN RESPONSIVO
	Tecnicamente falando, design responsivo é um conceito, não é uma técnica
	Como escolher o número de colunas?
	GRID DOS DESIGNERS
	GRID SYSTEM DO BOOTSTRAP
	MOBILE FIRST
	O Bootstrap é Mobile First
	Container
	Grid System, ou o Bootstrap Grid
	LAYOUTS COM O BOOTSTRAP
	Estudo de Caso
	A importância do web site responsivo para a publicidade das marcas: estudo de caso do site da marca C&A