Tag Archives: visual realism

What Happened to Skeuomorphism?

The debate between skeuomorphism vs flat design is always somewhat associated with the battle between Apple vs Microsoft, with Apple embracing the former for the initial iterations of iOS interfaces and Microsoft adopting the latter for Win 8 designs.

And with iOS7 going flat, it seemed as though Apple had raised the white flag on skeuomorphism.

But what actually is skeuomorphism? And what were its flaws?

This article gives us some really interesting clues on this. I’m not going to spend much time discussing flat design here since it’s pretty much the flavour of the moment in design worlds now, but rather, let’s understand skeuomorphism.

Skeuomorphism, in essence, describes the way designs borrow a particular feature of the past, even when the functional need of it is gone.

Case in point, the ‘clicking’ sound of cameras used to originate from actual mechanism – yet phone cameras have appropriated this sound in their own iterations.

Likewise, switches can be flicked up or down – and certain toggle buttons on interfaces cater for this as well.

The interesting point to note here is that skeuomorphism in its purest sense is different from the design trend we commonly ascribe to Apple’s earlier iterations of iOS, which should be more accurately described as a combination of skeuomorphism and visual realism.

Taking the calculator app as an example, skeuomorphism influences the placement of the buttons as referencing the traditional calculator, whereas visual realism skins the buttons in a way that gives the buttons dimensionality.

The article mentions that of course, these two design elements usually go hand in hand — skeuomorphic designs tend to look realistic (to make the connection with the original object clear), and realistic designs tend to be skeuomorphic (otherwise the realism would look out of place). It also notes that whilst realism only contends with superficial skinning and textures, skeuomorphism influences design at a deeper, more functional level. 

Now, we can’t discuss the decline of skeuomorphic and realistic designs without talking about what replaced it – flat and minimalistic design. Flat design counters visual realism by removing the shadows, highlights, gradients and textures, in essence, removing what made things “real”. But in doing so, it unfortunately also removed the skeuomorphic element of the designs – buttons could be confused as banners and the like. The resultant design is clean and professional looking, but an overuse of flat design could seriously thwart the usability of interfaces.

So what were the problems of skeuomorphic designs?

1. (the silly reason) Realistic designs rendering leather-y and wooden textures lost their appeal with people – it quickly became kitsch. Such rendering also faced issues with the advent of responsive design – resizing and shape-shifting made it difficult for fixed-size assets (used to skin the textures) to be used. 

2. (the more sensible reason) Skeuomorphic design needs to inherit all design elements of its predecessors in order to make sense. This led to two issues:

a. When not all the elements could be implemented, the realism illusion breaks and people are left even more confused or unsatisfied. Consider an app rendered in the form of a book but could not allow virtual pages to be flipped. =(

b. Inheriting all design elements meant inheriting the good AND bad and previous constraints associated with the previous design. The iOS calculator only allowed a single line display of characters even though functionally it could possibly calculate more.

So the hey-days of skeuomorphic and realistic designs seem to be over. But nowadays designers can fall into the trap of making designs so flat they lose all usability cues. Which is kind of a step back. I’ve always disagreed with Win 8 apps in particular because you never know what to press.

I think successful design in the flat-design era is one that abstracts realistic/skeuomorphic gestures whilst adhering to the flat/minimalist visual aesthetic. I suppose that is what the article cites of skeuominimalist. One good example i think is how articles now can be swiped from right to left to move forward, and left to right to move backward – abstracting the flipping of pages from books. I think this abstraction frees skeuomorphism from the gaudy realistic textures and also from inheriting unnecessary “baggage” from previous poor designs.