Designices

Criar Grids

21/10/2010

Capa do 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.

Exemplo de página do livro Criar Grids, da Editora Blucher

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

Exemplo de página do livro Criar Grids, da Editora Blucher

É 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:

Exemplo de página do livro Criar Grids, da Editora Blucher

Exemplo de página do livro Criar Grids, da Editora Blucher

Exemplo de página do livro Criar Grids, da Editora Blucher

Exemplo de página do livro Criar Grids, da Editora Blucher

Quarta capa do livro Criar Grids, da Editora Blucher

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

Tags:

Categorias: Livro

Comenta esse post aí, vai?

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

8 comentários:

  1. eu estava trabalhando com aquela imagem do wynton marsalis do primeiro exemplo… 0.o’
    Grid é liberdade.

  2. Eu tenho o “Grid – Construção e Desconstrução” e acho bem bom: http://www.americanas.com.br/produto/7239753/livros/engenharia/designindustrialegrafico/livro-grid-construcao-e-desconstrucao

    Para web tem uns templates de grid HTML/CSS, eu particularmente gosto bastante do 960 Grid System: http://960.gs/

    Mas há tbm:
    Blueprint: http://www.blueprintcss.org/
    BlueTrip: http://bluetrip.org/
    Bolierplate(HTML 5) : http://code.google.com/p/css-boilerplate/

    entre outros

  3. Estou com esse livro em casa. Comprei faz algum tempo. Fiquei feliz em ver no seu blog, que há também o de tipografia da série que eu desconhecia. O livro é de uma qualidade impressa muito interessante. Os designs feitos com grid que foram exibidos nele são desamasiadamente limpos e fluem bem no quesíto informação.

    Não pode ficar sem ler esse, não, quem quer trabalhar com Grid ele tem exemplos interessantes. :)