Axure: Rapid wireframing (and a bit of prototyping)

Roughly a 9 minute read by Will

Wireframes are something we’ve made an essential part of our process here at Engage. They help us - and more importantly our clients - visualise and finalise structure early on in a project ensuring we build a website that is both visually and functionally awesome.

We’ve tried many different tools to help us along the way but recently I’ve returned to Axure - which I had been avoiding after past experiences, I found it slow and awkward to use - but after hearing it had improved I decided to give it another crack.

The good bits

As you’d expect, along with most other wireframing tools, Axure makes great use of drag and drop placement of widgets. There are a good selection by default and absolutely loads available on the web for download. The widgets snap to each other and guides in an intelligent way and as long as you’re not attempting pixel perfection it really helps. Masters, which are a bit like a smart object in Photoshop allow you to build persistent elements once and just paste them into each future page. Changing a master changes it in every page it’s used.

All of that is pretty standard functionality, but I’d say Axure does it better than most.

The great bits - venturing into prototyping

We often build websites with a lot of movement, which can be hard to explain and demonstrate to clients without building a working demo in HTML, CSS & Javascript. While the tools Axure provide are not (and will never be) as flexible as that, it does a really good job of allowing you to really quickly build simple animations using Dynamic Panels.

quick tutorialDynamic panels

  1. Create a text area with an image above it.
  2. Select both, right click and choose convert to Dynamic Panel.
  3. Add several states to your Dynamic Panel, each with different text and images.
  4. Back on the page, add in a left and right arrow.
  5. On the right arrow, set its actions to go to next state, with the slide left animation. Make sure to check the return to first slide at end option.
  6. Do the same for the left arrow, but change the animation to slide right and tell it to go to the previous state.
  7. Test your wireframe and you should have a working content slider.

Alongside dynamic panels, you can also add variables which can be set and accessed on many different events. This allows you to build a wireframe that feels a lot more interactive. For example: If you were building a shop, when a user clicks on a product in a list if you store some information about that product - name, price, intro text - you can then display that on the next page instead of lorem ipsum or a dummy product that never changes. We found this incredibly useful for user testing at the wireframe stage as nobody became confused when a link they clicked took them to an unrelated page.

Finally, something we haven’t really used yet, but I’ve got my eye on is the ability to export wireframes as a mobile app. Looking through the options you can set icons, startup screens, turn off elastic scrolling and define the device width/height. This, alongside the ability to detect swipes could enable someone to build a very thorough app prototype. I look forward to giving it a try.

The slightly irritating bits...

So, Axure does a lot right, but there are some areas that could really do with a bit of work.

Clunky interface

The UI is a bit of a mixed bag. It doesn’t compare very well to some of the more beautiful apps available on OS X at the moment but thankfully - most of the time - it doesn’t impact on functionality. By far the worst offender is the formatting palette, it's very clunky.

Speed

Most of the time, Axure is lightning fast, but once you have built quite a large wireframe or prototype, generating the wireframes can become really sluggish.

Browser Caching

This one is a pain, especially when we’ve already sent the first revision to clients. Browsers - Chrome especially - cache files quite aggressively. This means if you make a small change, sometimes you have to do a hard refresh a couple of times to view the change. Worst case you need to right click in the page and select reload frame. I don’t mind doing this, I’m used to it, but it’s frustrating when our clients run into the same issues when we’ve told them they are updated.

If else statements and interactions

I find these very awkward to work with. It took me a long time to figure out how to end an if statement and start another. They also tend to break easily if you copy panels or widgets from one page to another.

My suggestions for the future of Axure

So, Axure is mostly brilliant, and a tiny bit irritating at times, but what about those issues that aren’t really issues, but I’d still like to see them enhanced or improved in some way:

  • I’d like a way to set defaults on widgets so that every future widget of that type appears on the page the same way, or have a styles pallet I can use to quickly apply a previous style to a large number of widgets.
  • An option to allow dynamic panels to re-size depending on the current states height.
  • A ‘paste lorem ipsum’ right click option would be very useful.
  • A simple layers & folders palette to replace the grouping and ordering. If layers and groups could be hidden, even better. It’s awkward having to move widgets out of the way to work on the ones underneath.

Let's talk money

So, I like it, quirks and all, but how much and is it worth it? $289 buys you a licence for the standard Axure RP which is the option I’ve been using. $589 buys you copy of Axure RP Pro which includes project sharing enabling multiple people to work on one project at the same time. We probably wouldn’t ever need this service, but for larger projects and businesses I can see that being incredibly useful.

And I'd definitely say it's worth it. The time it will save you at the production stage because you have a clear and defined target laid out by the wireframes is invaluable.

Have you had any experience with Axure or any other wireframing tools and methods? Any useful tips or knowledge is always welcome. Let us know in the comments!

What about the competition?

Balsamiq and Mockflow

These are both very similar products. Each has a browser based and downloadable version of the app running on Adobe Flash - which is both useful, and irritating. The option of working on any device with the flash plugin is handy, but I always find flash apps too sluggish.

Actually building wireframes is a doddle and quite a similar process to Axure. Widgets have many options and settings to customise their look and content but there is no sign of animation or variables.

Visit website

Mockflow is free for 1 project, but there are limitations. $69 gets you a year long subscription with all features enabled and unlimited projects/pages.

Visit website

Balsamiq is a bit more expensive; $79 for the desktop app or anywhere between $12 and $249 per month for browser use with varying numbers of pages and projects.

Hotgloo

While writing this blog post I discovered Hot Gloo so I opened a trial account and had a quick play and built a very simple wireframe. Hot Gloo is also browser based, using flash, but it firmly sets itself apart from Balsamiq and Mockflow. It is not as feature rich as Axure but only marginally. I still think Axure is more flexible with its available functionality, but Hot Gloo does have most of that functionality. The only thing you would really miss is the ability to publish to mobile devices and animated transitions between states on dynamic objects.

Visit website

Hot Gloo has a handful of plans ranging from $14 - $54 per month. I'd say this is the best value for money of the Flash based options.

Bootstrap - and other similar frameworks

I have also tried building wireframes using the Twitter Bootstrap framework. It’s slow going, but you can end up with wireframes that are closer to the end result and include little extras like responsiveness and the ability to drop fully working javascript plugins into your mockup.

Pencil and paper

I suppose I should mention the original wireframing tool. At one point I’m sure this really was the best option, but now, I see sketching ideas as something that should be done at all stages throughout the process of building a website, not just at the beginning.

And many more

I’ve not spent as much time with these - if any - but I’ve seen them mentioned; maybe they are worth checking out!

  • Mockingbird - I’ve used this for a short time. It used to be free, but as far as I can tell it costs anywhere from $9 - $80 now.
  • Penultimate - an iPad app, more of a digital sketching tool than anything, but perhaps a bit more advanced than pen and paper. For quick ideas though it’s not too bad.
  • Omnigraffle - a mac ($99) and iPad app ($49)
  • Pencil Project - A free option! I’ve not used it, but from what I’ve read, it looks good.

You should also give this a read: 20 best wireframing tools post on Creative Blog.

Will oversees all aspects of technical production at Engage. With over 10 years of experience in the industry Will has a keen eye for detail and a pragmatic approach to problem solving which ensures that an Engage product performs as good as it looks!