: Which mockup tool should I use 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.

@Murray976

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.

Vote Up Vote Down

@Shelley591

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.

Vote Up Vote Down