You are previewing Axure Prototyping Blueprints.
O'Reilly logo
Axure Prototyping Blueprints

Book Description

Become an Axure Master! Explore designs and interactions leveraging adaptive views, AxShare plugins, repeaters and more!

About This Book

  • Optimize designs for desktop, tablet and mobile viewports with Adaptive Views
  • Build mastery of Repeater widgets and interactions
  • Expand Axure’s core interactions by using AxShare Plugins with JavaScript
  • Who This Book Is For

    If you are a user experienced professional, designer, information architect or business analyst who wants to explore common design patterns and enhance your interactive prototyping skills with Axure, then this book is ideal for you. Having some experience in creating wireframes as well as an interest in interaction design and want to create immersive interactive prototypes will be a add-on bonus.

    What You Will Learn

  • Explore foundational interactions for popular design patterns.
  • Construct advanced interactions (i.e. parallax scrolling, etc.) using the default widget library
  • Expand Axure’s core set of interactions by using AxShare Plugins with JavaScript
  • Construct a reusable Social Media module that includes live feeds from Facebook, Twitter, Instagram and Pinterest
  • Build a Community Site that includes header and footer masters, and an interactive Carousel
  • Leverage the Repeater widget to create an adaptive Photo Gallery
  • Create a Photo Contest with registration for desktop, tablet and mobile viewports utlizing Adaptive Views.
  • Enable an interactive eCommerce Shopping Cart optimized for desktop, tablet and mobile using an adaptive repeater widget
  • In Detail

    Axure garners rave reviews from the design community and is one of the leading tools for rapid prototyping in use today. With Axure one can easily create wireframes and clickable prototypes. Additional enhancements to Axure (e.g. the Repeater widget and Adaptive Views) as well as AxShare (e.g. AxShare Plugins) and the AxShare Mobile App, provide a new level of prototyping excellence.

    To begin, this book provides you with a rapid introduction to Axure’s interfaces and adaptive views and quickly familiarizes you with pages, panes, and the design area. After a brief introduction to Axure, this book will help you to develop the capabilities to build simple to more complex interactive prototypes. This goal will be accomplished with a quick run through of Axure's fundamentals, followed by an exploration of detailed blueprints of different prototypes. From there, you'll walk through creating common interactions for a header, an interactive carousel, right column feed to social media channels, and a footer for a community site prototype. You'll also learn how to build a Content Aggregator, pulling together information from multiple sources and a sample portfolio prototype. You’ll learn to incorporate social media feeds from Facebook and Twitter and also build a photo contest for a Facebook application. Towards the end of the book you'll utilize the Repeater Widget to build an eCommerce prototype.

    This book will exhibit to novice as well as experienced users, common design patterns for exploration and continued learning. Equipped with these new design patterns and methods, readers can complete engaging interactive projects faster.

    Style and approach

    Starting with the fundamentals, you will create progressively complex prototypes while learning basic, intermediate, and advanced interactions in Axure. You will apply what you learn to create an increasingly interactive prototype.

    Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

    Table of Contents

    1. Axure Prototyping Blueprints
      1. Table of Contents
      2. Axure Prototyping Blueprints
      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. Laying the Foundation
        1. The environment and interface
          1. Pages
            1. The Sitemap pane
            2. Creating a child page
          2. The design area
            1. Opening pages
            2. Showing the grid
            3. Adding page guides
          3. Panes
            1. The widgets pane and libraries
            2. Masters
            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. Adaptive Views
          1. Planning for adaptive
          2. Managing Adaptive Views
        3. Summary
      9. 2. Building a Community Site
        1. Reviewing our project
          1. Background information for our client
        2. Architecting our community site
          1. Inspecting our sitemap
          2. Reviewing the forum and news flow
          3. Identifying and building our masters
            1. Creating global variables
            2. Adding masters to the Masters pane
            3. Designing our Header master
              1. Placing widgets on the Header master
              2. Building interactions for our Header master
                1. Defining interaction for CommunityLogo
                2. Enabling interactions for HzMenu
                3. Illuminating interactions for EmailTextField
                  1. Activating the OnMouseEnter event
                  2. Facilitating the OnMouseOut event
                4. Constructing interactions for the PasswordTextField
                  1. Activating the OnMouseEnter event
                  2. Facilitating the OnMouseOut Event
            4. Constructing our BreadCrumb master
              1. Formatting the Repeater widget and placing widgets on the BreadCrumb master
              2. Updating the Repeater item's OnItemLoad event for the BreadCrumb repeater
                1. Defining the OnItemLoad event actions
              3. Assembling our Secondary_Page_Body master
              4. Placing widgets on the Secondary_Page_Body master
              5. Manufacturing our Informational_Page_Body master
                1. Placing widgets on the Informational_Page_Body master
              6. Fabricating our Forum master
                1. Formatting the Repeater and placing widgets on the Forum master
              7. Updating the Repeater item's OnItemLoad event for the Forum repeater
                1. Realizing OnItemLoad event actions
                  1. Defining the UpdateTopic case
                  2. Defining the UpdateCategory case
              8. Building interactions for the Forum master
                1. Enabling the OnClick interactions for the Category Hot Spot
                2. Activating the OnClick interactions for the Topic Hot Spot
            5. Forming our Footer master
              1. Placing widgets on the Footer master
              2. Building interactions for our Footer master
                1. Defining interactions for our Label widgets
          4. Finalizing page design for our community site
            1. Placing widgets and masters on the Home page
              1. Designing the page body
                1. Placing widgets and interactions for the dynamic carousel
                2. Building interactions for the carousel dynamic panel
                  1. Enabling interactions for the CheckForClick Hot Spot
                  2. Defining the OnClick interactions for the Carousel dynamic panel
                  3. Activating the Previous and Next buttons
                3. Placing widgets and adding interactions for calls to action
                4. Adding a social media feed
              2. Adding masters and defining actions for the home page
              3. Completing the design and interactions for the Journey, Topic Detail, Charter, and About Us pages
                1. Defining interactions for the Journey, Topic Detail, Charter, and About Us pages
                  1. Enabling OnPageLoad actions for the Journey page
                  2. Activating OnPageLoad actions for the Topic Detail page
                  3. Facilitating OnPageLoad actions for the Charter page
                  4. Constructing OnPageLoad actions for the About Us page
              4. Manufacturing design and interactions for the Forum page
                1. Defining OnPageLoad actions for the Forum page
              5. Fabricating design and interactions for the Topic List page
                1. Defining OnPageLoad actions for the Topic List page
                  1. Creating the Initialize case for the OnPageLoad event
                  2. Adding the SetAllTopicFilter case for the OnPageLoad event
              6. Completing the design and interactions for the Terms, Privacy, and Help pages
                1. Creating the Initialize case for the OnPageLoad event for the Terms page
                2. Creating the Initialize case for the OnPageLoad event for the Privacy page
                3. Creating the Initialize case for the OnPageLoad event for the Help page
        3. Summary
      10. 3. Constructing a Blog
        1. Reviewing our project
          1. Background information for our blog
        2. Planning our blog
          1. Inspecting our sitemap
          2. Reviewing the registration and post flows
        3. Updating and building our masters
          1. Creating additional global variables
          2. Adding masters to the Masters pane
          3. Enhancing our Header master
            1. Refining the interactions for our Header master
              1. Defining interactions for the LoginButton
                1. Validating the user's email and password
                2. Creating the ShowErrorMessage case
              2. Enabling interaction for the NewUserLink
              3. Activating interactions for the ForgotLink
              4. Facilitating interactions for the LogOutButton
              5. Constructing interactions for the RegistrationLightBoxDP
                1. Updating Variables and hiding the RegistrationLightBoxDP
                  1. Creating the ShowLoginState case
          4. Refreshing data for our Forum repeater
          5. Assembling our Post Commentary master
            1. Defining the OnItemLoad event actions
          6. Manufacturing a NewPost master
        4. Repurposing pages in our sitemap
          1. Remodeling our home page
          2. Invigorating our remaining pages
          3. Enabling commentary and new post creation
            1. Facilitating commentary creation
            2. Allowing new post creation to authorized users
        5. Summary
      11. 4. Leveraging Social Content Aggregation
        1. Developing an aggregator
          1. Building our Social Content master
            1. Adding Facebook and Twitter to our feed
            2. Pulling Instagram content
            3. Including a Pinterest board
        2. Summary
      12. 5. Showcasing Portfolio Content
        1. Designing our parallax site
          1. Placing page anchors
          2. Building the background dynamic panel
          3. Creating our sectional content
        2. Adding additional portfolio interactions
        3. Updating page interactions
          1. Defining the OnPageLoad event
          2. Enabling OnWindowScroll interactions
            1. Defining the WindowScrolled case
            2. Completing the remaining OnWindowScroll cases
              1. Defining the WindowScroll Y < 400 case
              2. Enabling the WindowScroll Y > 400 & Y < 800 case
              3. Creating the WindowScroll Y > 800 case
        4. Summary
      13. 6. Creating an eBrochure
        1. Creating our eBrochure page
          1. Designing content with Axure for our eBrochure
            1. Designing our cover page
            2. Designing page1
            3. Designing page2
            4. Designing page3 using the left-hand side of our panoramic image
            5. Designing page4 using the right-hand side of our panoramic image
            6. Designing our back page
        2. Converting pages into images
        3. Creating a page flipper AxShare plugin
          1. Publishing to AxShare
        4. Summary
      14. 7. Creating an eMagazine
        1. Designing an eMagazine
          1. Updating the sitemap and configuring Adaptive Views
          2. Creating global variables
          3. Adding masters to the Masters pane
          4. Designing the Header master
          5. Designing the Footer master
          6. Designing the eMagazine home page
            1. Designing the Topic Overview page
            2. Defining the OnPageLoad interaction
            3. Defining OnClick interactions
          7. Designing the Article Detail page
            1. Defining the OnPageLoad interaction
            2. Defining the OnClick interactions
        2. Summary
      15. 8. Creating a Photo Contest
        1. Designing a photo contest
          1. Updating the sitemap and configuring Adaptive Views
          2. Creating global variables
          3. Adding masters to the Masters pane
          4. Designing the Header master
          5. Designing the Footer master
          6. Designing the Photo Contest home page
          7. Creating the Enter Now flow
            1. Designing the Enter page
            2. Designing the Upload Photo page
          8. Designing the Entry Confirmation page
          9. Designing the Gallery page
            1. Designing the PhotoGallery repeater
              1. Updating the PhotoGallery repeater for the 768 and 320 views
            2. Defining PhotoGallery repeater interactions
            3. Defining sorting and pagination interactions
              1. Enabling sorting for SortDroplist
              2. Enabling pagination controls
          10. Designing the View Entry page
          11. Designing the Prizes page
          12. Designing the Rules page
        2. Summary
      16. 9. Creating an E-commerce Shopping Cart
        1. Designing an e-commerce shopping cart
          1. Updating the sitemap and configuring Adaptive Views
          2. Creating global variables
          3. Adding masters to the Masters pane
          4. Designing the Header master
          5. Designing the Footer master
          6. Designing the Shopping Cart page
            1. Designing the Cart repeater
              1. Updating the Cart repeater for the 768 and 320 views
            2. Defining the Cart repeater interactions
              1. Creating the Quantity widget's OnSelectionChange case
              2. Creating the DeleteButton widget's OnClick cases
              3. Creating cases for the Cart repeater OnItemLoad event
            3. Creating the sticky Proceed to checkout button
            4. Enabling the OnWindowScroll page interaction
        2. Summary
      17. Index