Learning Axure RP Interactive Prototypes

Learning Axure RP Interactive Prototypes

by John Henry Krahenbuhl
Released January 2015
Publisher(s): Packt Publishing
ISBN: 9781783552054

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

A practical, step-by-step guide to creating engaging prototypes with Axure

In Detail

This book provides you with a rapid introduction to interactive prototyping. It starts with explaining the basics of Axure RP and quickly familiarizes you with pages, panes, and widgets. It then walks you through designing increasingly compelling experiences by enabling basic, intermediate, and advanced interactions with your own interactive prototype.

You will also learn how to generate common interactions for a typical home page that includes a global header and footer as well as an interactive carousel. You'll also incorporate social media feeds from Facebook and Twitter. You'll enhance your functional prototype with user account creation and login validation; simulate a Content Management System driving catalog, category, and search results pages; and finally learn to fashion a dynamic shopping cart with a progress indicator and checkout interactions.

What You Will Learn

  • Master Axure's pages, panes, and design area
  • Create interactions for global headers and footers
  • Animate a custom carousel including YouTube and Vimeo videos
  • Incorporate dynamic feeds from Twitter and Facebook
  • Develop interactive catalog and category pages by leveraging the new Repeater widget
  • Build functional account sign up and login forms
  • Design an engaging shopping cart prototype with the checkout functionality

Table of contents

  1. Learning Axure RP Interactive Prototypes
    1. Table of Contents
    2. Learning Axure RP Interactive Prototypes
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why subscribe?
        2. Free access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Pages, the Design Area, and Panes
      1. Exploring the environment and interface
        1. Inspecting pages
          1. The Sitemap pane
          2. Creating a child page
        2. Investigating our design area
          1. Opening pages
          2. Showing the grid
          3. Adding page guides
        3. Discovering panes
          1. The Widgets pane and libraries
          2. The Masters panes
          3. The Page Properties pane
          4. The Widget Interaction and Notes pane
          5. The Widget Properties and Style pane
          6. The Widget Manager pane
      2. Summary
      3. Self-test questions
    9. 2. Home Page Structure and Interactions
      1. Sitemap
      2. Header
        1. Logo and links
        2. Global navigation
        3. Shopping cart
        4. Search
      3. Carousel
        1. Carousel dynamic panel
        2. Autorotation
        3. Previous and next
      4. Right column
        1. Social media feed
        2. Embedded video (YouTube and Vimeo)
      5. Global footer
      6. Summary
      7. Self-test questions
    10. 3. Registration and Sign In
      1. Defining Registration variables and Inline Field Validation
        1. Creating Registration variables
        2. Designing an Inline Field Validation master
          1. Creating the Inline Field Validation master
          2. Placing widgets for the Global Error message
          3. Placing widgets for the Email text field and the Error message
          4. Placing widgets for the Password text field and Error message
          5. Placing the Submit button
          6. Enabling Interactions for the Email text field
            1. Creating the SetFocusOnMouseEnter case for the OnMouseEnter event
              1. Creating the action
            2. Creating the case for the OnFocus event
              1. Creating the condition
              2. Adding and configuring the actions
            3. Creating the cases for the OnLostFocus event
              1. Defining the Email Field Empty case
                1. Creating the condition
                2. Creating the actions
              2. Defining the Email Field Error case
                1. Creating the condition
                2. Creating the actions
              3. Defining the ValidEmail case
          7. Enabling interactions for the PasswordTextField
            1. Creating a case for the OnMouseEnter event
            2. Creating the case for the OnFocus event
              1. Creating the condition
              2. Creating the action
            3. Creating the cases for the OnLostFocus event
              1. Defining the Password Field Empty case
                1. Creating the condition
                2. Creating the actions
              2. Defining the Password Field Error case
                1. Creating the condition
                2. Creating the actions:
              3. Defining the ValidPassword case
                1. Creating the action:
          8. Enabling interactions for the Submit button
            1. Creating the case for the OnClick event
              1. Create the action:
            2. Creating the case for the OnMouseEnter event
              1. Create the action:
      2. Creating our Registration page
        1. Validation and Feedback for our Registration page
          1. Creating the case for the OnValidSignUpEmail event
            1. Creating the action
          2. Creating the case for the OnValidSignUpPassword event
            1. Creating the action:
          3. Creating cases for the OnSignUpSubmitClick event
            1. Defining the Successful Login case
              1. Creating the conditions
              2. Creating the actions
            2. Defining the GlobalError case
              1. Name the Case
              2. Creating the actions
      3. Designing the Confirmation page
      4. Making our Sign In page
        1. Validation and Feedback for our Sign In page
          1. Creating the case for the OnValidSignInEmail event
            1. Creating the action
          2. Creating cases for the OnSignInSubmitClick event
            1. Defining the Successful Default Login case
              1. Creating the conditions
              2. Creating the actions
            2. Defining the Successful new Account Login case
              1. Creating the conditions
              2. Creating the action
            3. Defining the GlobalError case
              1. Name the Case
              2. Create the actions
      5. Summary
      6. Self-test questions
    11. 4. Dynamic Content Management
      1. Designing our Catalog Repeater
        1. Simulating a Content Management System
          1. Defining the CMS Repeater master
            1. Placing the Repeater widget
            2. Adjusting and placing widgets on the Repeater item
          2. Creating and populating the CMS Repeater Dataset
            1. Updating columns 1-7 of the CMS Repeater Dataset
            2. Updating columns 8-12 of the CMS Repeater Dataset
            3. Updating columns 13–17 of the CMS Repeater Dataset
          3. Creating CMS variables
      2. Creating our Category Repeater
        1. Defining and Creating Category Repeater interactions
          1. Updating our Category Repeater
            1. Defining the CheckItemCount0 case
              1. Creating conditions
                1. Adding and configuring actions
            2. Defining the ShowRepeater case
              1. Creating conditions
              2. Adding and configuring actions
            3. Defining the SetRepeater case
              1. Creating conditions
              2. Adding and configuring actions
            4. Defining the SetAllCrossSellVars case
              1. Create the conditions
              2. Create the actions
          2. Defining the SetDetail case
            1. Create the conditions
            2. Create the actions
            3. Defining the SetDetailCrossSell1 case
              1. Create the conditions
              2. Create the actions
            4. Defining the SetDetailCrossSell2 case
              1. Create the conditions
              2. Create the actions
            5. Defining the SetDetailCrossSell3 case
              1. Create the conditions
              2. Create the actions
            6. Defining the SetCatalog case
              1. Create the conditions
              2. Create the actions
            7. Defining the InitializeCrossSell case
              1. Create the condition
              2. Create the actions
          3. Creating our Repeater item interaction
            1. Creating and configuring actions
        2. Facetted Filtering, Sorting, and Pagination Widgets
          1. Designing the Facetted filters
            1. Adding Price Facetted filtering
            2. Adding Category facetted filtering
          2. Designing Sorting and Pagination controls
        3. Interactions for Facetted filtering, sorting, and pagination
          1. Defining the SetNumberOfItemsLabel case
            1. Creating conditions
              1. Adding the first condition
              2. Adding the second condition
            2. Adding and configuring actions
          2. Defining the SetCrossSellFilter case
            1. Create the condition
            2. Create the actions
          3. Defining the NewestSort case
            1. Create the conditions
            2. Create the actions
          4. Defining the ShowPage2Link case
            1. Create the conditions
            2. Create the action
          5. Defining the HidePage2Link case
            1. Create the conditions
            2. Create the action
          6. Defining the ShowCatalog case
            1. Create the condition
            2. Create the actions
          7. Defining Facetted Filtering interactions
            1. Defining BrandFilter, PriceFilter, and CategoryFilter interactions
            2. Defining Cases for our SetGlobalFilters hotspot
              1. Defining the RemoveAllFilters case
              2. Defining the SetBrandFilterA case
                1. Create the condition
                2. Create the action
              3. Defining additional Set Filter cases
              4. Defining the SetRepeaterCurrentPage case
                1. Create the condition
                2. Create the action
              5. Defining the SetRepeaterPageLinks case
                1. Create the actions
              6. Defining the SetNumberOfItemsLabel case
                1. Create the action
              7. Defining the ShowPage2Link case
                1. Create the condition
                2. Create the action
              8. Defining the HidePage2Link case
                1. Create the action
              9. Copying all OnShow cases to the OnHide event
          8. Creating sorting interactions
            1. Defining the NewestSortSelected case
              1. Create the condition
              2. Create the actions
            2. Defining additional Sort Selected cases
            3. Defining the SetRepeaterCurrentPage case
              1. Create the condition
              2. Create the action
          9. Enabling pagination
            1. Defining the Page1Link OnClick event
              1. Create the actions
            2. Defining the Page2Link OnClick event
              1. Create the actions
            3. Defining the PreviousPage OnClick event
              1. Defining the SetRepeaterCurrentPage case
              2. Defining the PageIndexPage1 case
                1. Create the condition
                2. Create the actions
              3. Defining the NotPage1 case
                1. Create the condition
                2. Create the actions
            4. Creating the NextPage OnClick events
              1. Defining the SetRepeaterCurrentPage case
                1. Create the action
              2. Defining the PageIndexPage2 case
                1. Create the condition
                2. Create the actions
      3. Summary
      4. Self-test questions
    12. 5. Product Pages and Interactions
      1. Enhancing masters, interactions, and design
        1. Augmenting our CMS Repeater master
          1. Crafting our Catalog and Product dynamic panels
          2. Creating DetailCrossSellFilter interactions
            1. Defining the SetDetailCrossSellFilter case
              1. Create the conditions
              2. Create the actions
            2. Defining the SetCrossSell1 case
              1. Create the conditions
              2. Create the actions
            3. Defining the CrossSell2 and CrossSell3 cases
            4. Defining the CrossSellClicked case
              1. Create the conditions
              2. Create the actions
              3. Copying all OnShow cases to the OnHide event
        2. Completing our Header master
          1. Defining main menu interactions
      2. Designing our Category page
        1. Creating the design and interactions for our Category page
          1. Defining the OnPageLoad event for the Category page
            1. Defining the InitializeVars case
              1. Create the conditions
              2. Create the actions
      3. Designing our Catalog page
        1. Creating the Design and Interactions for our Catalog page
          1. Defining the OnPageLoad event for the Catalog page
            1. Defining the InitializeVars case
              1. Create the conditions
              2. Create the actions
            2. Defining the CheckCatalogHeroImage case
              1. Create the condition
              2. Create the action
            3. Defining the SetHeroImageFilter case
              1. Create the action
        2. Building the CatalogDynamicPanel
          1. Enabling a CatalogWithCrossSell state
            1. Designing the CatalogDynamicPanel
            2. Creating the CatalogHeroImage with interactions
              1. Create the actions
            3. Creating the CrossSell1_Image with interactions
              1. Create the actions
            4. Creating the CrossSell2_Image with interactions
              1. Create the actions
      4. Making our DetailDynamicPanel
        1. Enabling the ItemDetailWithCrossSell state
          1. Completing the Item Detail design
          2. Creating a Cross-Sell design
            1. Placing our CrossSell1 widgets on the ItemDetailWithCrossSell state
            2. Placing our CrossSell2 widgets on the ItemDetailWithCrossSell state
            3. Placing our CrossSell3 widgets on the ItemDetailWithCrossSell state
          3. Defining Cross-Sell interactions
            1. Creating the ItemImageCrossSell1 widget interaction
              1. Create the actions
            2. Creating the ItemImageCrossSell2 widget interaction
              1. Create the actions
            3. Creating the ItemImageCrossSell3 widget interaction
              1. Create the actions
          4. Enabling social media interactions
            1. Creating the Twitter share link interaction
              1. Create the actions
            2. Creating the Pinterest share link interaction
              1. Create the actions
            3. Creating the Facebook share link interaction
              1. Create the actions
      5. Summary
      6. Self-test questions
    13. 6. Search and Search Results
      1. Enabling search for the CMS Repeater master
        1. Designing our Search Results page
        2. Developing page interactions
          1. Defining the Initialize Search case
            1. Creating the actions
        3. Specifying Search interactions
          1. Supporting the Search functionality in the Header master
            1. Creating the actions
          2. Adding the SetSearchFilter to the SetGlobalFilters Hot Spot
            1. Updating the SetGlobalFilters Hot Spot with the SetSearchFilter case
              1. Creating the condition
              2. Creating the actions
      2. Summary
      3. Self-test questions
    14. 7. The Shopping Bag Functionality and Interactions
      1. Designing our Shopping Bag Repeater
        1. Defining the Shopping Bag Repeater
          1. Designing the Shopping Bag Repeater
            1. Creating the CheckOut Call widget
            2. Creating the Repeater widget
              1. Placing widgets on the Repeater item
            3. Defining the Repeater dataset
        2. MyShoppingBagRepeater OnItemLoad event interactions
          1. Defining the SetRepeater case
            1. Create the actions
          2. Defining the NoItems case
            1. Create the condition
            2. Create the action
          3. Defining the MoveMyShoppingBagFooter case
            1. Create the condition
            2. Create the action
        3. MyShoppingBagRepeater item OnClick interactions
          1. Adding an OnClick event to the BagItemImageRepeater
            1. Defining the ItemImageClicked Case
            2. Create the actions
          2. Adding an OnClick event to the RemoveItemLabel
            1. Defining the RemoveItemLabelClicked Case
              1. Create the actions
            2. Defining the NoItems Case
              1. Create the condition
                1. Create the action
          3. Adding an OnClick event to the UpdateLineItemButton
            1. Defining the UpdateButtonClicked Case
              1. Create the actions
                1. Updating ItemColor, ItemSize, and ItemQty on the current row of the Repeater
            2. Defining the QtyZero Case
              1. Create the actions
            3. Defining the NoItems Case
              1. Create the condition
      2. Viewing our Shopping Bag page
        1. Designing our Shopping Bag Page
      3. Summary
      4. Self-test questions
    15. 8. Check Out Flow and Interactions
      1. Creating our Individual Form Field master
        1. Design and interactions
      2. Defining the Check Out dynamic panel
        1. Designing the SignIn state
          1. Validation and feedback on the Sign In page
            1. Defining the case for the OnValidSignInEmail event
            2. Defining cases for the OnSignInSubmitClick event
              1. Creating the Successful Default Login case
              2. Creating the Successful New Account Login case
              3. Creating the GlobalError case
        2. Designing the PaymentAndShipping state
          1. Fabricating Secure Checkout for the PaymentAndShipping state
          2. Fabricating Billing Address for the PaymentAndShipping state
          3. Validation and feedback
            1. Defining the OnFormFieldFocus and OnFormFieldLost events
              1. Creating interactions for the CreditCardNumber Individual Form Field
              2. Creating interactions for the SecurityCode Individual Form Field
              3. Creating interactions for the Billing Address Individual Form Fields
            2. Creating Interactions for the BillingZip Individual Form Field
              1. Creating Interactions for the UseBillingForShipping checkbox
                1. Creating interactions for the CheckOutNowButton
            3. Fabricating the Shipping Address section
              1. Shipping Address section validation and feedback
                1. Updating interactions for the Shipping Address Individual Form Fields
              2. Designing the PlaceOrder state
              3. Building the PlaceOrder state
                1. Check Out page interactions and feedback
                  1. Updating our Shopping Cart Repeater
                  2. Adding the InitializeCheckOutState case for the OnPanelStateChange event
                  3. Enhancing the OnItemLoad event of the Shopping Bag Repeater
              4. Designing the Confirmation state
      3. Summary
      4. Self-test questions
    16. A. Answers to Self-test Questions
      1. Chapter 1
        1. Questions and Answers
      2. Chapter 2
        1. Questions and Answers
      3. Chapter 3
        1. Questions and Answers
      4. Chapter 4
        1. Questions and Answers
      5. Chapter 5
        1. Questions and Answers
      6. Chapter 6
        1. Questions and Answers
      7. Chapter 7
        1. Questions and Answers
      8. Chapter 8
        1. Questions and Answers
    17. Index

Product information

  • Title: Learning Axure RP Interactive Prototypes
  • Author(s): John Henry Krahenbuhl
  • Release date: January 2015
  • Publisher(s): Packt Publishing
  • ISBN: 9781783552054