HN Explorer

Ask YC: Best HTML Prototyper?

8 points by DanielBMarkham ↗ HN
So I have a new startup idea, and instead of looking at the technical details (which I always can work out anyway) I thought I would start looking at the User Interface. What's the best HTML prototyping tool?

Some people say Adobe Photoshop, but I don't understand how a painting and image tool would be useful. Also note that I am _not_ talking about development environments! I simply want the best tool -- easiest to use and full of great graphics design ideas -- to markup a dummy HTML page.

18 comments

[ 3.7 ms ] story [ 45.9 ms ] thread
picnichouse
I love Axure for prototyping. I'm a mac user and it's windows only, and it's the only reason I have VMWare installed. Once you get it set up properly, the fact that it's running in windows doesn't even get in the way.
mixmax
notepad and a knowledge of html and css
[deleted]
(comment deleted)
[deleted]
(comment deleted)
danlester
I've actually found Excel very useful for knocking-up a site layout enough to get a designer onto it...

For getting something graphical, I've used SiteSpinner. It gives PowerPoint-style WYSIWYG editing, and produces pretty good HTML code. The pages look exactly like they did when you drew the page. Cheap but has a lot of design functions.

mathoda
i use adobe fireworks for drawing ideas out of my head and textmate text editor to actually code the page
mattlarge
I normally draw a prototype in Inkscape using layers to show different states of a site.
daragh
Pen & paper for rapid prototyping, then start mocking up with actual code.

This isn't 1999, you'll save yourself a lot of trouble than messing around with Photoshop layers.

If you actually begin coding well from the ground up the application of design will be far more natural and agile than if you were trying to slice up a psd.

DanielBMarkham
Pen and paper? E-gads man!

Yes, of course wire-frame with _pencil_ and paper. I was specifically thinking of a tool that could show some design patterns -- typography, color schemes, use of white space, and then help put together a static page.

Just something as a calling card/vision tool, something to give an idea of what the user experience and benefits would be like with the completed product.

In a busy/crowded market, it seems to me that interface design is more important than ever.

bigtoga
Spoken like a true programmer hehe :)

I have to disagree here as I think Photoshop for prototyping will save you days of time. Starting out coding is like saying, "I don't value the design; I want to skip that and just get the app ready." By doing it in Photoshop (or something similar) you can ignore the differences between browsers and ignore CSS, HTML, Javascript, etc and focus on the design. I've found that, if I use Photoshop, I'm able to complete the design and then focus on the code. Step 1: design. Step 2: code. If I try to start with the code, it's a back and forth, back and forth and the process takes me a lot longer and the design suffers greatly.

Photoshop is a design tool, not an HTML generator, in my opinion. You need an HTML editor to code it and it's probably best to code it by hand instead of using a generator. I use the Photoshop-generated HTML only as a last resort if I can't figure out how to hand-code it.

[dead] benn
Me. I'm the fastest html prototyper. ;)

Pen and paper then textmate i reckon.

lyime
Adobe Illustrator hands down.
nreece
A pen & paper mockup to start with...
astrec
A Moleskine pocket storyboard notebook & and pencil. Carried everywhere.
kungfudoi
I was in your shoes couple of years ago and was researching for an application to do prototyping and storyboarding. I ran into an open source project called Denim coming out of University of Washington. I never got the chance to use it though. Good luck and here's the homepage is:

http://dub.washington.edu:2007/projects/denim/

jamesbritt
DENIM is quite cool. A bit quirky last time I used it, but really handy.

However, it seemed to get wonky with 10+ pages in a site.

Maybe that's changed.

Works really well with a tablet interface, though a plain mouse will work too.

joshwa
it really depends on what you're trying to accomplish--

-- for wireframes, showing what info in what form, and information design sketches: omnigraffle, indesign

-- for full-on mockups, prototyping ui elements that need more polish, typography and overall design comps: photoshop/illustrator

-- for interactive prototyping, demonstrating an interaction paradigm: html/prototype/scriptaculous, dreamweaver's templated JS functions (MM_swapimg, etc), or a good-old-fashioned paper prototype/whiteboard

Your project will require one or more of these different fidelities of prototype, depending on what you have in mind.

rantfoil
On a Mac, you've got to use Omnigraffle. On a PC, consider Powerpoint or Visio. Photoshop is great in the right hands, but a huge waste of time unless you're a graphic designer.