GRIDSs.m. estrutura ou padrão de linhas

usado para orientar o posicionamentodos elementos de um design

Gavin AmbrosePaul Harris

Tradução:Mariana Belloli

Revisão Técnica:Charles de Castro Vincent

Doutor pela FAU-USPProfessor pesquisador da FAU-Mackenzie

2009

Obra originalmente publicada sob o títuloBasics Design: Grids

ISBN: 978-2-940373-34-5

Copyright © AVA Publishing SA 2008

Design e texto de Gavin Ambrose e Paul HarrisFotografia original de Xavier Youngwww.xavieryoung.co.uk

Production and separation by AVA Book Production Pte. Ltd., SingaporeFone: +65 6334 8173 Fax: +65 6259 9830Email: production@avabooks.com.sg

Capa: Rogério Grilho

Leitura final: Aline Grodt

Supervisão editorial: Elisa Viali

Editoração eletrônica: Techbooks

Reservados todos os direitos de publicação, em língua portuguesa, àARTMED® EDITORA S.A.(BOOKMAN® COMPANHIA EDITORA é uma divisão da ARTMED® EDITORA S. A.)Av. Jerônimo de Ornelas, 670 – Santana90040-340 – Porto Alegre – RSFone: (51) 3027-7000 Fax: (51) 3027-7070

É proibida a duplicação ou reprodução deste volume, no todo ou em parte, sob quaisquerformas ou por quaisquer meios (eletrônico, mecânico, gravação, fotocópia, distribuição na Webe outros), sem permissão expressa da Editora.

SÃO PAULOAv. Angélica, 1.091 – Higienópolis01227-100 – São Paulo – SPFone: (11) 3665-1100 Fax: (11) 3667-1333

SAC 0800 703-3444

IMPRESSO EM CINGAPURAPRINTED IN SINGAPORE

A496d Ambrose, Gavin. Design básico : grids / Gavin Ambrose e Paul Harris ;

tradução Mariana Belloli.– Porto Alegre : Bookman, 2009.176 p. ; il. ; 23 cm. – (Design básico)

ISBN 978-85-7780-522-8

1. Projeto gráfico. 2. Livros – Grids. I. Harris, Paul. II.Título.

CDU 655.26

Catalogação na publicação: Renata de Souza Borges CRB-10/1922

Grid

s

River IslandA página dupla acima pertence a um catálogo criado pelo Third Eye Design parao varejista River Island. Há nela uma combinação de módulos, colunas, texto eimagens que estabelece uma narrativa. O grid oferece uma estrutura que orienta oposicionamento dos diferentes elementos do design e direciona a atenção do leitorpor toda a página, seguindo um fluxo lógico e contínuo.

2 3

Cliente: River Island

Design: Third Eye Design

Propriedades do grid:

Grid ajuda a posicionar os

elementos e a desenvolver

um fluxo dentro da página

Webb & Webb Why Not Associates NB: Studio

Por que usar grids 10Organizando ainformação 12Como lemos uma página 14Como vemos umatela de monitor 18Forma e função 22

Fundamentos 26ISO e formatos de papel 28Anatomia da página 30Medidas 32Formas em uma página 34Proporção 38Hierarquia 40Desenho de rede e de ponto 42Desenhando um grid 46Regra dos terços 50Regra dos ímpares 52

Tipos de grid 54Simétrico 56Assimétrico 60Módulos 62Grids compostos 64Combinações 70 A horizontal 72A vertical 74Grid diagonal e angular 78

Introdução 6Como aproveitar ao máximo este livro 8

Grid

s Su

már

io

Sumário

3 Deep Design Third Eye Design The Vast Agency

Grid

s Su

már

io

Elementos do grid 80Tipo 82Linhas de base 86Imagens 88Alinhamento horizontal 92Alinhamento vertical 94Colunas 96Número de colunas 98Largura das colunas 102Tipo e largura das colunas 106Colunas estreitas 108Medidas amplas 110Fólios 112

Usos do grid 116Padrão 118Grids visíveis 120Escala 122Perímetro 124Eixo 128Justaposição 132Espaço em branco 134Grids ambientais 136Grids multilíngues 140Grids orientados por legenda 142Grids de informaçãoquantitativa 144Grid como expressão 146

Grids na Web 148Princípios básicos da Web 150Grids digitais 154Orientação 156

Glossário 160Conclusão 172Agradecimentos 174Contatos 176

4 5

O grid é a base sobre a qual um design é construído. Ele permite que odesigner organize de modo eficiente diversos elementos em uma página.Em essência, é o esqueleto de um trabalho. Grids adicionam ordem e estruturaaos designs, sejam eles simples, como o exemplo da página ao lado, ou comgrande quantidade de informação, como os encontrados em sites de jornais.

O objetivo deste livro é introduzir os princípios básicos do uso do grid no designgráfico conforme praticados pelos designers contemporâneos. Muitos dessesfundamentos datam de séculos atrás, quando os livros começaram a ser produzidosem massa. Esses métodos, porém, foram refinados, melhorados e complementadosao longo do tempo, e esse processo continua à medida que novas tecnologiastrazem consigo novas mídias, como as páginas da Internet e o telefone celular.

Entretanto, não é intenção desta obra ser um guia prescritivo sobre a criação e ouso de grids. Em vez disso, ela aborda os princípios por trás da utilização de gridsa fim de fornecer ao leitor subsídios para enfrentar uma grande variedade deproblemas de design gráfico. A principal mensagem do livro é que uma abordagemestática e repetitiva ao uso de grids não resulta em designs criativos e eficientes.Ao desenvolver um claro entendimento dos muitos aspectos do grid, esperamosprovar que eles não apenas organizam um design, mas também oferecemamplas oportunidades de expressão e criatividade.

Por que usar grids

Grids são guias necessários que organizam os

elementos de um design, ajudando o leitor a acessar

as informações facilmente.

Fundamentos

Esta seção é uma introdução aos elementos que

constituem o grid, incluindo medidas, formas,

proporções e vários fios relacionados à anatomia

de uma página.

Tipos de grid

Este capítulo mostra as relações entre grids, tipografia

e imagens por meio da apresentação e da exploração

de alguns dos muitos tipos de grid disponíveis.

Elementos do grid

O grid é usado para posicionar os vários elementos

gráficos, textuais e de imagem que compõem um

design a fim de produzir diferentes apresentações

visuais.

Usos do grid

Aqui, diferentes grids e técnicas são discutidos, a fim

de fornecer um guia para estruturação e apresentação

de diferentes tipos de conteúdo, incluindo o uso de

orientação, justaposição e divisão espacial.

Grids na Web

Este capítulo apresenta algumas considerações

especiais de design para a produção de grids e

layouts para páginas Web e outras mídias eletrônicas.

Introdução

Grid

s In

trodu

ção

Grid

s In

trodu

ção

Cliente: Nike

Design: Why Not Associates

Propriedades do grid:

Ilustrações alinhadas em

fileiras e colunas, resultando

em linhas limpas e ordem

Nike ParisEste interior foi criado pelo estúdio Why Not Associates para a loja da Nike daavenida Champs-Elysées, em Paris. Ele apresenta, em paredes de vidro, um padrãorepetido de ilustrações de tênis alinhadas em colunas (vertical) e linhas (horizontal).Esta parede mostra que as estruturas de grid estão presentes em muitas das coisasque vemos todos os dias.

6 7

Este livro apresenta diferentes aspectos do uso de grids, abordados emcapítulos específicos. Cada capítulo fornece diversos exemplos do uso criativode grids dos principais estúdios de design contemporâneos, com comentáriosexplicando as razões por trás das escolhas feitas.

Os princípios fundamentais de design aparecem em destaque para que o leitorpossa ver como eles são aplicados na prática.

Informações relacionadas

Informações relacionadas, como

definições, são explicadas em

destaque.

Navegação clara

Cada capítulo possui um

cabeçalho claro para a

localização rápida das áreas

de interesse.

Introduções

Introduções especiais de seção

apresentam os conceitos básicos

que serão discutidos

Exemplos

Projetos comerciais de designers

contemporâneos ilustram os

princípios discutidos.

Como aproveitar ao máximo este livro

Grid

sCo

mo

apro

veita

rao

máx

imo

este

livro

Grid

sOr

gani

zand

oa

info

rmaç

ão

12 13Organizando a informação

Jan SamsomEste pôster foi criado pelo estúdio Faydherbe / De Vringer para uma exposição deJan Samsom. O design apresenta um grid intuitivo que fornece uma estruturacentralizada e simétrica aos elementos textuais, que se distribuem em torno doposicionamento central da palavra “Samsom”, a qual, por sua vez, atua comocontraponto à imagem assimétrica.

O design tem uma clara e inequívoca hierarquia de informações, sendo tambémtipograficamente diverso e dinâmico. As colunas de texto estão dispostas horizontale verticalmente, criando uma ideia de camadas; as informações aparecem tanto noprimeiro plano quanto no plano médio e no plano de fundo, dependendo do seutamanho e da intensidade da cor.

Cliente: CBK Artoteek

Dordrecht

Design: Faydherbe / De Vringer

Propriedades do grid:

Grids centrais e simétricos

combinados com uma

imagem assimétrica

Embora o grid tenha evoluído consideravelmente ao longo do tempo, os princípiosbásicos que o sustentam permaneceram intactos por séculos. Aproximadamente300 anos separam as duas imagens desta página, mas os elementos comuns entreelas são evidentes. Tanto a página do manuscrito medieval (à esquerda) como a dojornal (à direita) possuem colunas que contêm e dão forma ao corpo do texto emuma largura legível. O título oferece clareza e uma hierarquia básica.

Organizando a informaçãoA função básica do grid é organizar ainformação em uma página. O modo dealcançar isso foi desenvolvido e refinado aolongo da história – de simples páginas detexto à inclusão de imagens e às diversaspossibilidades oferecidas pelos softwaresde design modernos.

A imagem da esquerda mostra

uma das primeiras páginas

impressas em latim, incunabula,

datada de 1483, com texto em

duas colunas verticais. A da direita

é de um dos primeiros jornais, o

Edinburgh Evening Courant, de

1774, com três colunas de texto.

As duas têm elementos comuns

que guiam o leitor: cabeçalhos

claros e um senso de direção.

No segundo exemplo, elementos

adicionais como capitulares baixas

e fios Scotch aumentam a noção

de ordem.

Grid

sPo

rque

usar

grid

s

Hierarquia

Guia visual, organizado e lógico que indica diferentes níveis de importância no texto.

Fios Scotch

Linhas grossas, finas, ou uma combinação das duas, usadas para separar diferentes elementos textuais.

Explicações escritas

Os pontos-chave são explicados

no contexto de um projeto usado

como exemplo.

Informações adicionais

Clientes, designers e princípios do

uso de grids são apresentados.

8 9

Diagramas

Diagramas agregam significado à

teoria mostrando os princípios

básicos em ação.

Grid

sCo

mo

apro

veita

rao

máx

imo

este

livro

Grid

sCo

mo

lem

osum

apá

gina

14 15Como lemos uma página

Cliente: PhaidonDesign: Webb & WebbPropriedades do grid: Nogrid, imagens em cores estãolocalizadas no foco principalda página

As áreas ativas e passivas do designO designer tem bastante liberdade quando se trata de posicionar diferenteselementos de design dentro de um layout. Entretanto, o modo como o olho humanoexamina uma imagem ou um corpo de texto faz com que certas áreas da páginasejam mais visadas, ou mais ativas, do que outras. Isso significa que, em umapágina, existem áreas centrais e periféricas, e os designers podem usar esseconhecimento para direcionar a localização dos principais elementos de design –tornando-os mais ou menos visíveis.

Grid

sPo

rque

usar

grid

s

Diante de uma nova página de

informação, o olho humano

habitualmente procura uma

entrada no lado superior

esquerdo, varrendo a página na

diagonal para baixo até o canto

inferior direito, como mostrado na

figura. A profundidade das cores

indica onde o foco de atenção é

mais forte.

Como lemos uma páginaQualquer página tem elementos ativos epassivos devido à natureza do conteúdo eà maneira como enxergamos a página –o modo como o olho varre a página paralocalizar a informação.

O movimento Arts & Crafts (à direita)Estas duas páginas duplas fazem parte de um livro criado pelo estúdio Webb &Webb sobre o Movimento de Artes e Ofícios. O design apresenta imagens em coresno foco principal, o canto superior esquerdo da página. O uso de imagens estimula oolho com uma explosão de cores e conduz o leitor pela página. A posição doselementos textuais e das imagens no grid cria um movimento sutil nas páginas semcausar confusão ou inibir a leitura – o grid “contém” os elementos sem sufocá-los.

Cliente: The Fine Art SocietyDesign: Webb & WebbPropriedades do grid:Hierarquia simples,

alinhamento à esquerda,

entrelinhas largo

22 23

Grid

sFo

rma

efu

nção

Forma e função

David GentlemanEsta capa de livro, criada pelo estúdio Webb & Webb para The Fine Art Society,usa um grid simples e direto para estruturar a informação. Como o tamanho do tipoé o mesmo em todo o texto principal, a cor é usada para criar uma hierarquia deinformação, com matizes suaves que remetem às aquarelas dentro do livro.

É essencial enxergar o grid como algo adaptável e flexível, e não como algoprescritivo e inviolável. Por exemplo, quem cresceu usando computadores e aInternet tende a ser um usuário mais sofisticado e proficiente do que aqueles quenão tiveram essa experiência. Em termos práticos, isso significa que alguns leitoresficarão mais confortáveis em navegar em sites complexos, enquanto outrosprecisarão de estruturas mais simples.

Esse ponto de vista modernista pode ser útil nos estágios iniciais de um design.Em certa medida, a forma do grid será ditada por sua função. A quem ele sedestina? Como será usado? Onde será lido? Por meio de uma série de perguntas, odesign acaba falando por si mesmo. Por exemplo, um grid que seja apropriado paraum livro de culinária terá exigências diferentes e não necessariamente acomodaráum relatório anual, um catálogo de vendas ou os classificados de um jornal.

Um princípio orientador para um design eficaz é o de que a forma de um trabalhodeve seguir a sua função, ou seja, um design deve ser facilmente usado e acessadopor seu público-alvo.

Forma e funçãoEmbora o designer precise levar emconsideração as limitações físicas e asexigências da mídia ou do formato usados,a forma de um design deve complementara sua função. A forma de um projeto variade acordo com o público-alvo a que sedestina.

Modernismo

“A forma segue a função” é uma expressão atribuída ao arquiteto Louis Sullivan e captura de modo sucinto a

exigência de que, no design, o uso prático seja colocado acima da estética. Essa ideia buscava eliminar os

adornos supérfluos a fim de focar nos elementos essenciais ao uso.

Grid

sPo

rque

usar

grid

s