7 ms·
Ask HN: What's your favorite UI Mockup tool?
- graiz 15y agoA piece of paper.
- pwg 15y agoPaper first, a Tcl/Tk mockup second.
- abbasmehdi 15y agoBalsamiq
- jjcm 15y agoPhotoshop. 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 15y agoPhotoshop 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 15y agoI 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.
- ljf 15y agoTrying the templates in Keynotopia, they are good, but I think I need to work longer on paper before spending time in PowerPoint.
- suhail 15y agoPhotoshop
- benwerd 15y agoSharpies and copier paper. Seriously: nothing else has been as efficient for me. (Although it depends on your Sharpie skillz.)
- nolok 15y agoBalsamiq
- pbreit 15y agoI like balsamiq specifically because it is rough. That eliminates a lot of the wasted time arguing about pixels.
- logicalmike 15y agoI'll second this. I've been a paid user for years now.
- burnblue 15y agoI found Balsamiq completely unusable for large projects because of the lack of master pages. Maybe they've addressed this by now; that was ages ago.
- stevelosh 15y agoA whiteboard, or Penultimate on the iPad if there's no whiteboard around.
- loungin 15y agoSecond for whiteboards. If I must get it into electronic form either take a picture or inkscape.
- imjoel 15y agoThe 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-web-design-wireframing-kits-resources-and-source-files/ http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-we...
- knarf55 15y agothanks -- i'll check it out! Appreciate it
- plainOldText 15y agoKeynote 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 15y agocool -- you actually create your entire wireframe in keynote?
- kenmickles 15y agoI do. It's pretty easy with this: http://keynotekungfu.com/ http://keynotekungfu.com/
- plainOldText 15y agoYes. 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
- aaronblohowiak 15y agoRe:alignment, a CSS grid system can help!
- navs 15y agoAnd I suppose being able to add animation kinda helps as well.
- ExpiredLink 15y agoside note: good looking mockups are dangerous because many managers and stakeholders don't know the difference between mockup and real application. They think you're done.
- sarcasmatron 15y agoI've spent a lot of money (mine and clients') on different tools, and I've settled on Keynote. It covers 95% of my needs and I don't have to manage yet another tool. Being able to sit in a meeting wireframing on Keynote is wonderful. Factor in another $15 for the iPad app and I'm cooking with gas. Meetings get super-focused quickly when the participants can immediately see output. I usually upload it to Google Docs post-meeting for the remote participants. Protip: Save your mockup files as themes so that you can get to them quickly and easily.
- filipmares 15y agoPaper 1st and then Keynote.
- Pickels 15y agoFireworks
- chime 15y agoI love Pencil for Firefox. It's seriously underrated: https://addons.mozilla.org/en-US/firefox/addon/pencil/ https://addons.mozilla.org/en-US/firefox/addon/pencil/
- naner 15y agoNot 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 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/ http://code.google.com/p/pencil-ff4/
- ExpiredLink 15y agoIIRC, the standalone needed admin privileges. Maybe there's a no-install version.
- sixwing 15y agoin order of preference: 1. pen + paper 2. html + css 3. omnigraffle 4. photoshop
- PCheese 15y agoMockingbird - https://gomockingbird.com/ https://gomockingbird.com/ Maybe it's just because I love web apps done with Cappuccino.
- joshuabutner 15y agoOmnigraffle, 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.
- imusicmash2 15y agoas a product manager, I use 2 tools for wireframes and flow design Flairbuilder and OmniGraffle http://flairbuilder.com/ http://flairbuilder.com/ http://http://www.omnigroup.com/products/omnigraffle/ 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 http://twitter.com/#!/flairbuilder
- knarf55 15y agoThanks -- i'll try it out Flairbuilder and I do like omnigraffle as well.
- Off 15y agoPen and paper then Inkscape/Gimp.
- bkbonner 15y agoWireframe Sketcher in Eclipse http://www.wireframesketcher.com http://www.wireframesketcher.com
- navs 15y agoGoogle 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-drawings/ http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-...
- mannicken 15y agoPaper, Illustrator, HTML.
- ct 15y agoExpression Sketchboard
- fractallyte 15y agoOK, 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 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.
- ttk23 15y agohtml/css/js
- burnblue 15y agoI'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.
- theitgirl 15y agoI have tried Pencil, Balsamiq, MockingBird and Google Docs. Google Drawings works best for me.
- elii 15y agoMockingbird - https://gomockingbird.com/ https://gomockingbird.com/
- knarf55 15y agoThanks 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.
- pmorel 15y agoThere'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 http://www.romku.com/list/343849/ui-mockup-tools.