Wireframe Tools Round Up

Simon Read
By Simon ReadUX Designer
5 minutes to read

Adding wireframing to a website or app design process has many benefits. You can rapidly try out new ideas, build interactive prototypes and can reduce design time, to name a few. So what tools do we use at ED?

There are many tools out there which all have their benefits, so we’ve put a list together of the ones we use and ones we’re keeping our eyes on.

Hotgloo

We’ve used HotGloo for a few years now, and on a wide range of projects, including wireframing responsive websites, internal corporate networks and phone apps.

Whilst the tool itself feels very solid, we could no longer overlook the fact that it’s built in the once-venerable Adobe Flash. Not being able to view our work on modern tablet and mobile devices was a real issue, and whilst there have been mutterings of an HTML5 based version, it has yet to appear.

UXPin

UXPin is a relative newcomer to the wireframing game, and offers a wider range of design-centric features; blurring the line between a mockup tool and a pure wireframing tool. It also comes with a strong range of usability testing features, including screen sharing, cursor tracking, voice calling and video recording.

We’ve recently used it to help us plan out a complex internal web app, and with the wide range of animations and transitions that can be easily added, this means we’ve been able to create a slick and polished prototype quickly.

UXPin’s commitment to linking-in with other popular services is commendable; it now integrates directly with Adobe Photoshop and Sketch, allowing you to export your graphics and layouts directly into UXPin without losing any editability in the process. It also integrates with office communication tool Slack, to handily keep you notified of client comments and other changes to your project.

Axure

Axure has been around for several years now and in turn this means reliability is one of its strongest points. It also means it’s got a wide array of free additions and elements available. Axure is a desktop app, as opposed to a web app like UXPin, so the performance of your web browser or internet connection is not a factor.

We also like that projects can be exported as individual HTML files, and then edited by a developer, so you’re not restricted to the capabilities of Axure alone. We’re looking forward to experimenting with this feature; using Axure to create initial wireframes and then adding our own code on top in order to create more bespoke, customised prototypes for our clients.

Responsive wireframes for mobile and tablet aren’t quite as easy to add as in other tools such as UXPin, and sharing wireframes online involves putting each project onto Axure’s ‘Axshare’ service; another additional step in your design process (albeit only a small one).

The interface is also functional but not as pretty as competitors such as UXPin. It may seem a churlish point, but when you’re spend several hours a day with one piece of software a slick user interface can go a long way!

Adobe Experience Design

Adobe’s Experience design is a relative newcomer, having only launched in beta a few weeks ago. It comes with the benefits you’d expect and hope for from Adobe; by integrating directly with stalwarts like Photoshop and Illustrator to simplify the existing workflow for those that already use the software.

Similarly, the interface will be familiar to anyone who’s used Photoshop or any of Adobe’s more recent experimental projects, such as Edge Reflow. Responsive wireframes can also be viewed live on a mobile connected device, similar toDevice Preview in Photoshop.

However, these exciting new features do come at a price. Experience Design is very clearly labelled as ‘Preview’ (aka beta) software, so you wouldn’t want to risk using this for any ‘real’ work just yet. Although, judging by recent updates on the Adobe blog, not all of the features will be available immediately, so it may not be fully ready for use with client work anyway.

Down to the wireframe

We’ve touched on just a few of the wireframing tools out there. Putting your ideas into a wireframing tool you can make them readily accessible by your team and your clients, allowing them to feedback and add in their own ideas. It can also benefit you too – wireframing a design, app or website can help you better understand how your own ideas will work together, and allow you to spot potential issues or improvements early on.

comments powered by Disqus

Articles by Simon Read

Designer at Enjoy Digital. Interested in web and user interface design, and graphic design both online & offline.