![Page 1: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/1.jpg)
Color For WebsitesColor For Websitesby Molly E. Holzschlag
Presented by: Breanna McLean
![Page 2: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/2.jpg)
why is color why is color important?important?
color not only makes the site more visually appealing…
• assists communication
• psychological impacts on user
![Page 3: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/3.jpg)
![Page 4: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/4.jpg)
why is color why is color important?important?
color not only makes the site more visually appealing…
• assists communication
• psychological impacts on user
![Page 5: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/5.jpg)
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?
![Page 6: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/6.jpg)
color relationships color relationships similar to people
relationships?
• complementary
• harmonious
• discordant
• color temperature
![Page 7: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/7.jpg)
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
![Page 8: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/8.jpg)
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
![Page 9: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/9.jpg)
warm vs. cool warm vs. cool
![Page 10: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/10.jpg)
simultaneous contrastsimultaneous contrast
the color on the right appears to be brighter than the color on the left
![Page 11: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/11.jpg)
color propertiescolor properties
how can you use these color properties to your advantage?
![Page 12: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/12.jpg)
spa site spa site
soft colors welcome visitors and put them at ease
![Page 13: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/13.jpg)
athletic sites athletic sites
high contrast colors energize & invigorate
![Page 14: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/14.jpg)
case study: artist Joe Forkan’s case study: artist Joe Forkan’s website website http://www.joeforkan.com
“Monster”
![Page 15: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/15.jpg)
case study: artist Joe Forkan’s case study: artist Joe Forkan’s website website http://www.joeforkan.com
“Cruel Memory” “Tide”
![Page 16: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/16.jpg)
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
![Page 17: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/17.jpg)
natural color natural color association association
blue is often associated with water
![Page 18: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/18.jpg)
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
![Page 19: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/19.jpg)
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.
![Page 20: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/20.jpg)
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.”
![Page 21: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/21.jpg)
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.”
![Page 22: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/22.jpg)
safe sites safe sites
Dell, Microsoft, AOL, WalMart, etc.
![Page 23: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/23.jpg)
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.”
![Page 24: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/24.jpg)
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.”
![Page 25: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/25.jpg)
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.
![Page 26: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/26.jpg)
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.”
![Page 27: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/27.jpg)
designing for a global designing for a global audience audience
BROWN
earth
reliability
comfort
endurance
“Brown is usually quite neutral and associated with nature.”
![Page 28: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/28.jpg)
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.”
![Page 29: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/29.jpg)
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.”
![Page 30: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/30.jpg)
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.”
![Page 31: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/31.jpg)
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….
![Page 32: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/32.jpg)
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
![Page 33: Color For Websites by Molly E. Holzschlag Presented by: Breanna McLean](https://reader038.vdocuments.mx/reader038/viewer/2022110400/56649dd15503460f94ac7895/html5/thumbnails/33.jpg)
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.