Some Experiments with HTML/CSS Prototypes

A couple of weeks ago, I had a discussion with Erika and Bill about the shortcomings of wireframes used in evaluations. I put in my two bits that we should really test with HTML prototypes. Bill pointed out that HTML prototypes had a couple of drawbacks in our work here: they require additional resources to create, and people who see them tend to think that they are the "real thing" -- decision makers can be seduced by the prototype and believe that the design is already baked.

So I think the requirements for HTML prototyping comes down to this: we have to build the HTML prototypes very quickly on the cheap, and they can't be mistaken for the final design.

Friday or Monday, Chris sent me some "cool" links that address these issues head on. Chris, I don't know where you find these websites, but they are gems. The upshot of this is that I could quickly create an interface, including form elements. Being the geek that I am, I wanted to know how effectively this could be applied to a template and across a web site. My personal website (which you should never visit at work) is template driven. In about 15 minutes I designed a new layout template and applied it to my web site. The results, while aesthetically challenged, showed to me that an HTML prototyping approach is feasible.

So I guess I'd better list my caveats. I acknowledge that I have a fair amount of experience with HTML and CSS. If you want to build HTML prototypes quickly with the tools, you need to have an understanding of CSS and HTML.

I suggest the books, Cascading Style Sheets: Separating Content from Presentation, Briggs et al., Glasshaus, 2002, and Cascading Style Sheets, Designing for the Web 2nd ed., Lie and Bos, Addison-Wesley 1999. For HTML, I always suggest Werbach's Barebones.txt.

And now, Chris' super-cool links that changed my life:

All of these tools generate HTML code and the underlying CSS. These really are better than sliced bread!

Posted by John on 2 October 2003
[comments]

I’ve been working on a layout that “looks” right, but can easily turn into mashed bananas. Chris, can you help me make my layout more robust? There’s just a couple of wacky things about it. —JB

John :: 7 Oct @ 9:56 am

Alright, alright. I’ll learn HTML & CSS. Or at least how to use the links Chris found.

Jessica :: 6 Oct @ 9:37 am

At the software company I worked at prior to starting at FM, we used to build what we called “black and whites” - html prototypes with no visual design. The key thing to communicate to everyone involved was the fact that these b&w’s were like a house built on a Hollywood soundstage - enough like the real thing to give the right feel and appearance, but you wouldn’t want to live in it. They did, however, allow users to begin interacting with the application very early in the process, and also provided an effective model to demo while the real construction work was going on.

Chris :: 3 Oct @12:09 pm
[add a comment]


Remember me?