Why is it that so many great ideas come to life on a paper napkin? Because it’s simple. A pen or pencil, some paper, and unfettered access to your creative juices.
In the early stages of a design or development project, it’s useful to create a wireframe that visually represents the placement of objects or the user interface. As the idea begins to take shape and stakeholders weigh-in, you’ll want to make changes to this wireframe as quickly and easily as possible.
Enter Balsamiq Mockups. I’ll let them describe it to you:
Using Mockups feels like drawing, but because it’s digital, you can tweak and rearrange easily. Teams can come up with a design and iterate over it in real-time in the course of a meeting.
Product managers, designers, developers, and even clients can now work together in the same tool to quickly iterate over wireframes, before writing code.
Here’s an introductory video of Balsamiq Mockups in action:
In the past year, I’ve worked on two large development projects that used Balsamiq during the initial design stages.
The first was an Intranet site based on SharePoint. It was decided early on we’d create a custom skin/design that’d be handed over to developers to implement. Before any design work was begun in Photoshop, I used Balsamiq to get the ball rolling. After creating a wireframe of the site, I met with internal staff, got feedback and made changes – many changes. Once I had final approval, I handed off the wireframe in a PDF to the designer who fleshed it out with colors, fonts and other visual elements.
The other project involved building the Rediscover: app with the mobile app company, Little i Apps. The specs we submitted called for an extensive user interface and a lot of functionality. The entire user-interaction workflow was diagrammed in Balsamiq. We spent many hours reviewing and making changes to those diagrams with Little i Apps. Getting ‘the big picture’ down first kept us focused on that goal throughout the project.
There are other wireframing and mockup tools out there, but I’ve been happy with Balsamiq. It’s easy-to-use and even non-technical people will be able to understand what it is they’re looking at. Plus, they won’t be distracted by other things like color choices or images.
If you’re not a designer or developer, but are hiring one – ask they give you a wireframe. Or, at least a napkin.