Uploaded on

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

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

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
265
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
9
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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!