Axure Mobile App Presentation Template

  • Tutorial
In the process of working on the ui design of the mobile version of the site or mobile application, I tried different ways to present it to clients. So far I have chosen Invision, but there are a number of points.

image

Firstly, the cost. For pros, this is not a problem, but for many novice designers, the minimum $ 13 per month is quite a decent amount.

Secondly, for some reason, the problem with swiping the mouse on top of the active buttons is still not resolved. Simply put - scrolling down over the active button works like a click. And this is very inconvenient in fairly complex interfaces.

Another option - Figma - has not yet been mastered, and the fact that it will develop into an industry standard. Therefore, some designers will also bypass it.

Making a presentation of the design of a mobile application in Axure


The simplest and most affordable option remains Axure in conjunction with Axshare. And here Invision begins to lack acuity - customers are not always able to present in detail the work with the application in their minds.

So let's start developing our own tools. And the first step is to make a template for Axure with the frame of a conditional mobile phone. To do this, we need a phone frame in PNG with a “hole” in the screen, and the structure of the screens.

In the beginning - everything is simple: we put the phone’s picture down, on top put the Inline Frame in the size of the screen hole. But there is one unpleasant moment. It is related to the features of the Inline Frame element.
This element creates a window in the prototype for uploading various information - a frame. In it, you can set the output of another screen from the structure or insert a link to the site.

The problem arises in scroll bars. They can either be shown or hidden. But with hidden scroll bars, rewinding is turned off - so the long screens of the application do not show in dynamics. Not an order.

To solve the problem, we use a mask technique (thanks crackjack ).

1. Convert Inline Frame to Dynamic Panel. Turn on the display of scrollbars (if turned off).
2. We translate the frame and frame of the phone once more into the dynamic panel, in which we turn off the scrollbars. We also change the size of our mask to 360x640 so that the scrollbars from the frame do not peep out.

The rest is already easier - on the main screen we still have the phone frame in a frame and a dummy. In the frame, we load the output of the next screen on the list, we establish navigation and that's it. Do not forget to combine the elements of the first screen into a group and create a dynamic panel from it.

The panel itself can be aligned in the middle of the browser. In the Pin to Browser settings, mark the Center and Top parameters. We publish everything on Axshare and send the link to the client.

Shortcut. Ready template for Axure


I uploaded the result as a finished file. You can download the template for Axure for free here .

Important point


The template is designed for 360 layouts in width. This is done on purpose. Layouts in 320 wide look too small for the eye on the desktop computer screen, and layouts in the original size - 1080 (and even 640), on the contrary - too large.

PS I will not write standard instructions what and where. I want to give more practical things to improve the work of ux / ui designers.

I will be happy to answer questions and will be happy with suggestions for optimization!

Also popular now: