Axure Mobile Application Presentation Template
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. While opted for Invision, but there are a number of points.
First, the cost. For the 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 the mouse swipe over the active buttons is still not solved. Simply put - scrolling down on top of the active button works like a click. And it is very inconvenient in quite complex interfaces.
Another option - Figma - is not yet mastered, and indeed the fact that it will develop into an industry standard. Therefore, some designers also bypass his side.
The most simple and affordable option remains Axure in conjunction with Axshare. And this is where Invision begins to be sorely missed - customers are not always able to provide detailed work with the application in mind.
So let's start developing our tools. And the first step is to make a template for Axure with a frame of a conditional mobile phone. To do this, we need a phone frame in PNG with a “hole” in place of the screen, and a screen structure.
In the beginning - everything is simple: down we put the phone image, on top we put the Inline Frame in the size of the screen hole. But there is one unpleasant moment. It is associated with the features of the element Inline Frame.
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 occurs in scroll bars. They can either be shown or hidden. But when hidden scroll bars rewind is turned off - so that the long screens of the application do not show in the dynamics. Not order.
To solve the problem, we use masked (thanks to crackjack ).
1. Inline Frame convert to Dynamic Panel. Turn on scrollbar display (if off).
2. We translate the frame and frame of the phone once again into a dynamic panel, in which we disable scrollbars. The size of our mask is also changed to 360x640 so that the scrollbars will not look out from the frame.
The rest is simpler - on the main screen, we still have the frame of the phone in a frame and a cap. In the frame we load the output of the next screen in the list, we adjust the 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 settings of Pin to Browser, we mark the parameters Center and Top. We publish everything on Axshare and send the link to the client.
I laid out the result of the finished file. Download the template for Axure for free at the link .
The template is designed for layouts 360 in width. This is done on purpose. Layouts of 320 wide look too small for the eye on a 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 am pleased to answer questions and I will be happy with suggestions for optimization!
First, the cost. For the 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 the mouse swipe over the active buttons is still not solved. Simply put - scrolling down on top of the active button works like a click. And it is very inconvenient in quite complex interfaces.
Another option - Figma - is not yet mastered, and indeed the fact that it will develop into an industry standard. Therefore, some designers also bypass his side.
Making a presentation of a mobile app design in Axure
The most simple and affordable option remains Axure in conjunction with Axshare. And this is where Invision begins to be sorely missed - customers are not always able to provide detailed work with the application in mind.
So let's start developing our tools. And the first step is to make a template for Axure with a frame of a conditional mobile phone. To do this, we need a phone frame in PNG with a “hole” in place of the screen, and a screen structure.
In the beginning - everything is simple: down we put the phone image, on top we put the Inline Frame in the size of the screen hole. But there is one unpleasant moment. It is associated with the features of the element Inline Frame.
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 occurs in scroll bars. They can either be shown or hidden. But when hidden scroll bars rewind is turned off - so that the long screens of the application do not show in the dynamics. Not order.
To solve the problem, we use masked (thanks to crackjack ).
1. Inline Frame convert to Dynamic Panel. Turn on scrollbar display (if off).
2. We translate the frame and frame of the phone once again into a dynamic panel, in which we disable scrollbars. The size of our mask is also changed to 360x640 so that the scrollbars will not look out from the frame.
The rest is simpler - on the main screen, we still have the frame of the phone in a frame and a cap. In the frame we load the output of the next screen in the list, we adjust the 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 settings of Pin to Browser, we mark the parameters Center and Top. We publish everything on Axshare and send the link to the client.
Shortcut Ready template for Axure
I laid out the result of the finished file. Download the template for Axure for free at the link .
Important point
The template is designed for layouts 360 in width. This is done on purpose. Layouts of 320 wide look too small for the eye on a 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 am pleased to answer questions and I will be happy with suggestions for optimization!
All Articles