Mock-up tools for user interface design

We’re celebrating World Usability Day (IEEE – November 8th) all this week at work, so I’ve got usability on my mind. It got me thinking about how I go about generating mock-ups for websites and user interfaces. Here are a few options and my opinions of them.

Balsalmiq

Mockups is an excellent tool for designing user interfaces. It’s fast and easy to use. However, if it’s not something you do all the time you might have trouble justifying the $79 price tag for a single user license. (That’s a seriously reasonable price by-the-way, but as someone who does design mostly as a hobby I still don’t want to pay for something specialized when I can get by with other tools.) If I got a job in design and was working on interfaces on a daily basis I would definitely purchase the desktop version of Balsalmiq Mockups. If you’re interested in trying it out their web version has a free trial; you can use most of the features, but you get a pop-up every five minutes reminding you that it’s a trial.

PowerPoint

You didn’t think about using PowerPoint to make mock-ups did you? It’s been a go-to standard for many designers over the years. It’s not as specialized as a tool like Balsalmiq, but you can use action buttons and multiple slides to build in some minimal interactivity. If you use macros you can make it even fancier. If you’re going to do a lot of mock-ups you should build a “library” of components; just save a few slides with some of the basic shapes and buttons that you can edit for your needs. The main reason I like PowerPoint is that I already have it and know how to use it. I don’t have to learn a new piece of software to do mockups a couple times a year.

Inkscape

Depending on your comfort level with Inkscape, it would be a great tool for mock-ups. You could create a pattern library with the basic components that you use most often to make your work easier. (Maybe? I’ve never done this, it just seems like a good idea.) Inkscape may not be the best for interface design, but the nice thing about using it for web design is you can export pieces of the design for use in the final product. So half of your final work is done already.

Paper and Pen

Hopefully this is the most obvious answer, it’s also the one I do first before any of the options listed above. Doodling a quick sketch is the best way to get your ideas down and see if they make sense. You can talk them over with coworkers before investing hours making a better looking mock-up with one of the above tools.

Those are my suggestions. Which tools do you use most for mock-ups?

Advertisements

Share your thoughts

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s