Axure RP Pro 7 For Wireframes
This course assumes you have taken or are already familiar with the content presented in my Beginners course. If you want to go further with Axure training, contact me for personalised, private training. You can also visit my Ptype website for a link to my newest 9+ hour video course on learning Axure (not available on Udemy).
This course has around 75 minutes of video content. If you want to pause the videos and try what I’m saying, then it will take you more than 75 minutes to go through.
Through my consulting company, Ptype (formerly known as Brass Flowers), I am one of just a handful of companies (worldwide) approved by Axure as a trainer.
Want to be among the first to get updates on my live and video Axure training? Join my website’s mailing list.
What Is Axure?
Axure is software available for Windows and Macs that allows people who work in UX (user experience), interaction design, development, design, or product management to create flow charts, wireframes, and interactive clickable prototypes. Axure’s main competitors are Omnigraffle and Visio for wireframing and JustInMind for prototyping.
Axure easily handles low, medium, and high fidelity wireframes and prototypes. It can also handle data sets, variables, listeners, mobile interactions, and a seemingly endless heap of great features. Clickable interactive prototypes that work on desktop and/or mobile are great for socialising, user testing, and documentation.
Axure can publish HTML, CSS, Javascript, and Jquery (not for production servers, please!) and can also generate a variety of spec documents. Published Axure files can be uploaded to your own hosting or straight through the software to the Axure Share site. Axure now lets you host up to 1000 prototypes for free (password protection on each is optional).
Whether you need to show a quick mockup or reproduce a polished product, Axure is a great tool to know well. Many UX employers are starting to look for Axure on resumes! With a great coach (that’s me!) and some Axure training, you can expand your skill set.
Annotating Your Wireframes
-
1
Setting Up Your WorkspaceSetting up your Axure workspace for desktop wireframes.
-
2
Using Libraries
Loading and unloading libraries of pre-made widgets and icons. Great for placeholders!
-
3
Using Masters
Masters make your life easier by giving you a place to drop elements or whole sections that you might use over and over. Here, I build a master for our website header.
-
4
Wireframe For A Website Home Page
This example shows building a wireframe for a home page of a website.
-
5
Wireframing A Form
Adding Axure's form widgets to a wireframe.
Mobile Wireframes
-
6
Axure's Approach To Annotations
Axure has a way to add annotations, but it's not my preferred way since these only show up in the specification documents Axure generates.
-
7
A Different Approach To Annotations
For wireframes, this is the best way to add annotations. It's rather manual, but you have complete control, and these will be seen when you publish.
Sharing Your Wireframes
-
8
Setting Up Your Workspace
Let's imagine that our wireframes need to also show mobile responsive design. First, we set up our workspace for the mobile wireframing.
-
9
Wireframe For A Mobile Screen
This example shows taking the home page wireframe we made for the desktop version and translating some of it for mobile.
Conclusion
-
10
Create A PDF
One common way to publish your wireframes is to create a PDF.
-
11
Export Each Page As An Image
You can also export Axure pages as BMPs, JPGs, PNGs, or GIFs.
-
12
Publishing Locally
While this may be more useful for prototypes (rather than wireframes), you can publish your wireframes to HTML pages. Remember that the HTML, CSS, Javascript, and JQuery that Axure spits out should NOT be used as production code!
-
13
Publishing To AxShare
While publishing to Axure's Share site may make more sense for prototypes, you can certainly also do it with wireframes. Axure allows you to host up to 1000 Axure files with them for free! Sign up at http://share.axure.com.
