Color has value beyond aesthetics. Color is powerful. It is stimulating, healing, soothing and fun. This is a presentation about 1. Color theory 2. Color psychology 3. Color harmony (web design examples) 3. Trends & Tools Hope you enjoy it :)

1. How Do Colors Affect Our Mood
Color Theory/Psychology for Web Design
Shandy Tsai

2. How do you feel about these screens?

3. https://www.maggi.in/

4. https://www.masterclass.com/

5. http://riiotlabs.com/fr/accueil

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

7. AGENDA
• Introduction
• Basic Theory
• Color Psychology
• Color Harmony
• Modern Trends
• Online Tools

8. Shandy Tsai
Associate Product Manager at InternetBrands
UX Designer and Marketing Intern at BEZALEL
University of Southern California
Master 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

12. BASIC COLOR THEORY

13. PRIMARY
COLORS

14. SECONDARY
COLORS

15. SECONDARY
COLORS

16. TERTIARY
COLORS

17. Color Wheel

18. HUE
SATURATION
VALUE
under saturated very saturated
low value high value

19. COLOR PSYCHOLOGY

20. WARM
COLORS
COLD
COLORS

21. http://www.colourpixel.com/

22. https://www.masterclass.com/

24. Excitement
Passion
Energetic
Impulse
Cheap
Luxury
Value
Joy
Warning
Natural
Growing
Healthy
Trust
Safety
Authority
Pure
Innocent
Royal
Wealth
Mysterious
Romance
Youth

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

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

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

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

31. Troublesome Color Combination
TOO MANY
TOO MUCH

33. Monochromatic
• Only one color
• Best for single subjects
• Atmospheric

34. http://silesoleil.com/

35. http://www.bacardi.com/us/home

36. Analogous
• Adjacent on wheel
• Easy on eyes
• Peaceful, comfortable mood
• Seen in Nature

37. http://nasaprospect.com/

38. http://www.tenslife.com/
pages/lookbook/

39. https://www.rdio.com/

40. Complementary
• Opposite colors on wheel
• Very popular
• Naturally pleasing to eye
• Use one color predominantly

41. http://summer.tcm.com

42. http://spreeconf.com/

43. Triads & Tetradic
• Triangle and rectangle
• Hard to pull off
• Never use it equally
• Triads: cartoon/surreal scenes
• Tetradic: foreground/background

44. http://lorenzoverzini.com/

45. http://www.helbak.com/

46. http://www.secretkey.it/

47. TRENDY WEB COLOR DESIGN

48. Trend
• Huge background images
• Color Overlays/Highlighting text
• Monochromatic Color
• High Contrast

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

50. http://bravepeople.co/

51. http://cienneny.com/

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

53. http://www.tennisaufeminin.com/

54. http://www.vibrantcomposites.com/

55. COLOR TOOLS

56. https://color.adobe.com/create/color-wheel/
ADOBE – KULER

57. http://paletton.com/
PALETTON

58. http://www.awwwards.com/
AWWWARDS Web Inspiration

59. https://unsplash.com/
UNSPLASH Free High Resolution Pictures

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

61. FAVORITE WEBSITE
http://www.awwwards.com/LINK/

62. DON’T STRESS
JUST TRY IT OUT
There are no wrong colors.
What matters most, is how you use them

63. REFERENCE
1. 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

64. Thank You

65. http://www.like-there-is-no-tomorrow.com/

66. http://spektrummedia.com/

67. http://www.enterprisefoundation.net/