By Nic Edwards PROTOTYPING & WIREFRAMING Axure
Jan 27, 2015
By Nic EdwardsPROTOTYPING & WIREFRAMINGAxure
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.
The BasicsMaking Shapes
Placement
Changing Colors/ Gradients
Color Palettes
Borders
Masters
Text Styling
InteractivityBasic Interactions
Dynamic Panels and “States”
The NecessitiesHow to use AxShare
How to set up shared .rp files using Dropbox
The dangers of the shared file
NAVIGATING AXUREIT’S A WILD RIDE
So here are some of the important areas:
Page NavSharing and Generation
Widget Creation
Interactivity
Style
Manager
Workspace
Making & Manipulating ShapesGo to the widget library area then click and drag a rectangle into the workspace.
Borders
Now go over to the style area and find the options to alter the borders
Select the thickest with your rectangle selected
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
PlacementYour 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.
Text & StylingWith 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
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.
Step 2. Masters
Right click on the left black square and select “Convert to Master”
Name the master something interesting then hit continue
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.
LEARNING TO LOVE AXUREOR - HOW TO ADD INTERACTIVITY AND USE DYNAMIC PANELS AS WELL AS STATES
Dynamic Panels
So we have our arrangement of squares
Right click the lower right black one and convert it to a dynamic panel
Adding StatesThe right square is now a state of the dynamic panel
Right click and duplicate the state
Alternating Between StatesDouble 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.
InteractivityNow 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
Specifying the InteractionCheck 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”
Generating Prototypes LocallyClick “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.
AXSHAREHOW TO MAKE YOUR WEB PROTOTYPES PUBLIC
Step. 1 AxShare in AxureClick on Axshare, this loads the options which you will use to upload your prototypes online.
Enter AxShare email and password
Check “Save password”
Step. 2 Account Info
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
This is the link that can be accessed online. Share it with the world, yay!
Step. 4 Confirmation!
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)
MOBILEHOW TO SHARE YOUR MOBILE AXURE PROTOTYPES… USING AXSHARE
Step 1. Mobile ConfigurationStart the mobile configuration steps after the “Account Info” slide
Click on “Edit”
Click on “Mobile/Device”
Step 2. Mobile Configuration
Keep the default configurations
Check the “Prevent vertical page scrolling (blocks elastic scrolling) box
Step 3. Dimensions
Upload an icon - it’s relevant later on and take into account the 114x114 px when designing it!
Step 4. Icons!
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
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
Click “OK” and proceed to “Step 3. Publish” to finish the upload.
Step 8. OK!
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
MOBILE PT. 2MAKING YOUR PROTOTYPE LOOK LIKE A NATIVE APP
Native App WizardSo you’ve uploaded your .rp file with the mobile dimensions and all of the settings from the last set of mobile slides…
Now What?
Linking to the ProjectWell, 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
Part 1. SetupYou should have this sitemap sitting next to your prototype
Go ahead and tap on the highlighted button
�41
Part 2. SetupTap “without sitemap” and copy the link
Paste that link into your browser and load it
�42
Linking to Home Screen
Tap the options menu in Safari
�43
The tap the “Add to Home Screen” button
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!
Useful InformationThe 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.
SHARED PROJECTSDROPBOX, AXURE AND FRIENDS
So you have your file… But what’s life without friends?
Click on Sharing
Step. 1 Log in to Dropbox
Click on “New shared folder” in the upper righthand corner
Step. 2 Make a Shared Folder
Since it’s a new folder, make a new folder to share then click “Next”
Step. 3 Create & Name
Name the folder, click “Next
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
Open our beautiful Axure file, the awesome part is highlighted in red…
Step. 5 Open Axure
Click “Team (PRO)”
Select “Create Team Project from Current File”
Step. 6.1 Sharing the File
Name the project then click “Next”
Step. 6.2 Sharing the File
Click the “…” and find the directory or, as we know it, the dropbox shared file we’ve made.
Step. 6.3 Sharing the File
Select “Dropbox”
Step. 6.4 Sharing the File
Select the shared file you made on Dropbox, which as you remember is the “Axure Shared Folder Demo”
Step. 6.5 Sharing the File
Click “Next”
Step. 6.6 Sharing the File
Click “Finish” and…
Step. 6.7 Sharing the File
You should now have a shared project on Axure through Dropbox’s cloud service
Cool.
Step. 7 We’re Finished
OPENING A SHARED PROJECTDROPBOX, AXURE AND FRIENDS
Step. 1 Opening the ProjectSelect “Get and Open Team Project” under “File”
Step. 2 Opening the ProjectSelect “…” to find the shared folder
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
Good NewsYou 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
Ok, well maybe not this bad…
“Practice isn't the thing you do once you're good. It's the thing you do that makes you good.”
-Malcom Gladwell
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
THANKS!