Which mockup tool should I use [closed]

Question

I'm not a designer, but a developer. Still, part of my job is requiring mockups.

I've always just used pencil and paper but thought I'd use software finally. There seem to be a bunch of free options, but my company seems to be at least potentially open to paying for something. The only one I'd heard of before doing this (because a previous project manager used it) was Balsamiq.

My question is, is it worth the extra cost to get something more well-known even if there are free alternatives just to say I have experience with this, or for my company to say that we use tool X (which is better-known), or should I just pick a free tool?

I don't have huge amounts of time to try out a dozen tools. I've found a few articles that list a bunch of these, but they are pretty minimal in terms of description, so if there is are some good DETAILED comparisons of different tools that would be great for bringing a recommendation to my company, and if anyone has any strong opinions on why I should go with one tool over another, that would also be very helpful! Again, take into account that I'm not a designer, and as such, the less fiddling with design elements for me the better...

Answer 1

We need to define mockups. And to do that, we need to know the intent of these documents you are creating.

You mention Balsamiq, which most folks would call a wireframing tool. The intent of a wireframe is to NOT be a design mock up, but merely a sketch. Big picture thinking--getting the page layout sorted, content ideas, and general site flow and functionality.

For that type of work, Balsamiq is fine. Axure is also popular. Some people use Adobe Illustrator or Fireworks. Lots of people just use pen and paper or really any drawing tool you feel most comfortable with. It really doesn't matter which tool you use...as long as it's meeting the needs you have.

For 'design mockups' where you need to get into details visual design, that's usually handled by graphic design software...PhotoShop, Illustrator, Fireworks, The Gimp, Pixelmator, Inkscape, etc, etc. Again, same as above, it doesn't really matter WHICH software you use, as long as it meets your particular needs.

Now, all that said, since you are developer, I'd also suggest you consider jumping into code wireframing/mock ups sooner than later. Start with very rough sketches, but as soon as you can, start putting them into HTML/CSS and JS. That's where the real interaction design happens.

Answer 2

Keeping in mind what DA01 mentions (wireframing vs mockups), I've always found Balsamiq very useful. It's fast, it has a great set of stencils and it has a wonderful usability. If it's a program you will be using frequently, and if you are working on a team, I think Balsamiq is a great tool for a relatively low cost.

There is an open source alternative that is also quite good: Pencil. Users can add functionalities and stencils, so it has a great library of styles. The downside I'd say is that Pencil is a desktop app (it works on different devices, but you have to install it), while Balsamiq can work remotely.

As my company doesn't have Balsamiq, I use Pencil (the program) for small wireframes and pencil (the real object) + paper + Photoshop for more complex things. Wireframing tools are great for expressing quick ideas, interaction, blocks of elements. But for anything that requires design I'd recommend a graphic program such as Photoshop or Gimp.