UX Wireframing With Axure

First published by : May 2017

Wireframing tools are not a UX or UI qualification. They enable  designers to communicate and test complexity rapidly with our stakeholders, our technical team, and our users.

HTML should remain the wireframing strategy of choice for teams following a 100% UX design workflow. Wireframing tools such as Axure enable designers to communicate and to test complex ideas rapidly and safely.

Wireframes, prototypes, or emulation - explain to your observers which they are using
A cartoon of a cardboard cutout office intern. A colleague says it's not working. The UX designer says to relax, it's just a wireframe.

Shared Learning

Flag this content to your friends, connections, and colleagues.

Tool choices

When not wireframing directly to HTML, Axure RP is my wireframing tool of choice.

Axure's advantages are in emulating existing and complex UI interactions, testing business logic, and sharing dynamic concepts and prototypes with the team without causing disaster. It's way beyond a "click thru" and can do those too.

Designers with low HTML and scripting skills can communicate interaction and programming intentions dynamically to engineers. Axure suits a Mobile first design methodology although it has some weaknesses when presenting a fluid-responsive design philosophy.

The cloud-based AxShare facility gives Axure the edge for me when injecting new features and sharing updates and widget libraries with the team or our user groups in real-time.

Alternatives

Other tools are available such as Mockplus, Omnigraf, Sketch, etc. Adobe's Experience Design (XD) and particularly Infragistics' Indigo Studio have made some great advances recently, too. Newer web-apps such as Webflow and and Invision are worth investigating if HTML is a struggle for you, if time is an issue, or the needs fand abilities for scripting are limited.

I do not like the slavery to device dimentions forced in one or three of these alternatives however tasty they look.

One app focusses on importing Photoshop or Sketch composites and overlaying hotspots on them. That's OK in the context of a 50% art-direction or a UI-priority design workflow, but for a 100% UX workflow I have my doubts. I can understand why graphic designers and product owners would love it. I haven't experienced it in context but my feeling is that we will miss the depth of cognitive interaction Axure gives with its logical and conditional If, Else If, and Else programming or its responsive presentation?

What is Axure?

Axure is a wireframing tool that enables static or dynamic wireframes and prototypes. Interaction and logic is programmed via a simple interface. Knowledge of JavaScript is not necessary: only an idea of UI business logic.

What is Axure for?

Axure excels at rapid prototyping, full-on emulations, and low-fidelity wireframing. It is ideal for engaging the team and our user-testers with complex UX designs with minimal effort and where efficient wireframing with HTML is not practicable. It features packaged drag-and-drop widgets and libraries although invariably you will create your own.

Axure includes a facility to export wireframes and their logic as a specification. In practice, it is perhaps more effective to write out the logic in user and business flow documentation. Engineers have a superb logic all of their own!

GIF example of a simple Axure wireframe
Video example of a more complex Axure prototype

How it works: introducing widgets

Layouts and interactions are created using one or more stock widgets, or widgets that you create and program yourself. Widgets vary in complexity from a native HTML link or input element to large collections of graphic shapes and created elements.

Widgets are programmed to complete scripted tasks and calculations using an easy WYSIWYG interface and setting local and global variables.

Widgets are organised in libraries. You can create and organise your own libraries or download libraries shared within a large online community of Axure users.

Axure projects include one or more pages. Each page is a blank canvas we populate with our designs. Pages can be named and organised into folders. On compiling a project for presentation, pages can be hidden from view enabling our designer to archive iterations easily in reach within the same file.

Files are saved as RP files and distributed (published) in packages opened from an index HTML file. RP file sizes can be reduced significantly by using "Masters", which save one or more widgets as an instance for use across multiple pages.

Where to find Axure

Axure is available at a reasonable per-licence cost from www.axure.com. At the time of writing, you can avail of a 30-day free trial.

Beware that files opened in the latest version of Axure may not open in earlier versions. Updates are periodically available to download free. (Read the product's terms carefully).

Sketching early concepts using Axure toward responsive wireframing and functional prototyping
sketching layouts in Axure

Advanced demonstration

I created this interactive prototype for a recent MSc UX Design course project using Axure's high-fidelity interactions.

Experience shopping — not clicking!

Give it a go!

  • Book a delivery slot.
  • Find Tesco products including apples, bananas, carrots, coconut, peppers, sprouts, sweetcorn, chicken, milk - and more!
  • Emulate searching with speech (say, "apples") and image recognition, and Tesco's barcode scanner.
  • Checkout with your order.

NOTE: On mobile devices, follow the instructions below to open the prototype in your device browser.

Experience the app!

QR code opens https://8pv6dt.axshare.com/#c=2
  1. Navigate to the prototype using your device browser (https://8pv6dt.axshare.com/#c=2).
  2. From your browser, add the page to your device home screen.
  3. On the home screen, tap on our app icon.

Key Axure features

Axure comprises stellar features that suit the way in which our designers and teams work together. Wireframe and prototype with data and experience —not just click through— an app or webpage, including:

  • A customizable and extensible widget library in which to organise and store your design patterns and graphics across projects and teams.
  • Creating and scripting widget "states".
  • The ability to set breakpoints toward adaptive layouts.
  • The ability to position elements fixed to the browser.
  • Extending selected elements such as headers and footers to 100% of the browser width.
  • Inline frames in which to present content from other pages or websites.
  • WYSIWYG programming with If, If Else, and Else actions that give the power of Java Script without the fuss of learning it.
  • The setting and calling of local and global variables to add customisable interaction and flow scenarios.
  • A basic vector graphic and drawing capability.
  • A compiled "click thru" HTML presentation for observers to access, use, and to experience from their preferred web browser.
  • Secure cloud-based hosting of projects on AxShare with a customisable sign in page.
  • Free updates (within constraints).
Graphic created in Axure

Axure can be used to create simple vector and raster sketches if required.

avatar cards created using Axure

Axure support and training

low fidelity wireframe layout

There are vast libraries of Axure support and tutorial materials available.

It's not that Axure's own support materials are poor - far from it! But each business will want their designers to concentrate on focussed areas of its vast features and learning by doing and in context is always desirable.

While at HMH, and on direction of our senior design lead, Barb McDonald, I mentored the various platform Learning Design Leads in our adopting Axure as the wireframe tool of choice.

Axure is easy to learn and its features extend much further than most designers need.

An informal tutorial

On leaving HMH, and as the last member of the original platform design team, I was asked to deliver Axure training to the New Features Business Analysts. With no time at all, I quickly put together a short series of informal video tutorials to cover the basics of wireframing and interaction programming (making widgets) they would need.

Although not demonstrating my full range of Axure design skills, you can visit the Axure tutorials I put together for my friends. The password is 'Experience'.

Device screen showing log in screen of Experience Learning Too AxureShare site

Reference this article

Godfrey, P. (Year, Month Day). Article Heading. Retrieved Month Day, Year, from URL

❮ More Articles My Profile ❯

Contribute to this article

Please add your comments.

The Facebook comments plugin failed to load

Facebook comments plug-in.

Sponsored Ads