960 Grid System: HTML wireframes?

A long time ago for a project that didn't require much visual design work, I created wireframes in HTML. I thought I was making the handoff to our developers a little smoother, but it didn't really work out that way. In my case, two things were wrong with this approach: 1) my basic assumption was off: creating the HTML for this project was not really the giant task that I assumed it was; 2) the code I wrote wasn't really re-usable. *cough*

I think a lot of IAs & interaction designers have gone looking for this “holy grail” deliverable at one point or another—the deliverable that's more than just your standard, garden-variety deliverable, the deliverable that is the shell of a site that everyone else builds upon. As far as I can tell, it never really works like that.

I forgot all about it until today, when I came across the Fluid 960 Grid System, a set of interactive page layout templates written with HTML, CSS, and Mootools.

I'm tempted to try wireframing with this framework, but I think it works best in the following situation:

  • Rapid development environment (or just the old fashioned compressed timeline)
  • Buy-in on using a 12 or 16 column grid from visual designers
  • Buy-in from developers that they can work with this framework with few modifications

Even if 960 Grids doesn't work as a wireframing tool, I can see a lot of potential just for getting a quick idea across, or developing a clickable prototype for user testing.

zp8497586rq

Comments