Print-friendly version
Send to friendDesigning for Fusion
Grid-based design
As grids have gained popularity on the web, there are a huge number of resources and tips out there for doing grid design. Rather than reinventing the wheel, we’ll link to some of our favorites here.
Inspiration
- Grid and column design gallery from Web Designer Wall
- Gallery of sites using 960.gs
- Another showcase of grid designs, with resources and tutorial links too
Articles & tutorials
- Clear, simple overview on the “Seven smooth steps to superb grids”
- Common misconceptions about using grids
- Want even more? Check out the “Things You Probably Don’t Know About Grid-based Design” section in this Smashing Magazine piece
Grid design templates & tools
There are lots of tools and downloads out there to make your life easier, whether you’re creating a grid-based Drupal theme design in Photoshop or coding a custom grid layout with Fusion.
Templates
- Downloadable 960px grid templates for Photoshop, Illustrator, Omnigraffle, Fireworks, and more. Printable sheets too!
- Another 960 grid Photoshop template
Tools
- Firefox extension for viewing grid overlays on any webpage
- A great web-based grid calculator
- Another grid calculator if the one above doesn’t float your boat – this one also has draggable ad dimensions
Downloadable Drupal wireframing components for Balsamiq Mockups
We created some Drupal components for Balsamiq Mockups, a great cross-platform wireframing application. It costs $79, but you can also get a free license if you are an open source contributor or other “do-gooder” and send them an email.
These components include common elements from Drupal core, such as a teaser listing, login block, menus, and Drupal-style pager. There is also a full node page which has Drupal’s messages, administrative tabs, a comment thread, and comment form. It also has a few extras like a Quicktabs block and Ubercart shopping cart block.
