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