Design Quotes

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 dont 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
• RG 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?
32
Virtual Alignment Lines?
33
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?
39
What Contrast?
40
Improved Contrast / Same Content
41
What Organization Principle?
42
What Organization Principle?
43
What Organization Principle?
44
What Organization Principle?
45
What Organization Principle?
46
What Organization Principle?
47
What Organization Principle?
48
Improvement?
49
Improvement?
50
(No Transcript)
51
(No Transcript)
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
• 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
Safe dimensions for Web page graphics
13-15 inch screen (640x480 pixels) Browser safe
area (600x350)
350 pixels
600 pixels

• Use blue dimensions to fill the maximum safe area
  on most screens.
• Use red dimensions for pages that will print well.

670 pixels
535 pixels
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
ascender
TGzxhj
midline
serif
baseline
X-height
descender
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
• 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.

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
• Web Typography

70
Arial vs Verdana

• Web Typography
• 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 dont 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
• Dont 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
• Dont use animated text
• Users hate it. Some develop animation blindness
  where they dont see the moving text assuming it
  is an advertisement.

78
Beware

• What We Dont 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 Dont 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.
• Dont 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.