Ask HN: What's your favorite UI Mockup tool? - knarf55
======
burnblue
I've gone through a bunch - Illustrator to Balsamiq to Mockflow and now
HotGloo. I like Mockflow and HotGloo (both online fee-based apps) because they
offer:

(1) Master Pages (or at least Master Objects) to keep things DRY (2) a way for
clients to view, navigate, and comment directly on the frames (3) a good
balance: low-fi enough to avoid seeming like a design pass, but hi-fi enough
that each object is distinct and recognizable (4) a good selection of
resizable, customizable widgets (5) an environment separate from the design
file. Unlike many, I actually prefer to start from scratch with the design -
it frees me from conforming too tightly to the frames, and leaves open the
possibility for further iteration. Also, it's handy when passing frames to a
visual designer - they can use whatever design tool they like.

------
plainOldText
Keynote for Mac. I love the fact it's so easy to use. And sometimes the
mockups look so good you'll want to "lick them", to quote Steve Jobs. :))

~~~
knarf55
cool -- you actually create your entire wireframe in keynote?

~~~
plainOldText
Yes. I do everything in Keynote. Then I'll pick up the colors I need and start
coding the CSS part. And when I need some photo editing, I use GIMP.

Usually the mockups are better than the final product, because in Keynote 1\.
you can align everything so damn good 2\. the font rendering looks awesome

~~~
navs
And I suppose being able to add animation kinda helps as well.

------
nolok
Balsamiq

~~~
pbreit
I like balsamiq specifically because it is rough. That eliminates a lot of the
wasted time arguing about pixels.

------
jjcm
Photoshop. I've become so accustomed over the years to the tools/interface,
that it's actually faster than pen/paper. Setting it up with common UI
elements to drop in quickly makes mockups a breeze.

~~~
sgdesign
Photoshop for me as well, because I can then easily transition from the
wireframe to the high-fidelity mockup. I much prefer it when the evolution is
a continuous process, rather than being interrupted by switching software.

~~~
burnblue
I used to feel that way, but when I began using separate framing software I
was pleasantly surprised by the results. Having to start the design phase from
scratch in a new program freed me from slavish adherence to the frames and
allowed designs to progress further. Horses for courses though - I'm sure
everyone has their own take.

------
imjoel
The most efficient thing for me has been Illustrator w/ wireframe symbols.
It's not so low fidelity that I can't envision the end products, additionally
I enjoy the control vs. mockup tools like Balsamiq.

There some good wireframing resources for Illustrator and other programs in
this Smashing Magazine post:
[http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-
we...](http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-
wireframing-kits-resources-and-source-files/)

~~~
knarf55
thanks -- i'll check it out! Appreciate it

------
bkbonner
Wireframe Sketcher in Eclipse <http://www.wireframesketcher.com>

------
navs
Google docs, believe it or not. I found a nice wireframing set at the
following address: [http://mortenjust.com/2010/04/19/a-wireframe-kit-for-
google-...](http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-
drawings/)

------
pmorel
There're also SketchyPad and iMockups. I've created a list of the tools
presented here, you can see it on <http://www.romku.com/list/343849/ui-mockup-
tools>.

------
knarf55
Thanks again for all the feedback. I've been trying various tools and i've
honestly been loving flairbuilder. Quick, simple to use, and it's highly
interactive that's just built in. Haven't tried balsmiq yet but will give it a
shot.

------
imusicmash2
as a product manager, I use 2 tools for wireframes and flow design

Flairbuilder and OmniGraffle <http://flairbuilder.com/>
<http://http://www.omnigroup.com/products/omnigraffle/>

The Flairbuilder developer is quite active and responsive about updates. I
switched here from Balsamic because Flairbuilder allows for somewhat dynamic &
functional mockups.

<http://twitter.com/#!/flairbuilder>

~~~
knarf55
Thanks -- i'll try it out Flairbuilder and I do like omnigraffle as well.

------
stevelosh
A whiteboard, or Penultimate on the iPad if there's no whiteboard around.

~~~
loungin
Second for whiteboards. If I must get it into electronic form either take a
picture or inkscape.

------
chime
I love Pencil for Firefox. It's seriously underrated:
<https://addons.mozilla.org/en-US/firefox/addon/pencil/>

~~~
naner
_Not available for Firefox 6.0_

I do believe Firefox's frenetic update schedule just bit me in the ass.

EDIT There's a standalone version: <http://pencil.evolus.vn/en-
US/Downloads/Application.aspx>

EDIT2 This add-on ("temporary branch") works with Firefox 4-6:
<http://code.google.com/p/pencil-ff4/>

~~~
ExpiredLink
IIRC, the standalone needed admin privileges. Maybe there's a no-install
version.

------
joshuabutner
Omnigraffle, Photoshop or paper. Although, seeing the templates created by
Amir Khella (keynotopia.com) has made me want to try to use Fireworks a bit
more for this.

------
PCheese
Mockingbird - <https://gomockingbird.com/>

Maybe it's just because I love web apps done with Cappuccino.

------
ljf
Trying the templates in Keynotopia, they are good, but I think I need to work
longer on paper before spending time in PowerPoint.

------
benwerd
Sharpies and copier paper. Seriously: nothing else has been as efficient for
me. (Although it depends on your Sharpie skillz.)

------
elii
Mockingbird - <https://gomockingbird.com/>

------
theitgirl
I have tried Pencil, Balsamiq, MockingBird and Google Docs. Google Drawings
works best for me.

------
Pickels
Fireworks

------
graiz
A piece of paper.

------
pwg
Paper first, a Tcl/Tk mockup second.

------
Off
Pen and paper then Inkscape/Gimp.

------
sixwing
in order of preference: 1\. pen + paper 2\. html + css 3\. omnigraffle 4\.
photoshop

------
filipmares
Paper 1st and then Keynote.

------
abbasmehdi
Balsamiq

------
mannicken
Paper, Illustrator, HTML.

------
ct
Expression Sketchboard

~~~
fractallyte
OK, now that someone's mentioned Expression, I'll note that _I_ use it
extensively - the original version, that is:
<http://en.wikipedia.org/wiki/Creature_House_Expression>

Aside: Creature House Expression was a wonderful - yet industrial-strength -
'painterly' vector drawing package. Superb UI (which many users complained
wasn't 'Adobe' enough), and a fun, quirky website. The combination of science
and art made it one of the highlights of successful software development. You
can guess what happened when Microsoft acquired the company... ;-)

Anyway, MS were kind enough to make the Windows and Mac Classic/OSX versions
available for free - follow the wikipedia links.

Just remember, this is software that was a rival to Adobe Illustrator, and
contained technology that some thought would threaten Flash. Steep learning
curve (but excellent PDF manual included), and capable of far more than UI
mockups. The old Topica mailing list is a mine of useful information, and
Yahoo has a current (but less trafficked) list.

------
suhail
Photoshop

------
ttk23
html/css/js

