Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Digibury: Martin Jewiss - Colour, Creativity and Running Away
Semelhante a Digibury: Martin Jewiss - Colour, Creativity and Running Away (20)
Mais de LizzieHodgson
Mais de LizzieHodgson (7)
Último
Último (20)
Digibury: Martin Jewiss - Colour, Creativity and Running Away
- 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. 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. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 3. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 4. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 5. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 6. 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) Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 7. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 8. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 9. Run Away! or Come Here! • • • Very different results in social situations • • • What about colour blindness? Context is key Research may be refined or disproved, both leading to different conclusions What about physiological effects? Other factors will probably affect you more - the flu anyone? But it’s the best information available now. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 10. 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 http://onlyhdwallpapers.com/high-definition-wallpaper/spiral-golden-ratio-desktop-hd-wallpaper-379454/ Perception studies Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 11. 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 Max Ronnersjö http://en.wikipedia.org/wiki/File:Aeonium_tabuliforme.jpg Perception studies Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 12. 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 Andrew Baldwin http://en.wikipedia.org/wiki/File:Parthenon_night_view.jpg Perception studies Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 13. 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. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 14. 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. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 15. 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. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 16. 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% Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 17. 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. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 18. 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. Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 19. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 20. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • • • Triadic Tetradic Analogic Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 21. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • • • Triadic Tetradic Analogic Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 22. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • • • Triadic Tetradic Analogic Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 23. Going round in circles The HSL Colour Wheel Use angles to calculate harmonious colour combinations: • Complementary • • • Triadic Tetradic Analogic Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 24. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 25. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 26. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 27. 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… Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.
- 28. 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 Colour, creativity, and… running away. Martin Jewiss, Lead Designer, Mpjdesign.