Presentation on theme: "AXURE RP The Right Fit The only tool that gives you the features to go from wireframes to rich prototypes and detailed specifications all in a familiar,"— Presentation transcript:
1AXURE RPThe Right FitThe only tool that gives you the features to go from wireframes to rich prototypes and detailed specifications all in a familiar, easy to use environment.
2How It All BeganWhy Axure RPThe Axure RP 411Become An ExpertNeed Help?Sharing ResourcesThe DetailsGet Started
3Founded in 2002 by Victor Hsu and Martin Smith, Axure was one of the first companies to deliver a tool dedicated to prototyping applications.After 8 years of development,Axure RP is now an essential tool for over 20,000 customers in over half theFORTUNE 100, leading agencies, and thousands of SMBs.
4QUALITY CUSTOMER SERVICE UNIQUE FEATURE SETFeatures for designing at the fidelity you need.EASE OF USEProductive in a few hours, proficient in a few weeks.CROSS PLATFORMAvailable for both the PC and Mac. No virtualization required.COLLABORATIONHelps teams work together on projects.QUALITY CUSTOMER SERVICEResponsive, thorough and personal.ACTIVE COMMUNITYGreat community for learning and sharing resources.
5WIREFRAMES PROTOTYPES SPECIFICATIONS COLLABORATION Widget libraries and easy to use tools for layout and formatting will help your wireframes come together in no time.PROTOTYPESWith one-click HTML prototype generation, Axure RP brings your designs to life without writing a single line of code.SPECIFICATIONSSpecification generation with customizable templates and formatting options means less time documenting and more time designing.COLLABORATIONIntegrated source control helps your team work simultaneously on a project and maintain a history of revisions.
6NEWBIE APPRENTICE MASTER Become an Axure Fu Master in no time through a series of online articles, videos and downloadable samples.
7“In over 3 years of using the product, the response time to issues is measured in hours, delivered sometimes by a call. This approach gives me confidence if there is an issue, I can count on Axure for a resolution.”-Ezra Schwartz@axurerp(800)
9LICENSING*$589/license with 2 installs:Mac and PC versions*Single (named) user license*Licenses come with 12 monthsof maintenanceQUANTITY DISCOUNTS*$539/license for 5 or more licenses*Site license pricing available(MAINTENANCE RENEWAL*$149/license for 12 months ofadditional support and upgrades
11Key benefits:» Design efficiently. » Experience your design early to test ideas. » Engage stakeholders to gather valuable feedback. » Automate specifications avoiding tedious documentation. » Enable design collaboration.
12Features» Easy to use » Masters for quick changes » Instantly generate functional prototypes » Interactive prototypes with annotations » Instantly generate specifications » Customizable » Check in/check out system » Version control
14What is Axure RP?Axure RP is a design and documentation tool used by user experience designers, information architects, business analysts and product managers to create annotated wireframes, interactive prototypes, and functional specifications for applications and websites.
15Newbie LevelNew to Axure RP? Patience, young grasshopper. You will quickly become familiar with the environment and the tools to create your first wireframe, interactive prototype and specification document.
16Apprentice LevelBuild on the basic techniques you've learned and add rich styles, complex interactivity, and conditional logic. At the end of this level, you will be able to create your own library of custom widgets. And remember, you must always use your powers for good, and not evil.
17Master LevelYou've had ample practice and hold a strong knowledge of Axure RP. Now let's push the limits of interactions and learn how to collaborate with your team. By the end of this level, you will gain the wisdom to bestow upon others.
19The Axure RP Environment Axure RP’s interface is similar to many other desktop applications. It includes menus and toolbars at the top to perform common tasks like opening and saving files, and formatting your design.In the center of it all is a wireframe pane that provides a drag and drop environment to design your wireframe. The wire frame pane is surrounded by various tool panes which can be detached and closed. You can hide and show these panes using the View menu at the top.
21( 1 ) Main Menu & Toolbar: Perform common actions like opening and saving files, and formatting widgets in a wireframe. Change the selection mode (Select Intersected Mode and Select Contained mode) or switch to connector mode.
22 ( 2 ) Wire frame Pane: Design your pages in this drag and drop environment with options like snap to grid and guides.( 3 ) Sitemap Pane: Add, remove, rename, and organize the pages in your design.
23( 4 ) Widgets Pane: Drag and drop commonly used widgets such as buttons, images, text panels and shapes to design your page. Create and load custom widget libraries.( 5 ) Masters Pane: Add, remove, rename and organize masters to reuse throughout your design.
24( 6 ) Pages Properties Pane: Add and organize page level notes, interactions and format pages in your design.
25( 7 ) Widget Properties Pane: Edit widget annotations, widget interactions and formatting. Annotations: Add and customize widget notes and descriptions.Interactions: Define widget interactions like basic links, pop ups, and dynamically showing and hiding widgets.Formatting: Edit widget styles and properties like location and size ,font styles, text alignment and padding, and widget styles.
26(8) Dynamic Panel Manager Pane: Hide and show dynamic panels in the wire frame pane. Add, remove, and manage dynamic panel states.
28SitemapThe Sitemap is used to add, delete, and organize pages in your design. There's no limit to the number of pages you can add, but once you're over a couple hundred, we recommend looking for opportunities to divide the file.
30To add a page, click on the “Add Child Page” button in the sitemap toolbar. To rename a page, do a slow double-click on the page. You can rename pages safely without breaking links to the pages.To delete a page, select it and click the “Delete Page” button in the sitemap toolbar.You can also add, rename and delete pages using the context menu shown when you right click on a page or click the down arrow next to the page.
32Drag and drop pages in the sitemap or use the arrow buttons in the sitemap toolbar to reorder pages in the sitemap. The organization of the sitemap does not affect interactions within the pages
33Open Pages for DesignDouble click on a page to open it for design in the Wireframe Pane.For convenient access, open pages will have a tab in the Wireframe Pane's tabbed interface. The tabs can be dragged to reorder. You can see a list of open pages when you click on the down arrow next to the page tabs as well as options to Close All Tabs or Close Other Tabs.
35Widgets are user interface objects used to design your wireframes Widgets are user interface objects used to design your wireframes. The Widgets Pane contains a library of commonly used objects such as buttons, images and text panels.In addition to the default set of widgets, you can create your own custom widget libraries or download shared libraries to load into the Widgets Pane. To learnmore about custom widgets visit Custom Widget Libraries.
37To select a library click on the dropdown menu and choose the library To select a library click on the dropdown menu and choose the library. The widgets in that library will display in the widgets pane. To view all the widgets in all of the loaded libraries select “All Libraries”.To search across the current library, click the search icon and type into the text field.
39To add a widget, drag and drop the widget from the Widgets Pane onto the Wireframe Pane. You can also copy and paste widgets from one wireframe to another.To move a widget, drag and drop them into place or use the arrow keys to nudge.To size a widget, drag the handles that surround the widget. You can also use the Location and Size (located in the editor toolbar and the Widget Properties pane) to specify the exact location and size.You can also select multiple widgets to move and size them at the same time.
41There are several ways to edit the styles and properties of widgets: Double-click: Double-click the widget to edit the most commonly edited property of that widget. For example, double-clicking on an image widget opens a dialog to import an image, and double- clicking a droplist opens a dialog to add droplist items. Editor toolbar: Use the buttons in the toolbar above the Wireframe Pane to edit widget styles like font name, font size, font style, font color, fill color, line color, location and size, etc. You can also select multiple widgets and use widget layout tools like group, order, align, and distribute.
42Formatting tab in the Widget Properties Pane: Edit widget styles and properties. You’ll find options for location and size, font, alignment and padding, style, ordering, and fills, lines, and borders. Context menu: Right-click on a widget to display the context menu with additional widget-specific properties. These properties vary depending on the widget.
44Select multiple widgets and right-click to use the context menu to group, order, align, distribute or lock widgets. You can also use the toolbar buttons above the wireframe pane.You can edit a widget within a group without affecting the others in that group by selecting the group and clicking on the desired widget.
45Radio Groups and Selection Groups You can assign radio buttons to a radio group by right clicking on the radio buttons and using Edit Radio Button->Assign Radio Group. In the prototype, only one radio button within a group can be selected at a time.Similarly, button shapes and images can be assigned to Selection Groups. When one widget in a selection group is set to its selectedstate, the other widgets are automatically set to their default states. Youcan learn more about selected styles in the article Widget Styles
47The Widget Style Editor allows you to edit default widget formatting and create custom styles to centrally manage formatting for widgets (similar to styles in Word).To open the Widget Style Editor, click on the Widget Style Editor button in the Editor Toolbar (the “A” icon next to the dropdown that contains “Default” as the applied style).Editing the default widget formatting affects all widgets of that type. When you drag a widget from the Widgets Pane, it will create a widget with the formatting of the default style.
48Create custom widget styles to quickly apply consistent formatting to widgets. You can choose which properties will override the default style.To apply a custom style to a widget, use the droplist located at the very left in the Editor Toolbar.Editing a custom style in the Widget Style Editor will affect the formatting of all widgets with that style applied.
49Change Selection Modes the "Select Intersected Mode" is the default. When you create a selection area by clicking and dragging your cursor, any widget that intersects the selection area will be included.The "Selected Contained Mode" is similar to Visio and only selects the widgets entirely contained in the selection area.
50There are two selection modes in Axure RP, "Select Intersected Mode" and "Select Contained Mode". These are located in the Editor Toolbar (PC Version: located to the right of the Zoom level. Mac Version: located in the top left corner).