How to view Axure Prototype like a Mobile app

If you are designing any mobile app in Axure then simulating prototype directly in mobile device for realistic presentation & demonstration will be really cool. In this article we are going to see how we can publish Axure prototype and view in mobile like an app.

Step1: Setup page according to targeted mobile device resolution and size. Also create global guides as per screen size and work according to guides.

Example: Guides created for iPhone 6s resolution (647x375px). Reduce the height by 20px in iOS app for status bar.

Step 2: Complete prototyping work and keep all the elements inside the guide.

Step 3: Publish prototype with some modifications

a.       Include View Port tag

b.      Set targeted device

c.       Screen width

d.      Add app-icon

Go to Publish> Generate html > Mobile/Device.

Step 4: Upload prototype in Axure Cloud (Axshare) and generate the link ‘Without sidebar'.

Step 5: Open the prototype link in targeted mobile device using default browser and ‘Add link to Home’. With this step, you can find an app icon in Menu of mobile as app.

Step 6: Tap on the app icon from Mobile menu and experience the prototype link an app.

We will be seeing some more articles related to Axure prototyping tool. Keep sharing your feedback/comments and suggestions of new topics.

Read more 'How to Axure' articles.

Author

Abhishek Jain

Co-founder of UXness

UX Designer & Researcher

When to use Variables in Axure

Axure provides capability to invoke information and triggers with the help of variables. Variables in Axure are less similar to the variables which developers use but are more simple. Learning how to use variables in Axure is not important, important is answering when and why first. Using variables in Axure is good when a designer is having a good understanding and maturity in design prototypes in Axure.

When to use Variables:

To show more ‘Personal’ feeling or Human touch – Personal and human touch provides more realistic feeling for user. If user’s name/role etc. (in text format) are coming in one screen (form) and user moves to another page by submitting the form then instead of showing generic message, you can show more personalized message as user has submitted the data in previous form.

Moving data from one page to another – If you are working on dashboard or data heavy application where user enters some data and you want to move entered data in another screens then we can use variables and reduce some elements from Axure workspace.

Reducing panels in dynamic panel and hidden stats – If you have different panels in a DP just to show variation in text, then you can use variables and move the respective text value in one.

Example: In any app, you have one ‘List of record’ where each record is having unique ‘record number or record name’. On click of any record you open a page which contains record number/name along with details. Now showing different record you might create different pages which will be quite laborious. With the help of variable only 2 pages will be able to show List and details page with all record numbers.

In upcoming article I will be talking about how to use variables in Axure.
Share your feedback on this article.

Author

Abhishek Jain

User Experience Designer & Researcher

@uxdabhi

How to Embed Fonts in Axure prototypes

While working in different kind of operating systems (like iOS, android) or client’s designers have some constraints of using any specific ‘Font-family’. iOS have its own default font family, sometimes client companies have their own style guide for using default fonts. If you are designing prototype in Axure then knowledge of fonts is recommended for you and how to embed any specific font family in your prototype is required for seamless experience. In this article you can have step by step guide in ‘Embedding custom font family in Axure prototype’.

Step 1. Select font which you want to embed in Axure prototype. Let’s say we want to embed ‘Open Sans’ font family.

Step 2. Get the ‘Source URL’ of font from ‘Google free fonts’ of similar other sources.

Google fonts: https://fonts.google.com/ 

Search – Font name and Select. Once you select you will be able to get link of font (see below image).

Step 3. Now open Axure prototype and go to Publish> Generate html.

Step 4. Select ‘Web fonts’ tab and add font by clicking on ‘+’ icon below.

Step 5. Enter the Font name (keep font name exact same with source URL). Enter URL of web font, keep ‘Link to .css file’ as selected.

 Till yet we have done linking of our custom font in our prototype. Now we have to map fonts which we are using in prototype to this (open sans) font. 

Step 6. Go to ‘Font Mappings’ and click on ‘+’ to add new mapping. Select any font which you want to change in your custom font in ‘Font’ field and enter exact name of custom font family in ‘font-family’. Let’s say we want to replace all the text having ‘Arial’ font in to our font (open sans).

Step 7. And finally generate prototype and run. You will be able to view your custom font in prototype.

Hope this guide help you in working in Axure prototyping tool. Below are some good recommended online courses which can help you in learning about Axure tool.

Explore more UX Courses 

About Author

Abhishek Jain

Design Lead UX Researcher
Co-founder of UXness
LinkedIn | Email