Webdesign New

2,711 views

Published on

WEB DESIGN

Published in: Technology, Design
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,711
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
192
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Webdesign New

  1. 1. Managing information resources in the digital age A CSE training programme New Delhi, November 21-25, 2006 DESIGNING FOR THE WEB
  2. 2. TOPICS <ul><li>Why do we need design ? </li></ul><ul><li>What is a website ? </li></ul><ul><li>Website structure </li></ul><ul><li>Types of website </li></ul><ul><li>5. Basic layout for web design </li></ul><ul><li>6. Design for simplicity </li></ul><ul><li>7. Elements for homepage design </li></ul><ul><li>Colours </li></ul><ul><li>Contrast </li></ul><ul><li>Typography </li></ul><ul><li>11. Images for the web </li></ul>
  3. 3. 1 WHY DO WE NEED DESIGN
  4. 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. 5. 2 WHAT IS A WEBSITE ?
  6. 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. 7. 3 WEBSITE STRUCTURE
  8. 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. 9. WEBSITE STRUCTURE www.unaids.org/en/
  10. 10. WEBSITE STRUCTURE www.lakme.com/ENG/index.htm
  11. 11. 4 TYPES OF WEBSITES
  12. 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. 13. 5 BASIC LAYOUT FOR WEB DESIGN
  14. 14. ? BASIC LAYOUT FOR WEB DESIGN
  15. 15. BASIC LAYOUT FOR WEB DESIGN A two column layout for a simple basic website
  16. 16. BASIC LAYOUT FOR WEB DESIGN www.geocities.com/nankingatrocities/Introduction/introduction.htm
  17. 17. BASIC LAYOUT FOR WEB DESIGN A three column layout for a simple basic website
  18. 18. BASIC LAYOUT FOR WEB DESIGN www.undp.org/
  19. 19. BASIC LAYOUT FOR WEB DESIGN www.ebay.com/ www.fedex.com/us/
  20. 20. 6 DESIGN FOR SIMPLICITY
  21. 21. DESIGN FOR SIMPLICITY KISS Principle “ Keep it Simple and Sweet” Web design is all about Simplicity <ul><li>- Web User Interface should be simple and logical </li></ul><ul><li>- I t should not distract a visitor </li></ul><ul><li>Garishly designed websites look amateurish </li></ul><ul><li>Always design for the user not for your boss! </li></ul>
  22. 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. 23. 7 ELEMENTS OF HOMEPAGE DESIGN
  24. 24. ELEMENTS OF HOMEPAGE DESIGN <ul><li>A basic website will have the </li></ul><ul><li>following elements on </li></ul><ul><li>the HOMEPAGE </li></ul><ul><li>- Logo </li></ul><ul><li>- Banner/Title (Organization Name) </li></ul><ul><li>Search Feature </li></ul><ul><li>- Feedback & Interactives </li></ul><ul><li>- Color and Images (Give life to Homepage) </li></ul><ul><li>Navigation (Primary, Secondary and Global) </li></ul><ul><li>- Prioritizing Information on the Homepage </li></ul>
  25. 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. 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. 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. 28. ELEMENTS OF HOMEPAGE DESIGN Website Navigation Continued . . . Your website’s steering wheel www.unaids.org/ <ul><li>Breadcrumbs or breadcrumb trails </li></ul><ul><li>is a navigation technique </li></ul><ul><li>purpose is to give users a </li></ul><ul><li>way to keep track of their </li></ul><ul><li>location within programs or </li></ul><ul><li>documents. </li></ul>
  29. 29. Prioritizing the Search Bar on the homepage ELEMENTS OF HOMEPAGE DESIGN <ul><li>A strong recommendation for the homepage </li></ul><ul><li>treatment are fairly straightforward </li></ul><ul><li>make it visible </li></ul><ul><li>make it wide </li></ul><ul><li>keep it simple </li></ul>
  30. 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. 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. 32. ELEMENTS OF HOMEPAGE DESIGN Prioritizing Homepage content Designing above the fold ! <ul><li>Inverted gradient / top heavy </li></ul><ul><li>(Most Important Information on top) </li></ul><ul><li>Limited space, users will look </li></ul><ul><li>at your site typically for a </li></ul><ul><li>few seconds </li></ul>Fold
  33. 33. ELEMENTS OF HOMEPAGE DESIGN Amount of information displayed without a single scroll
  34. 34. ELEMENTS OF HOMEPAGE DESIGN Amount of information displayed after scrolling
  35. 35. ELEMENTS OF HOMEPAGE DESIGN Scroll free website www.fedex.com/us/
  36. 36. ELEMENTS OF HOMEPAGE DESIGN Organize information clearly to show a clear & logical structure
  37. 37. ELEMENTS OF HOMEPAGE DESIGN Organizing information www.mothernature.com
  38. 38. ELEMENTS OF HOMEPAGE DESIGN Group related information to decrease spending time searching for information www.who.int
  39. 39. ELEMENTS OF HOMEPAGE DESIGN Grouping related information www.worldbank.org
  40. 40. ELEMENTS OF HOMEPAGE DESIGN Icons
  41. 41. COLORS / CONTRAST 8 C O L O U R S
  42. 42. COLOURS <ul><li>Helps establish the brand identity </li></ul><ul><li>Always use 3 Color palette for the web </li></ul>BBC website MSN website
  43. 43. COLOURS BBC website MSN website Help you identify sections within a website
  44. 44. COLOURS Colors are good visual indicators to links & where you are in a website BBC website
  45. 45. <ul><li>Using the wrong colors is likely to turn your visitors away. </li></ul><ul><li>- Use of too many colors makes it look complicated </li></ul>COLOURS However
  46. 46. COLOURS An example of a website with bad design sense
  47. 47. COLOURS Some color schemes While designing always try and use the three color palette scheme Bright Corporate Pleasant Relaxing
  48. 48. 9 CONTRAST
  49. 49. <ul><li>A well balanced contrast between text and its background color is what you need to keep in mind </li></ul>CONTRAST
  50. 50. CONTRAST Black text on white background stands out the best
  51. 51. CONTRAST At times a color maybe good for the background but may not be applicable for your text
  52. 52. CONTRAST The website below shows how information maybe lost if there isn’t much contrast Sport website
  53. 53. CONTRAST Whereas this site has its information displayed much better Entertainment website
  54. 54. 1 0 T Y P O G R A P H Y
  55. 55. Typography Web-Safe Fonts for Your Site <ul><li>You want to choose font types that </li></ul><ul><li>- suits your website </li></ul><ul><li>- easy to read </li></ul><ul><li>available to many browsers </li></ul><ul><li>& operating systems </li></ul>
  56. 56. Typography There are basically two types of fonts: serif and sans serif .
  57. 57. Typography The most popular font types Arial ABCDEFabcdef Verdana ABCDEFabcdef Times New Roman ABCDEFabcdef
  58. 58. Typography The ideal size for you to use and for the users to read is between 11–12pt
  59. 59. Typography Good text size and easy readability www.grist.org
  60. 60. Typography A few websites with good text size and easy readability www.msn.com
  61. 61. Typography Avoid making text long horizontally as it becomes harder to read
  62. 62. 1 1 IMAGES FOR THE WEB
  63. 63. IMAGES FOR THE WEB <ul><li>Images </li></ul><ul><li>Add life to Homepage </li></ul><ul><li>- But at the same time there should not </li></ul><ul><li>be an overload (Can increase download time) </li></ul><ul><li>Try using relevant images and only when required </li></ul>
  64. 64. IMAGES FOR THE WEB A page without images can look dull and bore your users
  65. 65. IMAGES FOR THE WEB Adding an image or two can make the page much more visually appealing
  66. 66. IMAGES FOR THE WEB www.bbc.co.uk News website Homepage Some examples of the websites using images …
  67. 67. IMAGES FOR THE WEB www.bbc.co.uk Some examples of the websites using images … News website Inside page
  68. 68. IMAGES FOR THE WEB www.mondomix.com Some examples of the websites using images … Entertainment website Homepage
  69. 69. IMAGES FOR THE WEB www.mondomix.com Some examples of the websites using images … Entertainment website Inside page
  70. 70. IMAGES FOR THE WEB www.unicef.org Some examples of the websites using images … NGO website Homepage
  71. 71. IMAGES FOR THE WEB www.unicef.org Some examples of the websites using images … Inside page NGO website
  72. 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. 73. A few other websites that faced similar problems.. www.cinematicorchestra.com Entertainment website IMAGES FOR THE WEB
  74. 74. DESIGN SUMMARY Always design for Simplicity and Consistency Don’t confuse the user!
  75. 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

×