Axure Tips: 3 Tips for Product Prototype Design


Axure is a fast and powerful tool for creating software prototypes. However, for many users, they may not have received formal training and do not know how to use Axure more efficiently in an appropriate way. Based on this, I will share 3 key tips that need to be paid attention to in the process of product prototype page specification design in combination with cases. I hope it will be helpful to you.

Value of Prototype

The value of product prototype is to show your business needs to your audience in the most intuitive way.

In addition to the product prototype, other contents that need to be displayed in the PRD document (such as business, process, logic, etc.) under the condition of the same quality, the product prototype with certain design specifications will obviously make it easier for your audience to accept. In addition, in the actual work, we will also be responsible for the review of UI & visual draft. If you have certain design thinking, you can also better understand some of the other party’s design ideas and ideas.

The following points should be paid attention to in the specification design of product prototype:

1. Fonts: Type & size

In the text design of the prototype, the font type is recommended to be San Francisco (iOS) or Roberto (Android) in order to achieve better display effect.

In terms of font size, I usually use 12, 13, 14, 16 and 18, and occasionally 8, 9 and 20.f

2. Colors

In the color design of the prototype page, it is best to keep consistent. Whether it is text or images, do not use more than three colors.

If icons are needed in the product prototype for demonstration, the consistency, size and style of the images need to be maintained. However, in actual work, in addition to some highly indicative icons, such as search, setting, sharing, etc., try not to use icons.

The materials constituting the prototype interface should also avoid mixing as much as possible, such as screenshots from ready-made products and then applied to your own product prototypes.

Axure 9 has added adjust color feature, which can adjust the color of the image.

3. Typesetting: Alignment & Spacing

In the structural design of the prototype page, the features of reference line, alignment and distribution should be used flexibly to make the page content readable.

From my personal habit, I will space components according to the multiple of 8 pixels. I usually adjust the Padding value in the Style panel, and the Padding value can also assist me in aligning the components. The lines height of text is adjusted occasionally, but the default is dominant.

4. Cases

5. Conclusion

For newcomers who want to work as product managers or UX/interaction designers, it is recommended that you consciously cultivate your own design specifications in the process of familiarizing yourselves with the use of tools. When drawing wireframes or copying other products to create high-fidelity prototypes, we must pay attention to the following two points:

Wireframe: it is not recommended to design pages in full accordance with apple or Android design specifications.

High-fidelity: pixel-perfect design is recommended.

These are all our tips this time. If you have any questions and suggestions, please leave a message.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.




We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

notes — 12 to 17 — unit 1 — mitx — 11.154x —1st feb 2017

UX Tips For Your Next Website Redesign

Fail 3 times during the design process

The “I” word….

READ/DOWNLOAD*$ Live Small/Live Modern: The Best of Beams at Home FULL BOOK PDF & FULL AUDIOBOOK

The unmeasurable and the non-material. Is everything a service today?

How to make usability testing part of the company process

Case Study: Boh’s Birthday Bash

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium

Axure Tutorial: Make Funnel Chart with Repeater

Another Case Study About Information Architecture

User Research in Product Interaction Design — Observation

Understanding the User Flow