Effective Prototyping with Excel - A practical handbook for developers and designers

Front Cover

Effective Prototypingwith Excel

Copyright Page

Contents

Dedications Page

Acknowledgments

About the Authors

Part 1: Turning Excel into a Prototyping Tool

Chapter 1: A Developer's Dilemma

A Case Study

Introduction

Excel Prototyping

Prototyping Flexibility

Efficient and Easy

Professional Results

No Special Skills Required

Readily Available

Still Not Convinced?

Who Should Consider Using Excel?

Prototyping Productivity

Our Goal

Chapter 2: Getting Started: Your First Excel Prototype

Examples of Excel Prototypes

How to Create Your First Excel Prototype

To Adapt the Template:

To Add a Header:

To Add a Search Text Entry Box and Accompanying Search Button:

To Add Page Navigation:

To Build the Hotel Finder Area:

To Create a Grouping Box Around the Hotel Finder Area:

To Create the Placeholder, the Images, and Descriptive Text for the Featured Hotels Area:

To Create the Placeholder Descriptive Text:

To Create the Placeholder Promotional Information Area:

Summary

About This Book

How to Use This Book

How to Use the Associated Files

Chapter 3: Basics: The Excel Prototyping Canvas

Creating a Prototyping Canvas

To Prepare a Canvas:

To Hide the Grid:

To Change the Row and Column Dimensions:

Conclusion

Chapter 4: Creating an Excel Prototyping Template

Templates

The Image Library

What Graphics Should be Included in Your Image Library Worksheet?

Finding the Images You Need

When to Use Graphics Instead of Widgets Built in Excel

To Add Graphics to the Template:

The Boxes epsivet Buttons Worksheet

Creating the Boxes epsivet Buttons Worksheet

The Tabs Worksheet

Color Management

The Color Key and Palette

The Tips and Tricks Worksheet

The Table Template Worksheet

Creating the Table Template

Modifying the Table

The Starter Worksheet

Conclusion

Part 2: Prototyping with Excel

Chapter 5: Excel Prototyping: Storyboards

About Storyboards

How to Create an Excel Storyboard Prototype

Creating the Berger Books Storyboard in Excel

To Build a Storyboard:

To Create the Header:

To Place a Wireframe Image on the Worksheet:

To Create a Text Box:

Options for Presenting Your Storyboard

To Add Navigation Links to a Storyboard:

Conclusion

References

Chapter 6: Wireframes

Introduction to Wireframes

Task Flow or Site Map Diagram

To Create Site Map Wireframe Boxes:

To Add Connectors Between Boxes:

The Hyperlinked Site Map

To Create an Interactive Site Map:

From Skeletal to Detailed Wireframes

The Excel Methodology

Conclusion

References

Chapter 7: Digital Interactive Prototypes

About Digital Interactive Prototypes

How Does an Interactive Prototype Work?

Creating Interactive Prototypes with Excel

Gathering and Verifying Requirements for the Prototype

Creating a Screen Flow Diagram

To Import Scanned Drawings or Graphics Created in Another Application:

To Create the Thumbnails in Excel:

To Group Shapes:

Creating an Interactive Prototype

To Create the Interactive Digital Prototype:

Creating a Drop-Down Menu in Excel

To Create a Drop-Down Menu:

Conclusion

References

Part 3: Putting Your Excel Prototype to Work

Chapter 8: Iterating Prototypes With Excel

Preparing for a Design Iteration

Creating Iterations of Your Excel Prototype

Iteration 1: Simple Wireframe

Iteration 2: Wireframe with Some Details

Iteration 3: Wireframe Updated with Design Team Feedback

Iteration 4: Final Wireframe

Conclusion

References

Chapter 9: Communicating Your Design in Excel

Introduction

Adding a Tooltip to Excel Hyperlinks

To Create a ScreenTip Annotation:

Inserting Comments

To Insert a Comment:

Creating Annotation Areas

To Create Annotation Areas:

Conclusion

References

Chapter 10: Sharing Your Excel Prototype

Introduction

Using Your Prototype for Collaboration

Mitigating the Risks of Implementing a Finished Prototype

Engineering Can't (or Doesn't Want to) Implement Your Design

Competing Prototypes

Outdated Prototypes

Misunderstanding and Misinterpretation

Tips for Avoiding the Risks in Sharing Your Prototypes

Using a Summary Worksheet

Setting the Appropriate Fidelity Level

Setting the Appropriate Visual Emphasis

To Create a Translucent Overlay:

Denoting Your Prototype's Interaction Methods

Creating a Simple Click-Through Interaction:

To Name a Tab:

To Color a Tab:

Identifying Which Links Work and Which Are Just Mocked Up

Improving the Appearance and Presentation of Your Excel Prototypes

Conclusion

References

Appendix A: Useful Techniques with Excel

Introduction

Creating the Canvas

To Turn Off the Display of Gridlines to Create a Blank Canvas:

Setting Page Attributes for Prototyping

To Select the Entire Worksheet:

To Ensure That Cell Contents Will Be Read as Text Only and to Prevent Accidental Reformatting:

To Select a Default Color as a Background Color:

To Select a Default Font Style:

To Specify a Background Texture:

To Apply a Special Background:

Another Way to Use a Background:

To Change the Table Cell Orientation for Prototyping Rather than Making Spreadsheets:

Formatting Table Cells

To Specify How a Cell or Group of Cells Appears:

Using the Drawing Menu

To Insert Shapes:

To Fill Shapes with Text:

To Fill a Shape with a Pattern:

To Group Shapes:

To Order Shapes:

Managing Worksheet Tabs

Hyperlinking

Saving a Workbook as HTML

Insert and Delete Cells Shortcuts

Drag-and-Drop Shortcuts

To Align Elements on a Page:

Drag-Fill Shortcuts

To Apply Drag-Fill:

Drag-Fill Patterns:

Copy and Paste: Building Prototype Screens Quickly

Working with Graphics in Excel

Selecting Object Mode:

Draw Menu

Formatting Toolbar

Appendix B: Nevin Discovers Excel as a Rapid Prototyping Tool

First Exposure

My First Attempts with Excel

A Test Case

Appendix C: Glossary

References

Index