1. Web-based Application Development Lecture 8 February 2, 2006 Anita Raja

2. Agenda Toward a Better Design – WWG Chapter 3

3. The Web Wizard’s Guide to Web Design Chapter 3 Toward a Better Design

4. Observing and Critiquing Display of Information – Text? – Images? – Video? – Sound? – Lists or tables?

5. Observing and Critiquing Navigation – Whose site is this? – Where am I in the site? – What else is available? – Where should I go next? – How do I find what I’m looking for?

6. Observing and Critiquing Choosing and Finding – How do I select items to view? – How do I search the site’s contents? – Is there a site map?

7. Observing and Critiquing Organization’s Identity – Use of color – Fonts – Logos – Design features

8. Observing and Critiquing Feedback and Interaction – Forms – Discussion forums – Chat rooms – Other?

9. Observing and Critiquing Analysis of other sites (especially competitors) helps you plan your own

10. Guidelines for Site Design No hard and fast rules Instead, guiding principles

11. Guidelines for Site Design Aspect ratio – Width vs. height – Computer screens are 4:3 4 units wide by 3 units high – 12” wide = 9” high – 800 pixels wide = 600 pixels high – Visitors see your site through a “window” that’s wider than it is tall.

12. Guidelines for Site Design WidthHeight Old640480 Standard800600 Modern1024768

13. Guidelines for Site Design Whole screen is not available! Your content must fit inside the browser window

14. Guidelines for Site Design Where does your eye naturally go on a new printed page?

15. Guidelines for Site Design Where does your eye naturally go on a new Web page? ? We don’t know yet

16. Guidelines for Site Design What do we know? – Top is better than bottom – Above the scroll is better than below – Movement is better than motionless – Fewer items are better than more

17. Guidelines for Site Design Traditions that still work: – Titles at the top – “Next” buttons towards the right side – For navigation/menu items: “Up” is more general – buttons towards to top “Down is more specific – buttons towards the bottom Up Down

18. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too)

19. Welcome to the new online course from Addison Wesley/Benjamin Cummings to support Addison- Wesley's Web Wizard Series, 1/e by Editor Addison-Wesley. Developed by educators, CourseCompass online content features the most advanced educational technology available today.

20. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too) – NEVER display text over a background image

21. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology. In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web. CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

22. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too) – NEVER display text over a background image – Best line length is 10-12 words

23. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

24. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too) – NEVER display text over a background image – Best line length is 10-12 words – Use 12-point standard system fonts Times, Helvetica, Arial, Times Roman Verdana, Georgia specifically designed for screens Better not to specify and let browser choose

25. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Times New Roman Arial Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Verdana Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Georgia

26. Algerian Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Harlow Solid Italic Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College Old English Text

27. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too) – NEVER display text over a background image – Best line length is 10-12 words – Use 12-point standard system fonts – Serif fonts for text, san-serif for titles

28. This is a serif font This is a sans-serif font

29. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too) – NEVER display text over a background image – Best line length is 10-12 words – Use 12-point standard system fonts – Serif fonts for text, san-serif for titles – Limit yourself to 2 fonts and 2 sizes per page One size for titles, the other for text All titles same size, all text same size

30. Early Years Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television.the Queen's College He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology. 1978 In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN 1981 From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system.1989 In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

31. Guidelines for Site Design Making text easy to read – Black text on white background (prints better too) – NEVER display text over a background image – Best line length is 10-12 words – Use 12-point standard system fonts – Serif fonts for text, san-serif for titles – Limit yourself to 2 fonts and 2 sizes per page – Avoid words set in all caps – SHOUTING!

32. Guidelines for Site Design Making text easy to read – Headings should contrast with body text Different font Different size Contrasting color Surround with white space

33. Early Years. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College 1978. In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN 1981. From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. 1989. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

34. Early Years. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College 1978. In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN 1981. From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. 1989. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

35. Early Years Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College 1978In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN 1981From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. 1989In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

36. Guidelines for Site Design Making text easy to read – Headings should contrast with body text – Separate paragraphs Blank line Indented first line Don’t use both

37. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

38. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

39. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

40. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is-what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

41. Guidelines for Site Design Making text easy to read – Headings should contrast with body text – Separate paragraphs – Leave white space around text Always left and right Above and below as necessary

42. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is- what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

43. Tim Berners-Lee graduated from the Queen's College at Oxford University, England, 1976. Whilst there he built his first computer with a soldering iron, TTL gates, an M6800 processor and an old television. He spent two years with Plessey Telecommunications Ltd (Poole, Dorset, UK) a major UK Telecom equipment manufacturer, working on distributed transaction systems, message relays, and bar code technology.the Queen's College In 1978 Tim left Plessey to join D.G Nash Ltd (Ferndown, Dorset, UK), where he wrote among other things typesetting software for intelligent printers, and a multitasking operating system. A year and a half spent as an independent consultant included a six month stint (Jun-Dec 1980)as consultant software engineer at CERN, the European Particle Physics Laboratory in Geneva, Switzerland. Whilst there, he wrote for his own private use his first program for storing information including using random associations. Named "Enquire", and never published, this program formed the conceptual basis for the future development of the World Wide Web.CERN From 1981 until 1984, Tim worked at John Poole's Image Computer Systems Ltd, with technical design responsibility. Work here included real time control firmware, graphics and communications software, and a generic macro language. In 1984, he took up a fellowship at CERN, to work on distributed real-time systems for scientific data acquisition and system control. Among other things, he worked on FASTBUS system software and designed a heterogeneous remote procedure call system. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier "Enquire" work, it was designed to allow people to work together by combining their knowledge in a web of hypertext documents. He wrote the first World Wide Web server, "httpd", and the first client, "WorldWideWeb" a what-you-see-is- what-you-get hypertext browser/editor which ran in the NeXTStep environment. This work was started in October 1990, and the program "WorldWideWeb" first made available within CERN in December, and on the Internet at large in the summer of 1991.

44. Guidelines for Site Design Making text easy to read – Headings should contrast with body text – Separate paragraphs – Leave white space around text – Organize around a single axis Line up text, graphics, images, etc. Left, center, or right Only one

45. Guidelines for Site Design Making text easy to read – Headings should contrast with body text – Separate paragraphs – Leave white space around text – Organize around a single axis – Balance visually Top – bottom Left – right Don’t concentrate items in one area

46. Guidelines for Site Design Making text easy to read – Headings should contrast with body text – Separate paragraphs – Leave white space around text – Organize around a single axis – Balance visually – The simpler the better Every element you add competes for the user’s attention Don’t distract the user from the page’s central ideadistract

47. Designing for Eye Appeal Color Wheel Primary colors – Yellow – Blue – Red Secondary colors – Orange – Green – Violet Tertiary colors

48. Designing for Eye Appeal Harmony is pleasing to the eye – Visually balanced – Engages viewer – Creates a sense of order Not harmonious – Boring Bland, under-stimulating – Chaotic Cannot be organized

49. Designing for Eye Appeal Extreme unity = under stimulation Extreme complexity = over stimulation

50. Designing for Eye Appeal Cool colors – Blue, green, violet – Business-like, detached Warm colors – Red, yellow, orange – Fiery, provocative

51. Designing for Eye Appeal Complementary colors – Opposite each other – Maximum contrast

52. Designing for Eye Appeal Analogous colors – 3 adjacent colors

53. Designing for Eye Appeal Shade – Add black Tint – Add white For more about the color wheel or color wheel About color in generalgeneral

54. Designing for Eye Appeal Frames – Divide a single browser window into separate, independent windows – Keep certain elements (menus): always visible and in the same place – Maintain identity (title on every page)

55. Designing for Eye Appeal Scrolling – Inefficient process (requires too many steps) – Web pages are more like TVs than newspapers User control – 24-hour, all-you-can-eat buffet – “Life is short, start with dessert” Simplicity and courtesy – Straight-forward designs – Make sense to the user

56. Sketching, Prototyping, and Testing Sketching – Paper – Microsoft Word – Photoshop – Add callout

57. Sketching, Prototyping, and Testing Testing – Select reviewers Sponsor Audience Colleague

58. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site Copy of Statement of Purpose Explain special functions of site

59. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site – List of questions Specific yet open-ended “What might be added …?”

60. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site – List of questions – Make it easy to respond Post online form, take phone calls, self-addressed envelope to return surveys Make simple Yes/No, scale of 1-5 type choices.

61. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site – List of questions – Make it easy to respond – Deliver package (go ahead and post site?)

62. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site – List of questions – Make it easy to respond – Deliver package (go ahead and post site?) – Thank reviewers

63. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site – List of questions – Make it easy to respond – Deliver package (go ahead and post site?) – Thank reviewers – Consider all suggestions

64. Sketching, Prototyping, and Testing Testing – Select reviewers – Explain the purpose of the site – List of questions – Make it easy to respond – Deliver package (go ahead and post site?) – Thank reviewers – Consider all suggestions – Revise & test again

65. Assignment Hands-On Exercise #1, p. 78 (modified) Using the same Web site you chose for the first Hands-On Exercise (on p. 30) – Answer the questions on Assignments page.

66. Resources Web Content Accessibility Guidelines: http://www.w3.org/TR/WAI-WEBCONTENT/ Web Content Accessibility Guidelines http://www.w3.org/TR/WAI-WEBCONTENT/ What makes a great web site? http://www.webreference.com/greatsite.html What makes a great web site? Art and the Zen of Web Sites http://www.tlc-systems.com/webtips.shtml