Top Banner

Click here to load reader

Intro to Axure

Jan 27, 2015



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 ShapesPlacementChanging Colors/ GradientsColor PalettesBordersMastersText Styling 4. Interactivity Basic InteractionsDynamic Panels and States 5. The Necessities How to use AxShareHow to set up shared .rp les using DropboxThe dangers of the shared le 6. NAVIGATING AXURE ITS 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 nd 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 ower of a rectangle look like this now. Filled with color! The rst set of (x, y) are your coordinatesLets change those to (20, 20). The second set alter the height and width in px of your rectangleLets 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 youve 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 MasterName 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 squaresRight 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 panelRight click and duplicate the state 19. Alternating Between States Double click the Dynamic Panel in the Widget ManagerRename the panel Right SquareUse the Edit button to rename State 1 Black Square and State 2 Red SquareDouble click on Red Square and change the squares color to red. 20. Interactivity Now to give our dynamic panel some pizazzDouble click OnClickGo down the list of options on the left menu until you nd Set Panel State under Dynamic PanelsClick on that and it should show up underneath Case 1 with a lightning bolt 21. Specifying the Interaction Check the only available optionUnder Select the state choose NextThen the option Wrap from last to rst will appear, check the boxThen click OK 22. Generating Prototypes Locally Click Preview, which will generate a local prototype in your browserClick 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 passwordCheck Save password Step. 2 Account Info 26. If this is the rst upload of this le or if you want to keep separate iterations of the prototype, check Create a new projectName the project.Replace an existing project wipes the currently uploaded prototype, but keeps the same urlClick 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 Conrmation! 28. The AxShare Overview Log in to (or make a login)Shows an overview of what youve uploaded as well as the urlUploaded le management (delete old uploads) 29. MOBILE HOW TO SHARE YOUR MOBILE AXURE PROTOTYPES USING AXSHARE 30. Step 1. Mobile Conguration Start the mobile conguration steps after the Account Info slideClick on Edit 31. Click on Mobile/Device Step 2. Mobile Conguration 32. Keep the default congurationsCheck the Prevent vertical page scrolling (blocks elastic scrolling) box Step 3. Dimensions 33. Upload an icon - its 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 hasnt 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 nish the upload. Step 8. OK! 37. Mobile Housekeeping Be conscious of your target screens pixel dimensions - it matters.iPhone 5 ratios vs. iPhone 4 etc vs. iPad vs. the various avors of Android etc.Within the Axure le, make sure the dimensions start from the 0,0 coordinatesMake use of the guides within your Axure le 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 youve uploaded your .rp le with the mobile dimensions and all of the settings from the last set of mobile slidesNow What? 40. Linking to the Project Well, remember that link you generated? Copy it and email it to yourself so that you dont have to type it in on your mobile browser. 40 41. Part 1. Setup You should have this sitemap sitting next to your prototypeGo ahead and tap on the highlighted button 41 42. Part 2. Setup Tap without sitemap and copy the linkPaste 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 its 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 youve 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 le.Multiple people can do this and see what youve done as you iterate and push the changes, very cool. 46. SHARED PROJECTS DROPBOX, AXURE AND FRIENDS 47. So you have your le But whats 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 its 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 folderwhich should then give you a conrmation and email the person you shared withWere done with the Dropbox website now and are moving on to sharing the le on the Axure side! Step. 4 Share 52. Open our beautiful Axure le, 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 nd the directory or, as we know it, the dropbox shared le weve made. Step. 6.3 Sharing the File 56. Select Dropbox Step. 6.4 Sharing the File 57. Select the shared le 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 Dropboxs cloud serviceCool. Step. 7 Were 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 nd the shared folder 64. Step. 3 Locating the Directory Select the shared le then nd the le that your friend shared with you then nd the name of the .rp le and press nextThis will then open the le after another conrmation screen 65. Good News You only need to locate the le onceIt will show up as a pink le instead of a blue one meaning that its sharedBe 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 nd them here: 69. THANKS!

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.