Informação importante antes de ler o post: Eu sou a favor dos grids. Totalmente a favor, a aliás. E viva o Swiss Style!

Tenho visto diversos projetos de web que seguem o “bom e velho padrão do grid de 960px“.  Afinal de contas dá pra ter 6 ou 12 pequenas colunas devidamente espaçadas que, como são divisíveis tanto por 2, como por 3 e 4, permitem uma grande gama de combinações, como 3 colunas de 300px ou 6 de 150, mais os espaçamentos. E tem também uma infinidade de sites que disponibilizam gratuitamente modelos prontos pra você, é só baixar os códigos limpinhos e se divertir a valer com seu grid multi-uso. Todos usam esse padrão e o serviço fica mais rápido, inclusive para dos desenvolvedores. Parece um sonho, né? Pra mim é um pecado e um pesadelo.

As limitações do design na internet

Que tal se todas as revistas do mundo tivessem o mesmo tamanho? E o projeto tipográfico, como seria? Tudo igual também? Pois é, assim vejo o design para internet atualmente. Calma, não estou falando de (hot)sites promocionais, nem dos que vão pro Festival de Cannes. Estou falando de portais ou sites de conteúdo e/ou serviços. Faça um teste: Abra uns dois ou três sites desse tipo, numa página de texto, desça a rolagem até esconder o topo e veja se algum deles tem uma identidade forte, sólida, que possa ser reconhecida. Não, não tem. Pelo menos não na grande maioria das vezes. Isso vale tanto pra nacionais quanto pra sites gringos. E o design aí, como fica?

Tipografia
Sabemos que cada navegador se comporta de um jeito com as fontes que usamos. Mais suavizada aqui, menos acolá. E se falarmos entre sistemas operacionais então, aí que a coisa muda total mesmo. Os PCs utilizam fontes pequenas sem suavizar nada. Pros fãs de Mac, as letras são suavizadas. Não estou falando que um ou outro é melhor. São diferentes e nada podemos fazer a respeito. E quando o usuário dá um CTRL + no browser e tudo aumenta? E quando usamos fontes compradas pra web que essas variações são maiores ainda (e em alguns casos nem funcionam)? Fora que o tamanho dos textos pode varia pacas por serem dinâmicos, como num portal de notícias. E isso vai depender do repórter, porque o designer não terá como ver 3500 páginas por dia pra saber se estão todas ok. Ou seja, NÃO temos pleno controle total da tipografia nos nossos projetos digitais.

Cor
Dezenas (ou cententas?) de tipos diferentes de monitor. LCD, LED e até alguns remanacentes com tubo. De 15, 17, 21, 30 polegadas. Notebooks, netbooks, Macbooks, PCs e MACs. Tudo isso com uma grande quantidade de ajustes em brilho, contraste, matiz e afins. A luz do ambiente onde estão usando o computador. O número de fatores também define: também NÃO temos controle total de como os usuários verão as cores que usamos.

Pausa breve 1: concordo que temos que levar em conta nosso público alvo. Mas as variações são tantas que, se fecharmos muito o leque (e o site precisa de pageviews) a audiência que verá o projeto como se deve será de 10 ou 15% do total.

Enfim, o que quero dizer com isso até agora é que ferramentas do design não podem ser tão exploradas como deveriam ser quando as utilizamos em projetos de web. O grid é uma ferramenta interessante, que sofre nada ou quase nada com essas variações. Ou seja, o designer pode fazer um BAITA grid planejadinho, certinho e tudo a ver com o projeto. Mas não. Vai lá o fulano e pega a desgraça pronta dum grid de 960px e pronto. Vamos para a próxima etapa. Não e não!

Pausa breve 2: Claro, eu prefiro que se use um grid de 960px do que não se use nada. Pelo menos fica mais fácil de organizar e outra pessoa que for mexer no projeto pode ter menos dificuldade pra entender as regras visuais.

Num grid de 960px e 6 colunas, por exemplo, teremos 150px em cada coluna e um espaçamento de 12px entre elas. Por que 12px? Qual o tamanho da fonte de corpo de texto que será usada? Então como o espaçamento pode estar errado. E certamente estará. E os títulos? Imagens? E a relação grid + tipografia vai pra onde? Será que 12px resolve TODOS os problemas do planeta Terra em grids? E se não tiver wallpaper add nessa página, pra que o espaço entre as margens do navegador e a página? Essas e outras várias questões me fazem ter certeza: usar um grid de 960px faz com que o projeto web já comece sem projeto. “Mas Rogério, esse blog tem 960px! O que me diz disso?” Sim, tem. Essa foi uma medida que cheguei através de cálculos e projeto. Veio do número de palavras que eu queria na parte do post versus o tamanho base de elementos que eu colocaria na coluna da direita. O novo lay que estou fazendo é um pouco mais largo. Nada contra a medida de 960px. Ela pode ser usada. E é disso que estou falando. Usar a medida de grid que for, contanto que tenha sido planejada, não baixada dum site qualquer e levada como verdade absoluta.

Usa? Gosta? Odeia? Concorda? Discorda? Deixa aí nos comentários, então!

“Considere todos os elementos: Dependendo do meio de comunicação ou do projeto, os grids podem isolar os elementos, pela apresentação dos tipos ou uma coluna ou zona e imagens em outra, dando a cada um a ênfase suficiente para esclarecer a informação ao leitor” – Beth Tondreau, no livro Criar Grids, da Editora Blucher

Hoje em dia eu não sei como, em algum momento da minha vida, eu consegui trabalhar sem grids. A manutenção, as mudanças, o desenvolver do projeto e suas modificações inesperadas e a continuação do trabalho de outro designer num projeto desconhecido. Essas são só alguns dos motivos que eu sou do time que veste a camisa do “Time dos Criadores de Grids“ 

Embora muitos defendam o contrário e que usar grid “prende” o designer, acredito que fique preso apenas aqueles que não entenderam direito como funciona. O grid é a liberdade criativa embelezada pela unidade, pela sequência, pela lógica e pela quebra de tudo isso.

Bem, a Editora Blucher (veja os posts com a tag Editora Blucher | siga a @EditoraBlucher no Twitter) trouxe a coleção desses livros de fundamentos do design. Em “Criar Grids – 100 Fundamentos de Layout” tem, bem explicadinho, todos esses macetes pra não errar na hora de estruturar um projeto. O (longo!) sumário das 100 dicas do livro:

Introdução

Elementos de um Grid
Conhecer os Componentes

Diagrama Básico de Grid
Aprender as Estruturas Básicas

Determinar o Grid Apropriado
Avalie o Conteúdo

Formatando o Texto
Primeiro, As Coisas mais Importantes; Calcule

Hierarquia da Informação
Vá com Calma com o Leitor

Grid e Imagem
Determine uma Ordem

Combinando Grid, Tipografia e Imagem
Considere todos os Elementos

Cor
Defina Espaço com Cores

Espaço
Comunique Usando o Espaço

Ritmo e Fluxo
O Ritmo Marca o Tom

Uma Coluna
Dê uma Cara ao Assunto
Design com Margens Amplas
Trabalhe com Proporção

Duas Colunas
Atribua Equivalência às Colunas
Design como Função
As Linhas Mandam!
Use Toda a Área
Use a Tipografia para Definir Zonas no Grid
Misture Peculiaridades com Consistência
Alterne Formatos

Três Colunas
Faça Parecer Simples
Defina Colunas Tipograficamente
Evite Amontoar
Abaixe as Colunas
Alterne os Tamanhos

Múltiplas Colunas
Agite o que for Reto e Estreito
Misture Tudo
Controle a Diversidade de Elementos
Acompanhe a Tradução; Seja Claro
Bases para Websites

Modular
Divida em Partes
Deixe Alguma Área de Respiro
Seja Racional
Opte por um Mundo Organizado
Módulos não Precisam ser Quadrados

Tabelas e Gráficos
Pense no Gráfico como um Todo
Ilustre os Gráficos
O Design além do Esperado
Delimite Discretamente as Caixas
Ultrapasse os Limites

A Cor como Elemento Dominante
Use a Cor para Obter Atenção
Defina uma Paleta de Cores
Deixe a Cor ser a Informação
Junte a Cor com a Tipografia

Cores como Princípio Organizador
Controle as Cores
Use Cor na Tipografia como Ênfase
Coloque a Informação em Cores
A Cor como Código
Separe o Conteúdo com Cores
Use Tons para Obter a Cor

Hierarquia Horizontal
Quebre a Sinalização em Seções
Junte as Semelhanças
Deixe o Espaço Definir seus Horizontes
Ilustre Linhas do Tempo
Trabalhe Acima e Abaixo da Dobra (Horizontal)

Quando os Tipos Formam o Grid
Faça Barulho
Gire na Vertical
Compacte os Elementos
Brinque com o Grid
Envolva o Espectado

Repleto e Funcional
Com Ordem, Faça Margens Pequenas Funcionarem
Seja Direto
Evite Apinhamento
Faça o Espaço Valer
Projete um Ponto-de-Vista Equilibrado
Guie o seu Leitor

Arejado, mas não Pobre
Entre no Ritmo
Crie um Oásis
Deixe as Imagens Brilharem

Sem um Grid Aparente
Faça um Esboço a Mão
Hierarquia Implícita
Use Princípios de Organização
Favoreça a Fluidez

Formas Orgânicas
Planeje Pausas
Permita Dramaticidade
Use Silhuetas para Avivar a Composição
Deixe a Intuição Prevalecer

O Grid Suíço
Construa um Sistema
Use Peso e Medidas
Use Helvetica
Use Linhas
Aplique Hierarquias Verticais e Horizontais

Grid Interrompido
Construa com o Inesperado
Varie os Tamanhos
Deixe a Foto Falar
Destaque com Barras Laterais

Grid Reconstruído
Observe os Mestres
Amplie!
Mude as Fronteiras

Grid em Camadas
Faça Complexo
Pense em Mais de Uma Dimensão
Pense Globalmente

Grids e Movimento
Crie uma Estrutura que Sustente Várias Mídias
Venda
Faça se Mexer
Faça-o Modular

Quebrando as Regras
Faça com Clareza
Siga o Futuro
Siga o seu Coração
Esqueça as Regras

Basicamente cada página dupla tem uma das “dicas” de como criar um bom grid. No meu primeiro contato com o livro, eu senti que ele era “não-linear”, que eu poderia ler as dicas de grid em qualquer ordem. Mas percebi ao final que no começo o autor “pega mais leve”, é bem básico e depois vai ficando mais complexo.

Além do texto principal, as imagens têm legendas que definem ainda mais o conceito do grid utilizado:

É bem interessante que os exemplos de grids são bem variados e as “caras” e a complexidade dos layouts também, além das explicações dos grids tem muita coisa que dá pra usar como referência visual também:

E você? Tem alguma outra dica de grid? Veste a camisa ou acha que ele prende o designer? Fala aí nos comentários!

Já vi muita gente discutindo se vale ou não a pena usar grids (grades) em projetos de design. Quem diz que “não gosta” justifica que o grid “prende o designer” e dificulta a criação. Sou do outro grupo, que acredita que o grid é mais um aliado na hora de projetar, seja um um site, uma revista, um livro, um catálogo. O livro Grid – Construção e desconstrução, de Timothy Samara (pela Cosac Naify e que originalmente chama “Making and Breaking the Grid: A Graphic Design Layout Workshop”) é para os dois grupos: Quem gosta vai ganhar diversas dicas e quem não concorda vai ter chance de mudar de ideia!

Construção e desconstrução

Além de uma boa introdução no sistema de grid com história e os motivos de seu uso, o livro é basicamente dividido em duas partes: construção, onde o autor mostra como grids foram construídos e os projetos que resultaram; e a parte de desconstrução, que a partir do projeto pronto deduz como seria seu grid. Os grids são categorizados e cada página, seja ela de construção ou desconstrução, mostra quais outros grids do livro todo tem a ver com ele. São mais de 60 páginas construindo e mais de outras 60 desconstruindo.
Alguns exemplos:

Minha relação com o grid é muito boa, sempre foi. Já fiz diversos projetos sem usar essa técnica, mas depois que aprendi, nunca mais larguei. Além de possibilitar que tudo fique mais organizado, acredito que ajuda muito na hora de definir uma identidade ao projeto, pelo menos pela disposição de alguns elementos e a repetição estratégica de outros. E pra mim não adianta a justificativa que o designer tem que ficar totalmente solto pra criar tudo. É preciso organizar, tecer relações visuais e amarrar a identidade do projeto. Não ter essa ordem significa, pra mim, correr o risco de trabalhar (muito)  mais. É como ter ou não ter templates num site. O site que tem 40 templates não tem template, certo?

Exemplo de grid no site de VEJA São Paulo

Para desenvolver o novo site de VEJA São Paulo (que estreou em dezembro do ano passado), me juntei ao meu chapa Mau (twitter.com/maudubem) e “grideamos” o espaço para desenvolver a home e posteriormente as internas do site. Para algumas internas fizemos outro grid, pois tínhamos uma colunagem diferente e ficaria muito bagunçado para criar em cima. O legal é que com dois grids nós desenvolvemos todo o restante do site. Quando necessário, para delimitar os espaçamentos e manter tudo alinhadinho, inserimos mais linhas-guia horizontais e verticais. A grande base desse grid é a colunagem e as delimitações de espaço no topo. Como alguns conteúdos são dinâmicos, boa parte das guias horizontais entraram para, no layout, dar mais chances para os alinhamentos e tamanhos dos elementos, tanto na home (acima) como nas internas.

Intriga Internacional – Alfred Hitchcock: Brincadeira com grid na abertura do filme

Muito interessante ver a abertura desse filme de 1959 do Hitchcock quando eles brincam com um grid para mostrar o staff. Ainda mais curioso é que a personagem coadjuvante é “desenhista industrial”. Achei legal o designer migrar o grid, então comum em mídia impressa, para a telona do cinema.

ATENÇÃO: ESSE POST ESTÁ DESATUALIZADO. VOU MANTÊ-LO AQUI PARA FINS DE ARQUIVO, MESMO.

FIZ UMA LISTA DE 8 LIVROS QUE SE ENCAIXAM NESSA FAIXA DE PREÇOS E PUBLIQUEI EM 8 DE MARÇO DE 2010. LEIA O POST.

Para beneficiar o bolso de todo designer e regar a cabeça com conteúdo de primeira categoria, fiz uma seleção nos livros que li, que gostei bastante, que recomendei e que não pesaram (tanto) no orçamento. Todos os preços são baseados na data do post, 22/10/2009 e tinham em estoque nos respectivos sites, depois eu não garanto, hein?

As Leis da Simplicidade, de John Maeda

O designer-artista-e-professor-do-MIT John Maeda dá, em 10 lições, dicas para encontramos mais facilmente a simplicidade no trabalho e no que produzimos. Tem até um blog que ele lançou pra continuar o livro, o The Laws of Simplicity.
Lugar mais barato: Americanas, R$ 21,90

ABC da Bauhaus – Bauhaus e a teoria do design, de Ellen Lupton e J. Abbott Miller

Mais do que referencial, histórico e cheio de imagens para inspiração, a dupla de autores contextualiza o movimento e discute como essa escola alemã de design se relaciona com outras áreas e como a psicanálise pode ser relacionar com a geometria das formas que a Bauhaus usava, o círculo, o quadrado e o triângulo. É bem nerd e diferente de todos os outros que vi de Bauhaus em português.
Lugar mais barato: Fnac, R$ 39,60

Objetos de desejo – Design e sociedade desde 1750, de Adrian Forty

A editora Cosac Naify acertou em traduzir esse livro, lançado originalmente em 1986, mas que continua atualizadíssimo. Adrian Fordy trata da relação do design com a sociedade e como ela expressa seus valores, do que aconteceu com o design nos últimos 200 anos e de produtos que foram fruto de tudo isso.
Lugar mais barato: Fnac, R$ 49,68

Elementos do estilo tipográfico, de Robert Bringhurst

A leitura é densa e complicada na maior parte do tempo, o oposto do Pensar com tipos, da Ellen Lupton (que só não entrou nessa lista porque na hora de subir o post, acabou o estoque da Fnac), mas pra mim esse é o mais fantástico custo-benefício livro de tipografia que contempla explicação do que é cada “pedacinho das letras”.
Lugar mais barato: Submarino, R$ 44,10

Grid: Construção e desconstrução, de Timothy Samara

Já vi gente falar que é só pra design gráfico, mas eu discordo totalmente. O grid, enquanto fundamento, é único e o autor resolveu muito mostrando como layouts são criados baseados em grids e na outra metade do livro, desconstroi outros, fazendo o processo inverso.
Lugar mais barato: Fnac, R$ 43,47

Novos Fundamentos do Design, de Ellen Lupton e Jennifer Cole Phillips

Baseado na ideia que os fundamentos do design foram feitos há muito tempo, a Ellen Lupton e a Jennifer Cole Phillips os “atualizam” e adicionaram outros que a tecnologia não permitia existir.
Lugar mais barato: Fnac, R$ 43,47
Leia o post Livro: Novos Fundamentos do Design [Ellen Lupton e Jennifer Cole Phillips - Ed. Cosac Naify]

Design brasileiro antes do design, de Rafael Cardoso

Todo mundo fala do design brasileiro nos anos 1960, da bossa nova, das escolas de design nacionais, mas o Rafael Cardoso mostra e comenta (quase) tudo que rolou antes, desde a época da imprensa régia em 1808. Cheio de imagens, a publicação contempla até o final dos anos 1950.
Lugar mais barato: Fnac, R$ 49,68

Não me faça pensar, de Steve Krug

Embora não seja a mais espetacular referência de usabilidade do universo, é pra mim o melhor começo. Mesmo com a diagramação terrível somada a tradução que deve muito para a original americana, o livro abre bem a cabeça e mostra diversos exemplos de como deixar os projetos mais usáveis.
Lugar mais barato: Fnac, R$ 49,59

Nova York – A vida na cidade grande, de Will Eisner

Livro de quadrinhos, sim. Mas para os preconceituosos, não é qualquer tipo de quadrinhos. É Will Eisner. E nesse livro ele mostra o cotidiano dos moradores das grandes cidades em diversas situações divertidas, inteligentes e extremamente bem resolvidas. No mínimo é genial.
Lugar mais barato: Fnac, R$ 49,50

Alexandre Wollner e a Formação do Design Moderno, de André Stolarski

Livro + DVD de uma entrevistona com o Alexandre Wollner, talvez o pioneiro do design contemporâneo brasileiro. Ele fala da relação de design e arte, design e publicidade e do que está sendo produzido atualmente.
Lugar mais barato: Americanas, R$ 44,90
Leia o post Livro: Alexandre Wollner e a formação do design moderno no Brasil [Um projeto de André Stolarski - Ed. Cosac Naify]

E vocês amigos? Têm indicações de livros nessas condições? Então coloquem nos comentários!