Web Site Design and Architecture

Transcription

1 Web Site Design and Architecture Web Site Design and Architecture Preface...i Prerequisites...i Key Topics...i Course Objectives...ii Features...ii Learning Objectives, Unit Summaries, Discussion Questions, and Activities/Exercises...iii Key Terms...iii Resources Available in Instructor-led Settings...iii Why Choose WestNet?...iv Introduction... xv Unit 1 Graphic Design Primer...1 Page Layout...5 What Goes on the Page?...5 The Basics of the Layout...6 Balance...6 Contrast... 8 Unity... 9 Proportion White Space The Layout Grid The Critique Activities v

2 Web Site Design and Architecture vi Typography...18 Typefaces...18 Text Line Layout Character Anatomy...20 Line Spacing and Leading...22 Font Face Sizing and Choices Line Length...25 Type Styles...26 Slab Serif...26 Old Style Serif...27 Transitional Serif Modern Serif...28 Contemporary/Sans Serif...28 Postmodern Monospace...29 Legibility vs. Readability Top 10 Typography Tips...30 Activities Using Color...32 How Do We See Color?...32 The Colors...34 Rules for Using Color What Do the Colors Mean? Activities Summary...39 Quiz...40 Unit 2 Web Graphics Concepts...43 Tables...48 The Inner Workings of the Table Using Table and Cell Properties Creating Navigation Bars...54 Nesting Tables...56 Simple Layouts Complex Layouts Activities Positioning and Layout with CSS...71 About CSS Positioning The Basics Creating a Four Box Layout... 77

3 Create Primary Navigation...78 Create Secondary Navigation...79 Create the Content Section Create the Identity Section Activities Color Use on the Internet...84 Color Safe Palettes...84 Dithering...85 RGB Color Specification Create a Color Chart...87 Named Values Documenting A Site Color Palette Activities Lesson 4 File Formats for the Web...93 Vector vs. Raster Raster Formats...96 GIF JPEG Shockwave Flash Format (The Vector Approach) Emerging Formats PNG JPEG SVG Activities Lesson 5 Defining Speed Where to Start Be Careful with Scripts and Style Sheets Lightweight Graphics Tricks The Site Time Strategy Activities Lesson 6 ADA The ADA Exploring the Possibilities Step 1: Provide Equivalent Alternatives to Auditory and Visual Content Step 2: Use More Than Color to Make a Point Step 3: Clarify Natural Language Usage Step 4: Use Vector-Based Animation Graphics Selectively Step 5: Lay Out Forms Carefully Section 508: Where ADA Compliance Becomes Compulsory Activities vii

4 Web Site Design and Architecture Lesson 7 Branding What is Branding? Building a Strong Brand Identity Leveraging an Existing Brand Logo Usage Color Usage Font Specifications Other Information Brand Components Devising a Brand Strategy Activities Lesson 8 Ten Rules for Effective Design Objectives Rule 1: Strive for Simplicity and Clarity Rule 2: Design to Degrade Rule 3: Content is King Rule 4: Build from Business Rules Toward Art Rule 5: Design for Maintenance Rule 6: Plan Ahead Rule 7: Work from Templates Rule 8: Sounds Grow Old Fast Rule 9: Beware of Trendiness Rule 10: Record Guidelines Activities Summary Quiz Unit 3 Advanced Site Architecture The Overall Process An Overview of the Process Activities The Statement of Purpose Explanation of the Document An Example of a Statement of Purpose Activities viii

5 User Groups Defining Users Using the Groups Activities Lesson 4 The Feature Set Wish Lists Wish Lists for Large Organizations Sites A Sample Wish List Winnowing a Wish List Creating A Final Feature List Activities Lesson 5 Architectural Maps Round One: Creating the Initial Mappings Elements of Effective Navigation Accessing Web Pages Choosing the Right Architecture Navigating from General to Specific Topics Round Two: Determining Navigation from the Initial Maps Round Three: Conducting the First Tests Activities Lesson 6 Final Architecture Deliverables The Final Deliverables The Wire Frame and Its Use System Storyboards Activities Summary Quiz Unit 4 GUI Design Navigation Design Basics Introduction to Navigation Overview of a Successful Navigation System Overview of an Unsuccessful Navigation System The Process of Navigation Design Design Goals A Few Words About User Behavior Activities ix

6 Web Site Design and Architecture Labeling Systems and Metaphors Labeling Informal Testing Metaphors Activities Relationships Between Navigation Elements Relationship Methods Proximity and Like Positioning Color and Color Value Size and Weight Shape Typeface Activities Lesson 4 Sound UI Design Practices Setting Default Options Using Icons and Labels Designing Tabbed Interfaces Using Wizards Using Mouseovers Activities Summary Quiz Unit 5 Usability Engineering The Goals of Usability Engineering Usability Engineering Overview Usability Engineering Goals The Starting Point System vs. Site Usability Engineering and the Development Process General Usability Guidelines Guideline Guideline Guideline Guideline Guideline Activities x

7 Usability Labs The Purpose of Usability Labs Evaluating the Number of Testers Screening Potential Testers Assessing the Equipment Needs Encountering Various User Problems Activities User Surveys Presenting a Survey Designing a Survey Interpreting the Results of a Survey Activities Lesson 4 Competitive Testing Performing a Competitive Test Identifying Potential Features Deciding Which Features Are Right for You Activity Lesson 5 Wire Frame Testing Setting Up a Wire Frame Test Administering Wire Frame Tests Incorporating the Results Activities Lesson 6 Heuristic Evaluations The Heuristic Principles Visibility of System Status Match Between System and the Real World User Control and Freedom Consistency and Standards Error Prevention Recognition Rather than Recall Flexibility and Efficiency of Use Aesthetic and Minimalist Design Help Users Recognize, Diagnose, and Recover from Errors Help and Documentation Gathering and Using the Information Activities xi

8 Web Site Design and Architecture Lesson 7 The Usability Report The Basic Layout Overview Section Methodology Section Results and Solutions Section Wrap-up and Suggestions Section The Appendices Activities Summary Quiz Supplement 1 Introduction to Paint Shop Pro The Interface PSP Workspace The Tool Palette The Color Palette Status Bar Menu Bar and Toolbar Configure PSP s Interface Capabilities of PSP Creating Images Scanned Images Digital Camera Images PSP Images Saving Images Using Other PSP Techniques Editing Images Using Layers in Graphic Design Supplement 2 Web Features of Paint Shop Pro Building the Interface Components The Slicing and Mapping Process Image Slicer Tools Cell Properties Other Slicing Features Image Mapper xii

9 Supplement 3 Animation Shop The Interface Creating an Animated GIF File Using the Animation Wizard Building an Animated Banner Ad Using the Banner Wizard.334 Supplement 4 Introduction to Flash Flash 5 Overview Introduction to ActionScript The Interface Tools Section of the Toolbox View Section of the Toolbox Colors Section of the Toolbox Options Section of the Toolbox Layers and Timeline Overview Symbols, Libraries, and Instances Timeline Animation Shape Tweening Morph Tweening Motion Tweening Animation Along a Path Animation Trails Publishing Flash Movies Optimizing Techniques Testing a Movie Publishing a Movie Appendix Usability Report for WidgetsInc.com Introduction Methodology Results and Solutions Problem Problem Conclusion Course Quiz Glossary Index xiii