Automatize seu processo de projeto de grade com o GridGuide
O primeiro grande passo de qualquer design de site é escolher uma grade. Isso normalmente define a largura máxima da página, juntamente com quantas colunas internas e medianizes serão usadas para dividir o layout.
Você pode tentar construir o seu próprio, mas a melhor ferramenta para este trabalho é o GridGuide. É um webapp totalmente gratuito que automatiza totalmente a geração de grade para qualquer site, independentemente do tamanho.

Basta colocar a largura máxima desejada, seguida do número de colunas desejado. Normalmente, esses dois números devem ser divisíveis, por isso é uma boa ideia evitar números primos. Aqui estão algumas larguras máximas comuns para sites:
- 1100 por 12 colunas
- Colunas de 1200px por 8/12
- Colunas 1240px por 8/12
- Colunas 1440px por 8/10/12
- Colunas 1600px por 8/10/12
Não há absolutamente nenhuma resposta errada aqui. Você pode escolha qualquer largura e contanto que seja divisível pelo número de colunas então você está pronto para ir.
O GridGuide é uma aplicação web rápida, de modo que é atualizado automaticamente quando você insere um valor no campo de entrada. Então, ao ajustar os números no topo, você notará o visualizações de grade automaticamente mudam.
Eu costumava confiar no Photoshop para este trabalho e isso me deixou louco. Criar honestamente uma grade é um dos passos mais frustrantes ao projetar um novo site, e obter os números perfeitos de pixels pode enfurecer.
Mas o GridGuide é completamente automatizado e oferece várias opções de grade com base em diferentes tamanhos de colunas e larguras de medianiz..
Você também pode baixar uma imagem PNG completa da grade que você escolher para importar para o Photoshop. Isso vai poupe muito tempo então você não está recriando grades com ferramentas de forma a partir do zero.
E, se você gosta de um determinado estilo de grade, pode gerar um link de compartilhamento para um favorito ou para compartilhar com outras pessoas na Web..

Para uma ferramenta que é totalmente gratuita e tão fácil de usar, essa deve ser a minha principal recomendação para cada web designer. Se você luta com grades e odeia projetar seu próprio, o GridGuide é um recurso indispensável na sua caixa de ferramentas..