Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Web...
-
Upload
eleanor-mccarthy -
Category
Documents
-
view
213 -
download
1
Transcript of Web Design and Development for E-Business By Jensen J. Zhao Copyright 2003 Prentice Hall, Inc. Web...
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