

Ask YC: Best HTML Prototyper? - DanielBMarkham

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?<p>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.
======
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.

~~~
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.

------
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.

------
mathoda
i use adobe fireworks for drawing ideas out of my head and textmate text
editor to actually code the page

------
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.

------
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.

------
mattlarge
I normally draw a prototype in Inkscape using layers to show different states
of a site.

------
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.

------
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.

------
nreece
A pen & paper mockup to start with...

------
astrec
A Moleskine pocket storyboard notebook & and pencil. Carried _everywhere_.

------
lyime
Adobe Illustrator hands down.

------
mixmax
notepad and a knowledge of html and css

