Visual Design:

Color and Typography

Amaris VigilI385T

Dr. Turnbull

It’s Elementary http://pbskids.org/sesame/

Color and Typography

• Focus

• Communication of Information

Color Basics

Hue - another word for color

Primary hues red, yellow, blue

Saturation – intensity of color

Value – lightness/ brightness added to a hue

The Color Wheelhttp://www.creativeglazes.com/colorwheel.htm

White Space?

• White space a.k.a negative space

• Direct attention to critical regions

Ex. http://www.girlshop.com

& http://www.cabedge.com

Perceptions of Color

Cultural Significance

Ex. East India - pale pink - feminine

Japan - pastels - men and women

India – white – death

216 Web “Safe” Colors http://

www.websitetips.com/color/colourchart.html

Color in Web Pages

• Links and Navigation

http://www.amazon.com

http://www.basinstreet.net

Typography

More Typography

Categories or Font Classification – ex serif, sans serif, script, fancy

Families – Arial, Arial Black, Arial Narrow

Type Form

Weight Width Posture

Even More Typography

Leading and K e r n i n g

Justification Justification Justification

Line LengthLine Length Line Length Line Length

Typography on the Web

• Headers, tabs, advertising, links

• http://www.wddg.com/v.X.html

• http://www.toolband.com/tour/index.html

• http://www.ucla.edu

Rules for Typography (Carter, 2002, p.151-p.161)

• Be mindful not to use too many different typefaces at any one time.

• Text set in all capital letter severely retards reading. Use upper-and lower-case letter for optimum readability.

• For optimum readability, use a flush left, ragged right type alignment.

Rules for Typography (Carter, 2002, p.151-p.161)

• Clearly indicate paragraphs, but be careful not to upset the integrity and visual consistency of the text.

• When working with type and color, ensure that sufficient contrast exists between type and its background

Color + Typography

• Contrast - most important– strong contrasts of hue, value and saturation

• First Read - overall first impression – make or break

Resources

Baxley, Bob. (2003). Making the Web Work: Designing Effective Web Applications. USA. New Riders Publishing.

Carter, Rob. (2002). Digital Color and Type. Hong Kong. Printing Express.

Holzchlang, Molly. (2003). Integrated Web Design: Building the New Breed of Designer and Developer. USA. New Riders Publishing.

Leary, M., Hale, D. & Devigal, A. (1997). Web Designer’s Guide to Typography. Indianapolis, Indiana. Hayden Books.

Mullet, Kevin, and Sano, Darrell. (1995). Designing Visual Interfaces: Communication Oriented Techniques. USA. Sun Microsystems.

Resources

PBS.org. (2003). Freedom: A history of the U.S. Retrieved on February 18,2003 from the PBS web site: http://www.pbs.org/wnet/historyofus/tools/browser13b.html.

Pring, Robert. (2002). www.colour: Effective Use of Colour for Web Page Design. London, U. K. Cassell & Co.

Reader’s Digest. (2001). 1,001 Computer Hints and Tips: An A-toZ Guide to Making the Most of Your Computer and the Internet. Pleasantville, New York. Reader’s Digest Association, Inc.

Van Duyne, D. K., Landay, J.A., & Hong, J.I. (2002). The Design of Sites. New York, NY. Addison-Wesley.