Creating iOS effects using Axure RP

“Theatricality and deception are powerful agents.”

The famous words of Henri Ducard in Batman Begins. A prototype is intended to test the concept so it is okay to use a bit of smoke and mirrors to get your point across. When I get asked what I use for prototyping, I simply say “whatever I have around me.” Though I use all sorts of tools for prototyping, Axure RP is one of my favorites. This blog post will show you how to create an illusion of some iOS 7 effects, such as blurring, swiping and calling modals.

In order to do this you’ll need Axure RP and a image editing tool (I use Photoshop) to create the assets. You will also need to be a bit familiar with Axure already. If you are not, they have a great set of tutorials on their website.

Basic Approach

Axure is by nature a prototyping tool for interaction and not necessarily animation. When I want to prototype animations I will use Adobe After Effects or Quartz Composer with Facebook’s Origami. However, Axure does have some simple animations that are great and get the job done, but if you want to create a pretty realized prototype, creating some original assets in Photoshop and combining them with Axure will be very powerful.

The reason I take this approach instead of doing the entire prototype in After Effects is because of the prototyping framework. Axure will allow testers to interact with the prototype non-sequentially instead of playing a continuous timeline.

Blur Effect

To my knowledge, there is no way to create blur effects in Axure. What I do in Photoshop is to create two different states of one images. In this example below you will see that I have one state where the image is static and the other is one treated with a gaussian blur in Photoshop. It can be a bit tedious to create an image for every state, but it won’t take too long if you know your way around photoshop and the result will be a very naturalistic prototype.

assets

In my project I created three sets of images to show navigating between different products. All you need to do is:

  1. Create a dynamic panel.
  2. Create two states: one with the static image and the other for the blurred image.
  3. When you want to initiate the interaction, do a panel state change and set the effect to “fade”. This will create the illusion of the image being blurred when in reality the static image is fading away and revealing the blurred one.

Assets

 Swiping Between Products

Photo Apr 23, 12 33 48 AM

In this project I made the view swipable so you can move between different products. Here’s how:

  1. Create a dynamic panel and put all of your products in it as panel states.
  2. For the interaction set On Swipe Left to show the next panel state and On Swipe Right to the previous panel state.
  3. I have the animation of both the entering and leaving elements moving in the same direction. This creates the illusion of swiping in iOS.

Modals

To create a modal in Axure you will treat it as a flyout. Doing this one is really simple; create a dynamic panel, hide it, and have it show on an interaction. Set the animation to “slide up” or something else you prefer.

Photo Apr 23, 12 32 10 AM

Revealing Details

In this prototype I use On Click but another idea I had was to reveal this on tap and hold. Like the modal, this is simply a hidden dynamic panel that reveals in a fade.

.Photo Apr 23, 12 37 40 AM

Here is the prototype (open on your iPhone for the best experience). I also did a screencast using AirServer—highly recommend it.

Well there you have it—a few different ways to create iOS effects using Axure. If you have any questions or have any request to create any other interactions, leave a comment! A special thanks to Fortnight Lingerie for allowing me use their branding in this prototype—very much appreciated.