Mockup design

One of the many tasks that my profession (UX designer) is the design mockups. I’m always looking for the perfect mockup tool, because I’m spending a lot of time on design them and I wanted to find a better tool. I tried many programs as Adobe Illustrator, Microsoft Visio and Microsoft PowerPoint, but all have the same problem: they aren’t born to design mockups.
In the last days I tried two web applications that whose main focus is wireframes design: LovelyChart and Balsamiq.

Balsamiq

LovelyCharts

LovelyCharts is a RIA application that allows you to designs most of the charts related to the application development, like flowchart, sitempas and Network diagrams.
Balsamiq is a more specialized tool, made specifically to design mockups only. It has a rich library of elements that you can choose and se to design without create it. It can cover a large part of the needs in designing an application from a simple website to complex rich internet or desktop application. It has a special library for iphone too.
And, there is also an external website which collects a lot of users’ designed “components” that can be reused in your own mockup: mockupstogo.com

Both applications use simple drag&drop paradigma, very clear content organization and architecture: the user can immediately recognize tool indexed by useful area.
For the use that I need , I prefer Balsamiq, for its clear tools layout and for multiple paths to find the right element (through a list for the novice users, and with more criptic but faster autocomplete search for power users). For example, I perfectly translated the mockup that I made in Illustrator for a Silverlight information retrival application I developed, in a very short time and simple way.
My application mockup made with LovelyChart

My application mockup design with Balsamiq

The original mockup made with Illustrator

Another element to consider is the different style of the two applications: Lovelychart elements style is like powerpoint, very simple and basic; Balsamiq uses an hand-drawn-like style for its elements. Even though this is not a functional difference, it is important for the look and feel of your presentation, because it give the sketch feeling.

To add to the big picture, Balsamiq can also be embedded in wiki and other web-collaboration tools. This allows to keep a centralized repositories of mockups.

Choosing the correct tool to realize your idea, in this case your mockup, can reduce the amount of time and let you to concentrate to your goal.

Technorati tags: UIX,data visualization,microsoft silverlight, mockup