1. Guidelines for Site Design Toward a Better Design

2. Lecture Concepts Focus on designing a web site Observe and critique existing sites Develop key design concepts and guidelines Provide important details on designing readable text Sketching and prototyping a site design

3. Lecture Objectives Understand how existing sites incorporate key design concepts Learn how to apply guidelines for good site design Learn to use the following tools to create eye appeal: Color Balance Alignment Other tools Become aware of the process of sketching, prototyping and testing your design

4. Aspect Ratio and Display Size Not all computer screens are created equal – but they share common characteristics. Aspect Ratio: The relationship between the height and width of the computer screen. Most computers screens have a ration of 4:3 4 units wide and three units high If a screen is 800 pixels wide Then it is 600 pixels high Visitors will be seeing everything through a rectangular window

5. Aspect Ratio and Display Size 12 inches/800 pixels 9 inches/600 pixels Do the math: if the monitor is 1200 pixels wide then, how tall is it?

6. Aspect Ration and Display Size Display Size Majority of users have their display size set to: 1024 x 768 Some use a larger size Some still at 800 x 600 http://www.w3schools.com/browsers/browsers_display.asp

8. Consider the browser’s borders and title bars

9. Actual design size is smallerFor most users, using the dimensions 760 x 420 72 pixels per inch (screen resolution) 10.1 inches x 5.6 inches The following page has recommended screen sizes.

10. Aspect Ration and Display Size

11. Aspect Ration and Display Size Remember: Whole screen is not available as design space. Your content MUST fit inside the browser window

12. The Roving Eye: Page Layout Where does your eye naturally go in a book, magazine or newspaper? Yup! Upper right corner of the right page

13. The Roving Eye: Page Layout Where does your eye naturally go on a new Web page? We know it goes to the top of the screen. Items at the bottom less likely to be viewed Dynamic items viewed first. Graphics Bright colors Animated objects

14. The Roving Eye: Page Layout RECAP: We know: Location: Top is better than bottom Above the scroll is better than below Design: Movement is better than motionless Fewer items are better than more KISS – Keep It Simple Students

15. The Roving Eye: Page Layout Traditions that still work: Titles at or near 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

16. Text on a Computer Screen PC monitor’s have low resolution making it difficult to read text. Let’s examine some guidelines

17. Text on a Computer Screen View these examples: 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. 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. 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.

18. Text on a Computer Screen Black text on a plain white background is generally easiest to read. Dark background with light text is may produce eyestrain Won’t print as well Best line length – 10-12 words per line. Longer lines make it harder for the reader to capture all the words in a single glance. For younger and older viewers – consider 8-10 words per line. NEVER display text over a background image.

19. 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. 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. 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. Text over an Image

20. Text on a Computer Screen 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

21. Text Samples 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. Times New Roman 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. 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. 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. Georgia

22. Text on a Computer Screen Use serif fonts for text Use sans-serif fonts for titles Serifs are the fancy edges or flourishes on letters (the font used in this slide show is a serif font) (Times New Roman, Georgia, Garamond) Sans (French for without) are plainer fonts (Arial, Verdana, Helvetica)

23. Serif vs. Sans Serif This is a sans-serif font This is a serif font

24. Text on a Computer Screen Limit yourself to 2 fonts and 2-3 sizes per page One or two size for titles (title and subtitle) One size for body text

25. Font Samples 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. 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. 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.

26. Text on a Computer Screen Avoid words set in all caps You don’t need to SHOUT AT YOUR AUDIENCE! Use upper case for single word warnings STOP DANGER

27. Text on a Computer Screen Headings and subheads should be used to organize the page They break up the page and make it easier to find a topic of interest Headings should contrast with body text Set them apart by using: Different font Different size Contrasting color Surround with white space

28. Compare and Contrast 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. 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. 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.

29. Compare and Contrast 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. 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. 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.

30. Compare and Contrast Early YearsTim 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. 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. 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.

31. Text on a Computer Screen Separate paragraphs by using Line space (add a blank line) Indented first line Use one or the other - don’t use both

32. No Indents or Spacing 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. 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. 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.

33. First Line Indent 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. 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. 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.

34. Space Between Paragraphs 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. 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. 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.

35. First Line Indent and Space Between Paragraphs 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. 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. 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.

36. Text on a Computer Screen Leave plenty of white space around text White space gives the eye a resting place The human eye needs room to roam when reading The eye especially likes white space to the left and right of a column of text Allow white space between paragraphs of text White space doesn’t have to be white – it’s really just blank space

37. No White Space 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. 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. 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. White Space 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. 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. 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. Text on a Computer Screen Be sure your page is visually balanced From top to bottom Left to right Spread things out around the page in a reasonable manner Organize around a single axis Line up text, graphics, images, etc. Left, center, or right Only one

40. Text on a Computer Screen KISS – Keep It Simple Student The simpler the better Every element you add competes for the user’s attention Don’t distract the user from the page’s central idea A simple page with a few visual and text elements is easier to read than a page with too much STUFF!