sergiosantos.info

blog and works

Grid based webdesign with Boks and Blueprint

18.Apr.2009

I’ve been researching for a while now on web design grids. Specially on CSS frameworks who do all the grid work for me. I’ve found out that the design of this blog uses the YUI Grids CSS. And after having tested a couple of them, I’ve settled on Blueprint, though I still hadn’t done any real work using it.

Then some weeks ago I’ve found Boks, an AIR application that works as a visual editor for websites interfaces, using Blueprint. And above that, I got an excuse to play with it: the new website for jeKnowledge. It ended up something like this on Boks:

Grid interface on Boks

Then Boks exports the CSS files and a simple HTML file with the base structure. Of course this is not the end of it if you really want to work with a grid based web design. Boks also lets you configure a baseline rhythm, the “horizontal lines” of the grid. Then you have to spend some time making sure the all elements fit neatly in the grid, to get something like this:

Of course the overall effect will be more effective in websites full of content and images, like newspapers, but it is still important to maintain consistency in simpler pages. And all the constrains grid based design impose may be seen as inspirational aids. For me, this is surely a design process to repeat.

You can find the final result at http://jeknowledge.com (I was helped with the design elements by members of the company. Not really my strong suit).

If you enjoyed this post, consider subscribing to my RSS Feed