Web Design and Development for E-BusinessBy Jensen J. Zhao

Copyright 2003 Prentice Hall, Inc.

Web Design and Web Design and DevelopmentDevelopmentfor E-Businessfor E-Business

Jensen J. Jensen J. ZhaoZhao

Web Design and Development for E-BusinessBy Jensen J. Zhao

Copyright 2003 Prentice Hall, Inc.

Enhancing Web Site Enhancing Web Site Appeal Appeal

with Graphics and with Graphics and ColorColor

Chapter 3Chapter 3

3.3.33 QuitQuit

Chapter 3 ObjectivesChapter 3 Objectives

Understand basic principles of Web Understand basic principles of Web graphic design and a design model.graphic design and a design model.

Put graphic design principles and Put graphic design principles and design model into practice.design model into practice.

Understand copyright law and Understand copyright law and intellectual property concepts.intellectual property concepts.

3.3.44 QuitQuit

Principles of Web Graphic Principles of Web Graphic DesignDesign

Web vs. PrintWeb vs. PrintJPEG vs. GIFJPEG vs. GIFSimplicitySimplicity Image sizeImage sizeMeeting client needsMeeting client needs

3.3.55 QuitQuit

Web vs. Print DesignWeb vs. Print Design

PrintPrint Dots per inch (dpi)Dots per inch (dpi) Ink on paperInk on paper The bigger the dots, the less clear the imageThe bigger the dots, the less clear the image

WebWeb Pixels Pixels Screen resolution = number of pixels on Screen resolution = number of pixels on

screen (typical is 800x600)screen (typical is 800x600) Color (bit) depthColor (bit) depth

24-bit true color very sharp24-bit true color very sharp 8-bit 256 colors less sharp8-bit 256 colors less sharp

3.3.66 QuitQuit

JPEG vs. GIFJPEG vs. GIF

JPEGJPEG True color (24-bit) digital formatTrue color (24-bit) digital format Maximum 16.7 million colorsMaximum 16.7 million colors Use for photographic imagesUse for photographic images Larger than GIF filesLarger than GIF files

GIFGIF 8-bit digital format8-bit digital format Maximum 256 colorsMaximum 256 colors Use for navigation buttons, logos, iconsUse for navigation buttons, logos, icons Allows transparent backgroundsAllows transparent backgrounds Allows animationAllows animation

3.3.77 QuitQuit

SimplicitySimplicity

Rational appealRational appeal Logical and useful information deliveryLogical and useful information delivery

Emotional appealEmotional appeal Visually pleasing and invitingVisually pleasing and inviting

Rules of thumbRules of thumb All necessary information accessible on All necessary information accessible on

one or two screens from the home pageone or two screens from the home page Home page size smaller than 100KBHome page size smaller than 100KB Loads in 3-4 seconds on 28.8KB Loads in 3-4 seconds on 28.8KB

connectionconnection

3.3.88 QuitQuit

Image SizeImage Size

Large files = slow loading timesLarge files = slow loading timesSolution for large JPEGsSolution for large JPEGs

Divide into piecesDivide into pieces Save pieces as separate, smaller filesSave pieces as separate, smaller files Load individuallyLoad individually

3.3.99 QuitQuit

Customer KnowledgeCustomer Knowledge

Understand customer objectivesUnderstand customer objectives Online shoppingOnline shopping Online chattingOnline chatting News servicesNews services PhotographsPhotographs

Make content pages match Make content pages match customer needs and expectationscustomer needs and expectations

3.3.1010 QuitQuit

Web Graphic Design Web Graphic Design ModelModel

Phase 2:Design, Develop

and Edit

Phase 3:Web Site Testing

Phase 1:Front- and Back-End

Analyses

3.3.1111 QuitQuit

Phase 1.Phase 1.

Front- and Back-End AnalysesFront- and Back-End AnalysesNeeds assessment (self and client)Needs assessment (self and client)Client modem speed and ISP Client modem speed and ISP

bandwidth evaluationbandwidth evaluationWeb graphics cost-benefit analysisWeb graphics cost-benefit analysisWeb graphics tool selectionWeb graphics tool selection

3.3.1212 QuitQuit

Phase 2. Phase 2.

Design, Develop and EditDesign, Develop and Edit Web site logoWeb site logoBackground color and designBackground color and designText color and color contrastText color and color contrastNavigation buttonsNavigation buttonsPhotographsPhotographsAnimated text and clip artAnimated text and clip art

3.3.1313 QuitQuit

Phase 3. Phase 3.

Web Site TestingWeb Site Testing Local-host testingLocal-host testing

Test on developer’s Test on developer’s computercomputer

Server-side testingServer-side testing Test between server and Test between server and

developer's computerdeveloper's computer

Client-side testingClient-side testing Test with various Test with various

configurations and browsers configurations and browsers at different places and timesat different places and times

3.3.1414 QuitQuit

Copyright LawCopyright Law

Intellectual property covered by Intellectual property covered by copyright lawcopyright law Software, graphics, writings, trademarksSoftware, graphics, writings, trademarks

Fair useFair use Purpose and character of use is for nonprofit Purpose and character of use is for nonprofit

educational useeducational use Not fair use if used commerciallyNot fair use if used commercially

Freeware – free to all usersFreeware – free to all users Shareware – pay if you like itShareware – pay if you like it

Fair Use and Multimedia

Stanford University Libraries

3.3.1515 QuitQuit

Chapter 3 SummaryChapter 3 Summary

Principles of Web Graphic DesignPrinciples of Web Graphic Design Web vs. Print DesignWeb vs. Print Design JPEG vs. GIFJPEG vs. GIF SimplicitySimplicity Image SizeImage Size Customer KnowledgeCustomer Knowledge

Web Graphic Design ModelWeb Graphic Design ModelCopyright LawCopyright Law

Web Design and Development for E-BusinessBy Jensen J. Zhao

Copyright 2003 Prentice Hall, Inc.

Enhancing Web Site Enhancing Web Site Appeal Appeal

with Graphics and with Graphics and ColorColor

The EndThe End