Web design for dummies

by Lisa Lopuck

Web Design

FOR

DUMmIES‰

2ND EDITION

01_781177 ffirs.qxp 2/3/06 6:47 PM Page iii

01_781177 ffirs.qxp 2/3/06 6:47 PM Page ii

Web Design

FOR

DUMmIES‰

2ND EDITION

01_781177 ffirs.qxp 2/3/06 6:47 PM Page i

01_781177 ffirs.qxp 2/3/06 6:47 PM Page ii

by Lisa Lopuck

Web Design

FOR

DUMmIES‰

2ND EDITION

01_781177 ffirs.qxp 2/3/06 6:47 PM Page iii

Web Design For Dummies®

, 2nd Edition

Published by

Wiley Publishing, Inc.

111 River Street

Hoboken, NJ 07030-5774

www.wiley.com

Copyright © 2006 by Wiley Publishing, Inc., Indianapolis, Indiana

Published by Wiley Publishing, Inc., Indianapolis, Indiana

Published simultaneously in Canada

No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or

by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permit￾ted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written

permission of the Publisher, or authorization through payment of the appropriate per-copy fee to the

Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600.

Requests to the Publisher for permission should be addressed to the Legal Department, Wiley Publishing,

Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, (317) 572-3447, fax (317) 572-4355, or online at http://

www.wiley.com/go/permissions.

Trademarks: Wiley, the Wiley Publishing logo, For Dummies, the Dummies Man logo, A Reference for the

Rest of Us!, The Dummies Way, Dummies Daily, The Fun and Easy Way, Dummies.com, and related trade

dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates in the United

States and other countries, and may not be used without written permission. All other trademarks are the

property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor

mentioned in this book.

LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REP￾RESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE

CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT

LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED

OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED

HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDER￾STANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER

PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPE￾TENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR

SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR

WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER

INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMA￾TION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE.

FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE

CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.

For general information on our other products and services, please contact our Customer Care

Department within the U.S. at 800-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002.

For technical support, please visit www.wiley.com/techsupport.

Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may

not be available in electronic books.

Library of Congress Control Number: 2005938227

ISBN-13: 978-0-471-78117-2

ISBN-10: 0-471-78117-7

Manufactured in the United States of America

10 9 8 7 6 5 4 3 2 1

2K/QX/QT/QW/IN

01_781177 ffirs.qxp 2/3/06 6:47 PM Page iv

About the Author

In 1988, Lisa Lopuck got her first glimpse of multimedia while still at UCLA

pursuing her degree in design. She saw a tiny, black-and-white, interactive

HyperCard stack designed by The Voyager Company and immediately knew

her career path.

Her first job out of school was working at the Apple Multimedia Lab in

San Francisco. She then moved on to Skywalker Ranch, working with

George Lucas to design educational CD-ROMs. The rest has been inter￾active history — working with everyone from Kaleida to eBay, writing

bestselling books, teaching, and speaking at conferences along the way.

In 1996, she co-founded Electravision, an award-winning Web design agency in

San Francisco with clients such as Twentieth Century Fox, National Geographic,

Microsoft, and Mall of America. Electravision’s work won awards, including

Yahoo!’s Best of the Year, Site of the Day, and Best of the Web. Electravision

also created the highly acclaimed online murder mystery series, Suspect,

one of the Web’s first online entertainment series.

Recently, Lisa was an Associate Creative Director and Senior Producer at

Disney where she managed the production of large-scale, large-budget, multi￾language Web sites for Disney’s theme parks and hotels around the world

such as www.DisneyCruiseLine.com and www.HongKongDisneyland.com.

Lisa is now a design consultant helping companies shape their Web creative

strategy. She is also an accomplished watercolor artist, and a signature

member of the National Watercolor Society. You can see her paintings online

at www.lopuck.com, and her Web portfolio at www.lopuck.com/portfolio.

01_781177 ffirs.qxp 2/3/06 6:47 PM Page v

01_781177 ffirs.qxp 2/3/06 6:47 PM Page vi

Dedication

For my husband, Matt, who is my chief evangelist, and for my daughter,

Jasmine, who is now inspired to write and illustrate her own books.

For my parents who always encouraged me to reach for the stars.

Author’s Acknowledgments

Thanks to the many people who helped make this book possible: The team at

WebAssist who provided support and examples in this book, and awesome

software that allows us non-techies to do great things; to colleagues and com￾panies who provided wonderful examples to use in this book; to my friends at

Macromedia and Adobe who make sure I always have the latest software; and

to Kim Darosett, my editor, who kept everything on track.

01_781177 ffirs.qxp 2/3/06 6:47 PM Page vii

Publisher’s Acknowledgments

We’re proud of this book; please send us your comments through our online registration form

located at www.dummies.com/register/.

Some of the people who helped bring this book to market include the following:

Acquisitions, Editorial, and

Media Development

Project Editor: Kim Darosett

Acquisitions Editor: Steve Hayes

Copy Editor: Rebecca Senninger

Technical Editor: Claudia Snell

Editorial Manager: Leah Cameron

Media Project Supervisor: Laura Moss

Media Development Manager: Laura VanWinkle

Editorial Assistant: Amanda Foxworth

Cartoons: Rich Tennant (www.the5thwave.com)

Composition Services

Project Coordinator: Erin Smith

Layout and Graphics: Lauren Goddard,

Melanee Prendergast, Heather Ryan

Proofreaders: Leeann Harney, Jessica Kramer,

Joe Niesen, Dwight Ramsey, Charles Spencer,

Lisa Stiers

Indexer: Sherry Massey

Publishing and Editorial for Technology Dummies

Richard Swadley, Vice President and Executive Group Publisher

Andy Cummings, Vice President and Publisher

Mary Bednarek, Executive Acquisitions Director

Mary C. Corder, Editorial Director

Publishing for Consumer Dummies

Diane Graves Steele, Vice President and Publisher

Joyce Pepple, Acquisitions Director

Composition Services

Gerry Fahey, Vice President of Production Services

Debbie Stailey, Director of Composition Services

01_781177 ffirs.qxp 2/3/06 6:47 PM Page viii

Contents at a Glance

Introduction .................................................................1

Part I: The Web Design Kick-Off....................................7

Chapter 1: So You Want to Be a Web Designer?..............................................................9

Chapter 2: From Concept to Execution .........................................................................19

Part II: User-Friendly Design.......................................35

Chapter 3: Designing the Right Site for the Right Crowd ............................................37

Chapter 4: Organizing and Navigating Web Content....................................................55

Chapter 5: Web User Interface Design ...........................................................................73

Chapter 6: User Testing: Lab Coats Not Required........................................................91

Part III: Designing Web Graphics...............................107

Chapter 7: Web Graphic Design 101.............................................................................109

Chapter 8: Letter-Perfect Type Design.........................................................................125

Chapter 9: Color on the Web.........................................................................................145

Chapter 10: Building Web Graphics from the Ground Up .........................................161

Chapter 11: Presenting Your Design Masterpiece......................................................181

Chapter 12: Polishing Pixels to Perfection: Graphic Production..............................197

Part IV: Producing the Final Web Site........................221

Chapter 13: Surveying the HTML Landscape .............................................................223

Chapter 14: Controlling Page Layout ...........................................................................241

Chapter 15: Web Sites on Steroids ...............................................................................259

Part V: The Part of Tens ............................................269

Chapter 16: Ten Tips for Managing Your Web Design Business ...............................271

Chapter 17: Ten Information and Interaction Design Tips........................................285

Chapter 18: Ten Things That Can Go Wrong...............................................................293

Index .......................................................................303

02_781177 ftoc.qxp 2/3/06 7:04 PM Page ix

02_781177 ftoc.qxp 2/3/06 7:04 PM Page x

Table of Contents

Introduction..................................................................1

About This Book...............................................................................................1

Conventions Used in This Book .....................................................................2

Foolish Assumptions .......................................................................................2

What You Shouldn’t Read................................................................................3

How This Book Is Organized...........................................................................3

Part I: The Web Design Kick-Off............................................................3

Part II: User-Friendly Design .................................................................3

Part III: Designing Web Graphics .........................................................4

Part IV: Producing the Final Web Site ..................................................4

Part V: The Part of Tens.........................................................................4

Icons Used in This Book..................................................................................4

I’m Here if You Need Me! .................................................................................5

Part I: The Web Design Kick-Off.....................................7

Chapter 1: So You Want to Be a Web Designer? . . . . . . . . . . . . . . . . . . .9

The People Involved ......................................................................................10

Business folks .......................................................................................10

Producer folks.......................................................................................10

Visual designers....................................................................................11

Information architects .........................................................................13

Content designers ................................................................................15

Media specialists ..................................................................................15

HTML slingers.......................................................................................15

Programmers ........................................................................................16

Getting Started in Web Design......................................................................17

Getting Experience.........................................................................................17

Chapter 2: From Concept to Execution . . . . . . . . . . . . . . . . . . . . . . . . . . .19

Phase 1: Definition .........................................................................................19

Understanding site goals.....................................................................20

Gathering business requirements ......................................................20

Building a project plan.........................................................................20

Phase 2: Design...............................................................................................22

Creating the blueprint for the site......................................................22

Designing a plan for each page...........................................................23

02_781177 ftoc.qxp 2/3/06 7:04 PM Page xi

xii

Implementing user testing...................................................................24

Putting together a content plan..........................................................24

Establishing “look-n-feel”.....................................................................25

Getting input from a focus group .......................................................25

Phase 3: Development ...................................................................................27

Producing final Web graphics .............................................................27

Content development ..........................................................................28

Media development..............................................................................28

Holding it all together with HTML......................................................29

Databases, programming, and things to make your head spin ......29

Phase 4: Testing and Launch ........................................................................32

Quality assurance.................................................................................32

Launch day............................................................................................32

Phase 5: Maintenance....................................................................................33

Part II: User-Friendly Design .......................................35

Chapter 3: Designing the Right Site for the Right Crowd . . . . . . . . . . .37

Who Is the Audience? ....................................................................................38

Question checklist for clients .............................................................38

Personas ................................................................................................39

Scenarios ...............................................................................................39

Building an Outline for Your Site..................................................................40

Making a wish list of content, bells, and whistles............................40

Categorizing and prioritizing information.........................................40

Following the five-to-seven rule..........................................................42

Crafting a Site Map.........................................................................................43

Reading between the lines and boxes ...............................................45

Developing your own set of symbols.................................................47

Everyone’s singing from the same songsheet...................................48

The official page index and naming conventions.............................49

Building a Map for a Site Redesign ..............................................................50

Deconstructing a Web site ..................................................................50

Finishing the site map..........................................................................51

Developing a Marketing Plan ........................................................................52

Offline marketing ..................................................................................52

Online marketing ..................................................................................53

Chapter 4: Organizing and Navigating Web Content . . . . . . . . . . . . . .55

Page-Level Planning .......................................................................................56

Mapping out content zones ................................................................57

Wireframing...........................................................................................58

Web Design For Dummies, 2nd Edition

02_781177 ftoc.qxp 2/3/06 7:04 PM Page xii