Advertisement
Mobile Design

Flat Design and Skeuomorphism

by

The design topics of flat design and skeuomorphism have been widely discussed as of late, particularly with the beta release of iOS 7. Despite this fact, many people are still unaware of these terms and their meanings. Today, we'll explore some of the key features of flat design and how this design trend is different from skeuomorphism.

Design styles are usually labelled as a temporary trend. Whenever a "new" style emerges, there's no guarantee that it will become successful or stick around. However, as more designers in the industry start to cater to a particular design style, the more ubiquitous and useful that style becomes. That said, it is a common misinterpretation that flat design is actually new. It isn't. Flat design and flat designers have been around for a long time, but what is new is the industry hype and adherence that we've seen in recent years.

Flat design is hot!

Google Embraces Flat Design

flat design skeuomorphic design
google

We all know Google has a strong identity guided by excellent design guidelines. Their aim is to provide a visually coherent identity which is simple and modern. It can be claimed that they have matured their design style with a reductive approach, focused on color and geometry. Their visual assets guideline on Behance is very interesting to review!

Microsoft Embraces Flat Design

windows mobile

Pre-flat Microsoft: Windows Mobile 6.5

By 2010, Microsoft decided that their approach to design was not keeping pace with their users expectations and needs. Instead of focusing solely on the features of a product, they decided to rethink their aesthetic approach by focusing more on the user's experience.

Windows Phone 8

Windows Phone 8

This drove Microsoft to participate in a new design philosophy to make them change the visuals (and behavior) of their products. Or as they like to describe it, "do more with less". This is what Microsoft has achieved with their recent graphical overhaul, with the release of Windows 8 at the end of 2012 as a milestone in their new design strategy.


Flat Design and skeuomorphism Defined

A realistic design is always a skeuomorphism, but a skeuomorphism isn't always a realistic design.

Skeuomorphism, specifically for design, means that we try to resemble something we know. The term is often used incorrectly in the industry. Designers often think that skeuomorphism means that you replicate the original. However, a Skeuomorphism doesn't have to be a close replica of an object! In other words, a realistic design is always a skeuomorphism, but a skeuomorphism isn't always a realistic design. To make it even more confusing, flat design can be skeuomorphic (but it doesn't have to be).

Let's make things more clear with a series of pictures.

flat design skeuomorphic design

Design by Alex Volkov

You'll notice that this is an incredibly realistic design of a safe. This is a perfect example of skeuomorphism, as it attempts to resemble something we know (the real physical object, a safe). Besides, it's also a great example of realistic design, as it takes depth, lighting, shadows, texture, and so on into account.

skeuomorphism attempts to resemble something we know.

flat design skeuomorphic design

Design by Justin Pervorse

This is a good example of flat design, as it simplifies a safe with simple lines and fresh colors. Obviously, it is also quite "flat". However, this design also incorporates skeuomorphism because it tries to resemble a real safe. You obviously can recognize the safe door, for example.

flat design skeuomorphic design

Design by Andrew Hesham

Now, finally, this is another great example of flat design. Though, this isn't a skeuomorphic design. You can understand that this icon looks like something secured through the combination of the shape of a shield and the key hole. That said, it is in no way resembling a real safe or lock. It borrows other metaphors to make the meaning recognizable. To summarize: flat design uses simple elements and shapes combined with predominantly bright colors to emphasize simplicity and clarity.

Flat design uses simple elements and shapes combined with predominantly bright colors to emphasize simplicity and clarity.

This is the general explanation, although many in the industry will often refer to skeuomorphic design whenever they mean realistic design, such as the first example. We refer to flat design whenever we mean a more minimalistic, two-dimensional approach. Sometimes, the term skeuomorphic flat design is used, as it combines the best of both worlds as is shown in the second picture, the flat, skeuomorphic safe.

In iOS 7, Apple combines both skeuomorphic flat design, such as the camera icon, and non-skeuomorphic flat design, such as the photos icon or the game center icon, for example.

flat design skeuomorphic design

iOS 7 icons

Skeuomorphic Design 101

In general, apps designed in a skeuomorphic style look and behave like their real-world counter-parts. People often link skeuomorphic design with Apple. Some great examples include their iCal and some of their icon designs (those before iOS 7).

flat design skeuomorphic design

Skeuomorphic design is often a very challenging design style. It's not easy to replicate a real life object in a two dimensional design. Besides, often realism is embedded in the skeuomorphic design to make it work even better. One of the problems designers face is that these designs must "feel good". It's easy for users to spot a mistake in a design when you decide to create something realistic. There's a lot of work in designing perfect textures, shadows, depth, and colors for an interface or icon. However, skeuomorphic design is especially helpful when creating digital products for an older target audience who might be unfamiliar with the digital world. It gives the user the feeling they recognize the product they're using. A good remark though is that nearly everyone now has started to recognize "the digital language" and we often have the same digital behavior patterns in interfaces.

flat design skeuomorphic design

Flat Design 101

Flat design tries to emphasize usability and simplicity. Often it's a minimalistic approach accompanied by the use of bright colors. Whenever you hear other designers speaking of flat design, usually the word "user experience" is often brought into the conversations. In general, people believe that flat design offers both greater usability and greater user experience than skeuomorphic designs.

Some famous designers with their design principles such as Dieter Rams consider flat design, or "as little design as possible", the best way to create sustainable design.

flat design skeuomorphic design

Screenshot of Hype Machine, a flat design

The Ongoing Battle?

There's one golden rule. Pick a style you enjoy and design it the best you can.

Often when you read articles which discuss either flat or skeuomorphic design, it always somehow ends up as a battle between the two styles. They both have their strengths and weaknesses, but in general there's one golden rule: pick a style you enjoy and design it the best you can. Flat design looks easier than skeuomorphic design, but in reality it's likewise difficult to create a great flat design just as it is difficult to create a great skeuomorphic design. It's easy to create mediocre flat design, it's very difficult to create great flat design. Simplicity is hard and its refinement takes time.


Conclusion

Even for users, it's all a matter of taste. Some people enjoy skeuomorphism, others prefer flat, and still others enjoy both styles. As a designer, I highly recommend practicing as many design styles as possible. Rather than a conflict between different styles, we should embrace their differences and make it a choice which strengthens your application. Good design stands out in the crowd, so think carefully about what fits your concept the best!

Related Posts
  • Game Development
    Game Design
    The Difference Between a Blatant Clone and Building on a Proven GameCloning games vs building on proven genre
    Games have been around for long enough that clearly defined game genres and mechanics have emerged. Most new games belong to one or more of these genres, and are composed of some combination of these mechanics. New genres and mechanics do occasionally arise and surprise the world, but they are rare exceptions.Read More…
  • Code
    Articles
    Android First… Even When It's Second97373 preview image@2x
    Designing for the Android platform isn't easy, especially if you're used to designing for iOS. Is porting your iOS designs to Android a viable option? It's not, and I will tell you why.Read More…
  • Web Design
    Design Theory
    Understanding the Composite Parts of Your DesignFourier retina
    In this article we're going to look at a simple analogy which will illustrate effective ways of communicating through design. Once we've established the idea, we'll take a look at some familiar examples to drive the point home.Read More…
  • Web Design
    User Experience
    Use and Abuse of Icons in the Modern AgeIcon retina
    The number of icons we see on daily basis is amazing. They are everywhere around us, both online and offline. We love to use them. They enhance the aesthetic of our sites and can provide a better user experience. Sometimes however, we forget the reason behind using an icon, and that's when it becomes easy for icons to lose their effectiveness.Read More…
  • Web Design
    Design Theory
    All About Trends in Web DesignDsfd trends retina
    As long as the web has been around there have been certain design trends which have popped up from time to time. Some of these trends have stuck around and, over time, some have disappeared. Think back to the time of Geocities, to the time of ‘Web 2.0’ designs and closer to home, with the “flat design” trend that’s popular now. Now, in 2013, the web industry is changing as rapidly as ever. New techniques, or ways of working, pop up every month, if not every week.Read More…
  • Web Design
    Industry
    Flat Design, iOS 7, Skeuomorphism and All ThatFlat retina
    The notion of flat, "digitally authentic" design has been a popular topic of conversation and controversy recently, especially with the software design efforts of Apple, Microsoft, Google and their respective flagship operating systems. Subtle colours, light typography and the other commonalities of modern flat design have all found a working role in the construction of the neoteric design trends we're all coming to love (or hate). We're going to take a look at these trends in this article to see what all the fuss is about.Read More…