Post on 24-Dec-2015
Color For WebsitesColor For Websitesby Molly E. Holzschlag
Presented by: Breanna McLean
why is color why is color important?important?
color not only makes the site more visually appealing…
• assists communication
• psychological impacts on user
why is color why is color important?important?
color not only makes the site more visually appealing…
• assists communication
• psychological impacts on user
web design woesweb design woescross-platform, cross-browser color design
• 216 colors
• safe to use across browsers
the web-safe color palette
• many platforms in use: Windows, MacOS, Linux & Unix
• means many variations from one computer system to another
• impossible to obtain consistency
use it or forget it?
color relationships color relationships similar to people
relationships?
• complementary
• harmonious
• discordant
• color temperature
the color wheel the color wheel
additive (light) color wheel
primary way of describing color relationships
complementary colorshigh in contrastafter-image
split-complementarycontrast, but not as much
triadharmonious, esthetically
pleasing
analogouslow contrastmonochromatic
more color more color relationships relationships
harmonious color: soothing calm, peaceful
discordant color: clash, cause nervousness, appear intense next to each other
color temperature: warm vs. cool
warm vs. cool warm vs. cool
simultaneous contrastsimultaneous contrast
the color on the right appears to be brighter than the color on the left
color propertiescolor properties
how can you use these color properties to your advantage?
spa site spa site
soft colors welcome visitors and put them at ease
athletic sites athletic sites
high contrast colors energize & invigorate
case study: artist Joe Forkan’s case study: artist Joe Forkan’s website website http://www.joeforkan.com
“Monster”
case study: artist Joe Forkan’s case study: artist Joe Forkan’s website website http://www.joeforkan.com
“Cruel Memory” “Tide”
using color using color strategicallystrategically
“Did you know that a visitor has formed his first impression of your site within the first nine seconds of a visit?”
• users respond to visual cues on a psychological level
• well-educated designers know how to strategically create and place color and graphics to “tease, please, and satisfy” their visitors
• rules of choosing color- natural color association for your product- audience demographics
natural color natural color association association
blue is often associated with water
using color using color strategicallystrategically
“Did you know that a visitor has formed his first impression of your site within the first nine seconds of a visit?”
• users respond to visual cues on a psychological level
• well-educated designers know how to strategically create and place color and graphics to “tease, please, and satisfy” their visitors
• rules of choosing color- natural color association for your product- audience demographics
global colorglobal color
Not only should your site’s color palette match the product, but you should choose colors that match your audience’s values.
To help you do that, the following gallery of general color themes explains the symbolism of color and the psychological relationship between it and people.
designing for a global designing for a global audience audience
PURPLE = bad
nature
earth
health
good luck
jealousy
renewal
money
“Associated with mourning or New-Age and alternative religions in some cultures. Should be avoided in many instances. Interestingly, purple is rarely found in nature.”
designing for a global designing for a global audience audience
BLUE = good
trust
conservative
security
technology
cleanliness
sorrw
order
“Color immortality in China, holiness for the Jews, color of Krishna in Hinduism. Blue is the safest global color.”
safe sites safe sites
Dell, Microsoft, AOL, WalMart, etc.
designing for a global designing for a global audience audience
RED
power
energy
love
warmth
passion
aggression
danger
“In China, a symbol of celebration and good luck.”
designing for a global designing for a global audience audience
GREEN
nature
earth
health
good luck
jealousy
Renewal
money
“Tends to be calming and antidepressant. It is associated with money in the U.S., but not in many other countries.”
designing for a global designing for a global audience audience
YELLOW
optimism
hope
philosophy
dishonesty
cowardice
betrayal
“Sacred and imperial color in Asian cultures, represents joy and happiness in several Western cultures. Women tend to respond quite positively to many values of yellow.
designing for a global designing for a global audience audience
ORANGE
energy
balance
warmth
“Symbolizes that a product is inexpensive in the U.S., so it should be avoided when designing sites that are expressing sophistication, elegance, and luxury.”
designing for a global designing for a global audience audience
BROWN
earth
reliability
comfort
endurance
“Brown is usually quite neutral and associated with nature.”
designing for a global designing for a global audience audience
GRAY
intellect
futurism
elegance
modesty
sadness
decay
“Is widely used as a neutralizing color. Silver tones express sophistication.”
designing for a global designing for a global audience audience
WHITE
purity
cleanliness
precision
innocence
sterility
death
“Salvation, holiness, purity in most Western and many world cultures, but mourning in some Western and many Eastern cultures. Should be used with care in certain instances. Because white is such a necessary color for contrast & design, it’s wise to mix it with another color that has stronger, more obvious, significance.”
designing for a global designing for a global audience audience
BLACK
power
sexuality
sophistication
mystery
fear
unhappiness
death
“Represents mourning in many cultures, also evil and dark spirits. Paradoxically, black is seen as sophisticated and elegant, especially in cosmopolitan, prosperous areas.”
gender gender
men’s and women’s reactions to color are significantly different
• blue stands for men much more than women
• men prefer blue to red, women red to blue
• men prefer orange to yellow, women yellow to orange
• women’s color tastes are thought to be more diverse than men’s
just some theories - hard to make assumptions:
just one more thing….
creating your palette creating your palette
Finally! You have enough information to create a color palette for your site.
• list of colors
• swatch file
Color
Black
White
Orange
Lime
Rich Yellow
RGB Value
000
255, 255, 255
255, 153, 0
153, 204, 0
255, 204, 51
Hexadecimal Value
000000
FFFFFF
FF9900
99CC00
FFCC33
conclusion conclusion
Designers should feel good about the use of color, and be assertive in how it’s used. But you must also think carefully about why you’re using a given color or selection of colors, and to whom that color is being delivered. Without forethought, the results could weaken your color message - or worse, make it ineffective altogether.