Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dev-signing with color


Published on

Kristy Cunningham from the Hobsons Global UX team gives a primer on color and UI, generalized for an external audience. Topics include: The Science of Color, Color and Technology, Basic Color Theory, and Color and Humans.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Dev-signing with color

  1. 1. Dev-signing with Color A semi-subjective guide to UI and color Kristy Cunningham UX Designer Hobsons 2015
  2. 2. Agenda ★ The Science of Color ★ Color and Technology ★ Basic Color Theory ★ Color and Humans ★ Discussion, Q and A
  3. 3. Color and Science I assure you color science is less dangerous than Muppet Labs.
  4. 4. Color is connected to light by StormSignal on flickr
  5. 5. Light is made of waves by Richard Flink on flickr
  6. 6. Waves make up a spectrum by sburke2478 on flickr
  7. 7. The (visible) spectrum from DePaul University Colors of light are just a small visible part of the electromagnetic spectrum.
  8. 8. How objects have color Light waves Reflected Wavelength/s
  9. 9. The eye and color from Webvision Cones on the retina allow us to perceive color.
  10. 10. Color and Technology Color and technology has a history older than Nintendo.
  11. 11. Subtractive color from Wikipedia ★ When you add all colors you get black. ★ Used for print and traditional art. ★ UI doesn’t use this.
  12. 12. Additive color from Wikipedia ★ When you add all colors you get white. ★ Screen color. ★ This is what we work with!
  13. 13. Bit Depth: The power of 2 8 bit era 16 bit era 32-64 bit era
  14. 14. Web Safe 216 original “Web Safe” Colors ★ Thank goodness it is 2015!
  15. 15. Color for Browsers ★ HTML ○ Hexcodes ○ RGB (Red, Green, Blue) ★ CSS ○ All of the above AND ○ RGBA (Red, Green, Blue, Alpha) ○ HSL (Hue, Saturation, Lightness) ○ HSLA (Hue, Saturation, Lightness, Alpha)
  16. 16. Hue, Saturation, Lightness ★ Hue is the color. ★ Saturation is a scale of gray to intense color. ★ Lightness is basically what it sounds like - a scale Light to Dark! image from Christina Descalzo’s blog
  17. 17. What the heck is alpha? ★ Alpha channel has to do with transparency. ★ It is on a scale of 0-1. ★ 1 is completely opaque ★ 0 is completely transparent ★ That’s all you really need to know for UI image from My Photoshop Site
  18. 18. Examples CCR SCSS Variable $green: #8BC100; RGB (139, 193, 0); RGBA (139, 193, 0, 1); HSL (77%, 100%, 76%); HSLA (77%, 100%, 76%, 1);
  19. 19. Styleguides to Stylesheets Gangnam style. Color style. It’s stylistic.
  20. 20. Print Style Guides ★ Meant to keep designs and writing consistent and on brand. ★ Handy reference From Creative Blog
  21. 21. HTML ★ markup ★ made to share documents ★ this need didn’t require a lot of color management
  22. 22. CSS ★ Realization-style was missing from HTML ★ Meant to specify how a document looks ★ Still has flaws
  23. 23. SCSS - Gettin’ Sassy ★ CSS extension ★ Adds variables to the mix ★ Nesting ★ Imports ★ Mix-ins ★ And other goodies
  24. 24. Living Style Guides
  25. 25. Color and tech resources ★ SASS: CSS with superpowers ★ SASS and Compass Color Functions ★ SCSS Blend Modes ★ An In-Depth Overview of Living Style Guide Tools
  26. 26. Color Theory A way to avoid #fairygodmother problems.
  27. 27. Basic Terms ★ Hue: The color ★ Tint : adding white to a hue ★ Shade: adding black to a hue ★ Tone: adding gray to a hue Basically I just described Hue + Saturation + Lightness in other termsfrom Operation Write Home Design Bootcamp
  28. 28. The Color Wheel A handy dandy color tool ★ Used to help make decisions about colors ★ Shows relationships between colors
  29. 29. Primary Colors Red, Yellow, Blue ★ In traditional art the model to mix all other colors
  30. 30. Secondary Colors Orange, Purple, Green ★ Traditionally, you use primary colors to create these
  31. 31. Tertiary Colors The Colors In Between ★ And you just keep mixing colors to get new colors! ★ You can totally replicate this using SCSS’s mix($color-01, $color-02, [$weight])
  32. 32. Warm and cool colors Warm colors appear closer. Cool colors appear farther away.
  33. 33. Color harmonies ★ Color harmonies leverage the color wheel ★ By following harmony guidelines it is easier to make eye pleasing palettes
  34. 34. Monochrome Any tint, shade, or tone of the same HUE in a color scheme. You can use lighten(), darken(), saturate(), desaturate() to play with a monochromatic color scheme using this $blue (#00bdcb). These need ( $color, $amount )
  35. 35. Analogous You can use adjust-hue( $color, $amount) to play with an analogous color scheme using this $blue (#00bdcb). For the best results don’t go further than +/-45 degrees. Colors that are next to each other on the color wheel.
  36. 36. Complementary ★ This grabs attention. ★ Use sparingly. ★ Do not use this scheme for a text/background combination! Using colors across from each other on the color wheel.
  37. 37. Triadic Using 3 colors evenly spaced on the color wheel. ★ Use one as primary. ★ The other two become accents.
  38. 38. Split Complementary A variation of the complementary scheme ★ Easier to use ★ Easier on the eyes
  39. 39. Tetradic Uses two pairs of complementary colors. ★ Use one as primary. ★ The others become accents.
  40. 40. Square Using 3 colors evenly spaced on the color wheel. ★ Use one as primary. ★ The others become accents.
  41. 41. More on color theory ★ Color Hexa ★ Adobe Kuhler ★ Color Theory for Designers ★ Introduction to Color Theory ★ Colour Theory ★ Solarized is a palette based on the color wheel with readable color contrast
  42. 42. With great power ... You know the rest.
  43. 43. Color and Humans Bubbles gets it.
  44. 44. Remember this? Warm colors appear closer. Cool colors appear farther away. You can affect mood with this!
  45. 45. Warm colors and emotion ★ Can be harder on the eyes ★ Joy ★ Excitement ★ Optimism ★ Grabs attention
  46. 46. Cool colors and emotion ★ Calming, soothing ★ Can be interpreted as sad ★ Blue is commonly used by institutions, like banks ★ Purple is often seen as “creative”
  47. 47. Notes on red ★ Red has the same weight as black ★ Western world associates it with danger ★ Other cultures see red as joyous
  48. 48. Contrast ● Grabs attention ● Accessible ● Enhances readability o But pure black/pure white is harder on eyes
  49. 49. Other guidelines ★ Perception of color is not only personal but developmental and cultural. ★ When in doubt, do your homework! ★ This image is a starting point
  50. 50. People Resources ★ How Color Affects Our Mood ★ Using Color to Appeal to Users ★ A Guide to Color, UX, and Conversion Rates ★ Colour: User Experience and Psychology ★ Color and Cultural Design Considerations
  51. 51. Questions ★ Comments? ★ Favorite colors?