Transcript Design Principles & Web Graphics

Web Design Principles II:
Web Colors &
Typography
From http://www.ctpub.com/archive/020401/feature1.html
References
Designing Web Graphics. 3
by Lynda Weinman
The Non-Designer’s Web Book
by Williams and Tollett
Before the Next class:

Visit these Web sites and read some!!



http://usability.gov/guidelines/
http://usableweb.com/
http://info.med.yale.edu/caim/manual/index.html
Check these



http://www.mundidesign.com/webct/
http://www.alistapart.com/stories/color/color2.
html (just this one page)
http://msdn.microsoft.com/library/default.asp?
url=/library/enus/dnhess/html/hess08142000.asp (just this
one page)
Color Terminology




Spectrum: All the possible colors in a color
space, such as RGB or CMYK
Hue: A color within the spectrum
Value: the range from light to dark
Saturation: the intensity of a color

Muted: very little saturation (Pastel colors)
Color Wheels

Primary colors on screen: RGB
Picture from
http://www.users.talstar.com/iwa/member/presentations/colors/
Recommended color hue combinations

Web Designing with colors
(http://www.users.talstar.com/iwa/member/presentations/co
lors/index.html, not available)
Complementary
Opposite ends of the color wheel
http://www.vantech.net/

Split Complementary
one off from the opposite color
Triad colors
three colors that are equidistant
on the color wheel.
Analogous

Close colors on the wheel
Recommended color hue
combinations (continued)

Warm colors
Cool colors
Monochromatic:
Try different saturation (or value) with the same
color
http://www.thetech.org/exhibits/online/color/saturation/
http://library.thinkquest.org/50065/art/effact.html
Color examples

http://evolt.org/index.html


http://www.lacountyarts.org


Use a combination of analogous color
Use the many different hues, but similar value of
colors
http://www.napastyle.com/
Web Typography




Sans serif vs. Serif
The default font in most browsers is a serif
typeface: Times Roman or Times New Roman
Sans serif needs the FONT FACE tag
Monospace vs. Proportional
Typography on the Web

http://www.efuse.com/Design/web_fonts_basi
cs.html




http://www.willharris.com/webtype/mistake__1.html
http://counterspace.motivo.com/
http://www.rsub.com/typographic/
http://www.microsoft.com/typography/default.
asp
Considerations for typography

Web is a full of information




Viewers are skimming
Try to hold viewers’ attention
Try to bring out the important ideas
Break up blocks into more digestible portions



Paragraphs
Bold or italics
Hypertext
FONT FACE Tags

Users much have the font you use





http://www.microsoft.com/typography/fontpack/def
ault.htm
Win95 (and up), G3 (and Up) and IMac include
these fonts
<FONT FACE=“helvetica, arial”> type the text
</FONT>
Verdana & Georgia
Fonts look larger on PCs than do on Macs
Graphic-based Typography


Make your title or headers as graphic files
Font sites




http://www.adobe.com/type/
http://www.bitstream.com/index.html
http://www.letterror.com/
http://www.execpc.com/~adw/

Handwriting Fonts
PDF Files


It shouldn’t not be used as an HTML
substitute.
http://www.designsbymark.com
Metaphor



Does it help the target audience to
understand better about your Web Site?
http://www.ecomulch.com/
http://www.igougo.com/home.html
Your challenge for the FireWorks


Can you make this using Fireworks?
http://www.will-harris.com/index.html