Grid 960px? Não.

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! 🙂

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.

23 pensamentos em “Grid 960px? Não.”

  1. O primeiro módulo da pós este ano foi webdesign. Uma pena ter tão pouco tempo pra falar de tanto… mas já encaminhei aos colegas.

    Com relação ao grid, mesmo não sendo webdesigner, dentro da minha ignorância do assunto, concordo. Concordo porque, como designer, aprendi a respeitar as particularidades de cada projeto, baseadas nas necessidades das partes envolvidas. Não dá pra ter UMA fórmula mágica para TODAS as ocasiões…

  2. Yep, webdesigners tem a mania de se contentar com pouco. Por isso todo mundo usa o bendito 960.

    Quando ninguém usava grids, ele apareceu como a salvação. O mesmo aconteceu com @font-face. Já viu como a tipografia fica horrenda no windows xp? E mesmo assim todo mundo adora.

    Mas confesso que meu estômago embrulha toda vez que tenho que usar line-height de 18px só por causa das dimensões do bendito 960…

    Enfim, por um lado mais otimista, o Design Responsivo (se é que esse termo existe em português) pode resolver o problema dos grids.

  3. Caro, concordo com a discussão e alimento isso, todos os dias e assim continuarei. Mas calma lá. Grid não é assunto para novatos. Esse uso desregrado e qquer nota que se faz do 960 é coisa de quem não tem a mínima ideia do que fazer e sai fazendo, simplesmente.

    960 é, sim, uma ótima medida para um grid, onde podemos usar e abusar da Golden Ration, inclusive, para fazer seus — e meus — tão prezados cálculos. Margens de 12px, como a citada, margens de 20px e de qquer medida, todas são permitidas, depende de como o designer pensa o grid, baseado, evidentemente, no mote tipográfico. Fazer o download do 960.gs é uma coisa. Pensar num grid conciso, dentro de 960px é outra, completamente diferente.

    E mesmo que o designer opte por usar as medidas assim, do jeito que elas vêm do download, ele não deve ser crucificado, pois além de ele simplesmente querer, lida, também, com alguns aspéctos importantes na hora de trabalhar. Exemplo? Produtividade. Às vezes, seu cliente nem se importa com isso — sim, é o mesmo que diz “bota uma bolinha pulando alí” — e por que vc deve pensar TANTO nissor? Pra ter um portfólio foda? Porra, manda o 960, do jeito que ele vem, deixa tudo no lugar, entrega o job e receba a grana. Simples. Vai fazer um job pessoal ou mais aberto, de cabeça? Ok, vamos pensar mais um pouco.

    Fórmula mágica? Sou contra! Acabamento nada mais que primoroso? Sou contra! Tipografia negligente? Sou contra! Agora, também sou contra generalizações. Lidar com grid é uma questão de experiência, de estudo, de percepção, de técnica, de necessidade de ritmo e balanço, de coerência e limpeza. Pode ser para todos, mas não, sem dúvida, não em qquer fase do designer.

    Abs.

  4. A largura de 960px é muito utilizada por não gerar rolagem horizontal na resolução de 1024x768px independente do browser. Concordo com que foi dito no post, o sistema de grids é algo que merece mais atenção do que gerar uma grelha na internet e achar que tudo está “perfeito”.

  5. Por isso que gosto desse blog. Audiência de qualidade!
    Já comento todos os posts… Guentem aí!
    [ ]s!

  6. Não sou designer e nem gosto de me considerar, mas um publicitário apaixonado por design que não teve a oportunidade de cursar o curso q queria, sendo assim me esforço lendo bibliografias relacionadas e todo material do tipo.

    Quanto aos grids em sites, conheço a pouco tempo e ainda sim concordo q os grids devem ser maleáveis de acordo com cada projeto, pois se assim o fosse, não teríamos o festival de sites iguais q temos hj!

  7. Estou só começando na area, então não posso dar uma opião solida do assunto, eu particularmente uso.
    Não descobri uma forma mais rapida ou mais facil de fazer ainda.
    Se alguem tiver mais alguma sugestão eu aceito, só conheco o 960gs! e me parece q o formee tbem tem grids, ainda não experimentei, mais estou a todo ouvidos!

    vlw, abraço!

  8. Não usar a largura de 960px (salvo por sites sem a necessidade de grid como a wikipédia e alguns temas do famigerado joomla!), é um crime cometido por pessoas que escondem a falta de conteúdo por trás de um layout grosso, enjoativo,
    com fontes berrantes e, algumas vezes, tenebrosas cores escuras.
    Vários pequenos estudos demonstram que layouts mais finos(de 960w ou menos), e fontes menores, podem ajudar na legibilidade do conteúdo, pois estas não cansam o nosso venerado leitor.
    Para fazer o teste é simples, reduzam o zoom deste site para 70% e vejam como mudará da agua para o vinho.
    Não se esqueçam que falamos de sites que o nosso leitor lerá o texto, por isso, tomem hotsites e sites de designers como excessões.

    se quiserem um exemplo de site bonito, elegante e acima de tudo legível acessem o http://www.opera.com, esse sim foi feito por pessoas que entendem as necessidades do usuário.

    Minha dica final: Estudantes de design, façam o que puderem sem desreipeitar o escuro no claro, uma largura que evite o vaivem dos olhos, e uma fonte sans-serif em um tamanho ao nível do necessário.

  9. Oi, Carlos!
    Você tem algum link ou indicação desses pequenos estudos? Seria bacana pra ajudar a ilustrar o que escreveu.
    Obrigado pela participação!
    (e o site do OPERA tá bem legal, mesmo)
    Abraço!

  10. Gostei muito do texto, concordo plenamente.
    Ninguém é obrigado a utilizar 960px, se precisar aumente ou diminua à vontade para se adapatar ao projeto, a única oservação nesse quesito é evitar a “maldita” rolagem horizontal.
    Quanto ao que o Ortega disse, crime é falar sobre estudos sem apresentar fontes!.

    Adoro esse site apesar dele possuir “tenebrosas cores escuras”: http://www.dezinerfolio.com/, acho que a nossa única obrigação é “reipeitar” o escuro no claro, e uma fonte sans-serif. Aliás, nem isso, existem gênios que conseguem quebrar todas essas regras sem fazer merda.

  11. A crítica a ferramentas como o 960.gs é como a crítica à ferramenta faca. Tudo depende do animal que irá usar…Na verdade sou até a favor de se usar um grid pronto. No mínimo vc vai poder garantir o mínimo de “organização”.

  12. Oi, Marcos! Obrigado pelo comentário. Entendi a comparação que você faz, concordo que talvez seja melhor mesmo usar o 960 do que não usar nada… Mas ainda usando a comparação que fez, existem facões de trabalhar no canavial e facas de precisão pra decorar cenouras. Ainda são facas, mas o uso é completamente diferente.
    [ ]s!

  13. Concordo com os comentários dizendo que há usos e usos.
    O problema do 960 é mais ou menos o que acontece com a Helvetica: sem dúvidas é uma ótima fonte, mas muitas vezes é usada não por ter afinidade com o projeto, mas apenas por que é mais fácil. É só tacar a Helvetica lá e pronto, ó que bunito!
    Isso desgastou a imagem da fonte e a tornou sinônimo de “zona de conforto no design”. E assim acontece com o grid: todos sabem que funciona na maioria das resoluções, então porque gastar tempo?
    Maz novamente enfatizo: há usos e usos! 😉

  14. Fala isso qndo vc precisa fazer um site em 2 dias.
    O mercado nao permite essas suas fantasias.

  15. Olá, Wallace, tudo bem?
    Obrigado pelo acesso e pelo comentário. Discordo total do seu comentário: qual mercado não permite? O meu me permite sim e me valoriza por isso. Cobro por isso. E outra coisa, isso não é fantasia, é teoria, vem dos livros e eu adapto ao meio digital. Dê uma olhada em Jan Tschichold – A forma do livro, da Ateliê Editorial, por exemplo. Ou no Estilo Suíço, quando tudo era feito com grids sólidos e extremamente complexos. Ou então procure como o Paul Rand trabalha. Se não quiser buscar conteúdo gringo, leia algo do Alexandre Wollner…
    Já fiz sites em um dia, dois dias… E tinham grids sim. Um outro detalhe: Site em dois dias não é site, é pastel, bolinho de arroz. Aí o problema não é o grid, é a empresa que não se preocupa com isso, o mercado que canibaliza quem se deixa ou o funcionário que desconhece processos de design. Eu precisei repensar se o que eu queria eram os sites de dois dias ou se queria ser designer. Optei pela segunda alternativa. Existem diversos “mercados”, mas se a gente sempre nivelar por baixo, pensaremos em processos cada vez mais insanos, menos prazos, piores salários e a profissão se marginaliza. Aí não adianta reclamar que existam micreiros quando se trabalha em condições piores que um deles.
    [ ]s!
    Rogério Fratin

  16. Peco desculpa pelo comentario. Depois de ter dado enter percebi que fui um tanto qnto agressivo. Talvez seja a raiva que tenho de trabalhar em locais que me obrigam a fazer um site em 2 dias. Eu apoio seu post, acredito que o Designer tenha q fugir da regra e do padrao e construir um grid de acordo com o seu projeto, mas o q acontece pelo menos para mim eh q tenho q utilizar o 960 pelo curto prazo que tenho. Infelizmente nao posso falar nao aos “projetos” q me aparecem, mas para nao deixar q esse site saia tao ruim em termos de design, sou obrigado a utilizar o 960.

  17. Ei, Wallace!
    Cara, o mercado é uma coisa que vai engolindo, engolindo a gente e nem percebemos. Não tenho nada contra a medida 960px, o que me incomoda é não poder planejar o grid. Se for 960 planejado, ok. Se for 1001 planejado, calculado, ok também. Não se sinta exclusivo nessa realidade agressiva de chefes loucos, demandas porcas e clientes com “toda razão”. Tá cheio por aí, cara. O que mais recebo é email perguntando “mas como vou explicar pro meu chefe que esse é o ‘certo’? Ele nunca vai entender…”
    As vezes não dá pra explicar o certo pro chefe porque talvez ele não seja o chefe certo, sacou?
    Eu, por exemplo, larguei meu emprego na última sexta-feira (8/4/11) porque o design não era valorizado. (Não! Não largue o seu!), mas vai dando uma olhada se esse tipo de demanda é o que você quer encarar daqui 3, 4 ou 5 anos.
    E por favor, fale, sem medo de ser “agressivo” como disse. Acredito que o norte do design é a cultura e o desenvolvimento dele está na execução e nas discussões.
    Muito obrigado novamente pelo acesso e pela promoção dessas discussões, boas, ótimas, que me alegram tanto da audiência que meu blog tem.
    Abração!

  18. SEN-SA-CIO-NAL este post e ainda mais os comentários!

    Concordo com tudo, muito embora não tenha muitas referências em livros e tudo mais (uma pena :/), mas em partes o fato de 960px ser o mais utilizado deve-se também que MUITOS usuários ainda não migraram pra outra resolução, logo, o designer acaba criando um site pra este tipo de público, que por enquanto (espero que acabe logo) ainda é a maioria.

    Outro detalhe que devemos levar em consideração é o “Globo.com”nismo. MUITOS sites copiam (eu não fujo disso) o jeito que o portal da Globo cria seus sites, e isso acaba gerando essa falta de identidade visual, como você mesmo falou Rogério.

    É uma pena mesmo, eu já quis criar sites totalmente horizontais. Vi um projeto de TCC de um site pra Rainha, que era assim. E me apaixonei.

    Mas vai explicar pra quem não entende, que ousar, pode ser o XIS da questão?

    É.. essa #vidadedesigner é complicada!

    Abraços!

  19. o 960 foi criado com o intuito de agilizar o processo, como todo framework foi… então se seu layout se enquadra nas possibilidades que o framework oferece, por que não usa-lo?

    designers não devem dar pitacos no desenvolvimento, cada um com o seu..

  20. Oi, Rodrigo, obrigado pelo seu comentário.
    Não concordo com nada do que você falou, me desculpe. Se cada um pegar sua parte, levar pra mesa e executar, sem interação com o restante da equipe, o projeto será pior do que ele poderia ser. A galera de desenvolvimento SEMPRE solta uns “isso não dá”, “isso é impossível” fazer. Mentira. Sempre dá. Já fui front end (e um pouquinho de back end) por um tempo. Tudo dá, algumas coisas podem ser negociadas para melhor funcionar. Se do lado dos DEVS pode haver esse corte para com o trabalho do designer, o contrário também pode acontecer.
    E é como eu explico: existem dezenas de itens que influenciam na hora de criar um grid. Conceitos visuais, matemáticos, que definem o que fica melhor como resultado final dum projeto. Esse estudo todo chegar sempre o resultado 960px é quase impossível.
    [ ]s

  21. Caro Rogério

    Respeito, absolutamente, sua opinião; mas discordo dela. O tal do 960gd (ou seja lá qual outro for), não se trata de uma ferramenta para solucionar problemas, mas se trata de um conceito. O 960gd é apenas um conceito sobre o qual a criatividade do design deverá fluir.

    Esse é um dos maiores erros que vejo em diversas áreas: profissionais olhando para conceitos como se fossem ferramentas, e com isso ficam esperando o conceito dar as soluções pro problema.

    Aí o cara pega um grid de 12 colunas, olha pra ele e só consegue enxergar as miseráveis 12 colunas e pensa que tudo o que poderá fazer está limitado pelas 12 colunas, como se elas fossem o limite da sua criatividade.

    Ao contrário disso, se olhar para um grid de 12 colunas e olhar para cada uma dessas colunas como um universo infinito de possibilidades, aí tudo muda. Dê a uma pessoa criativa um objeto qualquer e ele te mostrará centenas de aplicações diferentes para o mesmo objeto. O mesmo eu digo: dê a um designer criativo um único espaço com todas as limitações que você quiser e ele criará o inimaginável.

    Pra finalizar, o meu pensamento é que nenhum sistema pronto de grid é capaz de fazer alguma coisa pelo designer. Ao contrário… É o designer quem tem que fazer por ele.

  22. gostei cara … interessante poste me respondeu algumas dúvidas que tinha … vlw

Deixe uma resposta

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