Often times I’m required to wire-frame concept screens for clients or focus groups, in the past I would always turn to Adobe Illustrator. The first screen would take a little while, I’d usually start with a simple layout of shapes and then sample their color scheme, drop in their logo and go from there. On subsequent screens things would go much quicker as I could copy & paste elements that repeated.
But there was always one big issue. Almost every time, people reviewing the screens would get caught up on the look of these concepts and it was never easy to remind them that we weren’t looking at these screens to get an idea of how the final piece of software was going to look but as a concept of the workflow.
Since this approach made changes difficult on both ends it was time to search for another way. We also needed a method that allowed analysts to make changes and Illustrator definitely didn’t fit for that need. After reviewing a few trials of prototyping applications I finally settled on Balsamiq. It’s not perfect and there are a few issues I have with it but for the price and ease of use it stood out to me.
The beauty of Balsamiq is the hand-drawn look similar to what you might see if these were mocked up on a whiteboard. This definitely keeps people from assuming they’re looking at the final product and keeps the focus on elements and placement.
Balsamiq allows you to link screens together to show workflow and export to an interactive PDF. UI elements can be taken from a built in library and there are also commuity generated components which I have yet to have a need for so I can’t comment on them.
I find Balsamiq is great for showing what is possible for the final product without the issue of people getting caught up on a look and feel that isn’t necessarily what the final will look like.
A few problems I have with it are:
1) Large projects can quickly get complicated to edit. If I need to change the name on a button in a screen that appears in a few different variations, I need to go through one by one and change it. One work around I’ve found is to group all the elements in the first screen and if a change needs to be made I can change it once and then copy & paste the whole group when I need to. This works, but it’s still a pain, if Balsamiq supported masters or backgrounds this may no longer be an issue.
2) I wish Balsamiq supported layers. In Illustrator if I wanted to show a pop-up over a screen I could just create a layer for the pop-up and leave the main screen on the layer below it. It’s also nice if you want to show a drop down menu in various states to just put it on another layer instead of having to show this in two separate screens.
3) Each screen saves as a separate file which adds to possible confusion when your project folder eventually looks like this:
You can have multiple screens open in the interface and easily switch between them with tabs,
Overall though, I think Balsamiq is a great tool for rapid wire framing that allows everyone to forget about what the project might look like and allows them to focus on how it will work and somehow it’s very *fun* to use. For smaller projects I recommend checking it out.
I just love Mockuptiger. It’s incredible how quickly an idea can become tangible by using it. “I must recommend you Mockup Tiger the best product of this type I’ve found yet! “
Daryn,
Nice write-up on your experiences with Balsamiq; it’s a great tool. As you mentioned, most people like it because of its no-frills, sketchy presentation that doesn’t confuse your clients. However, for every person, there are downsides to all tools. ProtoShare is not a sketchy tool, but there are many ways to use the application and it addresses your three main issues.
1) As you update your site’s tree structure, navigation automatically updates, as well as page name labels – across the project. And if you have a grouping of components that you use in multiple places in the project and save it as a Master, any time you need to edit the Master, changes take place across the project as well.
2) ProtoShare doesn’t support layers, but with the use of states, you can create pop-ups, hovers, and a host of other actions without having to leave the page you’re working on.
3) Everything is organized by your site’s tree structure, and you can even create multiple versions of a page, organized by name so that pages are easy to find.
You do have the ability to create very real-looking prototypes in ProtoShare, but they don’t have to be. Working with simple gray box wireframes, or even uploading images of your Balsamiq or Illustrator files and overlaying the functionality you want is easy to do. In fact, many of our customers work that way. At times they need to take the fidelity even further, which they can do when needed.
Hope this information helps. We do offer a free trial if you want to take a look.
Cheers,
Andrea
@ProtoShare