270 likes | 809 Views
Psychology of Color. Valerie DeMartino INBS 510 November 4, 2002. Psychology of Color. Importance of Color on the Internet What is color? How does color effect emotion? Color Preference Color Snafu’s Color – On the Computer & Internet Standardizing of Color Use of Fonts
E N D
Psychology of Color Valerie DeMartino INBS 510 November 4, 2002
Psychology of Color • Importance of Color on the Internet • What is color? • How does color effect emotion? • Color Preference • Color Snafu’s • Color – On the Computer & Internet • Standardizing of Color • Use of Fonts • A look at 2 websites • Suggestions
Importance of Color on the Internet Color is a powerful tool: • Color is the first thing notice and the last thing we forget when visiting a website. • Color can capture attention or be lost instantaneously. • If used correctly, color can make the difference between buying and selling. • Color can be a trademark (i.e. Coca Cola red or John Deer green) • Color triggers emotion, has symbolism, memories or ideas attached to it. • Color gives a feel for the site before the content is even read. • Color adds impact and clarity to a message and highlights important points.
What is Color? Color technically defined • Color in the non-computer world is seen as reflected light • On a computer, color is backlit (not reflected) • Colors on a computer are primary: Red, Green and Blue (RGB) • The gamma (color space) is responsible for the lightness or darkness of an image
How does color effect emotion? Color symbolizes, triggers emotion, memories or ideas. • The emotion triggered is dependant on an individual’s • Nationality • White in the west represents purity, in China, it represents death • Gender • Women prefer bright colors where men prefer cool colors • Past experiences • Personal Preferences
How does color effect emotion? • Warm colors (i.e. reds) • Stimulate warmth, hunger, excitement • Cool colors (i.e. green and blue) • Enhance calm and content feelings • Dark Colors vs. Light Colors • Dark objects seem heavier • White light colors makes objects seem lighter
How does color effect emotion? Colors and their connotation • Red • Positive: Passion, love, danger, heat, power, strength • Negative: aggressive, blood, war, violence • Pink • Positive: youth and femininity • Negative: naivety, weakness Information from Jessett.com
How does color effect emotion? • Yellow • Positive: sunshine, happiness, growth, gold, newness • Negative: betrayal, jealousy, deceit, cheap • Blue • Positive: calm, peaceful, water, sky, harmony, therapeutic, trust, confidence (safe color for design) • Negative: sadness, depression, cold Information from Jessett.com
How does color effect emotion? • Purple • Positive: royalty, spirituality, passion, love • Negative: cruelty, arrogance, mourning • Brown • Positive: neutral, earthy, outdoors, warm • Negative: dirty, dull • Grey • Positive: modern, intelligent, solid, clean • Negative: old age, sadness, dull, boring Information from Jessett.com
How does color effect emotion? • White • Positive: cleanliness, innocence, space, purity, chastity, simplicity, peace, winter/snow, goodness, marriage/virginal • Negative: death (in eastern culture), sterile • Black • Positive: associated with power, elegance, magic, mystery, night, sophistication, solid, powerful • Negative: death (in western culture), fear, evil, anonymity, sadness, remorse, anger Information from Jessett.com
Color Preference According to the Roper/Pantone Consumer Color Preference Study revealed: • Blue is the country’s preferred color • By 35% of those polled chose blue most suggesting the attraction to it’s calm appeal • Followed by (in order) • Green by 15% (fresh and clean) • Purple (warm) over Red (exciting) by 1%
Color Snafu’s Something to consider - While color triggers emotion, keep in mind that a growing percentage of the population • are color blind • Some do not even see color (instead view shades of gray and black) • Among those that do see color, there is a variance over the contrast of a color
Color – On the Computer & Internet The components that create color on your computer include: • The hardware on your computer • Graphic cards or video cards/boards • Your monitor • Your web browser
Color – On the Computer & Internet • The systems that are used to create websites, usually have a video card capable of displaying thousands (16-bit) or millions (32-bit) colors. • The average visitor of a website is capable of viewing 256 colors (8-bit).
Color – On the Computer & Internet • There are 216 colors that are common to all computer and all web browsers. • Each browser has 256 colors but only 216 of them are common to all. • Software uses little dots of RGB to create the 216 colors on the web • This is referred to as additive color
Color – On the Computer & Internet Corresponding HTML values derived from rigid mathematical formulas make up the 216 colors that are universally recognized. • The formula consists of a combination of red, blue and green values. Most people who own a newer computer system that has a 16 or 32-bit video card do not know that they can change their color settings if they are only viewing a 8-bit.
Color – On the Computer & Internet • Due to the components that create the color you view, there is a likelihood that the color you view when viewing a purchase item is not the accurate color of the item • Color tends to appear darker on some computers • This effects a global audience
Standardizing of Color There are steps being taken for a cross platform of color where extra chunks of information is stored about the image. • ColorSync by Apple computer – a filter is used in Photoshop to embed color profiles prior to converting the graphics to a gif or jpeg file for the web • PNG – images created in Photoshop can be saved as PNG
Standardizing of Color • Then the web browser reads the file for viewing: the file transforms the information of RGB and gamma values into one that will appear to the viewer the same way it was created on the original system • Who can use these filters? • ColorSync: • Currently, only Microsoft Explorer for Macintosh systems can read color profiles in gif and jpeg files through the ColorSync filter. • Soon to follow are Netscape Navigator for Mac and PCs and MSIE for PCs • PNG • Currently, Netscape Navigator 4.04 can use the filter • Soon to follow are Macintosh and Microsoft Explorer
Use of Fonts • Font is another tool to differentiate your website from others • There are many tools to allow you to find a unique font through the internet • Key to using font is to keep the font size consistent on the site as it is more appealing to the eye
Use of Fonts Types of Font • Serif: have finishing stokes with flared or tapered ends • Latin Fonts: Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit • sans-serif: has stroke endings that are plain • Greek Fonts: Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Use of Fonts • Cursive: generally have joining strokes • Latin fonts: Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery • Fantasy:decorative • Latin fonts: Courier, MS Courier New, Prestige, Everson Mono • Greek Fonts: MS Courier New, Everson Mono • Monospace: all glyphs have the same fixed width, has the effect of a manual typewriter • Latin fonts: Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
A look at 2 Websites • Coca-Cola (www.cocacola.com) • Uses a strong Red • Symbol of power and energy • It captures your attention • Their color is a trademark • Chase (www.chase.com) • Uses a white background and blue banner • Professional • Clean • Warm and inviting (with use of blue)
Suggestions If you are going to design a website, keep the following suggestions in mind • Color speaks volumes! • Use appropriate color for the message you are trying to communicate. • Use color to illustrate or highlight an important point. • You want to use a color that will capture attention so a visitor will stay on your site and read the content. • Keep main content on a white background – it implies professionalism and is easier to the eye. • To attract a younger customer or imply youth, use primary colors. • Your color choices may become your trademark.
References Cater, Mary (2000). Coloring Outside the Lines. http://www.efuse.com/Design/colorful1.html Color Matters – Computers (2002). Computer Color Matters. http://www.colormatters.com/comput.html The Font Finder. http://www.font-finder.com/fonts.html Font Families. http://www.w3.org/TR/REC-CSS2/fonts.html#generic-font-families Jesset.com (2002). Choosing Color.http://www.jessett.com/web_sites/design/color.shtml Morton, Jill (1999). Color Matters – Computers. Color, the Chameleon of the Web. http://www.colormatters.com/chameleon.html Khouw, Natalia The Meaning of Color for Gender. http://www.colormatters.com/khouw.html Psychology of Color in Web Design, Understanding Color Emotion Triggers, Part 1a (2002). http://www.basictemplates.com/tools/colorpsych1a-full.shtml Web Design Wisdom, Web Design: Color Concepts (2002). http://www.webdesignwisdom.com/webdesign/color.shtml Renovato, Pam (2002). The Informant, The Psychology of Color and Internet Marketing. http://phh.virtualave.net/web_design_and_maintenance/009.shtml Renovato, Pam (2002). The Psychology of Color and Internet Marketing How to Choose web site colors. http://www.free-webmaster-tools.com/choosing-web-site-colors.htm Results from the Roper/Pantone Consumer Color Preference Study (1995). http://www.pantone.com/products/products.asp?idArticle=123&idArea=16 Weinman, Lynda (2000) Lynda on Color: Web Color Basics, Understanding “Browser-Safe” Color. http://www.efuse.com/Design/web_color_basics.html Will on the Web Radio(2001). http://www.will-harris.com/radio/color_web.html