Using CSS for prototyping

Jeff Lash takes on the perennial question of what prototyping tool should IAs use. While not abandoning Visio or Omnigraffle, in Prototyping with Style Jeff suggests that Cascading Style Sheets have a lot to offer and should be looked at seriously as a prototyping medium.

One advantage Jeff offers is that basic content can be laid out, with headings, body copy, navigation, supplementary information like disclaimers. This lets the team focus on the content first, and then CSS can be used to create a number of alternative layouts and visual styles.

While this may work with a mature team, many of the people I work with have a very difficult type grasping abstract presentation...whether it's sticky notes on a page, or vanilla XHTML, text only lists of page content. I've used mood boards, design the box exercises, and rapid throwaway photoshop comps to address these peoples' need to have something more visual to comment on, while still working to separate those stylistic inputs from actual IA and interaction design. I'm not sure CSS will help me there, but I'll see when I next have the chance to try something different than the usual wireframe fare.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Worked for me and my team.

Using CSS and XHTML to build our prototypes saved my team of 2 people weeks of work building and tweaking prototypes of my company's redesign. It gave us the flexibility we needed to help out folks who didn't respond well to vanilla XHTML or visio maps and gave people something they could click on. Because we had so much control over the look and feel of our pages, our prototypes performed double duty as testing prototypes. In the lab, if a sitewide change/fix needed to be done, we could do it on the fly by tweaking CSS. It also paved the way to adopting CSS and XHTML instead of HTML 4. If you haven't protoyped using CSS, give it a try I highly recommend it.

Additional advantages

I've been using the same technique for a while. The last two projects we worked on moved from CSS prototype to launch implementation with far less effort than previous projects that used traditional techniques.

I found that using CSS so early in the game helps designers who might not be fully conversant in the full capabilities of CSS to give it a closer look. A few simple demonstrations of how dozens of lines of JavaScript can be obviated by clever use of CSS tends to open their eyes. It also helps them realize what you're talking about in those moments when you have to explain why "pixel perfect" page structure is not necessary or even desirable.

The use of CSS also seems to make clients happy because it's closer to the end result. Showing them "web pages on a web browser" early in the process has worked well for me, because it demonstrates "implementation" progress as opposed to "planning" progress. It also reinforces my efforts to get them involved in the development process, because CSS-defined pages are a more familiar and approachable environment for most clients.

Kudos to Jeff for making note of this often very effective technique.