visual design: c o l o r and typography
Post on 31-Dec-2015
34 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
top related