Grid [Timothy Samara]

Capa de Grid - Construção e desconstrução, de Timothy Samara

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:

Exemplo de página interna do livro Grid - Construção e desconstrução, de Timothy Samara

Exemplo de página interna do livro Grid - Construção e desconstrução, de Timothy Samara

Exemplo de página interna do livro Grid - Construção e desconstrução, de Timothy Samara

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

Grid na home do site 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.

Autor: Rogério Fratin

Mestre em Educação, Arte e História da Cultura pela Universidade Presbiteriana Mackenzie, 2016, com a pesquisa Design Thinking Aplicado à Educação. Bacharel em Design Digital pela Universidade Anhembi Morumbi, 2005.

12 pensamentos em “Grid [Timothy Samara]”

  1. Já vi que você é fã do Hitchcock, além de postar no twitter seus filmes por R$1,00, o vídeo encaixou certo com o post.
    Eu acho visivelmente limpo um site que usa grid, também depende do público que o visita.
    Parabéns pelo site, vou favoritar no meu
    bjs

  2. Muito bom, amor! A referência ao filme fechou belissimamente bem! 😉

  3. Bem lembrado. parabéns.

    Durante uns 4 anos trabalhei com material impresso, na época atuava como designer gráfico / arte-finalista. Assim, como tudo era muito limitado [espaçamento…], a necessidade de se usar linhas guias era grande. Hoje, como web designer, não me prendo muito há essas linhas, talvez pela liberdade que a web proporciona. Contudo, trago resquiscios daquela época.

    Não que eu faça tudo bagunçado, não é isso, só não utilizo mais as guias, até porque costumo criar layouts mais “limpos”, não havendo tanta necessidade das linhas.

    É interessante utilizá-las, e na minha opinião, todo designer deve aprender a manuseá-las.

    Também adorei o fechamento com o filme.
    ;D

  4. Pra mim não existe um projeto bem feito sem um grid bem pensado… o invisível torna o projeto mais harmônico, agradável a vista. Lembro de um projeto da Siemens onde eram tão freaks que criaram um grid em cima da sequência de ouro do Fibonacci, projeto mais maluco impossível hehehe. 55 pilas o preço está bem bom, paguei quase 70 uns dois anos atrás. Tb recomendo muito, bonzão! =)

  5. O engraçado é que eu montei esse site da Veja, junto com meu Diretor de Criação na época e não lembro nem de você e nem do seu “brother Mau grideando o site”.

    Lembro bem até do header que tinha 3 versões, de manhã, de tarde e de noite. E lembro muito bem das internas.

  6. Olá Diego e Gustavo. Me desculpem a demora pra responder.

    Pois é, eu peguei o site começado, sim. E foi um trabalho muito complicado. Foi uma agência que começou o projeto. Depois um rapaz da Abril Digital fez ajustes por umas semanas, depois o Mau e depois, me juntei a ele. Ficamos mais seis meses mexendo nas coisas depois da entrega, antes de subir.

    Aliás, o grid que foi entregue não poderia ser usado. Ele era maior que a resolução do site. Aí foi uma loucura… Até porque entraram mídias de tamanhos diferentes das que tinham sido previstas. Um site para público alvo que usa resolução 1024 com rolagem horizontal? Editorialmente e para o público-alvo que tive é incabível.

    Ah, esse lay também tinha Adobe Garamond nos títulos, que por algum acaso não é fonte de sistema nem de PC nem de MAC e não pode ser usada em projetos desse tipo, dinâmicos. E não podemos embedar a fonte no código por motivos óbvios.

    E também tem os olhos, o tamanho dos textos que eram todos iguais, as fontes eram pequenas, com o mesmo peso, o logo que não aparecia, as mudanças no topo… Tenho, inclusive, os layouts antigos comigo, que a agência mandou na época.

    Enfim, tivemos que desenvolver praticamente tudo de novo, claro que com base no que tínhamos, pra caber nas novas especificações e para ter as novas mídias, que foram vendidas depois. Aliás, as páginas de comunidade foram todas modificadas, entraram páginas de erro 400 e 500, ficamos aproximadamente mais seis meses depois do trabalho entregue pela agência, modificando e criando novas páginas, dentro do novo grid.

    Agora concordo plenamente contigo. Eu deveria ter citado que alguém havia começado o projeto. Isso foi de fato um erro meu, me desculpem. O meu verbo layoutar não foi bem usado nesse caso. Muitas vezes ele poderia ser usado, mas noutras o mais correto talvez fosse diagramar. Mas que o grid atual não é o da tal agência, isso não é. Peço o favor de falarem os nomes completos e links para twitter, Flickr ou blog/site de vocês, para que eu credite no post quem começou o projeto, se quiserem, claro.

    Abraço, obrigado e desculpas novamente,
    Rogério Fratin

  7. Me auxiliem, por favor, sobre qual dos dois livros sobre grid é melhor: este da resenha ou “Criar Grids: 100 fundamentos de layout”.

    Creio que ambos sejam bem construtivos.. mas em termos práticos, qual é melhor?.. Obrigado!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *