Guidelines for Site Design<br />Toward a Better Design<br />
Lecture Concepts<br />Focus on designing a web site<br />Observe and critique existing sites<br />Develop key design conce...
Lecture Objectives<br />Understand how existing sites incorporate key design concepts<br />Learn how to apply guidelines f...
Aspect Ratio and Display Size<br />Not all computer screens are created equal – but they share common characteristics.<br ...
Aspect Ratio and Display Size<br />12 inches/800 pixels<br />9 inches/600 pixels<br />Do the math:  if the monitor is 1200...
Aspect Ration and Display Size<br />Display Size<br />Majority of users have their display size set to:<br />1024 x 768<br...
Aspect Ration and Display Size<br />Display Size<br /><ul><li>Just because the monitor is set to a specific resolution doe...
Consider the  browser’s borders and title bars
Actual design size is smaller</li></ul>For most users, using the dimensions 760 x 420<br />72 pixels per inch (screen reso...
Aspect Ration and Display Size<br />
Aspect Ration and Display Size<br />Remember:  Whole screen is not available as design space.<br />Your content MUST fit i...
The Roving Eye:  Page Layout<br />Where does your eye naturally go in a book, magazine or newspaper?<br />Yup!  <br />Uppe...
The Roving Eye:  Page Layout<br />Where does your eye naturally go on a new Web page?<br />We know it goes to the top of t...
The Roving Eye:  Page Layout<br />RECAP:  We know:<br />Location:  <br />Top is better than bottom<br />Above the scroll i...
The Roving Eye:  Page Layout<br />Traditions that still work:<br />Titles at or near the top<br />“Next” buttons towards t...
Text on a Computer Screen<br />PC monitor’s have low resolution making it difficult to read text.<br />Let’s examine some ...
Text on a Computer Screen<br />View these examples:<br />Welcome to the new online course from Addison Wesley/Benjamin Cum...
Text on a Computer Screen<br />Black text on a plain white background is generally easiest to read.<br />Dark background w...
Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976. Whilst there he built his fir...
Text on a Computer Screen<br />Use 12-point standard system fonts<br />Times, Helvetica, Arial, Times Roman<br />Verdana, ...
Text Samples<br />Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976. Whilst ther...
Text on a Computer Screen<br />Use serif fonts for text<br />Use sans-serif fonts for titles<br />Serifs are the fancy edg...
Serif vs. Sans Serif<br />This is a sans-serif font<br />This is a serif font<br />
Text on a Computer Screen<br />Limit yourself to 2 fonts and 2-3 sizes per page<br />One or two size for titles (title and...
Font Samples<br />Early Years<br />Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, ...
Text on a Computer Screen<br />Avoid words set in all caps<br />You don’t need to SHOUT  AT YOUR AUDIENCE!<br />Use upper ...
Text on a Computer Screen<br />Headings and subheads should be used to organize the page<br />They break up the page and m...
Compare and Contrast<br />Early Years.  Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, Engl...
Compare and Contrast<br />Early Years.  Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, Engl...
Compare and Contrast<br />Early YearsTim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England...
Text on a Computer Screen<br />Separate paragraphs by using <br />Line space (add a blank line)<br />Indented first line<b...
No Indents or Spacing<br />Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976. Wh...
First Line Indent<br /> Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976. Whils...
Space Between Paragraphs<br /> Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976...
First Line Indent and Space Between Paragraphs<br /> Tim Berners-Lee graduated from the Queen&apos;s College at Oxford Uni...
Text on a Computer Screen<br />Leave plenty of white space around text<br />White space gives the eye a resting place<br /...
No White Space<br />Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976. Whilst th...
White Space<br />Tim Berners-Lee graduated from the Queen&apos;s College at Oxford University, England, 1976. Whilst there...
Upcoming SlideShare
Loading in...5
×

Week 5 - Guidelines For Site Design - 2

322

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
322
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Week 5 - Guidelines For Site Design - 2

  1. 1. Guidelines for Site Design<br />Toward a Better Design<br />
  2. 2. Lecture Concepts<br />Focus on designing a web site<br />Observe and critique existing sites<br />Develop key design concepts and guidelines<br />Provide important details on designing readable text<br />Sketching and prototyping a site design<br />
  3. 3. Lecture Objectives<br />Understand how existing sites incorporate key design concepts<br />Learn how to apply guidelines for good site design<br />Learn to use the following tools to create eye appeal:<br />Color<br />Balance<br />Alignment<br />Other tools<br />Become aware of the process of sketching, prototyping and testing your design<br />
  4. 4. Aspect Ratio and Display Size<br />Not all computer screens are created equal – but they share common characteristics.<br />Aspect Ratio:<br />The relationship between the height and width of the computer screen.<br />Most computers screens have a ration of 4:3<br />4 units wide and three units high<br />If a screen is 800 pixels wide<br />Then it is 600 pixels high<br />Visitors will be seeing everything through a rectangular window<br />
  5. 5. Aspect Ratio and Display Size<br />12 inches/800 pixels<br />9 inches/600 pixels<br />Do the math: if the monitor is 1200 pixels wide then, how tall is it?<br />
  6. 6. Aspect Ration and Display Size<br />Display Size<br />Majority of users have their display size set to:<br />1024 x 768<br />Some use a larger size<br />Some still at 800 x 600<br />http://www.w3schools.com/browsers/browsers_display.asp<br />
  7. 7. Aspect Ration and Display Size<br />Display Size<br /><ul><li>Just because the monitor is set to a specific resolution doesn’t mean you can design to that size
  8. 8. Consider the browser’s borders and title bars
  9. 9. Actual design size is smaller</li></ul>For most users, using the dimensions 760 x 420<br />72 pixels per inch (screen resolution)<br />10.1 inches x 5.6 inches<br />The following page has recommended screen sizes.<br />
  10. 10. Aspect Ration and Display Size<br />
  11. 11. Aspect Ration and Display Size<br />Remember: Whole screen is not available as design space.<br />Your content MUST fit inside the browser window<br />
  12. 12. The Roving Eye: Page Layout<br />Where does your eye naturally go in a book, magazine or newspaper?<br />Yup! <br />Upper right corner of the right page<br />
  13. 13. The Roving Eye: Page Layout<br />Where does your eye naturally go on a new Web page?<br />We know it goes to the top of the screen.<br />Items at the bottom less likely to be viewed<br />Dynamic items viewed first.<br />Graphics<br />Bright colors<br />Animated objects<br />
  14. 14. The Roving Eye: Page Layout<br />RECAP: We know:<br />Location: <br />Top is better than bottom<br />Above the scroll is better than below<br />Design:<br />Movement is better than motionless<br />Fewer items are better than more<br />KISS – Keep It Simple Students<br />
  15. 15. The Roving Eye: Page Layout<br />Traditions that still work:<br />Titles at or near the top<br />“Next” buttons towards the right side<br />For navigation/menu items:<br />“Up” is more general – buttons towards to top<br />“Down is more specific – buttons towards the bottom<br />Up<br />Down<br />
  16. 16. Text on a Computer Screen<br />PC monitor’s have low resolution making it difficult to read text.<br />Let’s examine some guidelines<br />
  17. 17. Text on a Computer Screen<br />View these examples:<br />Welcome to the new online course from Addison Wesley/Benjamin Cummings to support Addison-Wesley&apos;s Web Wizard Series, 1/e by Editor Addison-Wesley. <br />Welcome to the new online course from Addison Wesley/Benjamin Cummings to support Addison-Wesley&apos;s Web Wizard Series, 1/e by Editor Addison-Wesley. <br />Welcome to the new online course from Addison Wesley/Benjamin Cummings to support Addison-Wesley&apos;s Web Wizard Series, 1/e by Editor Addison-Wesley. <br />
  18. 18. Text on a Computer Screen<br />Black text on a plain white background is generally easiest to read.<br />Dark background with light text is may produce eyestrain<br />Won’t print as well<br />Best line length – 10-12 words per line.<br />Longer lines make it harder for the reader to capture all the words in a single glance.<br />For younger and older viewers – consider 8-10 words per line.<br />NEVER display text over a background image. <br />
  19. 19. Tim Berners-Lee graduated from the Queen&apos;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.<br />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.<br />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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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. <br />Text over an Image<br />
  20. 20. Text on a Computer Screen<br />Use 12-point standard system fonts<br />Times, Helvetica, Arial, Times Roman<br />Verdana, Georgia specifically designed for screens<br />Better not to specify and let browser choose<br />
  21. 21. Text Samples<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />Times New Roman<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />Arial<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />Verdana<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />Georgia<br />
  22. 22. Text on a Computer Screen<br />Use serif fonts for text<br />Use sans-serif fonts for titles<br />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)<br />Sans (French for without) are plainer fonts (Arial, Verdana, Helvetica)<br />
  23. 23. Serif vs. Sans Serif<br />This is a sans-serif font<br />This is a serif font<br />
  24. 24. Text on a Computer Screen<br />Limit yourself to 2 fonts and 2-3 sizes per page<br />One or two size for titles (title and subtitle)<br />One size for body text<br />
  25. 25. Font Samples<br />Early Years<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />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.<br />1978<br />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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />1981<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />1989<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  26. 26. Text on a Computer Screen<br />Avoid words set in all caps<br />You don’t need to SHOUT AT YOUR AUDIENCE!<br />Use upper case for single word warnings<br />STOP<br />DANGER<br />
  27. 27. Text on a Computer Screen<br />Headings and subheads should be used to organize the page<br />They break up the page and make it easier to find a topic of interest<br />Headings should contrast with body text<br />Set them apart by using:<br />Different font<br />Different size<br />Contrasting color<br />Surround with white space<br />
  28. 28. Compare and Contrast<br />Early Years. Tim Berners-Lee graduated from the Queen&apos;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.<br />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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />1981. From 1981 until 1984, Tim worked at John Poole&apos;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.<br />1989. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  29. 29. Compare and Contrast<br />Early Years. Tim Berners-Lee graduated from the Queen&apos;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.<br />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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />1981. From 1981 until 1984, Tim worked at John Poole&apos;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.<br />1989. In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  30. 30. Compare and Contrast<br />Early YearsTim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />1981 From 1981 until 1984, Tim worked at John Poole&apos;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.<br />
  31. 31. Text on a Computer Screen<br />Separate paragraphs by using <br />Line space (add a blank line)<br />Indented first line<br />Use one or the other - don’t use both<br />
  32. 32. No Indents or Spacing<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  33. 33. First Line Indent<br /> Tim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  34. 34. Space Between Paragraphs<br /> Tim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  35. 35. First Line Indent and Space Between Paragraphs<br /> Tim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  36. 36. Text on a Computer Screen<br />Leave plenty of white space around text<br />White space gives the eye a resting place<br />The human eye needs room to roam when reading<br />The eye especially likes white space to the left and right of a column of text<br />Allow white space between paragraphs of text<br />White space doesn’t have to be white – it’s really just blank space<br />
  37. 37. No White Space<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  38. 38. White Space<br />Tim Berners-Lee graduated from the Queen&apos;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.<br />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 &quot;Enquire&quot;, and never published, this program formed the conceptual basis for the future development of the World Wide Web.<br />From 1981 until 1984, Tim worked at John Poole&apos;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.<br />In 1989, he proposed a global hypertext project, to be known as the World Wide Web. Based on the earlier &quot;Enquire&quot; 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, &quot;httpd&quot;, and the first client, &quot;WorldWideWeb&quot; 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 &quot;WorldWideWeb&quot; first made available within CERN in December, and on the Internet at large in the summer of 1991.<br />
  39. 39. Text on a Computer Screen<br />Be sure your page is visually balanced<br />From top to bottom<br />Left to right<br />Spread things out around the page in a reasonable manner<br />Organize around a single axis<br />Line up text, graphics, images, etc.<br />Left, center, or right<br />Only one<br />
  40. 40. Text on a Computer Screen<br />KISS – Keep It Simple Student<br />The simpler the better<br />Every element you add competes for the user’s attention<br />Don’t distract the user from the page’s central idea<br />A simple page with a few visual and text elements is easier to read than a page with too much STUFF!<br />

×