Transcript Slide 1
Contact Information
Penny McIntire Published by New Riders VisualDesignModernWeb.com
© 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 the Arabic al-kimia: “the art of transformation.” and • 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 at the front door of Macy’s.) removed. (You’re • 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
© June 2008 Penny McIntire • Align sight lines.
• Repeat shapes.
• Repeat proportions.
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 less saturated © June 2008 Penny McIntire 15
Tip #4 Understand How Web Color Works
• Tint: a color mixed with white tint of red • Shade: a color mixed with black • Tone: a color mixed with gray © June 2008 Penny McIntire shade of red tone of red 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
© June 2008 Penny McIntire Visibone Palette visibone.com
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 # equal pairs: 000000 , and white is #FFFFFF, then it makes sense that grays are any three
#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
The red hex pair was decreased, and the other two hex pairs were increased equally. Thus, getting closer to gray (equality).
© June 2008 Penny McIntire 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 blue
#999999 #666666 #333333 #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
© June 2008 Penny McIntire • 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. 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
© June 2008 Penny McIntire 53
Contact Information
Penny McIntire Published by New Riders VisualDesignModernWeb.com