Top Banner
By Nic Edwards PROTOTYPING & WIREFRAMING Axure
69

Intro to Axure

Jan 27, 2015

Download

Design

Nic Edwards

How to make basic shapes, alter them and create a basic button that interacts with "dynamic panels".
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Intro to Axure

By Nic EdwardsPROTOTYPING & WIREFRAMINGAxure

Page 2: Intro to Axure

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.

Page 3: Intro to Axure

The BasicsMaking Shapes

Placement

Changing Colors/ Gradients

Color Palettes

Borders

Masters

Text Styling

Page 4: Intro to Axure

InteractivityBasic Interactions

Dynamic Panels and “States”

Page 5: Intro to Axure

The NecessitiesHow to use AxShare

How to set up shared .rp files using Dropbox

The dangers of the shared file

Page 6: Intro to Axure

NAVIGATING AXUREIT’S A WILD RIDE

Page 7: Intro to Axure

So here are some of the important areas:

Page NavSharing and Generation

Widget Creation

Interactivity

Style

Manager

Workspace

Page 8: Intro to Axure

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

Page 9: Intro to Axure

Borders

Now go over to the style area and find the options to alter the borders

Select the thickest with your rectangle selected

Page 10: Intro to Axure

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

Page 11: Intro to Axure

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.

Page 12: Intro to Axure

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

Page 13: Intro to Axure

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.

Page 14: Intro to Axure

Step 2. Masters

Right click on the left black square and select “Convert to Master”

Name the master something interesting then hit continue

Page 15: Intro to Axure

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.

Page 16: Intro to Axure

LEARNING TO LOVE AXUREOR - HOW TO ADD INTERACTIVITY AND USE DYNAMIC PANELS AS WELL AS STATES

Page 17: Intro to Axure

Dynamic Panels

So we have our arrangement of squares

Right click the lower right black one and convert it to a dynamic panel

Page 18: Intro to Axure

Adding StatesThe right square is now a state of the dynamic panel

Right click and duplicate the state

Page 19: Intro to Axure

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.

Page 20: Intro to Axure

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

Page 21: Intro to Axure

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”

Page 22: Intro to Axure

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.

Page 23: Intro to Axure

AXSHAREHOW TO MAKE YOUR WEB PROTOTYPES PUBLIC

Page 24: Intro to Axure

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

Page 25: Intro to Axure

Enter AxShare email and password

Check “Save password”

Step. 2 Account Info

Page 26: Intro to Axure

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

Page 27: Intro to Axure

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

Step. 4 Confirmation!

Page 28: Intro to Axure

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)

Page 29: Intro to Axure

MOBILEHOW TO SHARE YOUR MOBILE AXURE PROTOTYPES… USING AXSHARE

Page 30: Intro to Axure

Step 1. Mobile ConfigurationStart the mobile configuration steps after the “Account Info” slide

Click on “Edit”

Page 31: Intro to Axure

Click on “Mobile/Device”

Step 2. Mobile Configuration

Page 32: Intro to Axure

Keep the default configurations

Check the “Prevent vertical page scrolling (blocks elastic scrolling) box

Step 3. Dimensions

Page 33: Intro to Axure

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

Step 4. Icons!

Page 34: Intro to Axure

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

Page 35: Intro to Axure

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

Page 36: Intro to Axure

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

Step 8. OK!

Page 37: Intro to Axure

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

Page 38: Intro to Axure

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

Page 39: Intro to Axure

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?

Page 40: Intro to Axure

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

Page 41: Intro to Axure

Part 1. SetupYou should have this sitemap sitting next to your prototype

Go ahead and tap on the highlighted button

�41

Page 42: Intro to Axure

Part 2. SetupTap “without sitemap” and copy the link

Paste that link into your browser and load it

�42

Page 43: Intro to Axure

Linking to Home Screen

Tap the options menu in Safari

�43

The tap the “Add to Home Screen” button

Page 44: Intro to Axure

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!

Page 45: Intro to Axure

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.

Page 46: Intro to Axure

SHARED PROJECTSDROPBOX, AXURE AND FRIENDS

Page 47: Intro to Axure

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

Page 48: Intro to Axure

Click on Sharing

Step. 1 Log in to Dropbox

Page 49: Intro to Axure

Click on “New shared folder” in the upper righthand corner

Step. 2 Make a Shared Folder

Page 50: Intro to Axure

Since it’s a new folder, make a new folder to share then click “Next”

Step. 3 Create & Name

Name the folder, click “Next

Page 51: Intro to Axure

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

Page 52: Intro to Axure

Open our beautiful Axure file, the awesome part is highlighted in red…

Step. 5 Open Axure

Page 53: Intro to Axure

Click “Team (PRO)”

Select “Create Team Project from Current File”

Step. 6.1 Sharing the File

Page 54: Intro to Axure

Name the project then click “Next”

Step. 6.2 Sharing the File

Page 55: Intro to Axure

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

Step. 6.3 Sharing the File

Page 56: Intro to Axure

Select “Dropbox”

Step. 6.4 Sharing the File

Page 57: Intro to Axure

Select the shared file you made on Dropbox, which as you remember is the “Axure Shared Folder Demo”

Step. 6.5 Sharing the File

Page 58: Intro to Axure

Click “Next”

Step. 6.6 Sharing the File

Page 59: Intro to Axure

Click “Finish” and…

Step. 6.7 Sharing the File

Page 60: Intro to Axure

You should now have a shared project on Axure through Dropbox’s cloud service

Cool.

Step. 7 We’re Finished

Page 61: Intro to Axure

OPENING A SHARED PROJECTDROPBOX, AXURE AND FRIENDS

Page 62: Intro to Axure

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

Page 63: Intro to Axure

Step. 2 Opening the ProjectSelect “…” to find the shared folder

Page 64: Intro to Axure

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

Page 65: Intro to Axure

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

Page 66: Intro to Axure

Ok, well maybe not this bad…

Page 67: Intro to Axure

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

-Malcom Gladwell

Page 68: Intro to Axure

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

Page 69: Intro to Axure

THANKS!