1. Design Quotes  "The two most important tools an architect has are the eraser in the drawing room and the sledge hammer on the construction site." —Frank Lloyd Wright  Hemingway rewrote the ending to A Farewell to Arms 39 times. When asked about how he achieved his great works, he said, "I write 99 pages of crap for every one page of masterpiece." He has also been quoted as saying "the first draft of anything is shit."  "The physicist's greatest tool is his wastebasket." —Albert Einstein  "Rewrite and revise. Do not be afraid to seize what you have and cut it to ribbons … Good writing means good revising." —Strunk and White, Elements of Style

2. Design  Good design is good because of its fitness to a particular user fitness to a particular task  In general, you are not your user!  Our class will stress user centered design.

3. Design  Why is it important?

4. Design  Why is it important? Design exists whether you think about it or not. When you don’t think about design, bad design will be the result.

5. User and Task Analysis  Identifies Characteristics of the potential user population(s), e.g. demographics, domain knowledge. Goals that the user wants to accomplish. Tasks that the users perform.  May identify Mental models. Familiar metaphors.

6. Color

7. Electromagnetic Spectrum

8. Visible Spectrum

9. Retina  Contains the photo receptors that absorb photons transmit chemical signals to the brain.  Two types Rods  night-vision receptors  no color dependency Cones  color sensitivity  require a higher level of light intensity

10. Retina - Cones  Three types of photopigments in the cones "blue" with a maximum sensitivity at 430 nm "green" with a maximum sensitivity at 530 nm "red" at 560 nm (this wavelength actually corresponds to yellow)

11. Retina - Cones  The percentage of cones blue (4%) green (32%) red (64%)  Cone and rod distribution The center of the retina  has a dense concentration of cones but no rods  is primarily green cones, surrounded by red-yellow cones  no blue cones The periphery  the blue cones  has many rods but few cones.

12. RGB Color

13. CMYK

14. HSV

15. Chromostereopsis  Pure colors located at the same distance from the eye appear to be at different distances Reds appear closer Blues appear more distant Sometimes pure blues focus in front of the retina and so appear unfocused. At night a deep blue sign may appear fuzzy while other colors appear sharp.

16. Lens Absorbs Light  The lens absorbs about twice as much in the blue region as in the red region.  Older eyes have yellowed lens It absorbs more in the shorter wavelengths. More sensitive to longer wavelengths (yellows and oranges) than they are to shorter wavelengths (cyan to blue) and this increases with age.

17. Fluid Absorbs Light  Fluid between the lens and the retina absorb light.  Older fluid absorb MORE light. The older people get the less sensitive they are to light in general (the apparent brightness level decreases) and especially the sensitivity to blue decreases.

18. How we identify objects  By edge detection Difference in color Difference in brightness Difference in both color and brightness

19. The Union Jack

20. Nothing?

21. Brain  From the retina the optic nerve (actually a collection of nerves) goes to the brain but before it reaches the brain there is a color processing unit, called the lateral geniculate body.  This recombines the RGB color information into three new channels as follows: R-G gives red or green color perception R+G gives the perception of brightness and also yields yellow (Y) Y-B gives yellow or blue color perception

22. Derived Color Guidelines  Avoid the simultaneous display of highly saturated, spectrally extreme colors.  Pure blue should be avoided for text, thin lines, and small shapes.  Avoid adjacent colors that differ only in the amount of blue.  Older operators need higher brightness levels to distinguish colors.  Colors change in appearance as the ambient light level changes.

23. Beautiful Color Scheme???  For a given lens curvature, longer wavelengths have a longer focal length Red is the longest focal length Blue is the shortest.  Since to have an image focused on the retina, the lens curvature must change with wavelength with red light requiring the greatest curvature and blue light the least curvature.

24. Derived Color Guidelines  Avoid the simultaneous display of highly saturated, spectrally extreme colors.  Pure blue should be avoided for text, thin lines, and small shapes.  Avoid adjacent colors that differ only in the amount of blue.  Older operators need higher brightness levels to distinguish colors.  Colors change in appearance as the ambient light level changes.

25. Derived Color Guidelines  Avoid the simultaneous display of highly saturated, spectrally extreme colors.  Pure blue should be avoided for text, thin lines, and small shapes.  Avoid adjacent colors that differ only in the amount of blue.  Older operators need higher brightness levels to distinguish colors.  Colors change in appearance as the ambient light level changes and as the surrounding colors change.

26. Surrounding Colors

27. Derived Color Guidelines  The magnitude of a detectable change in color varies across the spectrum.  It is difficult to focus upon edges created by color alone.  Avoid red and green in the periphery of large displays.  Opponent colors go well together.  For color-deficient observers, avoid single color distinctions.

28. Visual Organization

29. Proximity  The principle of proximity states that people tend to perceive items that are located close together as being related.  A B C D

30. Alignment  People perceive items that appear along a virtual line as being related.  Using indentation to show hierarchy is an instance of using alignment.

31. Virtual Alignment Lines?

34. Improve Alignment

35. Consistency  Consistency means a high degree of uniformity in layout with in a page and uniformity in layout across pages.

36. What Consistency?

37. Contrast  Items that look different will be perceived as different.

38. What Contrast?

40. Improved Contrast / Same Content

41. What Organization Principle?

48. Improvement?

52. Initial Window Position  If a web page spawns more than one window, the initial positions should not be the same.  Why?

53. References  Web Style Guide : Basic Design Principles for Creating Web Sites by Patrick J. Lynch, Sarah Horton Web Style Guide : Basic Design Principles for Creating Web Sites  Multimedia: Making it Work by Tay Vaughan  User Centered Web Site Design by Dan McCracken and Rosalee Wolfe

54. Text

55. Text in Multimedia  Many different words express the same ideas  Aim for precise and clear usage Difference between go back and previous  Test presentation with users Can they navigate intuitively? Is there too much instruction?

56. Text - the Proper Balance  Too much overcrowded screen  Too little too many page turns and/or user interaction

57. 535 pixels 670 pixels 600 pixels 350 pixels 13-15 inch screen (640x480 pixels) Browser safe area (600x350) Use blue dimensions to fill the maximum safe area on most screens. Use red dimensions for pages that will print well. Safe dimensions for Web page graphics

58. Text on the Computer Screen  Hard to read. Because of the low resolution of computer screens. Because the lines of text in most web pages are much too long to be easily read.

59. Text on the Computer Screen  Magazine and book columns are narrow for physiologic reasons. At normal reading distances the eye's span of movement is only about 8 cm (3 inches) wide. Designers try to keep dense passages of text in columns no wider than reader's comfortable eye span.

60. Text on the Computer Screen  Most web pages are almost twice as wide as the viewer's eye span Extra effort is required to scan through long lines of text To encourage your web site users to read a document online, shorten the line length of text blocks to about half the normal width of the web page.

61. How Do We Read?

62. Make Your Web Page More Legible  Use downstyle (capitalize only the first word, and any proper nouns) for your headlines and subheads.

63. Layout

64. Fonts and Typefaces TGzxhj descender ascender serif baseline midline X-height

65. Fonts and Typefaces  Typeface family Family of graphics characters, many sizes and styles  Typeface Design for a set of fonts  Font Characters of a single size and style belonging to a single typeface  Style shadow, Boldface, italics, shadow, underline

66. Kerning and Leading  Kerning In typography, kerning refers to adjusting the space between characters, especially by placing two characters closer together than normal.  Leading A typographical term that refers to the vertical space between lines of text. The word derives from the fact that typographers once used thin strips of lead to separate lines. A typographical term that refers to the vertical space between lines of text. The word derives from the fact that typographers once used thin strips of lead to separate lines.

67. Cases  Uppercase and lowercase handset history - 2 trays  Mixed upper and lowercase letters are easier to read than all capitals.  Watch out for case sensitive file names in UNIX.

68. Serif vs Sans Serif  Serif Decorative accent at the end of a letter stroke Preferred for print media  Sans serif Easier to read on color monitors

69. Times New Roman vs Georgia  Web Typography

70. Arial vs Verdana  Web Typography

71. Proportionally Spaced vs Monospaced  Proportionally Spaced Each character received an amount of horozontal space proportional to its width.  Monospaced All characters receive the same horozontal space

72. Text Guidelines  For small type use the most readable font available (sans serif)  Use as few different typefaces as possible but vary the weight and size and style  Make sure the fonts are well spaced Leading Kerning  The size of the font should vary with the importance of the message

73. Suggestions for Body Type  For body text, use Georgia or Verdana Trebuchet is also screen friendly (sans serif)  Use 12 pt type 10 point is ok if you know your users have Georgia or Verdana. But if they don’t and it defaults to 10 pt Times Roman – that is too small.

74. Suggestions for Body Type  Use Roman, not Italic or Bold for body text style.  Use upper case only for first words of sentences, proper names, etc ALL CAPS IS HARD TO READ  Use a maximum line length of 5 inches Shorter is better

75. Suggestions for Body Type  Use two point of leading between lines unless its already there  Use left alignment  Don’t use underlining for emphasis (Users might assume the underlined word is a link.)

76. Suggestions for Header Type  Use any size that fits  Use any typeface that is legible  Use the line height attribute for control of line spacing to get the effect you want (touching or spread widely)  Use letter spacing and word spacing to get the effect you want.

77. Suggestions for Header Type  Use kerning to make header type look right  Don’t use animated text Users hate it. Some develop animation blindness where they don’t see the moving text assuming it is an advertisement.

78. Beware  What We Don’t Know When Designing for the WWW Resolution of the monitor Size of the browser window  Is it 4x7 inches or does it fill the entire 21 in monitor? How the user has set type size  Younger users may set type size small to reduce scrolling.  Older users may set type size large to see it.

79. Beware  What We Don’t Know When Designing for the WWW Settings and quality of the monitor (brightness, contrast, color balance…) Ambient lighting in the room  Background and font colors may looked washed out What fonts are available to the user  Differ on Macs and PCs

80. Back up your work  Disks and computers will fail.  Don’t trust them.  Version control.

81. Homework 1  For next class, write the specifications for the web site you will develop for our class. These web pages will organize and publish your course work during this class. Who are your users? What are they trying to accomplish? Identify the navigation. What color palette will you use? Specify background, text, link, active link and visited link colors. What typeface will you use? Sketch the layout on a second sheet of paper.  Print the essay and bring the hard copy and the sketch to our next class.