Wireframing:
How to Choose the Right Program

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

A couple weeks ago, we talked about the best programs for interactive prototypes. But today we’re going to take a step back and talk about something even more foundational and elementary than that: the humble wireframe.

The bedrock of good design, the purpose of the wireframe is to work through the internal logic and structure of a webpage or app before going through the trouble of actually designing or building it. After all, if the framework is flawed, no amount of high-sheen execution will save it.

That’s why today we’re talking about a few of our favorite wireframing tools:

Omnigraffle

Best used for: User flows, journey maps

The darling of the UX community, Omnigraffle is a fairly specific program with a specific use. But what it does well, it does very, very well. Although other tools often win out when it comes to wireframing websites or mobile apps for their ability to transition to medium- or high-fidelity, Omnigraffle is particularly well-suited to user-flows, journey maps, application maps, and anything else where you’re not attempting to capture actual design so much as the overall structure or narrative flow.

omnigraffle6-brainstorm-rmbp

Illustrator / Sketch

Best used for: Low fidelity wires that you plan to eventually make high fidelity

A catch-all category encompassing all of the traditional design programs (which also includes Photoshop, InDesign, etc.), there’s a lot to be said about doing the low fidelity design in the same program as which you’ll ultimately take it to high fidelity. That’s because all your assets are already prepped, your files are ready, and you’ve got a frictionless transition from one stage of the design process to the other. A bit fussy in that the programs really are intended for much more granular, detailed layouts, there’s no reason these programs can’t easily be used for quick and easy wireframes, too. What’s more, these programs can often directly integrate with prototyping tools like InVision, Flinto, UXPin, Framer.js and many others.

Screen Shot 2015-07-02 at 10.32.19 AM

Balsamiq

Best used for: Quick, frictionless iteration

A program that’s defined as much by what it doesn’t do as for what it does, Balsamiq is a fantastic tool for moving fast and iterating repeatedly as you evolve your site or app into the best version of itself. That’s because Balsamiq purposely dispenses with any kind of interactivity, not to mention anything even resembling high fidelity, and instead focuses on fun, doodle-like mockups that purposely reinforces the purpose of wireframes: to be easily created (and just as easily discarded). A suite of teaming tools round out this excellent wifreframing program.

Screen Shot 2015-07-02 at 10.34.50 AM

Honorary mention: Axure

As we mentioned in our prototyping article, Axure’s greatest strength is also its greatest weakness. That is to say, it is extremely powerful and robust in its functionality and feature-set. Still, similar to the case with wireframing with the Adobe suite, the fact that Axure can seamlessly transition between wireframe, high-fidelity design, and interactive prototype makes it an option worth considering for certain projects.

Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *