Um gabarito para o seu grid web design
set 13, 2010 5 Comentários
Eu ando às voltas com a finalização do site do meu web studio, um bebê que nasceu em UTC+9, minha banda de blues e uma outra de rock’n'roll, e um novo (e bem completo) artigo sobre o desenho de sites com o Inkscape (demora mais porque não é em vídeo). Mas, enquanto vou me desdobrando para dar conta de tudo, quero deixar aqui uma imagem que uso tanto no Inkscape, quanto no complemento “pixel perfect” do Firefox, para alinhar meus layouts. Ele é baseado em 12 colunas de 60px com 20px de espaçamento, totalizando os 980px de largura do viewport com maior market share da web no momento.
Para utilizar, basta importar esta imagem para a camada mais superior do Inkscape ou carregá-la no pixel perfect. Sintam-se à vontade para usar, modificar, redistribuir, etc… é livre e grátis! Por enquanto vai a versão em PNG mas, quando o site estiver no ar, eu publico o SVG.
Sobre Blau
Já pensou em usar o grid 960?
http://960.gs/
Seria muito legal se vc disponibilizasse modelos de template no inskape também.
A tutorial dos botões foi muito bom.
Sim, Willian, eu conheci o 960 e tenho feito uns testes para ver se funciona na prática. Para blogs e e-zines ele já me convenceu. Mas antes de adotar de vez, quero testar o blueprint: http://www.blueprintcss.org – Sobre templates, a que tipo você se refere? Modelos para sites? Se for isso, tem alguns a caminho, mas só depois do tutorial que prometi.
Minha área é estrutura e um pouco de desenvolvimento. A parte artística é péssima. Você fala que costuma trabalhar o site inteiro no inskape então seria interessante os modelos de template para eu conseguir visualizar como é a organização, alinhamento, etc. Mais para entender o processo do que usar o modelo em sí.
Seria interessante também você poderia usar um modelo seu pronto para montar um vídeo sobre recorte de imagens já preparadas para o site e css.
Bacana Willian! Então… o artigo que prometi é exatamente sobre isso. Vamos ver se consigo fazer ainda esta semana.
Eu gosto do material disponibilizado pelo yahoo, tipo:
http://developer.yahoo.com/yui/grids/
Fica a minha sugestão de “varrer” http://developer.yahoo.com