How Do Colors Affect Our MoodColor Theory/Psychology for Web Design

Shandy Tsai

How do you feel about these screens?

https://www.maggi.in/

https://www.masterclass.com/

http://riiotlabs.com/fr/accueil

http://www.kikk.be/2015/

AGENDA• Introduction

• Basic Theory

• Color Psychology

• Color Harmony

• Modern Trends

• Online Tools

Shandy TsaiAssociate Product Manager at InternetBrands

UX Designer and Marketing Intern at BEZALEL

University of Southern CaliforniaMaster of Science in Product Development Engineering Second prize at USC UX Designathon, Special Prize from StubHub at Emirates Travel Hackathon

National Tsing Hua University Bachelor of Science in Industrial Engineering and Engineering Management President’s Medals, Outstanding Contribution Award to College of Engineering

BASIC COLOR THEORY

PRIMARY COLORS

SECONDARY COLORS

SECONDARY COLORS

TERTIARY COLORS

Color Wheel

HUE

SATURATION

VALUE

under saturated very saturated

low value high value

COLOR PSYCHOLOGY

WARM COLORS

COLD COLORS

http://www.colourpixel.com/

https://www.masterclass.com/

ExcitementPassion

Energetic Impulse Cheap

Luxury Value

Joy Warning

Natural Growing Healthy

Trust Safety Authority

Pure Innocent

Royal Wealth Mysterious

Romance Youth

COLOR HARMONY

http://www.couplescounselingchicago.net/wp-content/uploads/2014/06/happy-couple.jpg

http://www.constellation7.org/Constellation-Seven/Josiah/Index.htm

http://www.waterequipment.com.au/

http://www.angelfire.com/super/badwebs/

Troublesome Color Combination

TOO MANY

TOO MUCH

Monochromatic

• Only one color

• Best for single subjects

• Atmospheric

http

://s

ileso

leil.

com

/

http

://w

ww

.bac

ardi

.com

/us/

hom

e

Analogous

• Adjacent on wheel

• Easy on eyes

• Peaceful, comfortable mood

• Seen in Nature

http

://n

asap

rosp

ect.c

om/

http

://w

ww

.tens

life.

com

/pa

ges/

look

book

/

http

s://

ww

w.rd

io.c

om/

Complementary

• Opposite colors on wheel

• Very popular

• Naturally pleasing to eye

• Use one color predominantly

http://summer.tcm.com

http

://s

pree

conf

.com

/

Triads & Tetradic

• Triangle and rectangle

• Hard to pull off

• Never use it equally

• Triads: cartoon/surreal scenes

• Tetradic: foreground/background

http://lorenzoverzini.com/

http

://w

ww

.hel

bak.

com

/

http

://w

ww

.sec

retk

ey.it

/

TRENDY WEB COLOR DESIGN

Trend

• Huge background images

• Color Overlays/Highlighting text

• Monochromatic Color

• High Contrast

http://www.heimplanet.com/home/

http://bravepeople.co/

http://cienneny.com/

http://www.viens-la.com/

http://www.tennisaufeminin.com/

http://www.vibrantcomposites.com/

COLOR TOOLS

https://color.adobe.com/create/color-wheel/

ADOBE – KULER

http://paletton.com/

PALETTON

http://www.awwwards.com/

AWWWARDS Web Inspiration

https://unsplash.com/

UNSPLASH Free High Resolution Pictures

Best BeachSunshine. Cool breezes. Zero itinerary days and sultry, starry nights. With beach vacations it's all about reaching that blissful state of ahh

FAVORITE WEBSITE

http://www.awwwards.com/LINK/

DON’T STRESS

JUST TRY IT OUT

There are no wrong colors.

What matters most, is how you use them

REFERENCE1. Awwwards – The awards for design on the internet

http://www.awwwards.com/ 2. Intro to Color Theory

https://www.youtube.com/watch?v=059-0wrJpAU 3. Basic color theory for presentations

http://presentitude.com/color-theory-part-1/# 4. 50 Beautiful Color Palettes for Your Next Web Project

http://www.dtelepathy.com/blog/inspiration/beautiful-color-palettes-for-your-next-web-project 5. 7 Color Trends for Nonprofit Web Design in 2015

http://www.accrinet.com/blog/2015/09/03/default/7-color-trends-for-nonprofit-web-design-in-2015/ 6. The meaning of colors

https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/ 7. Understanding Visual Hierarchy in Web Design

http://webdesign.tutsplus.com/articles/understanding-visual-hierarchy-in-web-design--webdesign-84 8. An Introduction to Color Theory for Web Designers

http://webdesign.tutsplus.com/articles/an-introduction-to-color-theory-for-web-designers--webdesign-1437 9. Color Psychology and Web Design

http://www.wix.com/blog/2013/06/color-web-design/ 10.Trendy Web Color Palettes

http://www.awwwards.com/trendy-web-color-palettes-and-material-design-color-schemes-tools.html

Thank You

http

://w

ww

.like

-the

re-is

-no-

tom

orro

w.c

om/

http://spektrummedia.com/

http

://w

ww

.ent

erpr

isef

ound

atio

n.ne

t/