How to make basic shapes, alter them and create a basic button that interacts with "dynamic panels".

1. By Nic Edwards
PROTOTYPING & WIREFRAMING
Axure

2. Axure
• One stop shop that Wireframes and makes
interactive Prototypes.
• Instead of using hotspots & images like InVision or
Flinto, it uses widgets, which allows for painless
rearrangement and rapid iteration.

3. The Basics
Making Shapes
Placement
Changing Colors/ Gradients
Color Palettes
Borders
Masters
Text Styling

4. Interactivity
Basic Interactions
Dynamic Panels and “States”

5. The Necessities
How to use AxShare
How to set up shared .rp files using Dropbox
The dangers of the shared file

6. NAVIGATING AXURE
IT’S A WILD RIDE

7. So here are some of the important areas:
Page Nav
Sharing and Generation
Widget Creation
Interactivity
Style
Manager
Workspace

8. Making & Manipulating Shapes
Go to the widget library
area then click and
drag a rectangle into
the workspace.

9. Borders
Now go over to the style
area and find the options to
alter the borders
Select the thickest with your
rectangle selected

10. Color Palettes
Go to the “Fill” option and
click it
Your rectangle should look
like this now
Change the color to a color
of your choosing

11. Placement
Your beautiful flower of a
rectangle look like this now.
Filled with color!
The first set of (x, y) are your
coordinates
Let’s change those to (20, 20).
The second set alter the height and
width in px of your rectangle
Let’s change those to 150px, 150px.

12. Text & Styling
With the square selected,
which should now look like
this, double click to add text
Mess around with the font, style
and color.
Make sure it contrasts with the
color you’ve chosen

13. Step 1. Masters
Go to the widget library area and
drag a rectangle into the workspace.
change its coordinates to (20,180)
and make it a 75px, 75px square.
copy & paste it then drag it so that it
aligns like in the sample picture.

14. Step 2. Masters
Right click on the left black square
and select “Convert to Master”
Name the master something
interesting then hit continue

15. Step 3. Masters
Double click on your “Page 1” and drag
your master out into your fresh work
space.
Notice that it snaps to the same location
as the square on the “Home” page.
Double click the “Home” page to return
to our “interesting” square arrangement.

16. LEARNING TO
LOVE AXURE
OR - HOW TO ADD
INTERACTIVITY AND USE
DYNAMIC PANELS AS WELL
AS STATES

17. Dynamic Panels
So we have our
arrangement of squares
Right click the lower right
black one and convert it to
a dynamic panel

18. Adding States
The right square is now a
state of the dynamic panel
Right click and duplicate
the state

19. Alternating Between States
Double click the Dynamic Panel in the
Widget Manager
Rename the panel “Right Square”
Use the “Edit” button to rename “State 1”
“Black Square” and “State 2” “Red Square”
Double click on “Red Square” and change
the square’s color to red.

20. Interactivity
Now to give our dynamic panel some
pizazz…
Double click “OnClick”
Go down the list of options on the left
menu until you find “Set Panel State”
under “Dynamic Panels”
Click on that and it should show up
underneath “Case 1” with a lightning
bolt

21. Specifying the Interaction
Check the only available option
Under “Select the state” choose
“Next”
Then the option “Wrap from last to
first” will appear, check the box
Then click “OK”

22. Generating Prototypes Locally
Click “Preview”, which will generate
a local prototype in your browser
Click the large box and it will loop
between states for each click.
Alternating between black and red.

23. AXSHARE
HOW TO MAKE YOUR WEB
PROTOTYPES PUBLIC

24. Step. 1 AxShare in Axure
Click on Axshare, this loads
the options which you will
use to upload your
prototypes online.

25. Enter AxShare email and
password
Check “Save password”
Step. 2 Account Info

26. If this is the first upload of this file or if
you want to keep separate iterations
of the prototype, check “Create a new
project”
Name the project.
“Replace an existing project” wipes
the currently uploaded prototype, but
keeps the same url
Click “Publish” and it will start the
upload
Step. 3 Publish

27. This is the link that can be accessed online. Share it with
the world, yay!
Step. 4 Confirmation!

28. The AxShare Overview
Log in to axshare.com (or make a login)
Shows an overview of what you’ve uploaded as
well as the url
Uploaded file management (delete old uploads)

29. MOBILE
HOW TO SHARE YOUR
MOBILE AXURE
PROTOTYPES…
USING AXSHARE

30. Step 1. Mobile Configuration
Start the mobile configuration
steps after the “Account Info” slide
Click on “Edit”

31. Click on “Mobile/Device”
Step 2. Mobile Configuration

32. Keep the default configurations
Check the “Prevent vertical
page scrolling (blocks elastic
scrolling) box
Step 3. Dimensions

33. Upload an icon - it’s relevant
later on and take into account
the 114x114 px when
designing it!
Step 4. Icons!

34. Supposedly you can make a
splash screen, which displays
while the “app” is loading, but
it hasn’t worked for me, so
leave it blank.
Step 5. Splash Screens

35. To make your mobile prototype
look like a native application,
make sure that you check the
“Hide browser nav” box.
Step 7. Hiding the Nav

36. Click “OK” and proceed to
“Step 3. Publish” to finish
the upload.
Step 8. OK!

37. Mobile “Housekeeping”
Be conscious of your target screen’s pixel
dimensions - it matters.
iPhone 5 ratios vs. iPhone 4 etc vs. iPad vs.
the various flavors of Android etc.
Within the Axure file, make sure the
dimensions start from the 0,0 coordinates
Make use of the guides within your Axure file
to make sure that the prototype stays within
the dimensions

38. MOBILE PT. 2
MAKING YOUR PROTOTYPE
LOOK LIKE A NATIVE APP

39. Native App Wizard
So you’ve uploaded your .rp file with the
mobile dimensions and all of the settings
from the last set of mobile slides…
Now What?

40. Linking to the Project
Well, remember that link you generated?
Copy it and email it to yourself so that you
don’t have to type it in on your mobile
browser.
40

41. Part 1. Setup
You should have this
sitemap sitting next to
your prototype
Go ahead and tap on
the highlighted button
41

42. Part 2. Setup
Tap “without sitemap” and
copy the link
Paste that link into your
browser and load it
42

43. Linking to Home Screen
Tap the options menu
in Safari
43
The tap the “Add to
Home Screen” button

44. Now it’s a Native “App”
Now you have a link to
your AxShare
prototype with the icon
44
Tap it and it will open while
hiding the Safari menus and
disabling the scrolling. It
now looks and feels native!

45. Useful Information
The good news is that once the prototype
is uploaded to AxShare and you’ve
created the link, you can push changes
and open the “app” with those changes
without going through this process again.
You just need to overwrite the same file.
Multiple people can do this and see what
you’ve done as you iterate and push the
changes, very cool.

46. SHARED
PROJECTS
DROPBOX, AXURE
AND FRIENDS

47. So you have your file…
But what’s life without friends?

48. Click on Sharing
Step. 1 Log in to Dropbox

49. Click on “New shared folder” in the upper
righthand corner
Step. 2 Make a Shared Folder

50. Since it’s a new folder, make
a new folder to share then
click “Next”
Step. 3 Create & Name
Name the folder, click “Next

51. Type in the email of the person you want to share with then click
“Share folder”
which should then give you a confirmation and email the person
you shared with
We’re done with the Dropbox website now and are moving on to
sharing the file on the Axure side!
Step. 4 Share

52. Open our beautiful Axure file,
the awesome part is
highlighted in red…
Step. 5 Open Axure

53. Click “Team (PRO)”
Select “Create Team Project
from Current File”
Step. 6.1 Sharing the File

54. Name the project then
click “Next”
Step. 6.2 Sharing the File

55. Click the “…” and find the
directory or, as we know
it, the dropbox shared file
we’ve made.
Step. 6.3 Sharing the File

56. Select “Dropbox”
Step. 6.4 Sharing the File

57. Select the shared file you
made on Dropbox, which
as you remember is the
“Axure Shared Folder Demo”
Step. 6.5 Sharing the File

58. Click “Next”
Step. 6.6 Sharing the File

59. Click “Finish” and…
Step. 6.7 Sharing the File

60. You should now have a shared project on Axure
through Dropbox’s cloud service
Cool.
Step. 7 We’re Finished

61. OPENING A
SHARED
PROJECT
DROPBOX, AXURE
AND FRIENDS

62. Step. 1 Opening the Project
Select “Get and Open
Team Project” under “File”

63. Step. 2 Opening the Project
Select “…” to find the
shared folder

64. Step. 3 Locating the Directory
Select the shared file then find the file that your friend
shared with you then find the name of the .rp file and press
next
This will then open the file after another confirmation screen

65. Good News
You only need to locate the file once
It will show up as a pink file instead of
a blue one meaning that it’s shared
Be careful about checking in/
checking out

66. Ok, well maybe not this bad…

67. “Practice isn't the thing you do once you're good.
It's the thing you do that makes you good.”
-Malcom Gladwell

68. With the basics…
To learn more complex interactions, the Axure
website has some pretty good tutorials.
You can find them here: www.axure.com/learn

69. THANKS!