1. 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

2. Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Enhancing Web Site Appeal with Graphics and Color Chapter 3

3. Quit 3.3 Chapter 3 Objectives  Understand basic principles of Web graphic design and a design model.  Put graphic design principles and design model into practice.  Understand copyright law and intellectual property concepts.

4. Quit 3.4 Principles of Web Graphic Design  Web vs. Print  JPEG vs. GIF  Simplicity  Image size  Meeting client needs

5. Quit 3.5 Web vs. Print Design  Print Dots per inch (dpi) Dots per inch (dpi) Ink on paper Ink on paper The bigger the dots, the less clear the image The bigger the dots, the less clear the image  Web Pixels Pixels Screen resolution = number of pixels on screen (typical is 800x600) Screen resolution = number of pixels on screen (typical is 800x600) Color (bit) depth Color (bit) depth 24-bit true color very sharp 24-bit true color very sharp 8-bit 256 colors less sharp 8-bit 256 colors less sharp

6. Quit 3.6 JPEG vs. GIF  JPEG True color (24-bit) digital format True color (24-bit) digital format Maximum 16.7 million colors Maximum 16.7 million colors Use for photographic images Use for photographic images Larger than GIF files Larger than GIF files  GIF 8-bit digital format 8-bit digital format Maximum 256 colors Maximum 256 colors Use for navigation buttons, logos, icons Use for navigation buttons, logos, icons Allows transparent backgrounds Allows transparent backgrounds Allows animation Allows animation

7. Quit 3.7Simplicity  Rational appeal Logical and useful information delivery Logical and useful information delivery  Emotional appeal Visually pleasing and inviting Visually pleasing and inviting  Rules of thumb All necessary information accessible on one or two screens from the home page All necessary information accessible on one or two screens from the home page Home page size smaller than 100KB Home page size smaller than 100KB Loads in 3-4 seconds on 28.8KB connection Loads in 3-4 seconds on 28.8KB connection

8. Quit 3.8 Image Size  Large files = slow loading times  Solution for large JPEGs Divide into pieces Divide into pieces Save pieces as separate, smaller files Save pieces as separate, smaller files Load individually Load individually

9. Quit 3.9 Customer Knowledge  Understand customer objectives Online shopping Online shopping Online chatting Online chatting News services News services Photographs Photographs  Make content pages match customer needs and expectations

10. Quit 3.10 Web Graphic Design Model Phase 2: Design, Develop and Edit Phase 3: Web Site Testing Phase 1: Front- and Back-End Analyses

11. Quit 3.11 Phase 1. Front- and Back-End Analyses  Needs assessment (self and client)  Client modem speed and ISP bandwidth evaluation  Web graphics cost-benefit analysis  Web graphics tool selection

12. Quit 3.12 Phase 2. Design, Develop and Edit  Web site logo  Background color and design  Text color and color contrast  Navigation buttons  Photographs  Animated text and clip art

13. Quit 3.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

14. Quit 3.14 Copyright Law  Intellectual property covered by copyright law Software, graphics, writings, trademarks Software, graphics, writings, trademarks  Fair use Purpose and character of use is for nonprofit educational use Purpose and character of use is for nonprofit educational use Not fair use if used commercially Not fair use if used commercially  Freeware – free to all users  Shareware – pay if you like it Fair Use and Multimedia Stanford University Libraries

15. Quit 3.15 Chapter 3 Summary  Principles of Web Graphic Design Web vs. Print Design Web vs. Print Design JPEG vs. GIF JPEG vs. GIF Simplicity Simplicity Image Size Image Size Customer Knowledge Customer Knowledge  Web Graphic Design Model  Copyright Law

16. Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Enhancing Web Site Appeal with Graphics and Color The End