Colour_creativity_and_running_away.pdf

A past talk exploring the impact of colour on creative psychological function. Based on colour research, I present the ongoing development of a coding environment colour palette to help designers and developers improve their creativity and productivity.

Transcript

1. Colour, creativity, &… running awa Exploring the impact of colour on psychological function to create a colour palette for code editors Martin Jewiss Lead Developer Mpjdesign
2. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. This will get better, I promise Text editors, code editors, IDEs. Developers • programming Creative writers • concentrate on words not formatting Designers • designing in the browser • when design needs creating Colour themes Help differentiate different code elements and languages.
3. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Scratch that itch New languages for designing and developing websites appear all the time. No theme for my favourite code editor that would work correctly with the languages we had started using. Solarized • A rigorously designed theme • Intended for use in different environments • Almost constant contrast ratio between light and dark themes
4. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Coding Screens are bad for you Who does not spend too much time in front of their screen? • Eye strain • Chronic eye damage A theme that's kind to your eyes? • Could it help reduce eye strain? • Green is supposed to be restful for your eyes • Where's the research? (A lot of) colour theory is guff • Creative & scientific folklore • Old research with simple, possibly faulty methodology • Subconscious cultural or ethnic bias
5. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Coding Screens are bad for you Who does not spend too much time in front of their screen? • Eye strain • Chronic eye damage A theme that's kind to your eyes? • Could it help reduce eye strain? • Green is supposed to be restful for your eyes • Where's the research? (A lot of) colour theory is guff • Creative & scientific folklore • Old research with simple, possibly faulty methodology • Subconscious cultural or ethnic bias
6. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Some fine people thought the same… Stephanie Lichtenfeld, University of Munich Andrew Elliot, University of Rochester, New York Markus Maier, University of Munich Reinhard Pekrun, University of Munich A lack of scientifically rigorous theory about colour psychology. A general model of colour and psychological functioning. Assumptions • Colours can communicate specific meanings • We are biologically predisposed to respond to different colours in different ways in particular situations (Nature) • Learned associations play a part (Nurture)
7. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. So they experimented on guinea pigs people… Basic methodology 1. Expose test subjects to a colour (e.g. red door) 2.Ask subjects to perform tasks which measure intellectual or creative performance (e.g. solve an anagram, list how many ways can a tin can be used?) 3.Measure activity in specific regions of the subject’s brain 4.Debrief the subject to confirm age, gender, ethnicity, and their conscious reaction to the test
8. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. And they found… Red • Reduced intellectual performance but increased mental effort • Undermined analytical performance • No influence on creativity • May help with basic detail-oriented cognitive tasks requiring little mental processing Green • Improved performance in creative tasks • No influence on analytical performance • Effects were sub-conscious
9. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Run Away! or Come Here! • Very different results in social situations • Context is key • Research may be refined or disproved, both leading to different conclusions • What about colour blindness? • What about physiological effects? • Other factors will probably affect you more - the flu anyone? But it’s the best information available now.
10. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. 1.6180339887… Also known as: • The Golden Section • Phi • Golden Ratio • Medial Section • Divine Proportion • etc. a:b is the same ratio as a+b:b Used, seen, or experienced in: • Art • Architecture and Design • Music • Nature • Mathematics • Perception studies http://onlyhdwallpapers.com/high-definition-wallpaper/spiral-golden-ratio-desktop-hd-wallpaper-379454/
11. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. 1.6180339887… Also known as: • The Golden Section • Phi • Golden Ratio • Medial Section • Divine Proportion • etc. a:b is the same ratio as a+b:b Used, seen, or experienced in: • Art • Architecture and Design • Music • Nature • Mathematics • Perception studies Max Ronnersjö http://en.wikipedia.org/wiki/File:Aeonium_tabuliforme.jpg
12. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. 1.6180339887… Also known as: • The Golden Section • Phi • Golden Ratio • Medial Section • Divine Proportion • etc. a:b is the same ratio as a+b:b Used, seen, or experienced in: • Art • Architecture and Design • Music • Nature • Mathematics • Perception studies Andrew Baldwin http://en.wikipedia.org/wiki/File:Parthenon_night_view.jpg
13. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. It's colour Jim, but not as we know it Colour spaces are imperfect scientific models to work with and communicate colour information. Calculations to translate a colour between colour spaces are also imperfect. sRGB (red, green, blue) Used in monitors, televisions, cameras… HSL (Hue, Saturation, Lightness) Variant of the classic colour wheel. CIE L*a*b* (Lightness, a-axis, b-axis) Approximates human perception of colour.
14. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. It's colour Jim, but not as we know it Colour spaces are imperfect scientific models to work with and communicate colour information. Calculations to translate a colour between colour spaces are also imperfect. sRGB (red, green, blue) Used in monitors, televisions, cameras… HSL (Hue, Saturation, Lightness) Variant of the classic colour wheel. CIE L*a*b* (Lightness, a-axis, b-axis) Approximates human perception of colour.
15. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. It's colour Jim, but not as we know it Colour spaces are imperfect scientific models to work with and communicate colour information. Calculations to translate a colour between colour spaces are also imperfect. sRGB (red, green, blue) Used in monitors, televisions, cameras… HSL (Hue, Saturation, Lightness) Variant of the classic colour wheel. CIE L*a*b* (Lightness, a-axis, b-axis) Approximates human perception of colour.
16. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. The Golden Section meets L*a*b* L* = +50 Best colour “purity” a* axis Negative: 128/φ² = -49 b* axis Positive: 128/φ = +79 Conversions RGB: 53, 137, 0 Hex: 358900 Hue: 97° Saturation: 100% Lightness: 27% Luminance: 43%
17. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Enlightenment Contrast ratio: the perceived brightness of foreground against background. Contrast ratio for AAA web accessibility: 7:1 Contrast ratio AA web accessibility: 4.5:1 1. Use Golden Section to calculate points on the L* axis, starting at L*=50. 2.Contrast trials using combinations of dark green background and light green text. 3.Final choice: a judgement made under office lighting. A lower contrast alternative may will be useful for working in lower light.
18. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Enlightenment Contrast ratio: the perceived brightness of foreground against background. Contrast ratio for AAA web accessibility: 7:1 Contrast ratio AA web accessibility: 4.5:1 1. Use Golden Section to calculate points on the L* axis, starting at L*=50. 2.Contrast trials using combinations of dark green background and light green text. 3.Final choice: a judgement made under office lighting. A lower contrast alternative may will be useful for working in lower light.
19. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Foundation colours Text colour • L*a*b* values: 76, -49, +79 • HSL values: 82°, 100%, 41% • RGB hex value: 85d000 • Luminance value: 69% Background colour • L*a*b* values: 15, -49, +79 • HSL values: 114°, 100%, 10% • RGB hex value: 053100 • Luminance value: 14% Contrast ratio • 7.6:1
20. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • Triadic • Tetradic • Analogic
21. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • Triadic • Tetradic • Analogic
22. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • Triadic • Tetradic • Analogic
23. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • Triadic • Tetradic • Analogic
24. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in more circles 1. Plot colours 30° apart Visually perceived brightness We don't perceive all colours of the same lightness to have the same brightness. 2.Luminance: 43% 3.Remove some colours Increase the difference in hue between those that remain. 4.Tinkering with contrast ratios 5.Replace red with grey
25. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in more circles 1. Plot colours 30° apart Visually perceived brightness We don't perceive all colours of the same lightness to have the same brightness. 2.Luminance: 43% 3.Remove some colours Increase the difference in hue between those that remain. 4.Tinkering with contrast ratios 5.Replace red with grey
26. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Going round in more circles 1. Plot colours 30° apart Visually perceived brightness We don't perceive all colours of the same lightness to have the same brightness. 2.Luminance: 43% 3.Remove some colours Increase the difference in hue between those that remain. 4.Tinkering with contrast ratios 5.Replace red with grey
27. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. Wallace: the not-so-final colour palette There is still a lot to do: • Revisit perceived brightness values and conversion algorithms • Complete Wallace for Espresso • Translate Wallace to Textmate and Sublime • Create a lower contrast version • License questions • Publish on Github • Does it work? A nice research project…
28. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign. https:/ /github.com/martinjewiss/wallace Contact @mjmpjdesign martin@mpjdesign.ltd.uk www.mpjdesign.ltd.uk References Lichtenfeld, S., Elliot, A.J., Maier, M.A., & Pekrun, R. (2012). Fertile Green: Green Facilitates Creative Performance. Personality and Social Psychology Bulletin, 38, 784–797. Elliot, A.J., & Maier, M.A. (2007). Color and Psychological Functioning. Current Directions in Psychological Science, 16, 250–254. Thanks John: workwithcolor.com Tobias Stamm: manderim.ch Ian Beck: macrabbit.com Kieran Patel: @kieranajp Other Tools leaverou.github.io/contrast-ratio ethanschoonover.com/solarized