Book Image

Prototyping Essentials with Axure

By : Ezra Schwartz, Elizabeth Srail
Book Image

Prototyping Essentials with Axure

By: Ezra Schwartz, Elizabeth Srail

Overview of this book

<p>Designing the user experience has never been more exciting, while prototyping it has never been more challenging. Whether you are an individual practitioner or a member of a UX team, a consultant, or an in-houseUX resource, this book will teach you how to plan, construct, and document top-quality, device/OS-agnostic artifacts and deliverables such as task and user flows, persona briefs, wireframes, prototypes, and specifi cations with Axure 7, the leading UX industry design tool.<br /><br />Axure 7 is used worldwide by tens of thousands of UX professionals, business analysts, and product managers in global corporations, governments, large institutions, leading interactive agencies, and consultancies.<br /><br />Prototyping Essentials with Axure Second Edition is a detailed, practical primer on Axure 7.0 and is a complete rewrite of the previous edition due to the numerous new features in Axure 7.0. Demand for skilled Axure professionals is high and familiarity with Axure is an expected prerequisite skill for UX designers worldwide.</p>

Related Content you might be interested in

Current Title:

Small book image
Prototyping Essentials with Axure
Ezra Schwartz | Elizabeth Srail
May, 2014 | 522 pages
No titles found
Table of Contents (22 chapters)
Prototyping Essentials with Axure Second Edition
Prototyping Essentials with Axure Second Edition
Credits
Credits
Foreword
Foreword
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Afterword
Afterword
Free Chapter
1
Prototyping Fundamentals
Prototyping Fundamentals
The Times They Are A-Changin'
The Axure Option
UX Prototyping by UX Designers
Project-level Forecasting
Axure Construction Strategy Checklist
Practical Axure
Tips for Using Axure on Large-design Projects
UX and Stakeholders' Perspectives
The Axure Perspective
Summary
2
Axure Basics – the User Interface
Axure Basics – the User Interface
Getting Started
Environment
The Design Area
The Page Properties Pane
The Widget Interactions and Notes Pane
Grid and Guides
The Masters Pane
The Widget Manager Pane
The Toolbars and the Menu Bar
The Generated Prototype
Summary
3
Prototype Construction Basics
Prototype Construction Basics
Aligning UX with Prototyping Principles
Getting Started with Prototyping in Axure
Task Flow Diagram Pages
Linking Use Cases to Flow Diagrams while Keeping Your Naming Conventions Intact
Generating an HTML Prototype
The Sitemap Diagram
A Device/OS-agnostic UI Framework
Getting Started with Masters and Dynamic Panels
Adding Visual Effects
Adding Sketch Effects
Summary
4
Creating Basic Interactions
Creating Basic Interactions
Axure Interactions
Axure Events
Axure Cases
Axure Actions
Things to Keep in Mind
Example 1 – Controlling Styles
Example 2 – Hide and Show
Example 3 – Utility Actions
Summary
5
Advanced Interactions
Advanced Interactions
Conditions
Raised Events
Variables
Variable Types
Naming Variables
Pros and Cons of Using Variables
Summary
6
Widget Libraries
Widget Libraries
When to Use a Widget Library
Library Types
Managing Widget Libraries
Masters or External Widget Libraries?
When to Begin Creating Patterns
Summary
7
Managing Prototype Change
Managing Prototype Change
From a Vision to Reality
Expectations, Paradigms, and Change
Estimating Axure Work
Construction for Change
Summary
8
UI Specifications
UI Specifications
Importance of Collaboration
The UI Specifications
Generating Specifications
Quick Tips to Improve the Layout
Summary
9
Collaboration
Collaboration
Team Projects (Pro Version Only)
Best Practices for the UX Axure Teamwork
axureShare – Axure's Cloud Solution for Sharing
Feedback from Stakeholders – the Discussion Tab
Summary
Practitioners' Corner
Practitioners' Corner
Survey of Axure Users
Troubleshooting Interactions Checklists
Construction Tutorials
Collaboration
Index
Index

Adding Visual Effects

Next, we want to enhance the user experience and provide visual effects in response to user actions. For example, when a user hovers over a tab in the global navigation bar, the tab should change its appearance. With Axure, you can create such effects effortlessly, which we will demonstrate on Farm2Table's Global Nav bar.

The Set Interaction Styles dialog (Image 35, A), provides a one-stop place to create and apply dedicated visual treatments to four states that reflect the widget's appearance in the listed conditions (B):

  • MouseOver

  • MouseDown

  • Selected

  • Disabled

    Image 35

The dialog contains various visual properties. You can also use a custom style by checking the first checkbox Base Style, and select the Custom style from there. We will discuss this important capability later.

There is still no way to link an actual CSS file.

Previous Section
End of Section 10
Next Section