Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Web Design and Development for E-Business Jensen J. Zhao

Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Designing and Developing A Simple Web Site Chapter 2

Quit 2.3 Chapter 2 Objectives  Understand the basic principles of Web design  Envision a Web design model  Put the design principles and model into context  Design multipage Web sites

Quit 2.4 Principles of Web Design The Basics  Nonlinear presentation  One to two screens per page  Simple navigation  Small graphics files  Appealing visual effects

Quit 2.5 Nonlinear Presentation  Multidimensional  User / visitor / student-centered  Non-sequential  Multimedia approach Using more than one medium simultaneously Using more than one medium simultaneously  NOT Linear or sequential Linear or sequential Writer / producer / teacher-centered Writer / producer / teacher-centered

Quit 2.6 One or Two Screens Per Page  Home page Complete picture of site Complete picture of site Includes corporate name, logo, key information Includes corporate name, logo, key information  Content pages Hyperlinks for Hyperlinks for Background information Background information Explanations Explanations References References

Quit 2.7 Simple Navigation  Hyperlinks grouped together  Each hyperlink connecting one category Products Products Services Services Investor relations Investor relations  Hyperlinks placed on left, right or top of screen  Common file technology

Quit 2.8 Smaller Graphics Files  JPEG Joint Photographic Experts Group Joint Photographic Experts Group No more than two 50KB JPEG pictures No more than two 50KB JPEG pictures Navigation buttons smaller than 5KB Navigation buttons smaller than 5KB  GIF Graphics Interchange Format Graphics Interchange Format GIF images 1-2KB each GIF images 1-2KB each  Small graphics = speedy download

Quit 2.9 Appealing Visual Effects  Appropriate use of Style Style Color Color Layout Layout  Text 11pt Arial or 12pt Times New Roman 11pt Arial or 12pt Times New Roman  Color contrast Light background, dark text Light background, dark text

Quit 2.10 Web Design Model Phase 2: Design and Development Phase 3: Web Site Testing Phase 1: Front- and Back-End Analyses

Quit 2.11 Phase 1. Front- and Back-End Analyses  Needs assessment (self and client)  Client hardware & software evaluation  Web technology trend analysis  Web site cost-benefit analysis  Selection of Web development tools

Quit 2.12 Phase 2. Design and Development  Home and content pages  Text fonts, styles and color  Horizontal lines and tables  Hyperlinks and navigation buttons  links  Frames and forms  Graphic arts and images

Quit 2.13 Phase 3. Web Site Testing  Local-host testing Test on developer’s computer Test on developer’s computer  Server-side testing Test between server and developer's computer Test between server and developer's computer  Client-side testing Test with various configurations and browsers at different places and times Test with various configurations and browsers at different places and times

Quit 2.14 Chapter 2 Summary  Basic Principles of Web Design Nonlinear Presentation Nonlinear Presentation One or Two Screens Per Page One or Two Screens Per Page Simple Navigation Simple Navigation Smaller Graphics Files Smaller Graphics Files Appealing Visual Effects Appealing Visual Effects  Web Design Model Phase 2: Design and Development Phase 3: Web Site Testing Phase 1: Front- and Back-End Analyses

Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Designing and Developing A Simple Web Site The End