from skeuomorphism to material design and back. the language of colors in the 2nd generation of...
TRANSCRIPT
XII ConfColore
Torino, 2016
From Skeuomorphism to Material Design and back. The language of colors in the 2nd generation of mobile interface design. Letizia Bollini, PhDDepartment of Psychology, University of Milano Bicocca
Mobile OS:a new paradigm.
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
3 24
Skeuomorphism> 2007: iPhone
> 1st generation of mobile Graphical User interfaces
> Skéuos tool + morphé shape (1890)
> Gessler, 1998
> Simulative, mimetic, metaphorical
> 3D, tactile, shaded, realistic, muted colors
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
4 24
The colors of the worldSkeuomorphism style “in which certain images and metaphors, like a spiral-bound notebook or stitched leather, are used in software to give people a reassuring real-world reference.”
Wroblewski, 2011
A unique color language,three different approaches.
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
7 24
Apple iOsFlat Design> 2013: iOs 7
> 2nd generation of mobile Graphical User interfaces
> Abstract, synthetic, minimal
> 2D, flatten, basic shapes, bright, bold colors
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
8 24
A touch of abstraction“Let color simplify the UI. A key color —such as yellow in Notes— highlights important state information and subtly indicates interactivity. It also gives an app a consistent visual theme. The built-in apps use a family of pure, clean system colors that look good at every tint and on both dark and light backgrounds.”
iOS Guideline, 2013
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
13 24
Google AndroidMaterial Design> 2014: Material Design
> 2nd generation of mobile Graphical User interfaces
> Abstract, dynamic
> 2-dimensional, multi-layered, animated, vibrant color blocks
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
14 24
Tactile reality“Content is bold, graphic, and intentional: bold design creates hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create immersion and clarity.”
Material Design, 2014
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
18 24
MicrosoftWindows 7 mobile> 2010: Windows 7 (Surface)
> 1nd generation of mobile Graphical User interfaces
> Abstract, square-based
> 2D, flatten, regular colored shape, light/dark
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
19 24
Interactive ecosystem“Color provides intuitive wayfinding through an app’s various levels of information and serves as a crucial tool for reinforcing the interaction model.”
Universal Windows Platform, 2012
From Skeuomorphism to Material Design and back. Letizia Bollini, PhD - Department of Psychology, University of Milano Bicocca
XII ConfColore
23 24
Conclusions> From 216 palette browser safe to billions of colors: less is more
> Color language as strategic value in user experience
> User expectation and mental models according to colors’ semiotic and cultural meaning
> Revision of mobile OS according to Gestalt Psychologie and Basic Design Principles
> Material design is not the bible!
Letizia Bollini, PhDPsychology Department, University of Milano Bicocca
[email protected]@extrasmallit