Flat web design and skeuomorphism: the pros and cons

Flat web design and skeuomorphism are two design approaches that could not be more different. In terms of opposites we're talking a level equal to Take That vs. Slipknot, Barcelona FC vs. Accrington Stanley, The Godfather vs. Legally Blonde, basically, they are not similar!

Microsoft and Apple have been at the centre of this design battle and fans of both companies have been equally passionate in their arguments for the pros of their particular approach for more than a year.

However, in terms of the future, short term at least, one 'team' seems to have been victorious. But is this a defeat, or is the supposed defeated team actually happy to lose the battle knowing that they shall win the war? I'm talking profits! 

This blog post attempts to answer that question while looking at what exactly flat web design and skeuomorphism are and the pros and cons of both.

It also discusses the recent shake up at the top of Apple and whether the actor Chevy Chase prefers flat web design or skeuomorphism (yep, you read that right!). 

The war between flat design and skeuomorphism (realistic design), or Microsoft vs Apple as some people are calling it, has been an epic battle for more than a year, but with the release of iOS 7 is the end in sight?

Chevy Chase is a skeuomorphism fan

Over the last few years skeuomorphism (TIP: write down the correct spelling for awesome Scrabble points!) has been the preferred approach by the vast majority of web designers.

This is largely due to the success of Apple, and in particular, the iPhone.

Wikipedia describes skeuomorphism as: "a physical ornament or design on an object made to resemble another material or technique".

For those of you old enough to remember when Chevy Chase was funny, circa 1981-89, you may recall his starring role as Clark Griswold in the film "National Lampoon's Vacation" (1983).

Well if you do, you may also remember his car; a Wagon Queen Family Truckster. It was an incredibly ugly station wagon with that awful simulated woodgrain panelling affect that consists of no actual wood.

This is a classic example of skeuomorphism gone wrong!  

 

Criticism for Apple…yes, really!

Apple's realistic design aesthetic has received a backlash of late and has even been described in some quarters as tacky (Exhibit A: iCal's leather stitching!).

The developers at MMT Digital think that this is a result of a combination of two fundamental factors; (1) the novelty has worn off and (2) the refreshing minimalist approach of Microsoft Windows 8. 

Point number two is a modern day chicken and egg situation. Did Microsoft's minimalist approach arrive and then the move away from skeuomorphism by web designers and developers start?

Or, did the decline in popularity for skeuomorphism start and Microsoft reacted accordingly? 

Whichever scenario came first, it is not just the refreshing aesthetics that have made flat design popular. Oh no, there is more! Responsive web design is becoming increasingly important and building a website based on flat design is a whole lot easier to make responsive compared with a site based around skeuomorphism.  

What is flat design?

Flat design does away with all the realistic elements of items and shows them in a stripped down manner.

This means no gradients, pixel perfect shadows and of course no skeuomorphism! As skeuomorphism is strongly focused on being realistic, designers are often hampered by certain restrictions. 

For instance, Apple's calculator app for iOS is so concerned with looking and behaving like a real world calculator it does not take advantage of the digital environment in which it resides.

On the other hand, the Mac app Soulver has absolutely zero resemblance to a real calculator but can perform far more tasks.

The emergence of flat design does not necessarily spell the end for realistic design. Skeuomorphism is very effective at communicating differentiation between items.

For example, Apple's apps are extremely easy to identify with due to their individual styling whereas with flat design, incoherence is a potential risk. Is using different colours for items enough? 

This is a concern amongst the more level headed experts in the web design and development community; those who do not take a trend to extreme lengths just because it is the "in thing" at the time.

Should the same designers who have taken skeuomorphism too far attack flat design with the same ill-advised verve, the results could be disastrous.

The most serious negative affect of taking skeuomorphism to extreme levels is that users think the designs are gaudy. But hey, everyone can stomach a bit of gaudy now and then, and often the tackier the better e.g. piano ties (c'mon, they're still cool right?).

However, if flat design is applied with similar vigour there is a genuine risk that a user may get lost on a website and click on the wrong things (nightmare for your analytics data!).

Is Apple waving the white flag or just applying logic? 

I would like to think the latter but many are suggesting the former. Apple has recently released iOS 7. It has a far flatter design and a lot less skeuomorphism.

Gone is the aforementioned leather on the iCal, a decision that received applause from the crowd of software developers in San Francisco when it was announced by Craig Federighi at Apple's annual WWDC, the wood veneer of the Bookshelves (Chevy will not be happy with this!) and the rather prolonged and desperate attempt of trying to resemble a notepad.

The textured design of icons has also been removed in favour of simple block colours. 

Many in the media are declaring that Apple has given in to the recent criticism mentioned earlier in this article. They claim that the new look will backfire on Apple and that the company has taken inspiration from Microsoft and Google's Android system. 

For anyone that has been following the reported power struggle at Apple over recent times this shift in design approach should come with little surprise. This latest release is the first under the stewardship of London-born Sir Jonathan Ive (below left) after he took over from Scott Forstall (below right) in October 2012.

It has been said that Ive (formerly Head of Industrial Design) and Forstall could not have a meeting unless Apple CEO Tim Cook was present, such was their animosity towards each other.

We cannot be certain as to why and how things got so sour between Ive and Forstall but it doesn't take Peter Falk in a trenchcoat, aka Columbo (NB: anyone under 25, Google it!), to work it out.

Basically, Ive disliked Forstall's designs immensely and we can have a guess that Forstall probably didn't welcome the criticism.

There can only be 'two' winners

To date, there has been no research to add weight to either side of the argument. I cannot say whether skeuomorphism or flat design works better in terms of user interaction and opinions are still divided.

What I can say is that user behaviour is far more important than any design, sorry digital Michelangelos, it's true!

Basically, I am saying: just design what makes sense! If you think that something needs a bit of skeuomorphism then put it in. This may be some slight shading to show an item is a button or a magazine design with scrolling pages for an online newsletter.

Google clearly shares the same view. The newly released Google mobile apps, such as Google Maps, show just enough skeuomorphism in a largely flat design space. 

That's why I feel the criticism of Apple is harsh and slightly premeditated due to the sad loss of Steve Jobs. People seemed to be waiting to pounce on anything they could get their teeth into regarding Apple just so they could say the company will struggle without Jobs.

But perhaps Apple has just applied a bit of logic. Sure, it has gone a bit too far with the skeuomorphism in the past so its toned it down a bit, it hasn't gone completely and I for one am happy about that.

Now, where's that piano tie?