WEB DESIGN

1. Managing information resources in the digital age A CSE training programme New Delhi, November 21-25, 2006 DESIGNING FOR THE WEB

3. 1 WHY DO WE NEED DESIGN

4. WHY DO WE NEED DESIGN? To bring order to visual chaos Brings aesthetics, functionality Aids in understanding the message To make things pleasing to the eye DESIGN

5. 2 WHAT IS A WEBSITE ?

6. WHAT IS A WEBSITE - Difference between homepage and inside page - Different types of websites (e.g.. Training, Teaching, Reference, Entertainment/Magazines, News, E-Commerce) - Static and dynamic Definition: A Web site is a related collection of World Wide Web (www) Files that includes a beginning file called a Home Page

7. 3 WEBSITE STRUCTURE

8. WEBSITE STRUCTURE A Simple Website structure for a company/NGO looks like this About Us Services Products Partners Contact Us FAQ’s Search Feedback Sitemap Home Page

9. WEBSITE STRUCTURE www.unaids.org/en/

10. WEBSITE STRUCTURE www.lakme.com/ENG/index.htm

11. 4 TYPES OF WEBSITES

12. TYPES OF WEBSITE There are many different types of websites. Some of the most common ones are listed below: Corporate www.thiekos.com E-Commerce www.amazon.com News www.bbc.co.uk Entertainment www.mtv.com Personal www.hillmancurtis.com Blogs www.blogger.com/start

13. 5 BASIC LAYOUT FOR WEB DESIGN

14. ? BASIC LAYOUT FOR WEB DESIGN

15. BASIC LAYOUT FOR WEB DESIGN A two column layout for a simple basic website

16. BASIC LAYOUT FOR WEB DESIGN www.geocities.com/nankingatrocities/Introduction/introduction.htm

17. BASIC LAYOUT FOR WEB DESIGN A three column layout for a simple basic website

18. BASIC LAYOUT FOR WEB DESIGN www.undp.org/

19. BASIC LAYOUT FOR WEB DESIGN www.ebay.com/ www.fedex.com/us/

20. 6 DESIGN FOR SIMPLICITY

22. DESIGN FOR SIMPLICITY Rule for Simple Homepage Design Reduce Clutter and Use White Space Example of Bad Web Design Unorganized Lots of Clutter/ Poor Use of White Space Example of Good Web Design Organized No Clutter and Proper use of White Space

23. 7 ELEMENTS OF HOMEPAGE DESIGN

25. ELEMENTS OF HOMEPAGE DESIGN Website Navigation - has two main functions 1. to tell the user where they are 2. to enable the user to go somewhere else Any good navigation scheme should, at a glance, answer the top three questions every user has at the back of their mind on any page: 1. Where am I? (Present) 2. Where can I go? (Future) 3. Where have I been? (Past) Three simple guidelines for trustworthy navigation One: Never, ever link to the page you’re on Two: Show where you are Three: Think before you link

26. ELEMENTS OF HOMEPAGE DESIGN Website Navigation Continued . . . Broad Categories Three Broad categories Primary Navigation Main sections of the website Secondary Navigation is mainly Section Specific (Also termed as sub links at times) Global Navigation Displayed on all the pages but has generic information

27. ELEMENTS OF HOMEPAGE DESIGN Website Navigation Continued . . . Your website’s steering wheel TOP LEFT RIGHT www.kodak.com www.who.int www.undp.org.in Recommended Not Recommended Unless language specific

30. TOP LEFT TOP RIGHT BOTTOM LEFT www.unicef.org www.who.int www.undp.org.in Prioritizing the Search Bar on the homepage ELEMENTS OF HOMEPAGE DESIGN

31. ELEMENTS OF HOMEPAGE DESIGN Always Design for Consistency Homepage Inside Page Try to keep element like logo, title, navigation, search etc. on the Homepage and all the inside pages at the same place to avoid confusion

33. ELEMENTS OF HOMEPAGE DESIGN Amount of information displayed without a single scroll

34. ELEMENTS OF HOMEPAGE DESIGN Amount of information displayed after scrolling

35. ELEMENTS OF HOMEPAGE DESIGN Scroll free website www.fedex.com/us/

36. ELEMENTS OF HOMEPAGE DESIGN Organize information clearly to show a clear & logical structure

37. ELEMENTS OF HOMEPAGE DESIGN Organizing information www.mothernature.com

38. ELEMENTS OF HOMEPAGE DESIGN Group related information to decrease spending time searching for information www.who.int

39. ELEMENTS OF HOMEPAGE DESIGN Grouping related information www.worldbank.org

40. ELEMENTS OF HOMEPAGE DESIGN Icons

41. COLORS / CONTRAST 8 C O L O U R S

43. COLOURS BBC website MSN website Help you identify sections within a website

44. COLOURS Colors are good visual indicators to links & where you are in a website BBC website

46. COLOURS An example of a website with bad design sense

47. COLOURS Some color schemes While designing always try and use the three color palette scheme Bright Corporate Pleasant Relaxing

48. 9 CONTRAST

50. CONTRAST Black text on white background stands out the best

51. CONTRAST At times a color maybe good for the background but may not be applicable for your text

52. CONTRAST The website below shows how information maybe lost if there isn’t much contrast Sport website

53. CONTRAST Whereas this site has its information displayed much better Entertainment website

54. 1 0 T Y P O G R A P H Y

56. Typography There are basically two types of fonts: serif and sans serif .

57. Typography The most popular font types Arial ABCDEFabcdef Verdana ABCDEFabcdef Times New Roman ABCDEFabcdef

58. Typography The ideal size for you to use and for the users to read is between 11–12pt

59. Typography Good text size and easy readability www.grist.org

60. Typography A few websites with good text size and easy readability www.msn.com

61. Typography Avoid making text long horizontally as it becomes harder to read

62. 1 1 IMAGES FOR THE WEB

64. IMAGES FOR THE WEB A page without images can look dull and bore your users

65. IMAGES FOR THE WEB Adding an image or two can make the page much more visually appealing

66. IMAGES FOR THE WEB www.bbc.co.uk News website Homepage Some examples of the websites using images …

67. IMAGES FOR THE WEB www.bbc.co.uk Some examples of the websites using images … News website Inside page

68. IMAGES FOR THE WEB www.mondomix.com Some examples of the websites using images … Entertainment website Homepage

69. IMAGES FOR THE WEB www.mondomix.com Some examples of the websites using images … Entertainment website Inside page

70. IMAGES FOR THE WEB www.unicef.org Some examples of the websites using images … NGO website Homepage

71. IMAGES FOR THE WEB www.unicef.org Some examples of the websites using images … Inside page NGO website

72. However, if your websites contains too many images / heavy files….. this will lead to a problem. In most cases they’ll have to wait as your website downloads . www.mp3.com Entertainment website IMAGES FOR THE WEB

73. A few other websites that faced similar problems.. www.cinematicorchestra.com Entertainment website IMAGES FOR THE WEB

74. DESIGN SUMMARY Always design for Simplicity and Consistency Don’t confuse the user!

75. Thank You ! For more information please contact: CENTRE FOR SCIENCE AND ENVIRONMENT 41, Tughlakabad Institutional Area, New Delhi. India - 110062 Tel: +91-11 29955124; 29956110; 29956394 Fax: +91-11 29955879 E-mail: cse@cseindia.org