Transcript Slide 1

Contact Information
Penny McIntire
Published by New Riders
VisualDesignModernWeb.com
[email protected]
© June 2008 Penny McIntire
1
Ten Tips for
Web Design Alchemy
by
Penny McIntire
Department of Computer Science
Northern Illinois University
© June 2008 Penny McIntire
Introduction
•
Alchemy: from the old French alkemie and
the Arabic al-kimia: “the art of
transformation.”
•
Medieval alchemy blurred the lines between
science, art, and magic in its search to
transform common metals into gold.
•
A beautifully designed web site may not be
medieval gold, but it is indeed magical.
© June 2008 Penny McIntire
3
What Is Style?
“Style: A simple way of saying
complicated things.”
Jean Cocteau
© June 2008 Penny McIntire
4
What Does Shopping
Have to Do with Web Design?
© June 2008 Penny McIntire
5
What Does Shopping
Have to Do with Web Design?
© June 2008 Penny McIntire
6
Tip #1
Support Wayfinding
•
Provide “You Are Here!” markers:
– Site titles. (You are in the mall.)
– Page titles. (You are in the south edge of the
mall.)
– Current link, disabled but not removed. (You’re
at the front door of Macy’s.)
•
Navigation should provide a mental model
of the site. (Where is Macy’s in regard to the
other stores in the mall?).
© June 2008 Penny McIntire
7
What Does Architecture
Have to Do with Web Design?
© June 2008 Penny McIntire
8
Tip #2
“Architect” a Website’s Layout
• Align sight lines.
• Repeat shapes.
• Repeat proportions.
© June 2008 Penny McIntire
9
What Does Poster Design
Have to Do with Web Design?
© June 2008 Penny McIntire
10
Tip #3
Provide a Visual Hierarchy
• Divide.
• Chunk.
• Emphasize.
© June 2008 Penny McIntire
11
What Do Rose Windows
Have to Do with Web Design?
• Following my
Medieval analogy,
I’m using the form of
a Medieval rose
window as a color
wheel.
• RGB: Red, Green,
& Blue
© June 2008 Penny McIntire
12
Tip #4
Understand How Web Color Works
• Web color codes: #RRGGBB, in hex (base 16)
– 0-9
– A-F (10-15)
• Maximum saturation (intensity) = FF (256)
• No color = 00
• Thus…
© June 2008 Penny McIntire
13
Tip #4
Understand How Web Color Works
#000000
#FFFFFF
#FF0000
#00FF00
#0000FF
#FF00CC
#CCFF00
#00CCFF
© June 2008 Penny McIntire
14
Tip #4
Understand How Web Color Works
• Terminology:
• Value = degree of lightness or darkness
light value
dark value
• Saturation = intensity
fully
saturated
© June 2008 Penny McIntire
less
saturated
15
Tip #4
Understand How Web Color Works
• Tint:
a color mixed with white
tint of red
• Shade:
a color mixed with black
shade of red
• Tone:
a color mixed with gray
tone of red
© June 2008 Penny McIntire
16
Tip #4
Understand How Web Color Works
• Virtually all computers these days can display
16,777,256 colors.
• Websafe colors: 216 colors safe on all
computers, even on older ones.
• No longer limited to websafe colors, yet
palettes provided in graphics packages are
still typically only websafe colors.
• For example…
© June 2008 Penny McIntire
17
Tip #4
Understand How Web Color Works
Adobe’s Color Cubes Palette
© June 2008 Penny McIntire
18
Tip #4
Understand How Web Color Works
Adobe’s Swatches/Continuous Tone Palette
© June 2008 Penny McIntire
19
Tip #4
Understand How Web Color Works
Adobe’s System Color Palette
© June 2008 Penny McIntire
20
Tip #4
Understand How Web Color Works
Visibone Palette
visibone.com
© June 2008 Penny McIntire
21
Tip #4
Understand How Web Color Works
My palette
(on web site)
© June 2008 Penny McIntire
22
Tip #4
Understand How Web Color Works
White in center
Black on outside
© June 2008 Penny McIntire
23
Tip #4
Understand How Web Color Works
Fully saturated
colors on black
inner hexagon
and outside
“tips.”
© June 2008 Penny McIntire
24
Tip #4
Understand How Web Color Works
Tints
© June 2008 Penny McIntire
25
Tip #4
Understand How Web Color Works
Shades
© June 2008 Penny McIntire
26
Tip #4
Understand How Web Color Works
Tones on “wings”
© June 2008 Penny McIntire
27
Tip #4
Understand How Web Color Works
• But a palette on the screen can’t show 16
million colors… How do we find the rest?
• Various ways…
© June 2008 Penny McIntire
28
Tip #5
Mix Your Own Hues
• Find the color on another web site and use
the Adobe color picker to sample it.
• Scan an object and sample it. Examples:
– Autumn leaf.
– Fabric.
– A sample chip from a paint store.
– Decorating magazines.
– Art books.
© June 2008 Penny McIntire
29
Tip #5
Mix Your Own Hues
• Or… mix it yourself, as an artist mixes paints.
• Three techniques:
– Use a semi-transparent overlay.
– Set up a gradient.
– Mix mathematically.
© June 2008 Penny McIntire
30
Tip #5
Mix Your Own Hues
• Semi-transparent overlay and color sample
the overlapped area.
#991AB3
© June 2008 Penny McIntire
31
Tip #5
Mix Your Own Hues
• Set up a gradient between two colors and
color sample a middle value.
#BF24C3
© June 2008 Penny McIntire
32
Tip #5
Mix Your Own Hues
• Mix mathematically by altering the codes:
start with red, add more and more blue.
#FF0000
#FF0033
#FF0066
#FF0099
#FF00CC
#FF00FF
© June 2008 Penny McIntire
33
Tip #5
Mix Your Own Hues
• Why mess with the math version at all?
• Because it gives you precise and minute
control of the color, much more subtle and
fine adjustment than any of the other
methods.
• Gives you access to all 16 million colors.
© June 2008 Penny McIntire
34
Tip #6
Mix Your Own Tints
• Tint: a color mixed with white
• Can use a semi-transparent overlay or a
gradient.
#FF8080
© June 2008 Penny McIntire
35
Tip #6
Mix Your Own Tints
• Mixing mathematically: alter the color code
so that it approaches white #FFFFFF.
#FF0000
#FF3333
#FF6666
#FF9999
#FFCCCC
#FFFFFF
© June 2008 Penny McIntire
36
Tip #7
Mix Your Own Shades
• Shade: a color mixed with black.
• Can use a semi-transparent overlay or a
gradient.
#660000
© June 2008 Penny McIntire
37
Tip #7
Mix Your Own Shades
• Mixing mathematically: alter the color code
so that it approaches black #000000
#FF0000
#CC0000
#990000
#660000
#330000
#000000
© June 2008 Penny McIntire
38
Tip #8
Mix Your Own Tones
• Tone: a color whose intensity is “toned down”
because it’s mixed with its complementary
(opposite) color or some version of gray.
© June 2008 Penny McIntire
39
Tip #8
Mix Your Own Tones
• Tones are often considered to be more subtle
and sophisticated.
• Remember the “complementary colors” we
just mentioned? They are different on the
web than they are on the traditional color
wheel – not going to go there today.
• Instead, today we’ll mix using only gray, not
complementary colors.
© June 2008 Penny McIntire
40
Tip #8
Mix Your Own Tones
• What is gray?
• If black is #000000, and white is #FFFFFF,
then it makes sense that grays are any three
equal pairs:
#CCCCCC
#666666
#828282
© June 2008 Penny McIntire
41
Tip #8
Mix Your Own Tones
• Can use a a semi-transparent gray overlay or
a gradient to some version of gray.
#AA3333
© June 2008 Penny McIntire
The red hex pair was
decreased, and the
other two hex pairs
were increased equally.
Thus, getting closer to
gray (equality).
42
Tip #8
Mix Your Own Tones
• Mixing mathematically: alter the color code
so that it approaches gray (three equal
pairs).
• That is, decrease the base color while
increasing the other pair(s).
© June 2008 Penny McIntire
43
Tip #8
Mix Your Own Tones
• Decrease the base color while increasing the
other pair(s)…
#FF0000
#CC3333 #CC6666 #CC9999
#993333 #996666
#663333
© June 2008 Penny McIntire
44
Tip #8
Mix Your Own Tones
• Alternately, start with the value (lightness or
darkness) of gray that you want, and
increase the base color…
red
#CC9999
#996666
#663333
gray
#999999
#666666
#333333
blue
#9999B2
#666682
#333352
© June 2008 Penny McIntire
45
What Does House Painting
Have to Do with Web Design?
© June 2008 Penny McIntire
46
Tip #9
Repeat Colors
• Don’t fall into the trap that every element
must be a different color.
• Repetition provides serenity within a page,
and continuity across pages.
© June 2008 Penny McIntire
47
What Does Men’s Haberdashery
Have to Do with Web Design?
© June 2008 Penny McIntire
48
Tip #10
Reinforce the Hierarchy with Color
• Consider a man’s suit:
– Perhaps 60% of the color,
usually the most subdued, is
in the body of the suit.
– Perhaps 30% of the color,
often a bit brighter, is in the
shirt.
– Perhaps 10%, the brightest, is
in the tie.
© June 2008 Penny McIntire
49
Tip #10
Reinforce the Hierarchy with Color
• Use the “10%” color to draw attention to the
areas you want to emphasize.
• Color is one of the most important tools in
establishing the visual hierarchy we talked
about earlier.
© June 2008 Penny McIntire
50
What do Dingbats
Have to Do with Web Design?
• Dingbat fonts are shapes instead of typical
characters…
– Webdings, Shapes1, Shapes2, Arrows1, etc.
• Use in graphics packages like Photoshop and
Fireworks, not just in text editors.
• For instance, the “man’s suit” on a prior slide.
• Drawback — it can be tedious to know which
keyboard character delivers which image.
© June 2008 Penny McIntire
51
Bonus Tip #11
Download a Free Dingbat Chart
• Remedy – a Word chart of common dingbat
fonts and their keyboard equivalents for free
download on my book’s website,
VisualDesignModernWeb.com.
• You can easily copy and paste a new row,
select the row, and change to the font of your
choice to get to keyboard equivalents for
fonts not already on the chart.
© June 2008 Penny McIntire
52
Contact Information
Penny McIntire
Department of Computer Science
Northern Illinois University
DeKalb, IL 60115
Phone 815.753.6495
[email protected]
[email protected]
© June 2008 Penny McIntire
53
Contact Information
Penny McIntire
Published by New Riders
VisualDesignModernWeb.com
[email protected]