

Win customers and improve products with HTML prototypes - seanjohnson
http://digintent.com/prototyping-in-html.html
Why HTML prototypes can improve customer development and lead to better products. Includes a demo HTML prototype with some good pointers for improving workflow.
======
wushupork
I think HTML prototypes are vital to the success of a web app. That said there
is a true danger with an HTML prototype that looks too good. Customers often
have a difficulty understanding that this is a mockup and it doesn't work. Non
savvy customers think it looks like it works even though the guts of the
application which takes up the bulk of the development time hasn't even begun.

~~~
seanjohnson
Totally agree - other than relevant images (the shoes, in this example) we try
to avoid using much in the way of color, icons or other design. We use
variations of gray shading, unstyled buttons, Helvetica across the board.

~~~
seanjohnson
Haven't been able to convince ourselves to use Comic Sans though :)

------
joedwy
I agree that customers don't always understand why it doesn't work when an
HTML prototype looks too good. However, I think that's more of a project
management issue than anything else. Presenting it properly can help customers
understand what they're doing... and then they love that they can test
usability and flow before it's too late to change without a change order.

------
matt1
Shameless plug: I'm working on a HTML5-based high fidelity mockup tool called
jMockups [1], which is intended to be an alternative to Photoshop and HTML for
creating website mockups.

You can't link the mockups together yet and its still a bit buggy, but long
term I want to make it effortless for even the most design-challenged
developer to design beautiful websites.

Let me know what you think: matt@jmockups.com.

[1] <http://www.jmockups.com>

~~~
seanjohnson
That's pretty slick man. Nice work!

------
jefflinwood
Do you use Boks (<http://toki-woki.net/p/Boks/>) with your Blueprint CSS
framework? I've found Boks to be a great way to bring some of the benefits of
mockups to HTML prototyping. I still start from pen and paper first, because I
find that I have to know what I'm going to put into Boks.

(I'm a developer, not a designer, but I've found myself doing more front-end
work recently for myself and clients)

~~~
seanjohnson
Never have - looks interesting though. We'll have to try it out!

------
alttab
Prototypes shouldn't be in HTML.

Edit: Clarification, when using "prototypes" with clients I pretty much always
mean mock-ups. Try not to write code unless you have to.

------
doubleg
Easily showing the client different states of a page was something I was
missing the last time I used this technique. So I created a small jquery-
plugin, demo here:
<http://thinkcreate.github.com/jquery_protoparts/index.html>

~~~
seanjohnson
That's very clever. Thanks for suggesting - we'll have to try that soon!

------
trustfundbaby
Axure RP <http://www.axure.com/> also generates some pretty sexy HTML
prototypes ... all completely self contained and renderable in any browser.

Has helped make every app I've ever done for a client involving it, go really
smoothly.

------
jtchang
HTML prototypes are good for web applications but not so much for marketing
type websites. I use HTML prototypes as a tool for getting the initial set of
requirements and setting some scope.

~~~
seanjohnson
Agree - we primarily do product development, so it's usually relevant for us.
I will say we've implemented HTML prototypes for checkout processes in the
past with some success as well.

Can you elaborate on how you've used them to set scope?

