Designing UX: Prototyping, 1st Edition

Designing UX: Prototyping, 1st Edition

by Dan Goodwin, Ben Coleman
Released March 2017
Publisher(s): SitePoint
ISBN: 9780994347084

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

It's well known that identifying and fixing problems in design is easier and cheaper if it can be done earlier in the process of design and build. That's because as the fidelity of the project we're working on increases, the effort involved in making changes increases. If we can test out early ideas to see if they work, in small chunks, then we can identify whether those ideas are going to work. To do this, we need to build prototypes.

With easy-to-follow, practical advice, this book will show you how to use a number of different prototyping techniques to improve UX. It covers:

  • The prototyping process
  • Paper prototyping
  • Interactive wireframing tools, such as Balsamiq and Axure
  • Dedicated prototyping tools, including Marvel, Invision, and Adobe XD
  • HTML prototypes
  • How to use prototypes in your project workflow

Publisher resources

View/Submit Errata

Table of contents

  1. Designing UX: Prototyping
  2. Notice of Rights
  3. Notice of Liability
  4. Trademark Notice
  5. About Ben Coleman
  6. About Dan Goodwin
  7. About SitePoint
  8. Foreword
  9. Acknowledgments
    1. Thanks
    2. Permissions (and Thanks!)
  10. Who Should Read This Book
  11. Supplementary Materials
  12. Chapter 1: Defining the Case for Prototyping
    1. What is prototyping?
    2. Why use prototypes?
      1. Testing and Communicating UI Designs
      2. Saving Time and Money
      3. Bringing Users into the Design Process
      4. Engaging Stakeholders in a Meaningful Way
      5. Designing across Devices and Platforms
      6. Creating and Testing with Real Content and Data
    3. What can we prototype?
      1. Information Architecture and Structural Elements
      2. Layout and Visual Hierarchy
      3. Interactive Elements
    4. What can't we do with a prototype?
      1. Use Quantitative Research to Make Decisions
      2. Testing for Completion/Conversion Funnel Progress
      3. Testing Accessibility
      4. Testing the Impact of Visual Design
      5. Being the Sole Source of Documentation
    5. Who are prototypes for?
      1. Designers
      2. Developers
      3. Project and Account Managers
      4. Business Analysts
      5. Customer Support Representatives
    6. Summary
  13. Chapter 2: The Prototyping Process
    1. When to Prototype
      1. You have an Idea
      2. Buy-in from Others
      3. Information Architecture to Visualize, Present, and Test
      4. A Lengthy User Journey or Several Changes of State over Time
      5. A Pool of Available Users
      6. Communicate and Test Designs across Devices
      7. Lots of Ideas–or No Ideas–for Solving a Problem
      8. More Time Spent Communicating than Developing
      9. Specific Aspects of a Design Are Performing Poorly
    2. Planning
      1. What are you aiming to achieve?
      2. What will you test and demonstrate?
      3. Where will you place the boundaries?
      4. How will you use your prototype?
      5. Who will work on your prototype, and how?
      6. How much time, budget, and resources do you have?
      7. What’s the starting point for your prototype?
    3. Gather Resources
      1. Existing Design Resources
      2. Stationery (for paper prototyping)
      3. Content
      4. Data
    4. Get On With It!
      1. Starting Top-down versus Bottom-up
      2. Recycling Your Material
    5. Working Collaboratively
    6. Iterate and Demo, Testing Early and Often
    7. Summary
  14. Chapter 3: An Overview of Prototyping Tools and Techniques
    1. Segmenting and Categorizing Tools and Techniques
      1. Design Fidelity
      2. Tool Complexity and Speed of Use
      3. The Aim of Your Prototype
    2. Sorting Tools and Techniques into Our Three Categories
    3. How the Tools Have Been Grouped
    4. Tools that Failed to Make the Cut
    5. Summary
  15. Chapter 4: Paper Prototyping
    1. What is paper prototyping?
      1. Pros
      2. Cons
    2. Making Paper Prototypes
      1. What You'll Need
      2. Your Approach
      3. Drawing Tips
      4. Paper Prototypes from Digital Files
    3. Collaboration = Team + Client + Users
      1. Collaborative Creation of Prototypes
    4. “Responsifying” an Existing Site with Paper Collage
      1. Screen Capture
      2. Printing and Converting to PDF for Large Images
      3. Slicing and Dicing
      4. Creating a New Design
      5. Sketching the Gaps
      6. The Finished Article
    5. Paper Prototypes in Use
      1. Presenting Ideas and Soliciting Feedback
      2. Testing the Prototypes with Users
      3. Roles in the Test Session
      4. Anatomy of a Test Session
      5. Digitizing Paper Prototypes
    6. Summary
  16. Chapter 5: Creating Clickable Prototypes from Designs
    1. Marvel
      1. Marvel Summary
    2. Clickable PDFs
      1. Linking between Pages in a Design Tool
      2. Editing an Existing PDF to Add Hyperlinks
      3. Clickable PDFs Summary
    3. Tools Dedicated to Creating Clickable Prototypes
      1. InVision Summary
    4. Summary
  17. Chapter 6: Integrated Tools for Drawing and Creating Prototypes
    1. Common Features in this Category of Prototyping Tools
      1. Drawing and Design Features
      2. Increased Support for Prototyping Interactivity
      3. Prototyping Workflow Features
    2. Balsamiq
      1. Balsamiq Summary
    3. OmniGraffle
      1. OmniGraffle Summary
    4. Axure
      1. Axure Summary
    5. Keynote and PowerPoint
      1. Three Approaches for Using Keynote and PowerPoint for Prototyping
      2. Sharing Prototypes Created in Keynote and Powerpoint
      3. Keynote & Powerpoint Summary
    6. Adobe XD
      1. Adobe XD Summary
    7. Summary
  18. Chapter 7: Building HTML Prototypes
    1. The Pros of Using HTML
      1. Responsive Design
      2. Flexibility
      3. Complex Interactions
      4. Latest Technology
      5. Resources
      6. Source Control for Collaboration
      7. Source Control for a Historical Record
      8. Various Sources of Content
      9. Accessibility
      10. Speed of Change
    2. And a Few Cons of HTML
      1. Learning Challenges
      2. Experience Limitations
      3. Planning is a Must
    3. Your HTML Prototype Planning Kit
      1. User Research
      2. Content
      3. Structure and Functionality
    4. Skills Required
    5. Tools for Rapid Prototyping
      1. Preprocessors for Writing CSS
      2. Tools for Interactivity
      3. Making Headway with Frameworks
    6. Using Content in Prototypes
    7. Using a Content Management System (CMS)
      1. Example CMSs Used for Prototyping
    8. Creating Accessible Prototypes
    9. Making Prototypes Available Online
      1. Sharing Your Prototype Remotely
      2. Moving Flat File Prototypes Online
      3. Moving Content-managed Prototypes Online
      4. Tools to Automate Deployment
      5. Managing Databases
      6. Hosting Providers
    10. Throwaway versus Reusable Code in HTML Prototypes
    11. HTML Prototyping Case Studies
      1. Dorothy House Hospice Care
      2. An Online Store
      3. MacGuffin
      4. BBC Nature Prototype iPad App
    12. Summary
  19. Chapter 8: Using Prototypes in Your Project Workflow
    1. Exploring and Communicating Design Ideas with the Team
    2. Engaging with Stakeholders and Project Teams
      1. Share at the Right Time, and Keep Sharing
      2. Ensure Stakeholders Are Seeing the Latest Version
      3. Efficiently Use Stakeholders’ Time and Attention
      4. Keep Promoting the Prototype
      5. Be Prepared for Stakeholder Feedback
    3. Bringing Users into the Design Process Using Prototypes
      1. Exploring Motivations and Behaviors in Contextual Research
      2. Testing Your Designs with Users
    4. Summary
  20. Appendix A: Supplementary Prototyping Tools Worth Seeking
    1. Craft by InVision
    2. Facebook Origami Studio
    3. Framer
    4. Principle
    5. Xcode

Product information

  • Title: Designing UX: Prototyping, 1st Edition
  • Author(s): Dan Goodwin, Ben Coleman
  • Release date: March 2017
  • Publisher(s): SitePoint
  • ISBN: 9780994347084