Transcript Color

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
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.
Design

Why is it important?
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.
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.
Color
Electromagnetic Spectrum
Visible Spectrum
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
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)
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.
RGB Color
CMYK
HSV
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.
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.
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.
How we identify objects

By edge detection



Difference in color
Difference in brightness
Difference in both color and brightness
The Union Jack
Nothing?
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
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.
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.
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.
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.
Surrounding Colors
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.
Visual Organization
Proximity


The principle of proximity states that
people tend to perceive items that are
located close together as being related.
ABCD
Alignment


People perceive items that appear along
a virtual line as being related.
Using indentation to show hierarchy is an
instance of using alignment.
Virtual Alignment Lines?
Virtual Alignment Lines?
Virtual Alignment Lines?
Improve Alignment
Consistency

Consistency means a high degree of
uniformity in layout with in a page and
uniformity in layout across pages.
What Consistency?
Contrast

Items that look different will be perceived
as different.
What Contrast?
What Contrast?
Improved Contrast / Same Content
What Organization Principle?
What Organization Principle?
What Organization Principle?
What Organization Principle?
What Organization Principle?
What Organization Principle?
What Organization Principle?
Improvement?
Improvement?
Initial Window Position


If a web page spawns more than
one window, the initial positions
should not be the same.
Why?
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
Text
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?
Text - the Proper Balance

Too much


overcrowded screen
Too little

too many page turns and/or user
interaction
Safe dimensions for Web page graphics
350 pixels
600 pixels
670 pixels
535 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.
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.
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.
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.
How Do We Read?
Make Your Web Page More Legible

Use downstyle (capitalize only the
first word, and any proper nouns)
for your headlines and subheads.
Layout
Fonts and Typefaces
ascender
serif
X-height
TGzxhj
descender
midline
baseline
Fonts and Typefaces

Typeface family


Typeface


Design for a set of fonts
Font


Family of graphics characters, many sizes and
styles
Characters of a single size and style belonging to
a single typeface
Style

Boldface, italics, shadow, underline
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.
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.
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
Times New Roman vs Georgia
Web
Typography
Web Typography
Arial vs Verdana
Web
Typography
Web Typography
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
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
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.
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
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.)
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.
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.
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.
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
Back up your work



Disks and computers will fail.
Don’t trust them.
Version control.
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.