WEB DESIGN FOR BEGINNERS
ABOUT THIS BOOK CONVENTIONS USED IN THIS BOOK FOOLISH ASSUMPTIONS WHAT YOU SHOULDN’T READ HOW THIS BOOK IS ORGANIZED PART I: THE WEB DESIGN KICK-OFF PART II: USER-FRIENDLY DESIGN PART III: DESIGNING WEB GRAPHICS PART IV: PRODUCING THE FINAL WEB SITE PART V: THE PART OF TENS ICONS USED IN THIS BOOK I’M HERE IF YOU NEED ME! THE PEOPLE INVOLVED BUSINESS FOLKS PRODUCER FOLKS VISUAL DESIGNERS INFORMATION ARCHITECTS CONTENT DESIGNERS MEDIA SPECIALISTS HTML SLINGERS PROGRAMMERS GETTING STARTED IN WEB DESIGN GETTING EXPERIENCE PHASE 1: DE?NITION UNDERSTANDING SITE GOALS GATHERING BUSINESS REQUIREMENTS BUILDING A PROJECT PLAN PHASE 2: DESIGN CREATING THE BLUEPRINT FOR THE SITE DESIGNING A PLAN FOR EACH PAGE IMPLEMENTING USER TESTING PUTTING TOGETHER A CONTENT PLAN ESTABLISHING “LOOK-N-FEEL” GETTING INPUT FROM A FOCUS GROUP PHASE 3: DEVELOPMENT PRODUCING ?NAL WEB GRAPHICS CONTENT DEVELOPMENT MEDIA DEVELOPMENT HOLDING IT ALL TOGETHER WITH HTML DATABASES, PROGRAMMING, AND THINGS TO MAKE YOUR HEAD SPIN PHASE 4: TESTING AND LAUNCH QUALITY ASSURANCE LAUNCH DAY PHASE 5: MAINTENANCE WHO IS THE AUDIENCE? QUESTION CHECKLIST FOR CLIENTS PERSONAS SCENARIOS BUILDING AN OUTLINE FOR YOUR SITE MAKING A WISH LIST OF CONTENT, BELLS, AND WHISTLES CATEGORIZING AND PRIORITIZING INFORMATION FOLLOWING THE ?VE-TO-SEVEN RULE CRAFTING A SITE MAP READING BETWEEN THE LINES AND BOXES DEVELOPING YOUR OWN SET OF SYMBOLS EVERYONE’S SINGING FROM THE SAME SONGSHEET THE OF?CIAL PAGE INDEX AND NAMING CONVENTIONS BUILDING A MAP FOR A SITE REDESIGN DECONSTRUCTING A WEB SITE FINISHING THE SITE MAP DEVELOPING A MARKETING PLAN OF?INE MARKETING ONLINE MARKETING PAGE-LEVEL PLANNING MAPPING OUT CONTENT ZONES WIREFRAMING PRESENTING CONTENT ON THE PAGE INDICATING TEXT ON A WIREFRAME WORKING WITH A CONTENT MANAGEMENT SYSTEM MAXIMIZING YOUR SPACE INDICATING FLASH IN YOUR WIREFRAMES GETTING AROUND IN STYLE FOR THE JET SET: GLOBAL NAVIGATION SECTION NAVIGATION FOR NATURE LOVERS: LEAVING A TRAIL OF BREAD CRUMBS WHEN JETS AND NATURE LOVERS COLLIDE KEEPING METAPHORS UNDER ADULT SUPERVISION INTERACTION DESIGN CREATING USER ?OW DIAGRAMS GOING WITH THE ?OW VISUAL DESIGN’S ROLE IN USABILITY GIVING ROLLOVER FEEDBACK DESIGNING BUTTONS THAT LOOK CLICKABLE TAKING CLUES FROM EVERYDAY LIFE GROUPING AND NESTING ELEMENTS PROVIDING “YOU ARE HERE” FEEDBACK COLOR-CODING USING ICONS PROPERLY DIFFERENTIATING BETWEEN CLICKABLE AND NON-CLICKABLE THINGS CONSISTENCY IS EVERYTHING ALTERNATIVE INTERACTIVE DESIGN STRATEGIES MAXIMIZING SPACE DEVELOPING TESTABLE PROTOTYPES CREATING CLICKABLE WIREFRAMES TESTING YOUR VISUAL DESIGN BUILDING AN HTML CLICK-THROUGH TO TEST FOR USABILITY PREPPING FOR THE USER TEST PREPARING TO-DO LISTS FOR USERS DEVELOPING A TESTING METHODOLOGY CARRYING OUT THE USER TEST FINDING WILLING GUINEA PIGS CONDUCTING THE TEST “HOUSTON, WE HAVE A PROBLEM”: EVALUATING RESULTS CRAFTING THE VISUAL INTERFACE DEVELOPING A PAGE DESIGN STRATEGY CREATING COMPS BLENDING COLOR, TYPE, AND GRAPHICS USING THE OL’ GRID SYSTEM ESTABLISHING VISUAL PRIORITY IMPLEMENTING THE “BIG, MEDIUM, SMALL” STRATEGY BREAKING UP THE PAGE INTO MANAGEABLE AREAS DESIGNING AROUND THE FOLD LINE ADDING BREATHING SPACE STAYING CONSISTENT ESTABLISHING DESIGN GUIDELINES GRAPHIC TEMPLATES TYPE STYLE GUIDES TEXT THAT YOU CAN ACTUALLY READ FAVORITE AND NOT-SO-FAVORITE FONTS FOR THE WEB NOT TOO BIG; NOT TOO SMALL TEXT ON BACKGROUND TILES GRAPHIC TEXT VERSUS HTML-GENERATED TEXT A DASH OF GRAPHIC TEXT, A POUND OF HTML TEXT GRAPHIC HEADINGS CONTROLLING TEXT DISPLAY FONT SPECI?CATIONS CSS FONT CONTROL EXTERNAL STYLE SHEETS INTERNAL STYLE SHEETS THE SECRET WORLD OF RGB SUBTRACTIVE AND ADDITIVE COLORS GAZILLIONS OF COLORS COLOR BIT DEPTH THE WEB-SAFE COLOR PALETTE REDUCING AN IMAGE’S BIT DEPTH COLOR PALETTES DECIPHERING THE HEXADECIMAL COLOR CODE SMART WEB COLOR USAGE USE ?AT-COLORED GRAPHICS USE AS FEW COLORS AS POSSIBLE BEWARE OF THE GRADIENT BLEND WHEN AN IMAGE HAS A MIX OF PHOTOS AND ?AT COLORS, SAVE IT AS A GIF BITMAP VERSUS VECTOR GRAPHICS BITMAPS: A FABRIC OF PIXELS VECTORS: FOR THE MATHEMATICALLY INCLINED THE VECTOR-BITMAP SHOWDOWN MONITOR RESOLUTION IMAGE RESOLUTION THE USUAL SOFTWARE SUSPECTS ADOBE PHOTOSHOP MACROMEDIA FIREWORKS PAINT SHOP PRO ADOBE ILLUSTRATOR AND MACROMEDIA FREEHAND MACROMEDIA FLASH PIXEL-PUSHING 101: CREATING A BANNER IMAGE MANIPULATION DIRECT FROM DIGITAL CAMERAS SCANNING IMAGES USING STOCK PHOTOGRAPHY AND ILLUSTRATION THE SPECIAL SAUCE: DIGITAL EDITING DEVELOPING DESIGN DIRECTIONS GETTING DESIGN IDEAS INTEGRATING THE VENERABLE BRAND DESIGNING TREATMENTS FOR THE HOME AND SUBPAGE ASSEMBLING AN ONLINE PRESENTATION PRESENTING YOUR DESIGNS ONLINE CONSTRUCTING WORKING AND NON-WORKING PROTOTYPES CREATING SIZZLING PRINTED PRESENTATIONS IN LIVING COLOR: PRINTING YOUR MOCK-UPS MOUNTING YOUR WORK ON BOARDS PRESENTING TO CLIENTS CLIENTS ARE SUCKERS FOR THE “UGLY DUCKLING” HERE WE GO AGAIN: ROUND TWO GRAPHIC PRODUCTION DESIGN TEMPLATES STYLE GUIDES VERSION CONTROL FUN WITH FILE FORMATS WHEN TO USE GIF WHEN TO USE JPEGS LEAN, MEAN PAGE DESIGN MINIMIZING DOWNLOAD TIMES SLICING AND DICING WEB GRAPHICS BACKGROUNDS FOR GRAPHICS UNDERSTANDING ANTI-ALIASED AND ALIASED GRAPHICS PREPARING GRAPHICS WITH DROP SHADOWS MATCHING A BACKGROUND TITLE USING ALPHA CHANNELS HTML: THE GLUE THAT HOLDS A PAGE TOGETHER SNEAKING A PEEK AT THE HTML SOURCE LEARNING (BORROWING) FROM OTHERS USING FRAMES, TABLES, AND DIV TAGS FRAMES IFRAMES TABLES USING CSS <DIV> TAGS LETTING HTML DO THE DESIGN WORK COLORING WITH TABLES DESIGNING WITH BACKGROUND COLORS AND TILES MAKING YOUR PAGES INTERACTIVE REGULAR LINKS IMAGE MAPS ANCHOR LINKS E-MAIL LINKS CODING TO MAKE YOU FEEL PROUD HTML EDITING WITH POWER TOOLS USING A TEXT EDITOR: COMMANDO-STYLE HTML FIXED-WIDTH AND STRETCHY TABLES PRECISE POSITIONING WITH CSS LAYERS CONTROLLING DESIGN ELEMENTS WITH CSS PAGE MARGIN CONTROL BACKGROUND IMAGES AND TILES SETTING BACKGROUND COLORS TEXT HANDLING ADDING EXTRA SPACE AROUND ELEMENTS ADDING MARGINS TO TABLE CELLS ADDING SPACE AROUND GRAPHICS BUILDING HTML DESIGN TEMPLATES INJECTING POWER INTO HTML PAGES JAVASCRIPT EMBEDDED MEDIA STREAMING MEDIA CREATING DYNAMIC, DATABASE-DRIVEN WEB PAGES CLIENT-SIDE AND SERVER-SIDE PROGRAMMING LANGUAGES SERVER-SIDE INCLUDES CONTENT MANAGEMENT SYSTEMS PERSONALIZED WEB PAGES WITH COOKIES E-COMMERCE SHOPPING CARTS PRESENTING YOUR WORK ASSEMBLING A PORTFOLIO PRESENTING YOUR WORK DEVELOPING A PROPOSAL WINNING THE BID KNOWING WHAT TO CHARGE AS AN INDEPENDENT CONSULTANT HOW AGENCIES CHARGE MANAGING A CLIENT’S EXPECTATIONS SETTING CLIENT RESPONSIBILITIES FOR THE PROJECT GETTING CLIENTS TO SIGN OFF ON KEY MILESTONES MANAGING THE WEB PROJECT WORK?OW HIRING AND MANAGING SUBCONTRACTORS USE ONLY FIVE TO SEVEN MAIN CATEGORIES DEVELOP WIREFRAMES FOR EACH UNIQUE PAGE LAYOUT ALWAYS LABEL YOUR BUTTONS AND ICONS MIND THE DOWNLOAD TIME PROVIDE “YOU ARE HERE” FEEDBACK MAKE IT EASY TO GET BACK HOME VISUALLY DIFFERENTIATE CLICKABLE AND NONCLICKABLE THINGS “ONE OF THESE BUTTONS IS NOT LIKE THE OTHERS” TREAD LIGHTLY WITH REAL-LIFE METAPHORS USE COLOR-CODING SPARINGLY “CAN WE ADD JUST ONE MORE THING?” “WE DON’T HAVE TIME FOR A SITE MAP ” “THE CLIENTS WANT THAT DESIGN?” “WHO NEEDS USABILITY TESTING WHEN YOU HAVE ME?” “BUT I’M SURE I CAN MAKE THIS NEW TECHNOLOGY WORK!” “WE’RE PLANNING FOR AN INTERNATIONAL AUDIENCE?” “THE DESIGN NEEDS TO WORK ON WINDOWS?” “UH IT NEEDS TO WORK ON A MAC?” “WE’LL JUST MAKE THE WHOLE THING DATABASE-DRIVEN ” “IF WE BUILD IT, THEY WILL COME ”