gkbcinc.com

Giving Kudos to Brilliant Content

Flat Design VS Skeuomorphism: Why You Are Comparing Oranges to Apples

Since the release of Windows 8 at the beginning of this year, the so-called ‘flat design’ discussion has sprouted up all over the web. A lot of people call it a ‘new trend’ and while as a trend itself it can be considered a new thing, as a design concept it’s been around for years.

Up until now, we have seen a lot of textures, drop shadows and other effects in our user interfaces, mainly thanks to Apple, that give the impression that icons and interfaces are like the real thing – if a mail app looks like a letter you see in the post, it will be easily recognised.

After Microsoft’s recent woes with Windows 8, we are now faced with the debate: is flat design better than skeuomorphism?

Well, you are barking up the wrong tree.

What Is Skeuomorphism, Really?

According to Wikipedia, “A skeuomorph is a physical ornament or design on an object made to resemble another material or technique.”

Have you ever seen painted columns on the wall of a house? Once I even saw an old woman looking out from a window, with a cat on the ‘balcony’, all of which was entirely painted. That’s skeuomorphism. But even a simple, flat calculator which resembles the layout of a real one like this one is still a skeuomorph, even if by the current definition of the trend, it is also an example of ‘flat design’.

What people have been wrongly calling ‘skeuomorphism’ is realism, which encompasses any design that tries to emulate the look of reality through any effects, e.g., drop shadows and textures.

Apple has spearheaded realism in design for years and it made sense for them to start that trend. But we’ll get to that later.

The Reality of Flat Design

The most obvious example of flat design is Windows 8’s new interface. However, within the interface itself you can see a few icons that are skeuomorphs, for example the mail icon still looks like an envelope.

In an earlier example, I showed you a calculator that follows Windows 8’s flat style, but which, again, was a skeuomorph. However, unlike Apple’s interface there are no drop shadows, no textures and the interface is very minimalistic.

That is what flat design is all about: taking away any three-dimensional elements from the design.

The whole ‘flat design vs skeuomorphism’ is a moot point, not only because of semantics, but because both of them are design styles which are fairly restrictive if they are the only thing you religiously follow in every single thing you do without taking into consideration the needs of your users.

Essentially when you bring up this debate, you are not only comparing apples to oranges, you are simply comparing Apple to Microsoft – and that is probably one of the underlying reasons why this debate is so intense, coupled with a misunderstanding of terminology and lazyness.

Flat Design VS Skeuomorphism 2

Image by: kjarrett

Lazy? Who? Me?

Sometimes design trends spread like wildfire for the wrong reasons. Flat design is a very specific and restrictive style that falls under the broad umbrella of minimalism. When something looks cool, a lot of people just copy the same elements or ‘port them’ into their own designs. Very little imagination is used and a lot of web sites wind up looking the same. Considering the amount of grief that Windows 8 received at its launch, it’s pretty amusing to see how its graphical style is now all over the web.

When you’re a designer, it’s a lot harder to think of a design style for each of your clients. For some you might need to use a realistic design (think videogame interfaces), for others you might need to use a flat one. Or like Google, you could just use a minimalistic design where drop shadows are used, tastefully and when needed, but a lot of the tacky textures are dropped.

The Good, the Bad and the Flat

Smartphones became popular thanks to the iPhone. It was the first one of its kind, as the phones that preceded it were themselves called featurephones. It presented designers with a fixed screen and resolution, a challenge that was very far removed from screens that were being used for desktop computers.

Apple had to create an intuitive interface that would work on a handheld device which for the first time could support rich graphics. So they decided to take the realistic approach, showing people familiar icons of calendars and mail apps, drop shadows and gradients to give the idea of depth and backgrounds that looked like pages.

It was a good approach – it made total sense for them to use it at the time as people weren’t used to mobile phones the way we are now. They actually used them to make phone calls back then, you know.

We have a multitude of smartphones now, and even more screen sizes and browsers. Web design needs to be responsive, i.e. it needs to scale, reducing the number of a site’s columns so that it can fit a smaller screen. Plus it has to work with both vertical and horizontal orientations. The use of textures and complicated effects renders this very hard, making the realistic design solution a bad one in many cases.

Further, 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.

So now you have the flat design. It works perfectly well with responsive web design and it’s easier to code (especially for those of us who haven’t really gotten their hands dirty with that yet). But 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.

In other words, you can’t switch your brain off and just sit back and enjoy the ride of the flat design trend. There is nothing wrong about getting inspired by it, but don’t stick it on everything you do until the next fashionable thing comes along or you’ll do a disservice to yourself and your clients.

Related posts by James Duval:

Is Responsive Web Design Really the Way Forward?

Should Web Designers Know How to Code?

Featured image by: Shht!

Leave a commentLeave a Comment

2 Comments

  1. Helen Bailey

    May 21, 20134:10 pm

    I believe each of us should choose between these trends when designing the site. For example, those people who like websites which remind real books simply have no any other choice than building a skeoumorphic site with a page flip effect, but it doesn’t mean skeuomorphism is better than flat design, it just fits some needs while flat design fits other needs. But if you want to get a better understanding of what skeuomorphism is, then feel free to check this infographics

    http://www.templatemonster.com/infographics/skeuomorphic-design-infographic.php

  2. Metatagg Solutions

    May 2, 201310:48 am

    Hi there, i just became alert to your blog through Google and found that the information is truly informative. Indeed explained well and stitched good examples. But I would also like to add some of my thoughts. As we all know the web design trends come and go and sometime it happens that a trend completely gone comes again (like old is gold). From one end, it looks like both trends Flat Design and Skeuomorphism play a similar game but to reach to the final goal they use different techniques. My personal choice between these two would be flat design because I like minimalism in design and that is what flat design gives. But for those who loves realistic and natural appearance then Skeuomorphism is the best choice.

Leave a Comment