Presentation on theme: "AXURE RP The only tool that gives you the features to go from wireframes to rich prototypes and detailed specifications all in a familiar, easy to use."— Presentation transcript:
AXURE RP The 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. The Right Fit
How It All Began Why Axure RP The Axure RP 411 Become An Expert Need Help? Sharing Resources The Details Get Started
Founded 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 the FORTUNE 100, leading agencies, and thousands of SMBs.
UNIQUE FEATURE SET Features for designing at the fidelity you need. EASE OF USE Productive in a few hours, proficient in a few weeks. COLLABORATION Helps teams work together on projects. QUALITY CUSTOMER SERVICE Responsive, thorough and personal. ACTIVE COMMUNITY Great community for learning and sharing resources. CROSS PLATFORM Available for both the PC and Mac. No virtualization required.
WIREFRAMES Widget libraries and easy to use tools for layout and formatting will help your wireframes come together in no time. PROTOTYPES With one-click HTML prototype generation, Axure RP brings your designs to life without writing a single line of code. SPECIFICATIONS Specification generation with customizable templates and formatting options means less time documenting and more time designing. COLLABORATION Integrated source control helps your team work simultaneously on a project and maintain a history of revisions.
NEWBIEAPPRENTICEMASTER Become an Axure Fu Master in no time through a series of online articles, videos and downloadable samples.
“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 (800)
WIDGET LIBRARIES DISCUSSION FORUM COMMUNITY-DRIVEN WEB CONFERENCES TWITTER & FACEBOOK
LICENSING *$589/license with 2 installs: Mac and PC versions *Single (named) user license *Licenses come with 12 months of maintenance QUANTITY DISCOUNTS *$539/license for 5 or more licenses *Site license pricing available ( MAINTENANCE RENEWAL *$149/license for 12 months of additional support and upgrades
EVALUATE Free 30 day trial available: BUY Online at: PO to: CONTACT Call: Tweet: twitter.com/axurerp
Key benefits: » Design efficiently. » Experience your design early to test ideas. » Engage stakeholders to gather valuable feedback. » Automate specifications avoiding tedious documentation. » Enable design collaboration.
Features » 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
Axure RP Environment
What 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.
Newbie Level New 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.
Apprentice Level Build 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.
Master Level You'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.
The 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.
Map of the Axure RP Environment
( 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.
( 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.
( 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.
( 6 ) Pages Properties Pane: Add and organize page level notes, interactions and format pages in your design.
( 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.
(8) Dynamic Panel Manager Pane: Hide and show dynamic panels in the wire frame pane. Add, remove, and manage dynamic panel states.
Organize and build Annotated Wireframes
Sitemap The 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.
Add and Delete Pages
To 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.
Drag 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
Open Pages for Design Double 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.
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 learn more about custom widgets visit Custom Widget Libraries.Custom Widget Libraries
Choose and Search Widget Libraries
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.
Add, Move, and Size Widgets
To 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.
Edit Widget Styles and Properties
There 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.
Formatting 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.
Work with Multiple Widgets
Select 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.
Radio 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 selected state, the other widgets are automatically set to their default states. You can learn more about selected styles in the article Widget StylesWidget Styles
Widget Style Editor
The 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.
Create 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.
Change 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.
There 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).