Advertisement

Flat Design and Skeuomorphism

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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!

Advertisement