I’ve never been good at creating mockups for new projects. I’ve tried using tools like Visio or even pencil and paper in the past and always ended up turning to Html. The trouble with this though, as Kevin Berridge points out in a recent post, is that when you present your customers with something that looks too much like an actual application they get lost in the look and feel of what your presenting them instead of functionality. You also run the risk of spending a lot of time and effort on something that will almost certainly be changed many times, or even thrown out completely. Ideally, you want something that allows you to create mockups quickly and keeps the customer’s focus on functionality and not the look of the application. I recently started using Balsamiq Mockups for UI modeling and found that it does this job very, very well. It’s a modeling tool that allows you drag application shapes onto a canvas, much like Visio. The shapes, however, look like handwritten sketches so it helps keeps the users focus on the functionality of what your showing them. The interface is also incredibly simple to use and makes it easy to put together a visual representation of your ideas in minutes.
Below is an example of what you can create using Balsamiq. They’ve also got several stock examples on their website.
The software comes packed with dozens of shapes that range from simple links to Ajaxy sliders to grids with column headers and checkbox columns. Many of the shapes allow you to set values such as font, color, etc to customize their appearance. You can also “group” a set of controls so you can move them around the canvas as one unit.
Your can also add shapes and images of your own when you need something that isn’t included in the library. You can even apply “sketching” to an image to give it the same look as the other shapes.
Wishlist
It would be nice if Balsamiq allowed the concept of templates. For large projects where you would need to create several screens, you would need to create a template, export it as an image, and then use that image as the backdrop to child pages. Not a terrible solution, but not as ideal as being able to simply create a template.
The library contains a lot of controls that sit in a ribbon at the top of the canvas. To add a new control you have to scroll horizontally to the shape you want to add, and drag it to your canvas. You can alternatively start typing the name of the shape in the “quick add” textbox and it will find the shape for you. I would actually like to see a toggle button that would show all the shapes in a larger area (perhaps a modal window).
The product is reasonably priced at $79.00. And they have an awesome demo area on their site that allows you to try the features of the tool so you can determine if it will do what you need before shelling out any money.
In conclusion, I was really impressed with what this tool can do in very little time. Can’t wait to see what they add to it down the road!
Nice writeup John. I saw a few people mention this before and I’m just looking for an excuse to use it now 🙂
Looks like a nice, simple, to the point, product. Other shops could learn from them.