BY GIOVANNI DIFETERICI THE WEB DESIGNER’S ROADMAP YOUR CREATIVE PROCESS FOR WEB DESIGN SUCCESS www.it-ebooks.info THE WEB DESIGNER’S ROADMAP BY GIOVANNI DIFETERICI www.it-ebooks.info The Web Designer’s Roadmap by Giovanni DiFeterici Copyright © 2012 SitePoint Pty. Ltd. Editor: Kelly SteeleProduct Manager: Simon Mackie Cover Designer: Alex WalkerTechnical Editor: Diana MacDonald Indexer: Michele Combs Printing History: 1st edition: August 2012 Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark. Published by SitePoint Pty. Ltd. 48 Cambridge Street Collingwood VIC Australia 3066 Web: www.sitepoint.com Email: business@sitepoint.com ISBN 978-0-9872478-4-1 (print) ISBN 978-0-9872478-5-8 (ebook) Printed and bound in the United States of America ii www.it-ebooks.info About Giovanni DiFeterici Giovanni is an illustrator, designer, and front-end developer at Period Three (http://www.period-three.com/), a web design firm in South Carolina. He’s also the content and style editor for Unmatched Style (http://unmatchedstyle.com/), a design gallery and blog dedicated to documenting and curating all things both badass and web design-related. Giovanni regularly speaks at conferences about creativity, interface design, and art. Before becoming a designer, he was a fine artist for many years, which continues to inform his web design process and aesthetic. In addition, Giovanni’s favorite comic book is Akira, he is the proud owner of a large red mohawk, and he believes Francis Bacon is the greatest painter ever. About SitePoint SitePoint specializes in publishing practical, rewarding, and approachable content for web professionals. Visit http://www.sitepoint.com/ to access our books, blogs, newsletters, articles, and community forums. iii www.it-ebooks.info www.it-ebooks.info Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi What’s in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xii Where to Find Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii The SitePoint Forums . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii The Book’s Website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii The SitePoint Newsletters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Your Feedback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiv Conventions Used in This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Chapter 1 Beauty, Creativity, and Inspiration . . . . . . . . . . . . . . 1 Aesthetics: It’s More than a Pretty Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 What is beauty? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 The Eye of the Beholder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 A Refined Sense of Beauty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Perceived Beauty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 The Elegance of Science . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Drawing a blank? Let’s Look at Dribbble . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Standing on the Shoulders of Giants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 Creativity: Don’t Think about Pink Elephants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Adding Structure to the Creative Process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 The Disney Method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Inspired By and Inspired To . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Design Galleries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Derivative Design: Copy cats or like minds? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Keeping an Open Mind . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Developing Good Habits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Spectrumagic: Our Design Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 www.it-ebooks.info What have we learned? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 Chapter 2 It Ain’t Over Till It’s Over: A Bit of Design History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Breaking the Cycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 The Parable of Cynthia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Art History 101: Just Enough to Be Dangerous . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Arts and Crafts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Minimalism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Modernism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Postmodernism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Newspapers: How do you surf the Web on those? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Column Grids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Typography . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 Information Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 The New Kids . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Interaction Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 User Experience Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Condensed Fonts, Horn-rimmed Glasses, and Flow Charts . . . . . . . . . . . . . . . . . . . . . . . . 47 Chapter 3 Gathering Resources: That Rucksack Has a Lot of Pockets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Communicating with Clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Ask Questions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Questionnaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 What’s next? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Getting What You Need: Grab Your Compass and Bowie Knife … . . . . . . . . . . . . . . . . . . 52 Research: What’s the competition doing? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Check Your Files: Dredging Up the Past . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Color Palettes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Kuler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 COLOURlovers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 vi www.it-ebooks.info Brand Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Mood Boards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Learning from Other Industries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Storyboards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Learning from Your Peers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Feeling Resourceful . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Chapter 4 Form and Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Why not go straight to Photoshop? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Structure and Form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 How detailed should I make my wireframe? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Wireframing for Page Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Wireframing for Functionality and Interaction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Wireframing for Content Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Thumbnails . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 A Case for Sketching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Grayboxing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 When is grayboxing useful? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 The Problem with Templates and Why You’ll Still Use Them . . . . . . . . . . . . . . . . . . . . . . . 83 Overcoming the Problem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Designing for Multiple Form Factors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87 Mobile Sites . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Don’t Sweat the Small Stuff . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Chapter 5 Design Patterns: Tried and Trusted Solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 How does this relate to web design? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Am I ripping people off? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Types of Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Visual Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Layout Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 vii www.it-ebooks.info Architectural Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Interaction Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Conceptual Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Great, but where’s the list of design patterns? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Mistaking Trends and Fashion for Design Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Rounded corners, inset text, and ribbons? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Chapter 6 Conceptual Design and Our Color Project . . 117 Where do we go from here? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Conceptual Design: Just a Little Black Magic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Idea-driven Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Creative Association . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Art Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Design Elements and Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Practical Implementation of an Idea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 When Not to Be Clever . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Spectrumagic . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Wireframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Laying out Mobile Designs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 How do we make all these wireframes? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Art Direction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 The Final Mockups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 The Home Page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 The Subpage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Special Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Intuitive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Don’t Go Home Just Yet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Chapter 7 Designing in the Wild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Get Over the Failings of Technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Fonts: A Love-Hate Relationship . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Users . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 viii www.it-ebooks.info Dynamic Content (Should that box really hold 500 words?) . . . . . . . . . . . . . . . . . 155 Pushing the Medium . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Browsers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156 Progressive Enhancement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Fancy Tools . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 The Reality of Money: The Root of All Compromise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Production Schedules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Goodbye and Good Luck . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 ix www.it-ebooks.info [...]... that sets us apart from other designers Many designers find this difficult because they base their style on the work of designers that they respect or admire To some degree we’re all derivative in our choices, because our understanding of what is beautiful is a reaction to what we see We build on the accomplishments of other designers; standing on the shoulders of giants, as the saying goes 4 http://gingerwhale.com/... Taking cues from other designers is unavoidable, and with the number of websites out there growing by the thousands, truly original and innovative designs are becoming harder to create Many designers struggle with creativity; fortunately, various online galleries (such as unmatchedstyle.com in Figure 1.11) curate some of the best websites around so that designers can find the inspiration they need Figure...www.it-ebooks.info Preface Welcome to another book about web design! Well, actually, this one’s different This book will also delve into the creative side of designing for the Web, including a look at art history and some sources of inspiration for the intrepid web designer In the main, we’ll be discussing the phases of the design process and how to incorporate them into your workflow Some of these stages are tried-and-true,... between artists who copy their peers and artists who assimilate the ideas of their peers It’s a clever quote, once you think it through: if you simply copy (borrow) ideas from other designers, they’re doing all the work while you take some of the credit But if you instead learn (steal) from another design, you’ve incorporated the ideas and grown as a designer After all, we all build on the works of our predecessors... with the way it looks and everything to do with the effectiveness and economy of the final result The equation is beautiful because it accomplishes so much with so little A wealth of information about how the universe is glued together is contained in five characters Upon thinking about the concept of mathematical elegance, it became clear to me that UX designers and physicists are trying to achieve the. .. My intention is to make these concepts easier to grasp while laying out some simple strategies for applying them to the design process We’ll also look at the design project we’ll be creating together throughout the book Aesthetics: It’s More than a Pretty Picture “Beauty is rare in all nature’s works, and in all works of art.” —Voltaire www.it-ebooks.info 2 The Web Designer’s Roadmap Okay, so Voltaire... missed the snowfall, and all he had to say was “bleak.” Because he hadn’t undergone the same experience, he was unable www.it-ebooks.info 6 The Web Designer’s Roadmap to see the reasons why I still found the image lovely Instead of a serene moment, he saw a gray, lifeless scene Figure 1.5 Serene or lifeless, depending on your view A Refined Sense of Beauty There are designers who might believe they’re... other laypersonstyle books on the subject Elegant Universe is about string theory While the maths is a bit beyond me (seriously, what’s an eleven-dimensional universe?), I do understand that string theory is a good stab at creating one theory of physics that explains how the universe works What’s always been most interesting to me is the idea that one theory should explain everything Why have one theory... hair Each step of the design process laid out in this book is something that you can adopt, change, or ignore I personally believe that designers should work in whatever way best suits their skills Some prefer to work in the browser with HTML and CSS Others use Fireworks and create their wireframes and designs in the same project document Some designers sketch thumbnails, while others don’t I want... of the time, the production pipeline prohibits us from branching out into other disciplines; we get siloed and spend the bulk of our time focused on visually skinning apps and websites www.it-ebooks.info Beauty, Creativity, and Inspiration 11 But surface beauty is only part of the story It really pays to explore outside of our industry There are some really intelligent people leading the way in web . DIFETERICI THE WEB DESIGNER’S ROADMAP YOUR CREATIVE PROCESS FOR WEB DESIGN SUCCESS www.it-ebooks.info THE WEB DESIGNER’S ROADMAP BY GIOVANNI DIFETERICI www.it-ebooks.info The Web Designer’s Roadmap by. sources of inspiration for the intrepid web designer. In the main, we’ll be discussing the phases of the design process and how to incorporate them into your workflow. Some of these stages are tried-and-true,. every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint