{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

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!). 

windows 8

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!  

station wagon 

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. 

apple calendar

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.

apple calculator iPhone

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!).

piano keys tie

Is Apple waving the white flag or just applying logic? 

waving white flag

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. 

apple apps

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.

Jonathan Ive and Scott Forstall

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.

columbo

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!

sistine chapel

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?

Robert Yardy

Published 23 July, 2013 by Robert Yardy

Robert Yardy is Marketing Manager at MMT Digital and a contributor to Econsultancy. You can connect with him on Facebook, Google Plus or Twitter

9 more posts from this author

Comments (21)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

tom

I certainly think skeuomorphism still has a role to play. It’s all well and good making a site entirely fit with flat design, but we often forget that we are far more technically savvy than the general population. The rule I tend to apply is ‘Could my Mum use it?’ and more often than not, the answer is no. The key is knowing your users – if they are technically savvy and experienced web users, the go ahead but if they are not then you may need to hold their hands with quite a bit of skeuomorphism for a while yet!

over 3 years ago

Avatar-blank-50x50

AZ

I think there is always a cycle for skeuomorphism and a transition to more generic design. During the early years of industrial revolution, lots of industrial buildings were built to look like traditional structures, we can still find lots of examples in the UK, Tower Bridge among one of them. When machines and industry were accepted as a norm by the general population, there's less need to imitate things people were familiar with, thus the rise of more generic design like the Forth Bridge in Edinburgh, a design that's purely utilitarian but beautiful.

Today, the IT revolution is doing exactly the same to design principles. We were more familiar with physical keyboards, paper-based notebooks, music players and calculators as individual devices when Apple started the smartphone revolution, skeuomorphism served as a perfect bridge between the technology then and technology in the future, when modern devices are becoming widely used and recognised by the majority of users, flat design, with simple form factor and as metaphor of technology we used to have, can be safely adopted, as long as the change isn't so radical and we can see some links between the old and new technology.

over 3 years ago

Avatar-blank-50x50

Ron Johnson

I think you've slightly missed the point of skeuomorphism in software. I think the original intention was to inform the user about the function of the UI elements. For example: tabs on views almost invariably have some resemblance to the real thing, usually having curved top edges and the focused tab having a different colour to the rest to indicate that it's above them. Having a row of 4 nondescript rectangles would be pretty unintuitive.

The calculator example is actually really good for demonstrating this. Most people will already know how the iPhone calculator works just by looking at it (ignore the 3D nonsense, the layout's what matters). There is no learning curve. Soulver, on the other hand, just appears to be a text editor, with some results in a column. How do I calculate the results? Does it do it for me? How do I use the computed values in the column?

Apple (or Forstall & Jobs) missed the point of it, and created some truly hideous concoctions by focusing on textures and trimmings rather than how the UI compares to something people already understand.

over 3 years ago

Avatar-blank-50x50

Scott McGougan

Great blog. Personally I think skeuomorphism and Apple's decision to use it quite so heavily was a conscious decision to 'dumb down' their designs for the mass market, aiming specifically at the non tech-savvy consumer who was picking up an iPad/Phone first time - e.g. 'look it's just like a real notepad but it's online too!!'
This has probably led, in part, to the widespread acceptance of Tablets and apps - making them completely user friendly for those who are perhaps less comfortable in making the move to a digital equivalent of their trusty notepads and pencils.

With iOS7 coming to the UK soon - and loosing much of the skeuomorphism from the design, I wonder if Apple have simply decided that the market is now saturated enough and so it's time to start to push their designs on now that those who are going to buy one of their devices has done already? That may be why they're now running with the crowd and moving into flat design?

over 3 years ago

Avatar-blank-50x50

Andrew Areoff

Flat design is a horrible phrase really because all design that doesn't exist in 3D is flat by it's very nature. Skeuomorphism is really a relic of the desktop publishing era when it suddenly became very easy to create buttons with elaborate life-like bevels, glows, drop-shadows and gradients. Before this when design was achieved by photo-typesetters and hand-drawn artwork, creating these kinds of effects was very difficult and time-consuming, so wasn't really done unless the design really called for it.

My personal style over the past 20 years of being a designer has been to use 'flat-design', particularly on the web because I have always tried to achieve as much as possible without the over-use of graphics, like (remember that time?) creating elaborately skeumorphic buttons for each and every navigation item. True, these days with HTML5 and CSS3 it's actually much easier to add these kinds of effects in without creating graphics, but I still see it as unnecessary, visually cluttered and actually adding little to the design. Some clients are still 'trained' into the mindset of wanting bevels and gradients and textures and the like but this is only because of skeumorphic design and desktop publshing before it.

So good. We are returning to an era of what I'd like to call proper design rather than flatdesign - a phrase that sounds like it is inferior in some way.

And as for the phoney (pardon the pun!) competition/war between Microsoft and Apple about the latter aping the former's change of design direction because they failed miserably at implementing skeumorphism - something that, love it or loathe it, Apple did exceptionally well and with great precisions and detail - just look at the Apple Calendar design above to see that.

Furthermore, if you look at the differences in the level of design, detail, layout, alignment and spacing between Microsoft's Windows 8 and Apple's IOS7 - I think all designers will agree that Steve Jobs trained his underlings well. The choice of colours, detail in the icons, sizing, spacing and just all aspects are superior and well implemented. Apple may not be innovating at the moment when it comes to the movements back to flat, proper design but like most things, Apple just does a better job.

But that's only if you're a designer and into these kinds of things. The consumer doesn't know or care about this kind of stuff.

over 3 years ago

Stewart Longhurst

Stewart Longhurst, Director at V1 Digital

Much as I like the word "skeuomorphism" - for me it comes down to usability.

If designing something to look like a real world object makes it easier for someone to use without undue head scratching then do it.

I agree that Apple went too far - I've never even had a leather-bound calendar!

over 3 years ago

Avatar-blank-50x50

Steve

I agree with Tom. To be brutally honest, it all comes down to whose product the customer wants to purchase and who wins out in marketing or promoting themselves in pop culture, very well. Apple wins hands down, skeuomorphism or not. Even the "mothers" out there are now purchasing their products and the kids would definitely buy an iPad over a Samsung tablet, whether it has flash and a lot more apps, or not.

over 3 years ago

Avatar-blank-50x50

Karl Harris

It's interesting to see how strongly some people feel about the subject and the semantics.

I try to provoke conversation more than declaring right or wrong. So the questions I ask myself when I think about this are..

What made me buy an iPhone over the competition?
At the time I just thought it was cool and delivered what I wanted. But looking at the 4s as I type, it doesn't really look that cool. I have it in white and to be honest it could be a calculator. So what made me think it was cool?
Having access to thousands of apps: From old school games to learning languages my phone has it and I love the way they work for me.

Having a pretty good camera: I'm a professional in my own mind and in lack of a DSLR I want good photos that I can play around with and share. I don't even know how to use a DSLR but I bet there's an app for that.

Great design of the icons on my phone: The space on my phone is a canvas of well designed colourful icons that invite you to explore them. "flat design" is exactly that, pop without the fizz. It feels boring and sensible to me.

In the first week of having my phone I downloaded the kindle app, after a day of using both I scrapped the kindle app because I really like 'turning a page' in iBooks. I would actually consider not upgrading because it's going.

There will always be convergence and divergence in development and design, where you will please some whilst annoying others. I'm just hoping that Apple aren't converging because they lack a mind like Steve's, a man who was born not just to diverge but to diverge in order to meet undiscovered desire.

over 3 years ago

Avatar-blank-50x50

Nick

The flat design is another way for apple to reemerged as the topic of discussion with another major change. While the design plays a major role, it comes down to how the phone functions and how people use the layout to navigate through the phone. The design may bring initial excitement but its going to take something else to keep these customers excited for the product.

over 3 years ago

Avatar-blank-50x50

Ducktoes Web Design

Very interesting, thanks for sharing!

over 3 years ago

Avatar-blank-50x50

Michael-Web Design Naperville

Thank you for your post! I thought that this was very helpful. The use of pictures for this article helped so much. As far as which one is better to use, it sounds like its all preference. Whatever one works better.

over 3 years ago

Avatar-blank-50x50

David -- Web Designer

I still and will always prefer minimalism. But, skeo---, skiu, skk.. or whatever you call that be useful at times... but I think we can get to a point, a middle point where the two meets, what do you think guys? Not so flat, not so much skeuomorphism. Or maybe I am missing out a term called "Flat Skeuomorphism".

over 3 years ago

Avatar-blank-50x50

Supriya Ghosh

The post was really helpful for me. Thanks for sharing this information.

Regards,
Supriya
Junior web developer.

over 3 years ago

Avatar-blank-50x50

sstjohn

http://blog.usabilla.com/flat-web-design-is-here-to-stay/

The above article is a complete hypocrisy. The author headlines it as "here to stay," yet her own research totally nullifies the so-called "benefits" of flat design. There were no real world studies done, and even these "web pros" clicked on phantom links (excessively) thinking they were part of the UI (web design 101 - No mystery meat navigation). I am a front end developer and I always keep my dad in mind when I design. My dad is one of those that might use the internet 3 times a year (exaggerating of course). The point is, if he were to land on a flat design (one that even stumps the "pros"), how long do you think he'll stick around? Is that effective design? If I want to be trendy, then sure, it rocks! In the real world (pardon the pun), effective design is just that...effective. Don't throw the baby out with the bath water. It makes no sense. I see this responsive era of design creating very lazy developers. The "it's too hard" sort of developers that churn out sites just for the sake of easy content and a pay check. When did aesthetics get replaced with "Windows 8 did it. It must be good." Take this into account: Windows 8 UX was such a debacle, MS had to release a patch that dumped the whole "flat" UI and went back to the Windows 7, more user friendly, design. Go figure. As this blog post encourages...do what is needed.

over 3 years ago

Avatar-blank-50x50

Webbier

Web designing is totally based on creativity and knowledge.
Your onpage work on a webpage and content affects the site's ranking.

over 3 years ago

Avatar-blank-50x50

ChristianH

I think the move (by Apple) from a skeuomorphic design to a less-skeuomorphic (more flat) design is a logic evolutionary step.
The user base have now learned to recognize features and functions and it will be easier to adopt and learn the new flatter design.

I got a WP8 phone and immediately appreciated the minimalistic and less bloated look and feel of the GUI.
Too much skeuomorphism just makes the interface look like a toy, very late 90's.

A clean, crisp, intuitive and fast interface will always get my vote.

over 3 years ago

Avatar-blank-50x50

Active Computing

This post was very helpful. Thanks for all the information!

over 3 years ago

Avatar-blank-50x50

Web Design Norwich

Cheers author for your self discovery and wonderful information. You are really a talented writer, Great content and the article was very informative. I’d love to follow your blog lest I should miss the future posts. Thanks.
Thanks.

over 3 years ago

Avatar-blank-50x50

Ecommerce Website Design

Thanks for sharing such a informative article on flat web design. This is something i was searching for.

over 3 years ago

Avatar-blank-50x50

Shahzaib Khatri, Manager at Dezinevalley

Flat is used as a weapon against the most denounced skeuomorphism. Nicely framed, Hardy!

over 3 years ago

COG IT Solutions

COG IT Solutions, Web Developer at COG IT Solutions Pvt Ltd

Its a Great article about web design. Web Design is not ant easy like other co related fields its a art and therefore web designer need to artistic and innovative.

about 3 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.