These wireframe tutorials walk you through designing mockups from scratch and creating some of the most common web design patterns using Axure RP.
Get hands on with
Step by Step Tutorials
In this tutorial, you will create an ecommerce prototype from scratch using many of the core features in Axure RP including masters and dynamic panels. This tutorial comes in three levels.
In this tutorial, you will create a mobile website prototype that can be viewed on your iPhone or Android phone. You will learn how to lay out and generate a interactive mobile website prototype.
Start From Scratch
This Basic Interactions tutorial shows you how to to add page links, open links in new browser tabs, link to the previous page and close the current browser tab/window using the OnClick event.
This Basic Interactions tutorial shows you how to present a login scenario with different paths a user can take when clicking a button. It uses the OnClick event, multiple cases and case descriptions.
This Basic Interactions tutorial shows you how to create anchor (jump) links that let you scroll to a specific point within a page. It uses the Image Map Region widget, OnClick event, and "Scroll to Image Map Region" action.
This Dynamic Panels (Basic) tutorial shows you how to show and hide content using multiple OnClick cases, and the “Show Panel(s)” action.
Show Hidden Panel
This Dynamic Panels (Basic) tutorial shows you how to make a tabbed interface using a Dynamic Panel with multiple states and the "Set Panel State(s) to State(s)" action.
This Dynamic Panels (Basic) tutorial shows you how to hide and show content when hovering over a widget with your cursor. It uses the OnMouseEnter and OnMouseOut events.
This Dynamic Panels (Basic) tutorial shows you how to create custom dropdown navigation menus. You'll also learn to hide the menu using image map regions. It uses dynamic panels and the OnMouseEnter event.
This Widget Styles tutorial shows us how to design an interactive button using rollover, mouse down, selected widget styles, and the "Set Widget(s) to Selected State" action
This Conditional Logic tutorial shows how to create a login experience that displays an error message or links to the next page depending on the email and password entered. It uses the OnClick event with conditions and dynamic panels.
This Conditional Logic tutorial shows you how to dynamically enable and disable widgets when toggling a checkbox and typing in a text field. It uses the OnKeyUp event with conditions and "Enable Widget" action.
Terms and Conditions
This Conditional Logic tutorial shows how to automatically jump to the next text field when the prior field is complete using the OnKeyUp event with conditions.
This Conditional Logic tutorial shows how to trigger an action like setting a dynamic panel state based on the selection of a droplist using the OnChange event with conditions.
This Conditional Logic tutorial shows us how to make a form with multiple required fields and multiple error messages. It uses conditions and shows how to toggle an "Else If" to an "If" statement
This Dynamic Panels (Advanced) tutorial shows us how to expand and collapse sections in an accordion menu using the OnClick, OnMove, OnHide, and OnShow events.
This Dynamic Panels (Advanced) tutorial shows us how to create an image slideshow using the "Set Panel State(s) to State(s)" action.
This Dynamic Panels (Advanced) tutorial shows us how to create draggable content inside a window similar to how you would navigate Google Maps using nested dynamic panels and the OnDrag event.
This tutorial shows us how to create a variety of drag and drop interactions using the events OnDragStart, OnDrag and OnDragDrop.
This Set Widget Values tutorial shows us how to clear a text field on focus and dynamically display a confirmation message in the text field. It uses the OnFocus event with conditional logic, and "Set Variable/Widget value(s)" action.
Click to Clear
Drag & Drop Images
This Set Widget Values tutorial shows you how to insert text into a text panel based on a droplist selection. It uses the OnChange event with conditions, local variables, and the "Set Variable/Widget Value(s)" action.
This Set Widget Values example dynamically copies text and droplist selections by clicking a checkbox using the “Set Variable/Widget Value(s)” action and local variables.
Same as Billing Checkbox (Example)
Setting Text on Droplist Selection
This Set Widget Values example calculates the total bill amount using the “Set Variable/Widget Value(s)” action and math and string functions.
This Page Load Interactions tutorial shows us how to highlight the current page in a navigation menu.using the OnPageLoad event, "Set Widget(s) to Selected Style" action, and masters.
Tip Calculator (Example)
This Page Load Interactions tutorial shows us how to initiate an automatically changing image slideshow using the OnPageLoad and an existing OnPanelStateChange event.
This Variables tutorial shows us how to set the state of a dynamic panel on another page using variables and the OnPageLoad event.
Set Panel on Next Page
This Variables tutorial shows you how to pass text input from one page and display it on another page. It uses variables and the OnPageLoad event.
This Raised Events tutorial shows you how to open different pages using the same Previous/Next links inside a master.
Previous / Next Link Master
Pass Text to Next Page
© 2002-2013 Axure Software Solutions, Inc. All rights reserved.
Use Axure RP as:
iPhone App Tutorials
This tutorial walks you through creating a sliding menu which animates up and down using dynamic panels.
Learn how to create scrolling content inside your app using dynamic panels.
This tutorial shows you how to create a sliding transition that moves us between content on a single page.
Create a swiping slideshow/carousel using the OnSwipe event.
This tutorial teaches you how to embed web video and maps using the Inline Frame widget.
Embed Video & Maps
Learn how to create video and image lightboxes using Masters, Dynamic Panels, and the Pin to Browser feature.
Image & Video Lightbox