Prototyping is a great way to communicate the intent of a design both

clearly and effectively. Prototypes help you to flesh out design ideas,

test assumptions, and gather real-time feedback from users. With this

book, Todd Zaki Warfel shows how prototypes are more than just a design

tool by demonstrating how they can help you market a product, gain

internal buy-in, and test feasibility with your development team.

“If you design applications and are stuck in the land of task flows and wireframes, you really need to pick up a copy of Prototyping.”

DAN SAFFER Principal, Kicker Studios and author of Designing for Interaction and Designing Gestural Interfaces

“Whether you’re prototyping to explore ideas or to communicate them, Todd Zaki Warfel’s smart, accessible guide will give you the tools you need.”

JESSE JAMES GARRETTAuthor, The Elements of User Experience and President, Adaptive Path

“One quarter of the way through this book, we threw out our requirements docs and started using photos of our whiteboard sketches to communicate instead.”

SHAUN ABRAHAMSONInnovator and Investor, Colaboratorie Mutopo

“When someone asks me about prototyping, I’ll be pointing them to this book from now on.”

KIM GOODWINVP Design, Cooper and author, Designing for the Digital Age

www.rosenfeldmedia.com

MORE ON PROTOTYPINGwww.rosenfeldmedia.com/books/prototyping/

P R O T O T Y P I N G A Practitioner’s Guide

b y TODD Z A K I WA R F E L foreword by Dave Gray

PR

OTO

TYPIN

G by TO

DD

ZAKI W

ARFEL

TABLE OF CONTENTS

How to Use This Book iiiWho Should Read This Book? iiiWhat’s in This Book? iiiWhat Comes with This Book? iv

Frequently Asked Questions vForeword xiiIntroduction xiv

CHAPTER 1The Value of Prototyping 1Prototyping Is Generative 3Prototyping—The Power of Show, Tell, and Experience 3Prototyping Reduces Misinterpretation 5Prototyping Saves Time, E!ort, and Money 6Prototyping Reduces Waste 7Prototyping Provides Real-World Value 9Summary 12

CHAPTER 2The Prototyping Process 13The Absence of Design Studio 14What Does the Prototyping Process Look Like? 15Summary 26

CHAPTER 3Five Types of Prototypes 27Type 1: Shared Communication 28Type 2: Working Through a Design 33

Type 3: Selling Your Idea Internally 33Type 4: Usability Testing 35Type 5: Gauging Technical Feasibility and Value 37Summary 42

CHAPTER 4Eight Guiding Principles 43Principle 1: Understand Your Audience and Intent 44Principle 2: Plan a Little—Prototype the Rest 45Principle 3: Set Expectations 46Principle 4: You Can Sketch 48Principle 5: It’s a Prototype—Not the Mona Lisa 50Principle 6: If You Can’t Make It, Fake It 51Principle 7: Prototype Only What You Need 53Principle 8: Reduce Risk—Prototype Early and Often 53Summary 56

CHAPTER 5Picking the Right Tool 57Influencers 58What Tools Are People Using? 60What Kinds of Prototypes Are They Making? 61Summary 63

CHAPTER 6Paper and Other Analog Methods 65Strengths 66Weaknesses 67

Essential Paper Prototyping Kit 68Progressive Paper Prototyping 70Summary 81

CHAPTER 7PowerPoint and Keynote 83Strengths 85Weaknesses 86Creating Narrative Prototypes with PowerPoint 86Creating Interactive Prototypes with PowerPoint 89AJAX E!ects in PowerPoint 93Summary 95

CHAPTER 8Visio 97Strengths 99Weaknesses 99Prototyping with Visio 100Additional Resources 107Summary 109

CHAPTER 9Fireworks 111Strengths 113Weaknesses 114Prototyping an iPhone Application with Fireworks 115Additional Resources 125Summary 127

CHAPTER 10Axure RP Pro 129Strengths 131Weaknesses 132Building a Video Web Site Prototype with Axure RP 132Additional Resources 146Summary 147

CHAPTER 11HTML 149Strengths 151Weaknesses 152Prototyping with HTML 152Creating an HTML Prototype 154Additional Resources 168Summary 170

CHAPTER 12Testing Your Prototype 171Common Mistakes 172Preparing for a Usability Test 176Design Test Scenarios 177Test Your Prototype 179Record Observations and Feedback 180Analyze and Determine Next Steps 182A Final Word 184Summary 185

Index 187Acknowledgments 195About the Author 197

Influencers

Influencers

Influencers

What Tools Are People Using?

What Tools Are People Using?

TABLE 5.1!SURVEY RESULTS OF COMMON PROTOTYPING TOOL USAGE

toddwarfel.com/archives/ first-prototyping-survey-results/

What Tools Are People Using?! !What Kinds of Prototypes Are They Making?

What Kinds of Prototypes Are They Making?

TABLE 5.2!SURVEY RESULTS OF COMMON TYPES OF PROTOTYPES

What Kinds of Prototypes Are They Making?

Summary

Summary