wireframe

Wireframing – Why it’s Important and My Tools of Choice

First things first. If you’re not familiar with the process of wireframing, take a few minutes and read “A Beginner’s Guide to Wireframing” from webdesigntuts+. All done? Great.

Wireframing is an important step in any web or app project. It lets you think through the process and interactivity required without getting sidetracked by design elements. This is the phase that brings clarity to your project and allows you to work through all the interactions and layout needs, leading to a more intuitive, user-friendly end result. I admit, I haven’t always wireframed first. I’m guilty of starting with the design and then later struggling to retrofit it as needed. These days, I wireframe everything.

Beyond helping you sort out all the details necessary for development, this process gets your client thinking about what their needs really are – working through it with them collaboratively will help them define more clearly what the project goals are and what their primary focus should be.

Wireframing Tools I’ve Grown to Love

First, there’s pencil and paper. Yep, pencil and paper. It’s tough to beat the simplicity and clarity you get when you map a project out this way. It’s often my first step before moving into another tool like Axure.

Axure

In my mind, Axure is the ‘big gun’ of wireframing tools. Yes, this is just my personal opinion, but for a lot of good reasons. While there is a steeper learning curve than with some other popular tools, once you know your way around, it’s difficult to find a more robust solution. Axure allows you to map out every interaction. You can even use dynamic panels to create accordion menus, dropdowns, and other interactive elements. You can share your wireframes/prototypes and work collaboratively with other team members. When they’re finished, you can export them to various formats, including HTML for review. There are extensive widget libraries available with all the elements you should need, and a strong community of widget developers. There’s more detail about the cool features Axure offers here. I also have to add (and no, this is not a paid review) that their customer support is top-notch. I recently had to work through a difficult project in Axure and I got outstanding support from the very nice folks on their support staff when I was stuck with a complicated interaction. They impressed me, and that’s not easy to do. Axure is a little pricier than some options, but it’s worth it.

UXPin

UXPin is a hosted wireframing/prototyping tool that has a clean, intuitive interface with an easy learning curve. It’s drag and drop, with contextual panels with all the right options. You can create “Smart UI Elements” for reusable elements or pull from their Elements Library. It also offers “Iterations” for version control, something that’s very important. It’s nice to be able to revert back to a previous iteration if you find you’ve gotten off track. The collaboration features are great too.

Balsamiq Mockups

I just recently began using balsamiq.com, and I love the simplicity of it. If you’re transitioning from pencil and paper, this might be the tool for you. The interface is intuitive — you can get up to speed within an hour, and it has nice features like “Quick Add” which allows you to add an interface component by simply typing the first few letters of its name. You can link your wireframes to create an interactive prototype, and collaborate with your team by adding them as staff members or project members.

Also Worth Exploring

I know the Omnigraffle pros are wanting a mention. It’s a popular Mac tool for wireframing and prototyping. I didn’t want to review it since I haven’t used it yet, but I’d welcome any comments from users about why it’s a good choice.

Another one you might want to check out that I’ve used less extensively, but found promising, is Creately.

I hope this helps prepare you for wireframing fun! You and your clients will appreciate that you took the time to build wireframing into your process.