1 / 26

Color (the principles of beautiful web design, by jason beaird )

Color (the principles of beautiful web design, by jason beaird ). Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee. Color. Choosing color is no simple matter

joylyn
Download Presentation

Color (the principles of beautiful web design, by jason beaird )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Color(the principles of beautiful web design, by jasonbeaird) Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee

  2. Color • Choosing color is no simple matter • Aesthetic, identify and usability considerations • Most modern displays can render > 16 million colors • Infinite number of horrible color combinations waiting to happen

  3. The Psychology of Color • Color psychology is a field devoted to analyzing the emotional and behavioral effects produced by colors • bedroom color ? -> tranquil Zen retreat • Certain colors are rooted in individual experience • Many cultures have completely different interpretations of colors

  4. Color Associations - Red Stimulating adrenaline and blood pressure Exciting, dramatic, and rich color Color of passion Darker shades of red (burgundy and maroon) have a rich, indulgent feeling - wine, fine living Sometimes evoke anger

  5. Color Associations - Orange Active, energetic Doesn’t evoke the anger that red sometimes does Happiness, enthusiasm, creativity More informal, less corporate

  6. Color Associations - Yellow Highly active, visible Taxicabs, caution signs Happiness and energy “Babies cry more in yellow rooms, husbands and wives fight more in yellow kitchens…”

  7. Color Associations - Green Nature Very soothing color Symbolizes growth, freshness and hope Easier on the eyes, and far less active

  8. Color Associations - Blue Symbolizes openness, intelligence and faith Physiologically, blue has been found to calm people down It can also reduce appetite Sky and sea (airlines, cruise websites) Stability and clarity or purpose (IBM, Dell, HP and Microsoft)

  9. Color Associations - Purple Historically, royalty and power Wealth and extravagance Often connected with flowers, gemstones and sunsets

  10. Color Associations - White Clean Perfection, light and purity Bride wears a white dress Default use of white as a background color

  11. Color Associations - Black Power, elegance and strength, depending on how it’s used There is no wrong color to use The success of a color scheme depends on the harmony that exists between all colors chosen

  12. Color Temperature - Warm Warm colors: red to yellow, including orange, pink, brown and burgundy Represent both heat and emotions

  13. Color Temperature - Cool Cool colors: green to blue, some shades of violet (intermediate between red and blue, so closer to blue) Calm people down and reduce tension

  14. Color Value Lightness or darkness Lightness – good Darkness – evil Tint – pure color + white Shade – pure color + black

  15. Color Saturation / Intensity Brightness or dullness Intense, vivid colors stand out Add gray (black and white) to a color, it starts to become dull and desaturated

  16. Color Theory 101 Computer screens: red, green, blue (RGB), additive color model Prints (color printer): cyan, magenta, yellow and black (CMYK), subtractive color model

  17. Color Theory 101 Color wheel (RGB) http://www.cs.unh.edu/cit/502/resource/tutorials/fall10/kaj75/index.html

  18. The Scheme of Things • How do we find multiple colors that work together? • Color Schemes • Monochromatic • Analogous • Complementary • Split complementary • Triadic • Tetradic (double complementary)

  19. Monochromatic Color Scheme Single base color Any number of tints or shades of that color http://leeleong.com/UNCGsubjects/2011Spring_CSC330/index.htm

  20. Analogous Color Scheme Colors adjacent to one another on the color wheel Don’t take a slice bigger than one-third of the whole (you will make somebody sick) http://www.regines.net.au/

  21. Complementary Color Scheme Colors opposite each other on the color wheel Such as green and red, yellow and violet, or orange and blue (http://www.ufl.edu/) Beware of pitfalls (simultaneous contract: too different)

  22. Complementary Color Scheme Beware of pitfalls (simultaneous contract: too different) My Eyes, OH My Eyes, I am going to be blind!

  23. Split-complementary, Triadic and Tetradic Color Schemes Split-complementary: two colors adjacent to your base color’s complementary

  24. Create a palette After choosing a color scheme, create a palette (more solid color choices to work with). Hexadecimal color codes helps Now just do it

  25. Color::: questions? Leong Lee, Ph.D. University of Missouri (MS&T) Assistant Professor, Dept. of Computer Science Austin Peay State University, Tennessee

  26. CSCI 3350 ::: Web User Interface Design::: Fall 2012 Basic web design principles emphasizing alignment, proximity, contrast and repetition. Web design topics incorporating layout, color, texture, typography and imagery. User interface design principles for web pages: client side programming, web site planning, process of designing and developing user interface mock-ups/prototypes for dynamic back-end database driven web applications.

More Related