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. Enhancing Web Site Appeal with Graphics and Color Chapter 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.

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

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

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

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

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

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

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

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

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

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

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

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

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