OUGD501- Studio Brief 1- Critical Analysis- Essay

Skeuomorphism and Flat Design within Contemporary Design Movements.

‘Designers loaded everything with drop shadows and gradients to give the illusion of depth, and of a light shining above and to the side. They did this because it was comfortable. Society had to adapt to perceiving things on a digital screen.’ (Greenstein, A, 2013)

‘Skeuomorphism’ and ‘Flat Design’ are two terms that refer to different design movements that are at the opposite ends of the spectrum in regards to aesthetics, functionality and usability.  A skeuomorphic design emulates objects in the physical world to make it easier for people to feel more familiar with a device.  Flat design does the opposite, it doesn’t employ any three dimensional realism by disregarding gradients, bevels, shadows and lighting, instead favouring typography and blocks of colour. With such high contrast in philosophy, flat design offers an alternative to the familiarity of skeuomorphic design. In his essay ‘laptop aesthetics’, Adrian Shaughnessy suggests, ‘Within the digital domain, for so long the place for graphic innovation, there are signs that a burgeoning aesthetic maturity has arrived offering an alternative to Toy Story 3D-ness.’ (2003)

This essay attempts to discuss what exactly flat design and skeuomorphism are, the pros and cons of both and the possibility of a new and more balanced system that combines successful elements of the two.

‘More than ever, technology constraints have disappeared, and designers have their version of the mythical perpetual motion machine — a new medium where pixels are infinitely available and infinitely malleable. We should focus on setting them free.’ (Maeda, J, 2013)

Before writing about Skeuomorphism it is necessary to define what it means. The word ‘Skeuomorph’ originated from Greece and is compounded from the Greek words skeuos, container or tool, and morph, meaning shape. The Oxford Dictionary defines the word as ‘an object or feature, which imitates the design of a similar artefact made from another material.’ Around 1980 the term was applied to material objects but now it is most commonly associated with computer applications as well as mobile interfaces. Skeuomorphs are designed to familiarise the user by creating a connection with past experiences that are ingrained into society, making new mediums feel more comfortable and easy to understand.

‘At its core, skeuomorphism is more than just the gratuitous mimicry of the look of a leather calendar. Buttons, shadows, ridges and toggles are skeuomorphic functionalities. Swiping, pushing and pulling are also real life interactions and could perhaps be called skeuomorphic, since they are not absolutely necessary to the functionality of the interface. But this is where the lines blur and I would argue that although not necessary. They make it easier for our 3D brains to understand how to interact with a 2D interface and thus serve an important purpose.’ (Sanchez, E, 2012)

Donald Norman highlights this notion in his book ‘The Psychology of Everyday Things’ suggesting, ‘the human mind is exquisitely tailored to make sense of the world. Give it the slightest clue and off it goes, providing explanation, rationalization, understanding.’ (1988, p2) Victor Dewsbery takes this point about skeuomorphic design further in relation to technology and computer interfaces describing a need in digital design for a metaphor that ‘is often used to place the individual program routines into a meaningful context that can be understood by the user.’ (2002, p112) Kuang would argue ‘When you’re looking at computer windows that layer on top of each other like paper, you’re looking at metaphorical rules for how computer interactions should behave, drawn from the physical world.’ (2013)

Therefore, these ideas about what Skeuomorphic design is comprised of have common threads that exist in all the definitions proposed here. Skeuomorphism could be considered to be the manifestation of ‘root metaphors’ that are now embedded in all of our day-to-day interactions with objects and products. This gives users that sense of a ‘connection to past experiences’ and a familiarity that is sometimes necessary for people to engage with products, emerging technologies and the design of digital interfaces.

The term ‘flat design’ refers to a design trend currently influencing the digital domain that has grown in popularity over the last two years. It disregards visual clutter such as drop shadows, gradients and lighting effects, instead favoring vivid colours, simple shapes and crisp typography.

‘As each new technology matures, customers are no longer happy with the flashy promises of the technology but instead demand understandable and workable design.’ (Norman, D, 1988, p15)

The trend may be current, however the philosophy is not. The aesthetics and ideology associated with flat design can be clearly seen in a historical context when compared with modernism, a philosophy from the 1920’s that emphasized simplicity, truth to materials, the progression of technology and the well-known phrase ‘form follows function.’ Massimo Vignelli confirms this in his essay ‘Long Live Modernism’, stating ‘modernism was and still is the search for truth, the search for integrity, the search for cultural stimulation and enrichment of the mind. Modernism was never a style, but an attitude,’ (1991) a sentiment and ideology that can be clearly seen in today’s current flock of technology, mobile and web applications. Microsoft’s ‘Windows 8’ or Apple’s ‘Maverick’s’ user interface are excellent examples of how when ‘flat design’ is applied correctly, it can exploit the virtues of designing for the screens two dimensional space, adding only what is necessary to maximize usability and functionality. Stefan Mumaw describes this concept stating that ‘designers also use visual tools-colour, shape, size, and layout-to communicate order, emotion, mood, and attraction. These elements allow designers to design and create simple structures from complex assets. In short, designers can make a lot look like a little. They do that by applying not only what they know but what they have experienced. Simplicity is rarely the result of too little to say, but rather, how it is said.’ (2002, p65)

Certain aspects of graphically intense design styles are considered bloated and unnecessary by ‘flat design’ advocates, as is the use of effects such as drop shadows or textures. In his writing ‘Material Honesty on the Web’, Kevin Goldman suggests ‘without all the shading, shadows, and bulbous buttons, we get a flatter (or honest, or native, or authentically digital) web. Call it what you will, the flat web focuses more on content.’ (2013) This ‘visual clutter’ is replaced with simple 2 dimensional objects, typographical styles and block colours that create a relationship between the figure and ground. In turn, this establishes a visual hierarchy in which the content is placed with more importance than other visual elements. ‘The palette of emotional design for flatlanders is instead temporal. Temporal beauty lives in state-change animations, nuanced timing effects, strategically placed user feedback, and other “interesting moments,” not drop shadows and Photoshop layer effects. Flatlanders build all kinds of emotion and depth combining these moments with delightful microcopy, personality, and typography. All honest—all web—all good.’ (Goldman, 2013) This idea is fundamental to the recent success of flat design in the digital space due to technological advances in screen display sizes and monitor resolutions, the mobile web and user interfaces. 

In order to illustrate the ideas talked about above it is necessary to analyze examples of skeuomorphic and flat design. This will form the basis for a discussion of the benefits and draw backs of the two. The skeuomorphic image refers to the Apple Mac operating system 10.1 and the flat design image references the Windows 8 operating system.

In regards to ‘visual clutter’, figure1 overloads the page with information; the main points of interaction are displayed at the top and bottom of the page with the content in the middle. The layering of documents mimics the conventional method of workflow by imitating a physical desktop space with documents placed on top of each other. This is an example of skeuomorphism transferring restrictions of the physical into a digital space. In his writing ‘Flat Design vs. Skeuomorphism - why you are comparing oranges to apples’, James Duval comments on a similar issue with skeuomorphic boundaries. ‘Realism can bring the limitations of the real world with it in its digital form. Think of how most calendars still show you days on a monthly basis, or calculator apps only show you one line for the results, rather than allowing you to keep track of your history or multiple calculations at once.’ (2013) In figure2, it’s clear to see that a strict grid system has been put in place. This creates a consistent layout that helps to organize applications, giving structure and clarity to information. Garaza would argue that ‘society is quickly moving into the Jetsons era and the future is now. This means that some of the original design patterns that we leveraged to introduce people to new technologies are also changing. As users get more sophisticated, design systems evolve into something that is more suitable to the medium, rather than emulating models from the past.’ (2013) This is a good example of how form can follow function as the content avoids unnecessary noise allowing it to become the main focal point.

In figure1, the user interface relies heavily on skeuomorphic indicators to inform the user of points of interaction. For example, the software icons in the dock at the bottom of the page use techniques such as gradients and lighting to portray depth, which in turn creates hierarchy and helps separate the information from the background. In figure2, the majority of icons have been stripped of decoration, solely relying on colour and type to decipher information; this could be a problem for some users that are unfamiliar with navigation. Norman comments on this by suggesting, ‘there must be some way of knowing what action and where it is to be done. This requires a
convention of highlighting, or outlining, or depiction of a actionable object.’ (2004) This is supported by Nishant Agrawal as he suggests, ‘Gradually, you start understanding, and appreciating, the detail of skeuomorphism. There are many layers which separate the button from the background – shadow, color, gradient, border … You start to understand that each has a role to play and together they give a unique individuality to the button.’ (2013) However this could be argued to be something of a one-dimensional outlook on the progression of digital design, stalling innovation and creativity. In his article ‘The Real Problem With Apple: Skeuomorphism In iOS’, Tim Worstall suggests ‘that may well have made sense twenty years ago, when most in the world of work were familiar with the physical world example. It’s quite possibly less so now when a goodly chunk of the labour force have never even seen one. And the perpetuation of this organisational form might be limiting innovation in more modern ones.’ (2012)

As discussed briefly in the last paragraph, a big uncertainty surrounding flat design is the execution of navigation. Typography and colour have a leading role in successfully achieving the distinction of points of action. Figure2 is a good example of this concern; the blocks of vivid colours separate the content from the background, resembling a panel or button. In his article ‘Flat design, iOS7, Skeuomorphism and All That’, Turnbull comments on the importance of selecting an appropriate colour scheme by suggesting, ‘you can still embody flat design using shades of grey with an accent colour, but adopting new colour trends and creating a bright, diverse palette can help to create important contrast and help to recreate effects rivaled only by gradients, shadows and other outgoing embellishments.’ (2013) Payne challenges this by suggesting good design has ‘to be effective, designers must set their sights well beyond easy-to-use. We need to convey more than how. We need to convey what as well. We need to be interpreters, to contextualize and concisely convey their identity, purpose, and value.’ (2013) Further more, Spiekermann would argue ‘Cul­tural para­me­ters like read­ing habits, lit­er­ary cul­ture (or lack of) – our deeply embed­ded fear of change, all these give an excuse to imi­tate the old, even though there are no tech­ni­cal rea­sons to do so.’ (2012) This is clearly seen in figure1 where less attention is paid to type aesthetic and focused more on graphical illustration to communicate a message. Where as figure2, uses sharp, sans-serif fonts designed to take advantage of higher screen resolutions, a variety of weights from the same type family have been carefully selected to enhance an illustration or stand-alone for a call to action.

Figure1 would conventionally be classed as skeuomorphic design, where as figure2 can be classed as flat design. This division between the two can be seen as being inaccurate because of past connections to certain symbols displayed in figure2. For example, the icon that resembles a bag is used to communicate the folders use, to store items. This makes a connection with the users past experience, to the old and familiar, transferring a message that has been ingrained into society through the use of metaphors in everyday life. Kuang challenges this idea of interaction of both design criteria by suggesting,  ‘what should the “trash bin” on your computer desktop look like? After all, it doesn’t really behave like a trash can. Should it look like a trash can? If not, what could it possibly look like while still being totally intuitive?’ (2013) Rahul Sen refers to such metaphors as ‘archetypes’. He argues, ‘archetypes can always be deconstructed, challenged or probed since they merely act as starting points of reference. There are innumerable examples of archetypes that have been reintroduced to us in the most puzzling ways in order to question our own understanding of them.’ (2010)

‘In the information-rich society we will find that users establish many of the criteria for what they want available and how they want it to be delivered to them. As designers we must take account of this, and seek to use technologies to satisfy those desires, as well as to innovate and break through the creative barriers that will enable us to produce the ‘next big thing,’ (Cook, M, 2001, p364)

To enable the progression of digital design a compromise could be a possible solution to the problem. For example, the visual clues of skeuomorphism combined with the functionality of flat design lies somewhere in the middle, taking successful elements of the two and applying them in a way that is still familiar and usable. One term used by design advocates to describe this compromise is ‘skueominimalism.’ Edward Sanchez describes this idea in his writing ‘Skeuominimalism - The Best of Both Worlds’ as ‘skeuominimalistic design is simplified up to the point where simplification does not affect usability. And its skeuomorphic affordances are maximized up to the point where it does not affect the simple beauty of minimalism.’ (2012) Another term used by Mathew Moore is ‘almost flat design.’ He suggests ‘Almost Flat Design doesn’t ignore the concept of depth. Instead, depth is used to support comprehension of the interface. But, just like gradients, this can be done in a subtle way and still allow for separation of information.’ (2013) Figure3 is the new iTunes platform; this is a good example of both parameters being used successfully in conjunction. The use of gradients, shadows and highlights create physical familiarity and are used subtly and tastefully to indicate points of action without affecting functionality.   

Analyzing skeuomorphic design against flat design it is clear to see the positives and negatives of the two. This suggests the two philosophies will remain relevant within the digital domain, and by combining the successful elements from each party, the overall usability and functionality will be better balanced and appeal to a wider audience. In his writing ‘iOS 7, Windows 8, and flat design: In defence of Skeuomorphism’, Grinberg suggests ‘designers should not simply flatten designs arbitrarily, but also address the functional qualities of skeuomorphism on each design decision. With these considerations a balanced approach can drive the optimal design parameters.’ (2013) This is further supported by Duval as he suggests ‘Flat design isn’t good or bad. It’s just flat. It’s one company’s solution to the world of responsive design and touch screens but it isn’t the only solution. You can keep a minimalistic approach while also using shadows and gradients – as long as you do it tastefully.’ (2013) With this in mind, the combination of the two design parameters could aid in finding the solution to resolving the problems of successfully designing for a digital space.

‘The future is bright for visual design. Going away are the days of the heavy real-life metaphors of today’s iOS and as we temper back from the Metro interface, the principles for highly usable, effective, and efficient design languages are emerging. Let’s just not forget the lessons of usability we should already know.’ (Moore, M, 2013)

Figure1

Figure2

Figure3

Bibliography

Mumaw, S (2005) Simple: Websites, America, Rockport Publishers

Dewsbery, V (2002) Navigation for the Internet and other Digital Media, Switzerland, AVA Publishing

Norman, D (1988) The psychology of everyday things, New York, Basic Books

Elsom-Cook, M (2001) Principles of Interactive Multimedia, England, McGraw-

Hill Publishing Company

Payne, J (2013) Does Skeuomorphic Design Matter?: http://uxmag.com/articles/does-skeuomorphic-design-matter/ (Accessed 05.01.2014)

Sen, R (2010) Archetypes and Their Use in Mobile UX: http://johnnyholland.org/2010/05/archetypes-and-their-use-in-mobile-ux/ (Accessed 05.01.2014)

Spiekermann, E (2012) From metaphor to maturity: http://spiekermann.com/en/category/writings-texte/ (Accessed 05.01.2014)

Turnball, C, (2013) Flat design, iOS7, Skeuomorphism and All That: http://webdesign.tutsplus.com/articles/industry-trends/flat-design-ios-7-skeuomorphism-and-all-that/ (Accessed 05.01.2014)

Garza, D (2013) Death of skeuomorphism and the future of design: http://www.chapterthree.com/blog/darius-garza/death-skeuomorphism-and-future-design/ (Accessed 05.01.2014)

Worstall, T (2012) The Real Problem With Apple: Skeuomorphism In iOS: http://www.forbes.com/sites/timworstall/2012/09/12/the-real-problem-with-apple-skeuomorphism-in-ios/ (Accessed 05.01.2014)

Agrawal, N (2013) Why Flat Design Doesn’t Work, While Skeuomorphism Does: http://ncrafts.net/blog/2013/06/why-flat-design-doesnt-work-while-skeuomorphism-does/ (Accessed 05.01.2014)

Vignelli, M (1991) Long Live Modernism: http://www.eppelheimer.com/blogs/ia/pov/1_Vignelli_Long%20Live.txt (Accessed 04.01.2014)

Norman, D. A. (2004) Affordances and Design: http://www.jnd.org/dn.mss/affordances_and.html (Accessed 04.01.2014)

Duval, J (2013) Flat Design vs. Skeuomorphism- why you are comparing oranges to apples: http://gkbcinc.com/flat-design-vs-skeuomorphism-why-you-are-comparing-oranges-to-apples/ (Accessed 03.01.2014)

Kuang, C (2013) The Design Battle Behind Apple’s iOS 7: http://www.wired.com/design/2013/06/ios7_redesign/ (Accessed 03.01.2014)

Shaughnessy, A (2003) Laptop aesthetics: http://www.eyemagazine.com/feature/article/laptop-aesthetics-text-in-full/ (Accessed 03.01.2014)

Maeda, J (2013) The Future of Design Is More Than Making Apple iOS Flat: http://www.wired.com/opinion/2013/06/the-future-of-design-is-more-than-making-apple-ios-flat/ (Accessed 03.01.2014)

Greenstein, A (2013) A roadmap to Modern Design: http://www.plugandplaytechcenter.com/blog/2013/11/06/a-roadmap-to-modern-design/ (Accessed 03.01.2014)

Grinberg, Y (2013) iOS 7, Windows 8, and flat design: In defense of Skeuomorphism: http://venturebeat.com/2013/09/11/ios-7-windows-8-and-flat-design-in-defense-of-skeuomorphism/ (Accessed 03.01.2014)

Goldman, K (2013) Material Honesty on the Web: http://alistapart.com/article/material-honesty-on-the-web/ (Accessed 09.02.2014)

Sanchez, E (2012) Skeuominimalism - The Best of Both Worlds: http://edwardsanchez.me/blog/13568587/ (Accessed 09.02.2014)

Moore, M (2013) Almost Flat Design: http://www.matthewmooredesign.com/almost-flat-design/ (Accessed 09.02.2014)