Intro to Axure

1,378 views

Published on

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

Published in: Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,378
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
39
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Intro to Axure

  1. 1. By Nic Edwards PROTOTYPING & WIREFRAMING Axure
  2. 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. 3. The Basics Making Shapes Placement Changing Colors/ Gradients Color Palettes Borders Masters Text Styling
  4. 4. Interactivity Basic Interactions Dynamic Panels and “States”
  5. 5. The Necessities How to use AxShare How to set up shared .rp files using Dropbox The dangers of the shared file
  6. 6. NAVIGATING AXURE IT’S A WILD RIDE
  7. 7. So here are some of the important areas: Page Nav Sharing and Generation Widget Creation Interactivity Style Manager Workspace
  8. 8. Making & Manipulating Shapes Go to the widget library area then click and drag a rectangle into the workspace.
  9. 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. 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. 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. 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. 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. 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. 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. 16. LEARNING TO LOVE AXURE OR - HOW TO ADD INTERACTIVITY AND USE DYNAMIC PANELS AS WELL AS STATES
  17. 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. 18. Adding States The right square is now a state of the dynamic panel Right click and duplicate the state
  19. 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. 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. 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. 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. 23. AXSHARE HOW TO MAKE YOUR WEB PROTOTYPES PUBLIC
  24. 24. Step. 1 AxShare in Axure Click on Axshare, this loads the options which you will use to upload your prototypes online.
  25. 25. Enter AxShare email and password Check “Save password” Step. 2 Account Info
  26. 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. 27. This is the link that can be accessed online. Share it with the world, yay! Step. 4 Confirmation!
  28. 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. 29. MOBILE HOW TO SHARE YOUR MOBILE AXURE PROTOTYPES… USING AXSHARE
  30. 30. Step 1. Mobile Configuration Start the mobile configuration steps after the “Account Info” slide Click on “Edit”
  31. 31. Click on “Mobile/Device” Step 2. Mobile Configuration
  32. 32. Keep the default configurations Check the “Prevent vertical page scrolling (blocks elastic scrolling) box Step 3. Dimensions
  33. 33. Upload an icon - it’s relevant later on and take into account the 114x114 px when designing it! Step 4. Icons!
  34. 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. 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. 36. Click “OK” and proceed to “Step 3. Publish” to finish the upload. Step 8. OK!
  37. 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. 38. MOBILE PT. 2 MAKING YOUR PROTOTYPE LOOK LIKE A NATIVE APP
  39. 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. 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. 41. Part 1. Setup You should have this sitemap sitting next to your prototype Go ahead and tap on the highlighted button 41
  42. 42. Part 2. Setup Tap “without sitemap” and copy the link Paste that link into your browser and load it 42
  43. 43. Linking to Home Screen Tap the options menu in Safari 43 The tap the “Add to Home Screen” button
  44. 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. 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. 46. SHARED PROJECTS DROPBOX, AXURE AND FRIENDS
  47. 47. So you have your file… But what’s life without friends?
  48. 48. Click on Sharing Step. 1 Log in to Dropbox
  49. 49. Click on “New shared folder” in the upper righthand corner Step. 2 Make a Shared Folder
  50. 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. 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. 52. Open our beautiful Axure file, the awesome part is highlighted in red… Step. 5 Open Axure
  53. 53. Click “Team (PRO)” Select “Create Team Project from Current File” Step. 6.1 Sharing the File
  54. 54. Name the project then click “Next” Step. 6.2 Sharing the File
  55. 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. 56. Select “Dropbox” Step. 6.4 Sharing the File
  57. 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. 58. Click “Next” Step. 6.6 Sharing the File
  59. 59. Click “Finish” and… Step. 6.7 Sharing the File
  60. 60. You should now have a shared project on Axure through Dropbox’s cloud service Cool. Step. 7 We’re Finished
  61. 61. OPENING A SHARED PROJECT DROPBOX, AXURE AND FRIENDS
  62. 62. Step. 1 Opening the Project Select “Get and Open Team Project” under “File”
  63. 63. Step. 2 Opening the Project Select “…” to find the shared folder
  64. 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. 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. 66. Ok, well maybe not this bad…
  67. 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. 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. 69. THANKS!

×