SlideShare a Scribd company logo
1 of 7
IS4 030 - Website Design for e-Commerce  By  SMIEEE, SMACM, MACS E-mail:  [email_address] Room: P7919 Consultation Hours: 3:30 - 5:30pm Monday Lecture Two -Website Design Principles
An example of a very unattractive site. What’s its purpose?
A site with a theme and a clear image/purpose.
How to create a Web page which can make use of fancy graphics and yet supporting low bandwidth access?
Is an unified (consistent) page design always good? Why and Why not?
Avoid backgrounds that wash out your text.
Question ,[object Object]

More Related Content

What's hot

Bermuda Triangle WCATL 2019
Bermuda Triangle WCATL 2019 Bermuda Triangle WCATL 2019
Bermuda Triangle WCATL 2019 New Tricks
 
Building Educational Websites For Kids
Building Educational Websites For KidsBuilding Educational Websites For Kids
Building Educational Websites For Kidse2logy-Software
 
Web design services syracuse
Web design services syracuse Web design services syracuse
Web design services syracuse novelsponge4
 
WordCamp Wilmington Cousins
WordCamp Wilmington CousinsWordCamp Wilmington Cousins
WordCamp Wilmington CousinsCarrie Cousins
 
How to create an effective business website
How to create an effective business websiteHow to create an effective business website
How to create an effective business websiteKay Franklin
 
Web Design Malaysia
Web Design MalaysiaWeb Design Malaysia
Web Design MalaysiaJonas Lee
 
Your small biz website: Light the fuse or thank the Muse?
Your small biz website: Light the fuse or thank the Muse?Your small biz website: Light the fuse or thank the Muse?
Your small biz website: Light the fuse or thank the Muse?Jim Spencer
 
Small business owners and perceived website mysteries
Small business owners and perceived website mysteriesSmall business owners and perceived website mysteries
Small business owners and perceived website mysteriesInga Spouse
 
TrackJumper - The Early Days
TrackJumper - The Early DaysTrackJumper - The Early Days
TrackJumper - The Early DaysTrackJumper
 
Developing Successful Websites
Developing Successful WebsitesDeveloping Successful Websites
Developing Successful WebsitesNicolaas Francken
 

What's hot (11)

Bermuda Triangle WCATL 2019
Bermuda Triangle WCATL 2019 Bermuda Triangle WCATL 2019
Bermuda Triangle WCATL 2019
 
Building Educational Websites For Kids
Building Educational Websites For KidsBuilding Educational Websites For Kids
Building Educational Websites For Kids
 
Web design services syracuse
Web design services syracuse Web design services syracuse
Web design services syracuse
 
WordCamp Wilmington Cousins
WordCamp Wilmington CousinsWordCamp Wilmington Cousins
WordCamp Wilmington Cousins
 
How to create an effective business website
How to create an effective business websiteHow to create an effective business website
How to create an effective business website
 
Web Design Malaysia
Web Design MalaysiaWeb Design Malaysia
Web Design Malaysia
 
Your small biz website: Light the fuse or thank the Muse?
Your small biz website: Light the fuse or thank the Muse?Your small biz website: Light the fuse or thank the Muse?
Your small biz website: Light the fuse or thank the Muse?
 
Small business owners and perceived website mysteries
Small business owners and perceived website mysteriesSmall business owners and perceived website mysteries
Small business owners and perceived website mysteries
 
TrackJumper - The Early Days
TrackJumper - The Early DaysTrackJumper - The Early Days
TrackJumper - The Early Days
 
How To Design A Great Website
How To Design A Great WebsiteHow To Design A Great Website
How To Design A Great Website
 
Developing Successful Websites
Developing Successful WebsitesDeveloping Successful Websites
Developing Successful Websites
 

Viewers also liked

Lecture 7 Answers
Lecture 7 AnswersLecture 7 Answers
Lecture 7 Answersis4030.ray
 
Lecture 10 Answers
Lecture 10 AnswersLecture 10 Answers
Lecture 10 Answersis4030.ray
 
Junior Boys 13.11.09
Junior Boys 13.11.09Junior Boys 13.11.09
Junior Boys 13.11.09Kavantgarde
 
Lecture 6 Footnotes& Answers
Lecture 6  Footnotes& AnswersLecture 6  Footnotes& Answers
Lecture 6 Footnotes& Answersis4030.ray
 
Miss Prism & The Girl In The Dirty Shirt
Miss Prism & The Girl In The Dirty ShirtMiss Prism & The Girl In The Dirty Shirt
Miss Prism & The Girl In The Dirty ShirtKavantgarde
 
September Leaves & Lowstar 30.10.09
September Leaves & Lowstar 30.10.09September Leaves & Lowstar 30.10.09
September Leaves & Lowstar 30.10.09Kavantgarde
 
Lecture 4 Footnotes&Answers
Lecture 4  Footnotes&AnswersLecture 4  Footnotes&Answers
Lecture 4 Footnotes&Answersis4030.ray
 
Teenage Kicks Funeral Party
Teenage Kicks Funeral PartyTeenage Kicks Funeral Party
Teenage Kicks Funeral PartyKavantgarde
 
Geometric Figures (2nd-3rd Grade)
Geometric Figures (2nd-3rd Grade)Geometric Figures (2nd-3rd Grade)
Geometric Figures (2nd-3rd Grade)aecpolo
 

Viewers also liked (9)

Lecture 7 Answers
Lecture 7 AnswersLecture 7 Answers
Lecture 7 Answers
 
Lecture 10 Answers
Lecture 10 AnswersLecture 10 Answers
Lecture 10 Answers
 
Junior Boys 13.11.09
Junior Boys 13.11.09Junior Boys 13.11.09
Junior Boys 13.11.09
 
Lecture 6 Footnotes& Answers
Lecture 6  Footnotes& AnswersLecture 6  Footnotes& Answers
Lecture 6 Footnotes& Answers
 
Miss Prism & The Girl In The Dirty Shirt
Miss Prism & The Girl In The Dirty ShirtMiss Prism & The Girl In The Dirty Shirt
Miss Prism & The Girl In The Dirty Shirt
 
September Leaves & Lowstar 30.10.09
September Leaves & Lowstar 30.10.09September Leaves & Lowstar 30.10.09
September Leaves & Lowstar 30.10.09
 
Lecture 4 Footnotes&Answers
Lecture 4  Footnotes&AnswersLecture 4  Footnotes&Answers
Lecture 4 Footnotes&Answers
 
Teenage Kicks Funeral Party
Teenage Kicks Funeral PartyTeenage Kicks Funeral Party
Teenage Kicks Funeral Party
 
Geometric Figures (2nd-3rd Grade)
Geometric Figures (2nd-3rd Grade)Geometric Figures (2nd-3rd Grade)
Geometric Figures (2nd-3rd Grade)
 

Lecture 2 Footnotes&Answers

  • 1. IS4 030 - Website Design for e-Commerce By SMIEEE, SMACM, MACS E-mail: [email_address] Room: P7919 Consultation Hours: 3:30 - 5:30pm Monday Lecture Two -Website Design Principles
  • 2. An example of a very unattractive site. What’s its purpose?
  • 3. A site with a theme and a clear image/purpose.
  • 4. How to create a Web page which can make use of fancy graphics and yet supporting low bandwidth access?
  • 5. Is an unified (consistent) page design always good? Why and Why not?
  • 6. Avoid backgrounds that wash out your text.
  • 7.

Editor's Notes

  1. This Web site had several glaring issues. First, it is loaded with graphics that take a considerable amount of time to download. Second, the user is required to scroll down through a number of meaningless graphics before getting any real information. Third, and most annoying, is the multi-colored border around the Web page that continues to change colors (like a neon sign) as you scroll through this page.
  2. The use of graphics and various types of text at the Toyota Web site makes for a balanced and attractive look. Although this Web page consists of eight individual graphics, each one is optimized for fast downloading and subtle enough to not jump off the page at you. Even with eight individual graphics on this Web page, it is only a total of 18500 bytes. Over a 28.8 Kbps modem, this page will generally download in 5.13 seconds. Every network connection type that is faster than a 28.8 Kbps modem will download this page in less than 5 seconds — this is acceptable for most Web users.
  3. Use the alt attribute within the image tag to show the textual description only. When a user is connected using low bandwidth, s/he can disable graphic display on her/his browser. Under such circumstance, only the text associated with the alt attribute will be shown. e.g., <IMG height=30 alt="mail.gif (5k bytes)" src="http://personal.cityu.edu.hk/~raylau/images/Mail.gif" width=30>
  4. Consistency is good in general e.g., it facilitate users ’ navigation. However, if consistency is over used in a site design, it may also make the visitors feel bored.
  5. Background images can provide an attractive “ texture ” to your Web page, but be sure not wash out your text so that users can no longer read it. Strive for a contrast between your background coloring and your text coloring. The background on this Web page eliminates black text as a viable text color because while most of the background is white, which is the direct contrast to black, small portions of the background are black to round off the shape of the bubbles. While it may or may not be attractive, red text would probably in contrast enough to both the white and black in this background to return the text on the page to at least readable.
  6. Applying consistent Theme and structure; Applying consistent font and background color; Applying consistent graphics and icons;