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
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
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
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
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
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
28.
29.
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
32.
33. ELEMENTS OF HOMEPAGE DESIGN Amount of information displayed without a single scroll
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
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