UX Magazine

Defining and Informing the Complex Field of User Experience (UX)
Article No. 861 September 4, 2012

Wireframing Tool Showdown!

At this point in time, wireframing has established itself as a critical component in every designer or developer’s process. Hopefully that's the case, anyway. Whether you're part of a global agency superpower or operating as a solo code-slinger, the concept of visually outlining the information and interaction of your site before you start designing or coding has probably found its way into your workflow in some form. Maybe it’s simple sketches in a notebook or a complex set of clickable HTML wireframes that describe your site in every detail—the point is, you’re doing it. And with such widespread adoption of wireframes, a myriad of products have appeared with claims of making the task of wireframing faster, easier, and more useful.

Which One to Choose?

So which wireframing product has the features that actually make your job easier? Features that let you to quickly put together layouts are, of course, important, but so too are others that allow you to duplicate, export, and share your wireframes. For the purposes of this review, these features can be grouped into the following categories:

  • Speed & Accessibility: What devices and platforms are supported and how is the overall speed?
  • Shapes, Components, & Attributes: What tools and options do you have when constructing layouts?
  • Templates & Workflow: What features save you from having to duplicate work?
  • Interactions: How can you manipulate wireframes to simulate responses?
  • Reviewing & Sharing: How can you collaborate and share with teammates and clients?

The Contenders

To further narrow the scope of this review, the contenders were limited to web-apps, which offer the most accessibility by being, you know ... on the web. Thus, MockFlow, ProtoShare, and HotGloo were chosen as the challengers. They’re all in the same weight-class in terms of features and are, more or less, all centered around creating interactive website wireframes. So, now that we have our picks, let’s get into the ring.

In the Blue Trunks: Protoshare

Protoshare is a wireframing product built on an impressive Javascript/jQuery engine and is accessed exclusively through a browser. Being only HTML, it is technically mobile and tablet-friendly by default. The UI is very compact, yet verbose, and with tabbed pages within a single browser window it offers a lot of potential.

Stand-Out Strengths

One of Protoshare’s strengths lies in its ability to comprehensively design a website at a high level. You’ll notice the sitemap panel on the left side of the UI and features that enable the manipulation of hierarchy, including easy drag-and-drop pages, quick duplication, and info panels—all the tools that make this phase of wireframing easier with Protoshare.

Along with the sitemap creation features, Protoshare has templating tools that allow page elements to be duplicated across the site, but also independently and on the fly. Contextual sub-menus, for instance, can be easily created by dragging and dropping the desired pages from the sitemap panel. This makes creating menus easy without all the typical accordion fly-out nonsense.

Protoshare also offers tools for increased wireframe fidelity for the more technically capable, such as adding classes and custom CSS to elements and even inserting your own drop-in components such as date-pickers and other widgets, all thanks to its simple HTML/Javascript platform.

Notable Weaknesses

Protoshare’s most notable weakness stems from one of its inherent benefits: Javascript. Protoshare simply runs slower than its competition. When you resize your browser, you can almost hear the javascript chugging as it recalculates positions. Even on fast Internet connections you still feel the slight delay in every click and movement. It seems like a minor irk, but when you’re spending eight hours a day wireframing, those seconds add up. This is compounded by the WYSIWYG editor, which slows down working with content even more.

Another weakness is Protoshare’s export and sharing functionality, which is critical when dealing with clients—especially non-technical ones. Protoshare unfortunately has no PDF export option, and requires reviewers to log in before reviewing wireframes (no public URL to share).

Scores

Speed & Accessibility (2/5)

Although accessible from any browser or tablet, the Javascript engine hinders performance and can be frustrating at times.

Shapes, Components, & Attributes (3/5)

The ability to customize elements with CSS allows for a lot of flexibility, but some basic components such as icon placeholders are missing.

Templates & Workflow (5/5)

A versatile template system makes it easy to duplicate elements with the addition of “smart” variable elements like contextual navigations, labels that automatically display a page’s name, and functional breadcrumbs.

Interactions (4/5)

Good set of interactions for show/hide and the ability to insert custom Javascript option allows for additional functionality.

Reviewing & Sharing (3/5)

Clickable review mode is good and features push-pin notes and threaded conversations, but no PDF or additional output option, nor a quick and easy public review link.

In the Yellow Trunks: MockFlow

MockFlow takes a less-is-more approach to wireframing with its minimal Flash-based UI. The wireframe canvas itself takes precedence in the UI and workflow centers primarily around making per-page wireframes extremely quickly, with less emphasis put on the site as a whole.

Stand-Out Strengths

Speed is definitely MockFlow’s strongest feature. The snappy web-based interface is complemented with an Adobe Air desktop app that is even faster—syncing changes to your online account. Overall the point-and-click UI is very responsive with little delay and the combination of other functions, such as a quick search for components and a simple, fast WYSIWYG editor, lets you build pages as fast as you can physically work with no barriers in the way.

A large set of components also saves designers from having to create increasingly common page elements from scratch. Components such as tabbed-containers, alert boxes, maps, charts, and date-pickers are all available by default. More user-generated components can also be imported into your UI from the MockFlow Store, including complete kits for Facebook or Android apps.

Other features that illustrate MockFlow’s emphasis on the visuals are the review and export functions. Public links are available for clients to see, and the entire wireframe can zoom and scale within a window—an especially helpful feature when presenting over a web meeting. Per-page exporting is also available and supports formats including PDF, HTML5, PowerPoint, and Excel, as well as exportable sitemaps in traditional tree-style format.

Notable Weaknesses

The biggest feature set missing from MockFlow is interactive components. Despite the wide range of elements available, there are no options to simulate interactivity beyond simply hyperlinking pages together. This is where MockFlow’s dedication to the visual presentation of a wireframe works against it and forces a designer to create static variation pages that are hidden in the navigation in order to show how an element may change.

Another weakness of MockFlow is from a user management and organizational standpoint. Users (both internal and clients) are all piled in the same global list and must be added manually to each project. Roles and permissions are also applied per project, rather than per-user, which can become exponentially cumbersome as the number of clients, collaborators, and projects increases.

Scores

Speed & Accessibility (5/5)

The combination of a fast Flash-based web app, a companion desktop app, and an HTML5 mobile version make editing and viewing speedy on any platform.

Shapes, Components, & Attributes (4/5)

A wide selection of components with basic options (color, size, etc.) can get you most of the way there quickly, although fine-tuning options are limited.

Templates & Workflow (2/5)

Templates are limited to one master template per-page, requiring cutting-and-pasting between pages for additional elements that are shared (but not universal).

Interactions (1/5)

No interactivity for elements that incorporate changing states or visibility; pages are rendered relatively flat.

Reviewing & Sharing (4/5)

Multiple formats as well as different types of output (project-wide, per-page, sitemap tree, page comparison) as well as public review links; though non-threaded commenting can make complex discussions confusing.

In the Pink Trunks: HotGloo

HotGloo is another Flash-based product that seems to straddle the line between complex, technical wireframes and purely visual layouts with additional emphasis on responsive interactivity that adapts to different users.

Stand-Out Strengths

HotGloo’s most notable features revolve around elements that respond to user interactions. Sets of components can be grouped together and each group’s visibility can be triggered by the type of user viewing the page, clicks, hovers, or other variables. Entire sets of variations can be reflected across multiple elements on a single page (logged in versus not logged in, for instance) for wireframes that more accurately represent real functionality.

HotGloo also offers a very lightweight yet powerful template system that allows you to build full-page layouts to be used across a site or small, singluar elements (like an ad, for instance) that can be placed on various pages in different locations, but edited from one central spot. These template components can also be double-clicked and edited on the canvas (similar to symbols in Flash or clipped elements in Illustrator) keeping you in-context.

Contextual palette menus in HotGloo also allow for an excellent amount of control over an element’s appearance without the need to resort to writing CSS. Common attributes include CSS3-supported effects such as rounded corners and strokes as well as gradients.

Notable Weaknesses

The biggest drawback to HotGloo its use of Flash, making reviewing wireframes through a browser on an iOS device impossible (for most clients, anyway). Although PDF exporting is still an option, you lose all the interactive components that make HotGloo great, especially when designing for the iPad or iPhone.

Another complaint about HotGloo is that annotations are never consolidated in a comprehensive, easy-to-review format in-context with the wireframe. Notation pins, similar to Protoshare, capture per-feature comments but are only found in an overall chronological list of activity, or on the wireframe itself. This forces you to either read notes in reverse order from the activity feed (while not looking at the wireframe), or to find and click every note icon throughout the site, which can result in a very frustrated developer.

Score

Speed & Accessibility (3/5)

Overall performance is fast through a browser thanks to the Flash platform, but lacks support for iOS devices.

Shapes, Components, & Attributes (4/5)

Although not as comprehensive as other products, the available components are quickly and easily customizable with CSS3-supported attributes.

Templates & Workflow (4/5)

A simple template system (similar to Flash symbols) allows the flexibility to create pages that combine various types of templates together with edit-in-place functionality.

Interactions (5/5)

Powerful action/reaction controls allow you to trigger events such as an element’s visibility via click events or by a reviewer’s user role.

Reviewing & Sharing (3/5)

Reviewing interactions are excellent for simulating functionality for user testing, but again, lacks iOS support and comprehensive documentation tools

The Winner, By Unanimous Decision (Well, Sort Of)

After a brutal 15 rounds, this judge’s scores have HotGloo coming out ahead with 19 out 25, Protoshare in second with 17 closely followed by MockFlow with 16 points. But there’s a rather large caveat that goes along with these rankings: mainly that it’s obvious that each of these products caters to a certain way of creating interactive wireframes and thus prioritizes different aspects of this process. None of them are perfect by any means, but there may be one product that works better for you.

Protoshare, for instance, seems more developer-centric. Accessibility, site-architecture and technically-oriented features allow for a lot of control, if you know how to use them. Mockflow, on the other hand, appears to be designed for one person or a small team to quickly churn out simple, visual-focused wireframes for a non-technical audience. HotGloo, however, represents a best of both worlds. With strong layout and component features, good template functionality, and the added benefit of easy-to-use interactions, HotGloo is this reviewer’s wireframing tool-of-choice and is considered, at least at the moment, the heavyweight champion of the wireframing world. But if Mr.T in Rocky III taught us anything, it’s that a new challenger is always waiting in the wings.

 

Kickboxing photo courtesy of Shutterstock

 

ABOUT THE AUTHOR(S)

User Profile

Judd is the Creative Director at Denver-based digital agency Elevated Third, where he joined the company shortly after its inception in 2005. He currently oversees the information architecture and creative processes with a growing interest in messaging and content strategy.

Add new comment

Comments

0
0

Hello, if you want to make a wireframe offline with your favorite tools discovers SAY-UI.COM It’s an ultimate add-on library for any UI/UX interface designer, ai or project manager. Available on Adobe Indesign CS5.5/CC, Illustrator CS5.5/CC, Photoshop CS5.5/CC (Mac & PC) & Microsoft Office PowerPoint 2011 (Mac & PC). Best regards. Clemence.

1
2

I think the list should include www.visualspec.co.uk. I have been using it recently and it been great tool for wireframing projects for my clients.

4
8

This is an older post but recently QuickFocus SnapUp http://www.quickfocus.com was just launched and I think it's a great tool!

51
64

It looks like you chose only online tools but an offline tool is the way to go for any serious project with more than 10 screens. Speed is also something that is important and Air/Flash is just not there.

WireframeSketcher wireframing tool provides an alternative. It's a desktop wireframing tool with fast and native UI on Mac, Windows and Linux. Some of its most notable features are:

* Projects - let you manage anything from a couple of mockups to large projects with hundreds of screens

* Components - create master pages and reusable components, smart inheritance with possibility to selectively override properties in local instance

* Interactivity - use links to create clickable prototypes, export them to PDF and HTML

* Vector graphics - all graphics are vector based so that you get clean and crispy results. Looks great on Mac Retina too without ugly pixelation.

* Themes - switch between clean and sketchy (hand-drawn) theme as necessary

* Share - put exported HTML in a Dropbox folder and share it instantly online via a public link. Test it on your mobile device of choice. Exported PDF, with vector graphics and selectable text, can be used further by designers to create the final design.

Find more info here: http://wireframesketcher.com

49
64

Shame Axure was not reviewed since its a top ranked wire-framing tool! We provide Axure training courses - http://www.ax-stream.com.

56
63

Hey Judd!

Wow, great lineup of tools above! I'm curious to know what you would think about InVision.

InVision allows you to test and gather feedback on design mockups in a whole new way.
With just a few clicks you can transform your static designs into fully interactive prototypes that you can use to gather feedback from your clients in real-time.

InVision is already used by some of the world's most favorite designers.
It's free, so why not try it out and let me know what you think! http://www.invisionapp.com
-

P.S. People have been going crazy for the new t-shirt we designed, so we started giving it away for free. Check it out: http://www.invisionapp.com/tshirt/

Thanks
Jeff
@InVisionApp

50
53

You missed Axure that it is used in almost every web agency in the world...Do you really work in the internet industry ?

52
59

You should really try Moqups! It's currently free and completely browser/standards based, no plugins needed. Probably the coolest HTML5/SVG app, ever :-)

https://moqups.com

58
62

I've used a variety of wire framing tools and the one I keep going back to is Axure RP. It doesn't really have a large learning curve and there are plenty of video tutorials out there to turn a movie into a pro in no time.

Why do I use it?

1. The interface is simple enough to drag and drop elements onto new pages.

2. I can build my own libraries for specific projects. For example one could make a reusable twitter bootstrap library.

3. You can run out a HTML demo/prototype of your wireframes. Which is great when reviewing with stakeholders or running user testing.

4. You can use collaborative development via version control. So your team can checkout wireframes.. Make appropriate changes... And check them back in to your development server.

5. It has the ability to generate a specification document for Ms Word so it you have edited all the right bits of the wireframe this then gives you a fairly good document to generate. It's a bit clunky in terms of what it generates but I think Axure Rp team are doing well adding this piece of functionality.

6. As you can work collaboratively using version control this opens up the possibility of working in a very agile and pragmatic manner. If you use scrum or kanban then I'd recommend looking at Axure.

7. Azure also allows you to make flow diagrams which helps visualise the user journey. You can drag and drop your wireframe pages into the flow so you don't need to spend time making the box and labelling it etc.

I've tried Balsamiq but it's too awkward to use in my opinion. Omnigraffle is good but I use it like I use Visio ... More so for creating flow charts, site maps and UML diagrams.

42
65

Where is Balsamiq? It provides BMML as a standard for representing wireframes and components that can be leveraged by multiple tools.

63
58

MyBalsamiq has been around for a while now (Balsamiq's collaborative web-based version). After building a test project with several wireframing services, it came out on top for me.

56
65

There is an other powerful tool I should name: 'Omnigraffle' we use it in our agency. You also find it in the AppStore.

50
63

Article generally quite nice but lacks prices and direct feature comparison (table maybe) - there is still room for improvement in usability department ;-)

BTW I hope disaster with commenting without subscribing (spam warning) is problem of my Safari, not the site...

52
60

@Sachendra & Nathaniel - I've used Balsamiq and I agree, it's awesome and fast, but at the time I was researching was no web version. One of the constraints I decided on was a web interface, so I narrowed the large list of products by that, which included Balsamiq as well as more drawing-focused products like OmniGraffle, Mockingbird, etc. I ended up choosing three I did because of their comparable features similar intended use in order to evaluate them on a more even playing field. Hope that answers your questions.

50
59

Excellent comparison, would have loved if elephant in the room, Balasmiq, was in the ring as well

44
54

You missed probably the best one of them all, Balsamiq. Why didn't you add that to this battle? Cage match style...

49
58

Nice article! If anyone is wireframing for mobile you should have a look at fluidUI.com
Cheers!

45
64

@Andrea - Good to know! It our experience clients often prefer simple, large printouts they can see without creating accounts or logging in (just another thing for them to remember), an important thing for our account people. But I bet there's lots people out there that will appreciate the new feature.

@Marcin - I wasn't familiar with UXPin, but I'll be checking out the free trial for sure. The paper prototyping is a really interesting idea. I still thumbnail out and sketch most pages before wireframing, but I could see a few people working with your paper prototype kit to build something in a more collaborative way. Super cool!

53
66

Judd,
Great post on three of the many different wireframing tools out there. You are spot on in that choosing the right tool for you really depends on your needs.

I'm not sure how long ago you reviewed the tools themselves, but we released a new version of ProtoShare this summer that makes styling components on the canvas much easier than before (users have more control over styles without needing to use CSS if they don't want to). Along with it comes more pre-built components in our ProtoShare Library: community.protoshare.com/category/stencils/.

We certainly appreciate your comments as user feedback helps us improve our application. You are correct that there currently is no "export to PDF option". However, there are a few export options: 1) Export specifications and screenshots to MS Word, 2) Export to HTML archive - which allows you to interact with the prototype locally or to be uploaded to your own server, and 3) Export to Web URL - which allows users to interact with the prototype on a ProtoShare-hosted URL. The Reviewer collaboration features do require a login so they can provide pin-pointed feedback to the design/prototype, but with the export features, anyone can interact with or test the prototype, no login needed.

We are soon also adding the ability to print full screenshots of the prototype for those missing an "export to PDF" function.

I hope this information helps for those considering ProtoShare. Thanks again for your review!

Cheers,
Andrea
@ProtoShare

49
66

I don't remember, when I've read such a well written review last time. Well done! I had a lot of fun reading my competitors review (Hi guys! Hope you're well). That's peculiar :)

And you're right - new champion might be just around the corner.

UXPin (http://uxpin.com) is the UX Design app rather than mere wireframing tool and it's getting better and better (and more popular!) each day.

Recently voted the best startup of Central and Eastern Europe, UXPin is coming for the old apps with completely new approach:
- ability to show the process (persona, BMC templates on board!)
- full version control and iterations manager
- paper prototyping to HTML conversion

Get ready for us:)

Ps. Thanks Arsado for mentioning UXPin!:). Now that's make me proud!

49
66

I think UXpin can be in the list ;)