Fluid 960 Grid System: Rapid Prototyping. Tried it?

12 Nov 2009 - 5:37am
4 years ago
11 replies
3960 reads
Andy Howard
2009

Has anyone used a fluid 960 grid framework for rapid prototyping?e.g.
http://www.designinfluences.com/fluid960gs/

I'm particularly interested in how usable it is for a UX person like
me with *some* (i.e. junior level) CSS/XHTML knowledge. I've had a
quick play with it, but wondering how practical and efficient it is
for 'mock ups' and client work.

I can see it being extremely efficient down the line when moving into
development (i.e. prototype becomes the development solution), but
I'm anticipating it takes a little longer during the early
prototyping phase.

Any thoughts? Any other CSS/HTML frameworks (Blueprint, etc) you'd
recommend? Particularly interested in:

* Fast prototyping.. i.e. speed!
* Re-usable code

Cheers,
Andy

http://andyhoward.id.au/

Comments

12 Nov 2009 - 6:30am
Eugenio Grigolon
2009

What about an easy and quick CSS/XHTML rapid prototyping with any
CSS/XHTML knowledge?

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

12 Nov 2009 - 6:07am
Nicolas Leroy
2008

Hi Andy,
I found it a practical way to skip the mock-up stage, not the
wireframe stage. Indeed, as doing mock-ups i.e: using Photoshop tends
to produce unrealistic screens (i.e: typography with photoshop is
always better/different than typography on the browser).

However, I would say it requires some coding skills, and more
important spend time on what is important.

Maybe roundtrip btw coding and Photoshop is the way to go.

CSS frameworks are indeed a great way to speed up the production or
early mocks (but again, not replacing wireframes)

Nicolas

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

12 Nov 2009 - 7:29am
zakiwarfel
2004

On Nov 12, 2009, at 3:07 AM, Nicolas Leroy wrote:

> I found it a practical way to skip the mock-up stage, not the wireframe stage.

Couldn't you just "wireframe" in HTML?

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

12 Nov 2009 - 7:34am
zakiwarfel
2004

On Nov 12, 2009, at 2:37 AM, Andy Howard wrote:

> Has anyone used a fluid 960 grid framework for rapid prototyping?e.g.
> http://www.designinfluences.com/fluid960gs/
>
> I'm particularly interested in how usable it is for a UX person like me with *some* (i.e. junior level) CSS/XHTML knowledge. I've had a quick play with it, but wondering how practical and efficient it is
> for 'mock ups' and client work.

Frameworks like 960.gs (the original), Fluid960gs, Blueprint, and YUI! are a great way to prototype. It's almost like getting a prefab house kit—most of the pieces are there, but some assembly is required.

I'm not sure I would use 960 or Blueprint for production. You could, but it really depends on what you're building. If you're building brochureware sites, then it should be fine. If you're building complex sites (e.g. several templates, thousands of pages) or webapps, then you're probably better off either using YUI! or building your own.

These frameworks are a great way to sharpen your skills, make your own bridge between design and frontend development, and prototyping.

You might notice I didn't include YUI! in the "I'm not sure I would use for production" statement. Well, that's because YUI! is used across the Yahoo! platform. It's tested, flexible, has tons of documentation, and is really extensible. YUI! is obviously one you could use for production.

Or of course, learn from one of these and then roll your own (that's what we did).

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

12 Nov 2009 - 12:43pm
Anonymous

Any wireframes we don't do with pen and paper end up being done in
HTML. To speed things up we use our own CSS framework for layout, but
I would say there's nothing too much wrong with using one of the
popular frameworks for HTML wireframing/prototyping.

We avoid using CSS frameworks in production, but if they speed up
wireframing that'sa good thing. Basically coding (or using software
for that matter) shouldn't get in the way of thinking and designing.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

12 Nov 2009 - 9:41am
Anonymous

My experience is that building wireframes in applications such as
Axure or Visio are wasted effort. They quickly become a maintenance
overhead.

I have put effort into creating a prototype framework using Polypage,
JQuery and 960grid. Over time I'm building up a library of greyscale
XHTML components that simply 'plugin' to the 960 grid. It also
helps that we build in .NET so I can take advantage of master pages
and user controls.

The process becomes - sketching and discussing ideas, refine, and
then build the greyscale wireframes in the XHTML.

Arron Cupid

Twitter: @arroncupid

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

12 Nov 2009 - 3:58pm
Brent Dickens
2009

I've used the 'Blueprint' framework extensively on various
projects. It's a great starting point to develop quick prototypes.
For the final production pages I always use a highly custiomised
version but it still uses many of the underlying principles such as
the css reset, typographic hierarchy and grid structure.
CSS frameworks are definitely worth investing some time in I think.

Cheers,

Brent Dickens %u203A Visual Interaction Designer
Experience Design Consultant | Lead Visual Design
%u203A M 64 21 911 030
%u203A E brent at lushai.com

LUSHAI: Experience Strategy & Interaction Design
http://www.lushai.com

"Don't mistake legibility for communication." -David Carson

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

12 Nov 2009 - 11:09am
Andy Howard
2009

Great input everyone, much appreciated.

Todd's overview seems spot on to me - a good summary of the
frameworks available, their practical uses and the suitability of
code for production. Very handy, definitely answers my question.

And Todd - your prototyping book looks very cool. Will be buying it.

Cheers,
Andy

http://andyhoward.id.au/

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

13 Nov 2009 - 9:02am
zakiwarfel
2004

On Nov 12, 2009, at 8:09 AM, Andy Howard wrote:

> And Todd - your prototyping book looks very cool. Will be buying it.

Thanks, Andy. BTW, if you use http://bit.ly/19Hiir Discount code PRPUBNOT you can get 15% the purchase price.

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

13 Nov 2009 - 9:04am
zakiwarfel
2004

On Nov 12, 2009, at 9:43 AM, Richard Rutter wrote:

> We avoid using CSS frameworks in production, but if they speed up wireframing that'sa good thing.

So, do you recode everything then? Or do you strike some balance between some of the framework stuff and a more optimized version for production? Or something else.

We've done a bit of both, but are attempting to pull together a framework that will be optimized for both prototype development and production w/o having to rewrite anything, or at least keep it to a minimum.

Cheers!

Todd Zaki Warfel
Principal Designer
Messagefirst | Designing Information. Beautifully.
----------------------------------
Contact Info
Voice: (215) 825-7423
Email: todd at zakiwarfel.com
Blog: zakiwarfel.com
Twitter: @zakiwarfel
----------------------------------
In theory, theory and practice are the same.
In practice, they are not.

13 Nov 2009 - 11:17am
Andy Howard
2009

@arroncupid: "The process becomes - sketching and discussing ideas,
refine, and then build the greyscale wireframes in the XHTML."

Brilliant, this is exactly where I'm headed. My current method is
sketch then prototype w Fireworks, soon it'll be sketch then build
in XHTML. Thanks.

@ Richard Rutter: "Any wireframes we don't do with pen and paper
end up being done in HTML."

This seems the best approach to me, by far (similar to Arron's
comment). Paper then code - perfect. Like Todd, I'm curious about
the re-use/re-code balance.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=47347

Syndicate content Get the feed