The left and right part of the below shows the same element – time. However, the way it is displayed is different. On the left, we have the skeuomorphic layout, on the right we have the flat design. These are the two UX/UI elements that we will be discussing in this read. Before moving on, let us first understand what these terms really mean.

What is Skeuomorphism?

In the simplest of definitions, skeuomorphism is a concept in designing that is based on displaying digital elements that portray their existence in the actual world. In the past decade or so, this concept has been widely used by operating systems, software manufacturers and UI & UX designers around the globe. 

The most easily understandable example is the Microsoft Windows operating system’s Recycle Bin icon, that is designed like a real trash can, for all your trash files and folders. 

Benefits and Drawbacks

Let us now have a brief overview of some of the major benefits and current uses of the skeuomorph designs.

• • • One of the major benefits of the skeuomorphism design concept is that it makes it easier for users to recognize and interact with display elements rather quickly and easily. You don’t really have to learn the design themes or get yourself familiarized with the software for a certain time period before you can get the hang of it. You just have one glimpse of it and you know what it really means.

• • • Skeuomorph designs are known to provide a great level of ‘affordance’ to its users. Affordance refers to providing guidelines or assistance to a user regarding the usage of a certain object. If the skeuomorph design element is done well, you can eliminate the need of those pop text messages, ‘how to’ training guides or those tool tips that only add unwanted weight to your software.

• • • Some apps or programs need to be displayed as they look in real-life. For instance, the modern-day DJ-ing apps come with an interface that shows a ‘turntable’, almost resembling an actual DJ turntable that usually costs a lot of money. Beginner DJs can download these apps for a few bucks and start mixing tracks without any hassle.

Having said that, yes there are some drawbacks to the skeuomorphism concept too: 

• • • Considering the fact that skeuomorph designs reduce the need for users to be taught or be made to go through the training document in that ‘Read Me’ file, one wrong design can have huge adverse impacts on usability. Remember, users are already expecting a specific icon to behave in a certain way, so if that icon is not clearly designed or it resembles another real-life element that the user might mix it up with, then the frustration levels can skyrocket before you even know it.

• • • On the technical end, skeuomorph designs limit the creative side of an app designer as the primary goal is to create a certain object with defined parameters. There won’t be a lot of room for the designers for innovation. In addition to this, the skeuomorph objects are usually images and gradients that may slow down the website performance in terms of load time.

What is a Flat Design? 

Flat design is a UI designing style that is based on simplified, 2-D objects and elements with eye-catching colors and themes.Unlike the skeuomorphism concept, the idea behind flat design UI is to keep user interaction as simple as a designer possibly can.

Flat designs were initially made to optimize website’s performance and make it responsive on various mobile devices and tablets. Since it follows a more ‘minimalist’ approach, the images are kept simple with minimal designs and textures, which eventually, allows them to load faster as compared to the skeuomorph design elements.

The most noticeable operating systems based on the flat design model include Windows 8 and Apple iOS 7. Back in the day, this is how the Windows 8 home screen used to look like:

Benefits and Drawbacks

Here are some of the positive aspects of a flat design UI model: 

• • • One of the biggest advantages of a flat design based operating system, website or app is that it optimizes the overall speed of the system. Lesser images or gradients eventually mean quicker load time. If you’re an app, this could be a crucial step towards limiting your app’s battery drainage in order to increase user engagement. 

• • • Another benefit of going with the flat design UI is that it offers a lot more consistency as compared with skeuomorphism based designs. You can make your users more ‘familiar’ with icons having a specific meaning – for example, those solid filled radio buttons indicates the primary action that a user needs to take, while those border filled buttons mean something of lesser significance.

• • • Keeping into consideration the amount of space available on mobile devices and tablets, flat designs follow the minimalist approach and can save you a great deal of space on apps and other mobile-related operating systems and software. Eventually, this increases user engagement as well.

Flat designs, however, come with their own cons, too. Let’s have a look at some of their negative points:

• • • It is not an easy job to differentiate between clickable and non-clickable items in flat designs. Since the objects are made on a two-dimensional platform, the drop shadow effect is not possible which makes it harder for the design team to differentiate clickable buttons with the rest of the elements on an interface. Thus, CTA identification and effectiveness can be compromised. 

• • • A good flat design can give you consistency, however, the downside of it is that if the design is not upto the mark, it can be equally inconsistent as well. A lot of third-party design providers and designers try to copy certain design themes and styles. Eventually, these designs may not be in accordance with universally accepted flat designs and might create huge learning-related issues for the end user.

• • • Also, since flat designs are largely based on the icons only, this can create problems if those icons are not too common and might need additional helping text to make the user understand what the icon is about. This was initially reported by Windows 8 users when that operating system was launched in the US and elsewhere.

The Death of Skeuomorphism

So why did the transition from skeuomorphism to flat design occur in the first place? Let’s have a brief overview.

During the mid 2000s, a strong resistance was built against the concept of skeuomorphism and the way it was being overused by software companies and designers. It is even believed that Apple’s former iOS Chief Scott Forstall was let go by the company due to his craze for skeuomorphism after Steve Jobs, the pioneer of skeuomorph designs, passed away.

This was the time around when the iPad featured an actual bookshelf depiction for ebooks that used real book covers and titles. Even though the visuals were not deemed too ineffective, it defeated the basic purpose as the book titles were close to impossible to read and only a specific number of books could actually fit in the space. Here is how it looked:

Critics argued that users do not need to be shown an actual bookshelf to trigger a call-to-action, they are already aware of that. The call-to-action in this case was clicking on a specific ebook. 

In addition to this, skeuomorphism designs were largely based on traditional and relatively old depictions of items such as the camera icon, address books, calendars, etc. These portrayals started to become unpopular, especially among the younger generations. Also, the skeuomorph designs created a lot of monotony and took away design innovations that was the need of the hour. 

And hence, during this time period, skeuomorphism began to lose its charm and flat designs took over.

The Rebirth of Skeuomorphism

After almost a decade of being out of the business, skeuomorphism made a prominent comeback with the experimental UI design by Apple’s Bob Burrough. The operating system had a feature of making the phone icons react to the movement on the phone, in accordance to the way those icons would be visible and the way their textures and shadows would react had the icons been in an actual world.

In addition to this, more and more designers and organizations have started to revive the long-lost skeuomorphism concept by coming up with designs that follow the similar skeuomorph approach, however, with lesser dependence and restrictions on old or traditional button or icon themes.

This is an example of how UI/UX designers and design hubs like Dribbble are coming up with skeuomorphism based designs, however, making sure the objects portray the concepts of today’s markets so that younger audiences can also be reached out to.

One of the most noticeable skeuomorphism-based design concepts that have made huge in-roads in the modern digital sphere is the wearable industry. Nowadays, smartwatches are equipped with skeuomorph icons and designs, giving it a more smooth and simplified feel as those traditional objects back in the day. Here is what we are talking about:

Conclusion: Flat or Skeuomorphic Design?

Digital transformation is an inevitable phenomenon that would go on forever. The only constant in the present day digital world is that every aspect is a variable – the needs of today will not remain the needs of tomorrow.

UI and UX design is no different either. Today, users might like the skeuomorphism-based icons on their devices, however, the same users might not be liking those icons after some time. A designer needs to be at his very best in terms of market analysis, user requirements, competitor analysis, etc. That’s the only way forward in this highly competitive digital arena.