Ask HN: what tools do you use for UI mockups?

15 points by offdrey 13 years ago | 26 comments

I am currently trying to choose a product for making UI prototypes. So far I've found these : Balsamiq, FlairBuilder, Moqups, JustInMind, Axure RP. So I was wonderng if anyone had any experience with them or other ones?

userium 13 years ago |

I have used Mockingbird (https://gomockingbird.com/) and Balsamiq (http://www.balsamiq.com/) in the past. Currently I like to use Omnigraffle pro (http://www.omnigroup.com/products/omnigraffle/).

mrgreenfur 13 years ago | |

I use and adore Omnigraffle. It is hands down the best diagraming software I've ever seen.

chris_mahan 13 years ago |

Pen and paper. If I need to have an electronic version, I take a picture with my 8 megapixels phone camera and I email it.

It's the fastest tool, but it does require knowing how to draw straight lines.

It also leaves management under no illusion that the thing is "almost done".

I work at a company in the top 15 of the Fortune 500.

aespinoza 13 years ago | |

I agree to a certain extent. I still use my notebook to create mock ups, but nothing beats balsamiq's demo-ability. The fact that you can take a mock up and make it interactive, and show the real flow is amazing. I have taken our mock ups done in balsamiq to design meetings, and it makes it extremely easy.

chris_mahan 13 years ago | | |

The thing I like about pen and paper is that I can go hang at the local coffee house or library or park, and not have to worry about wifi. Also, a guy scribbling in a book isn't as stared-unwelcomingly as a guy with a laptop.

tallofrenzy 13 years ago | |

Unfortunately,with pen and paper, it gets clumsy when you have to erase (even if you use a pencil/eraser)..

chris_mahan 13 years ago | | |

That can be a problem. I usually just make all the changes I need (gets scribbly fast) then turn the page and copy the good stuff to a new page. This works because I can draw fast.

michaelbuddy 13 years ago |

Axure is a good tool. Really easy to get up to speed and small niceties that keep things quickly moving. I like it better than the Free 'Pencil' software because you can mockup dropdowns really easy. You can also change the fidelity of the mockup so it looks like hand drawn. Seems gimmicky but people sometimes need it to be hammered into them that it's a wireframe.

When you export, you can export to a working clickable mockup with notes and things on it. I've felt pretty darn productive with Axure and that's why I recommend it.

michaelbuddy 13 years ago |

If you work on Windows and want something with full vector graphic drawing, take a look at Xara Designer Pro or Xara Web Designer Premium. You'll have drawing capabilities like with Illustrator, but it's faster and you can assign things as buttons and mockup working websites.

You can make working dropdown menus too.

It produces a lot of absolute positioned css code, so it's not integrated with any web framework but does render pixel perfect.

I'm not sure how it would handle a responsive site, probably not, but you could quickly mockup the mobile version though.

You might also look at Corel Draw too.

If you want free, again Pencil, Inkscape or try the Google Draw templates - http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-...

another recommend for draw.io and also look the maqueta software - http://maqetta.org/news/2011/ibm-contributes-maqetta-html5-v...

aespinoza 13 years ago |

I used Visio for the longest time. This year though, I began using balsamiq (http://www.balsamiq.com/) and I am extremely happy with it.

I have also seen Jetstrap (https://www.jetstrap.com/) and it looks very cool but haven't tried it myself.

[EDIT] Fixed Typo.

inokon 13 years ago |

Hi, I have been looking at fluidui which is purported to be faster than paper for web apps. I like it because you the UI is drag and drop. You can zoomout and just make a thumbnail view or zoom in and detail each page. I like invisionapp for stiching together your paper or illustrator sketches with hotspots and an easy to email url that invites you to bookmark the app. I bought Balsalmiq because it was so dang satisfying but I find my workflow is not awesome because I can't play with it easily on my phone.

Right now I just bought a $4 pad of news print from BLICK. It's cheap and I can use it on the airplane which is where I'll be tomorrow. HTH!

thdn 13 years ago |

Take a look at http://pencil.evolus.vn , it can run as an standalone .exe and also as a firefox extension.

gee_totes 13 years ago |

Totally recommend https://www.draw.io if you're on Google Apps. Syncs with Drive, has a ton of cool elements, and all elements are super customizable if you know a little code. Also the developer is very responsive -- I've submitted bugs and feature requests and they've gotten back to me right away.

rbargagli 13 years ago |

We use InvisionApp (http://www.invisionapp.com/)

You transform designs into beautiful, interactive web & mobile mockups and you can receive feedback and collaboration in real time inside the mockups

kurotek 13 years ago |

If you are on a mac, I'd suggest checking out http://keynotekungfu.com/

bitlather1 13 years ago |

I like Balsamiq because it's easy to work with and the jagged edges boldly state "I am a prototype, not the final product"

monkeymajiks 13 years ago |

Keynote and keynotopia is a winning combination. It's super quick and can output to a vast number of formats.

bwh2 13 years ago |

Whiteboards and a camera phone for sketching; HTML+CSS+JS (Foundation or Bootstrap) for clickable prototypes.

offdrey 13 years ago |

Thank you everyone for the feedback. So far I really enjoyed using balsamiq. I like how simple it is.

ereckers 13 years ago |

I use Balsamiq (which is great and I would highly recommend) as well as a simple yellow Tops notepad.

professorTuring 13 years ago |

I use the well known InkScape http://inkscape.org

codegeek 13 years ago |

also check out http://easel.io

palidanx 13 years ago |

http://www.cacoo.com

meerita 13 years ago |

Adobe Illustrator all the way.

ajaxguy 13 years ago |

new kid on the block : webflow.com I haven't tried this yet.