Editor’s note: This article was updated on 18 November 2024 to reorganize content, add information around skeuomorphism’s impact on design trends like neumorphism, dive deeper into how it compares to design trends like flat design, discuss best practices for leveraging skeuomorphism UI design, answer FAQs about skeuomorphism, and more.
Skeuomorphism in graphic UI design describes interface elements that mimic real-world objects in how they appear or how the user interacts with them. These design elements act as cues resembling real life within the visual space. A good example is the recycle or trash bin, which lets you discard files, which mimics a design from real-life trash bins:
In Greek, “skeuos” means “container” or “tool,” while “morph” means “shape,” so skeuomorphic means “containing a shape.” In the brick-and-mortar days, the word “skeuomorphic” was originally used to describe physical products that carried over their shape or design from previous iterations. For example, a plant-based burger would still be in the shape of a beef burger.
But what makes a design skeuomorphic in modern UI/UX? What key challenges and criticisms are there in modern-day skeuomorphic design? And, does skeuomorphism still apply to today’s UI/UX?
Skeuomorphism in mobile UI design used designs from the age of early modern computing. Apple’s early iOS designs used skeuomorphism in most of their UI. It was regarded as intuitive because people who did not know how to use iPhones could take these cues from real life and intuitively learn how to use smartphones.
But not all representations are skeuomorphic. Skeuomorphism requires realism in its representations. What makes it skeuomorphic is that, for example, the button is rounded so it looks like an actual button. Or that the camera icon looks like a realistic camera, complete with flare on the lens.
The opposite of skeuomorphic design is flat design, which relies on a minimalist or flat depiction of the object instead of a three-dimensional rendering. As smartphone users learned how to use and interact with their devices, they no longer needed the realistic visual cues of skeuomorphic design, paving the way for the simpler, more minimalist language of flat design:
With the rise of flat design, skeuomorphism went out of style. Although it’s now mostly out-of-favor with UI designers, skeuomorphism still has its use cases in specific contexts. In branding, a skeuomorphic design of the physical product can still have mass appeal. In games, skeuomorphism is widely used to engage gamers with life-like settings and life-like characters.
In this article, we’ll take a look at how skeuomorphism began and its application to today’s mobile and web designs — despite its reasonable criticisms, you do still occasionally see skeuomorphism employed well.
Before we really take a look at skeuomorphic design, we have to know where it came from. So here’s a brief history of skeuomorphism:
In the following side-by-side comparisons of some well-known iPhone apps, you can see how Apple has dropped the heavily skeuomorphic icons (left) to instead adopt a distinctly flat design (right) — a visual approach that the product continues to carry and refine today:
Why isn’t skeuomorphism commonly used today? According to the IxDF, there’s some debate over whether or not users are accustomed to graphical user interfaces enough that skeuomorphic cues are no longer needed to help users understand how to use them:
“Opponents of skeuomorphism argue that natural-looking objects can make an interface look cluttered and that some of the objects mimicked in skeuomorphism have become obsolete and meaningless to users (e.g., the floppy disk for the “Save” action). Proponents, on the other hand, argue that humans can never become as accustomed to the digital world as we are to the physical world—so, simple skeuomorphism will continue to be helpful.”
The Forbes article mentioned above outlined some similar reasons as to why skeuomorphism “died.” For one, it was used in the 80s to come up with reasons for how to manage the evolution of the internet. It just wasn’t feasible that the way in which we use technology in the 80s and technology in the early 2010s will be the same. In order to evolve with technology, we have to let go of old patterns.
Skeuomorphism paved the way for flat design to claim its title as the leading UI design style in the modern day. These two are opposites in many ways, and the varying factors that led the rise and fall of skeuomorphism effectually led to the rise of flat design in turn.
While skeuomorphism mimics 3D objects in design, flat design uses 2D representations with vibrant colors. It debuted in 2013 with Apple’s iOS 7, Windows 8, and Google’s Material Design, which all featured flat design.
Some characteristics of flat design are:
This visual aesthetic is characterized by a minimalist philosophy, embracing the term “less is more” to emphasize usability and lead the users directly to content. Showcasing flat and minimalist icons can enhance usability, enabling the user to easily identify and match the flat icon to the content:
Compared to skeuomorphism, the two-dimensional nature of flat design makes it more minimalist and responsive, with simpler shapes that can be loaded faster.
Skeuomorphism is a remnant of the time when older generations were introduced to and were navigating the early days of the computer and the internet. A more realistic appearance made icons easier to recognize and understand for users at that time.
On the other hand, now that most everyone has a smartphone and is connected 24/7, much of the appeal of skeuomorphism is gone. Users are generally already familiar with icons and their usage, so designers can use flat designs to hint at their meaning and purpose rather than relying on lifelike representations, allowing for a larger emotional appeal for modern users.
One of the key design principles of UX/UI is “form follows function.” So, everything that is designed must have a specific function, and moreover, it must be in a functional form. Skeuomorphism, in many ways, seems ornamental, while flatter designs are both easy to understand and functional. This is another reason why skeuomorphism seems to no longer be in use while flat design is more common.
When skeuomorphism dwindled due to reasons stated above, Alexander Plyuto designed an interface in 2019 that was largely influenced by skeuomorphism but applicable to modern-day. This became known as neumorphism.
Neumorphism, a portmanteau of “neo” and “skeuomorphism,” is like a modern-day iteration of skeuomorphism. It combines the best elements of both skeuomorphism and flat design, resulting in a minimalist appearance that still gives a sense of three dimensions in its life-like buttons.
Neumorphic elements like icons and buttons sit on top of the background surface in a raised shape, enhanced by shadows and sometimes embossing, making it very similar to skeuomorphic design. The color of the element is either the same or very subtly different from its background, which varies from its counterparts in skeuomorphism and flat design:
But, unlike skeuomorphism, there are very minimal elements to the imitation of 3D objects. Neumorphism shows a balance between skeuomorphism and flat design, by having aesthetically minimalist elements but also employing the techniques of embossing, shadows, and other effects from skeuomorphism.
However, there are certain problems with neumorphism — mainly, due to its low contrast ratio between the background and the icon, accessibility would be limited for blind or visually impaired users. There is also an accessibility issue with visual hierarchy; if all the buttons are embossed in a neumorphic style, it might be challenging for the user to know which ones to press first.
So, while neumorphism offers a tempting “best of both worlds” in the great skeuomorphism-vs-flat-design debate, It’s important not to compromise on UX in your UI designs.
Now that you know how to differentiate between different design elements, you might have found that skeuomorphism, though popular in its heyday, is not as commonly used now as flat design or neumorphism. But where does skeuomorphism still apply, and what are the key examples of good skeuomorphic use?
If you take a closer look at the new iOS camera icon, you might notice that it still has some skeuomorphic design elements. Apple might have changed a few things — the old iOS 1.0 camera icon showed a shutter’s iris, while this one has a small outlined shape of a camera — but the icon overall is still a raised icon that gives the feeling of a three-dimensional button:
This is because it still has its affordances, borrowing a term from Don Norman. The less prominent skeuomorphic elements, such as the subtle shadow contour, allow for more intuition as to its use.
Likewise, modern smartwatches also still feature skeuomorphic design for the most part, especially with the option to display the time on the watch face with a representation of an analog watch. Is it a watch? Is it a computer on your wrist? It’s both, and it demonstrates how skeuomorphism still has its place in modern design.
Take digital calendars as another example. A calendar icon in any phone or laptop still has the hallmarks of skeuomorphism. The digital calendar itself has the sense of real-life planners or schedulers, but digitized, with room for events, notes, and even timers.
A significant part of the branding of certain apps such as Paperlike, Goodreads, and Notability are their features that make digital mediums feel like paper. This means that the appearance and even the slide of the hand on the screen must feel like a sheet of notebook paper.
Similarly, many savings apps still use life-like elements such as wallets, piggy banks, and saving jars to make the experience of savings more interactive. The look and feel of a real wallet makes saving easier and more engaging, especially with the interactive elements that usually accompany money transactions.
When it comes to branding experiences and features with high customer appeal, skeuomorphic designs are still alive and well.
There are still industries now wherein we see a resurgence of skeuomorphism, such as in gaming and fintech. The nostalgia for skeuomorphism in the early days of the internet has led modern takes on skeuomorphism within these industries.
Across gaming mediums, including AR, VR, and desktop, the bridging of physical worlds and digital worlds is key. Virtual buttons resemble real-life buttons, and real settings look like similar versions of their digital counterparts. Users then can more intuitively understand the environment, and hence the game. In this way, skeuomorphism can enhance hyper-realism in gaming:
Since there are still ways to bring skeuomorphic designs to modern UIs, it’s ideal to implement these designs in ways that enhance, and don’t detract from, the user experience. Here are some best practices for skeuomorphism UI design:
Meanwhile, here are some dos and don’ts that may be helpful guidelines:
Although skeuomorphism is declining in popularity, there are still many questions around what it is and how best to use it. Check out the following answers to some common questions:
If you have questions beyond these about skeuomorphism, I welcome you to comment below.
No flat design or skeuomorphic design could ever really mirror reality. But UI designers can try, especially if they can leverage aspects of these design approaches to enhance UX. As we’ve seen, skeuomorphism had its practical applications in the early days of the internet, and still has functionality in use cases today.
Skeuomorphism has evolved into many forms, such as neumorphism, as well as influenced opinion to sway UI design trends the other way into flat design. Both the lovers and haters of skeuomorphism cannot deny that it was an influential design technique that still has a place in certain areas of UX/UI design.
To employ skeuomorphism with skill and tact, UI designers must take UX into account. The user, who lives on the internet in daily life, is already familiar with many of the skeuomorphic design cues. To have skeuomorphism back in daily use, designers must recognize the ways in which the user uses their intuition to get where they need to go online and how skeuomorphic designs can assist them.
Skeuomorphism is (somewhat) dead. Long live skeuomorphism!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
Nostalgia-driven aesthetics is a real thing. In this blog, I talk all about 90s website designs — from grunge-inspired typography to quirky GIFs and clashing colors — and what you can learn from them.
You’ll need to read this blog through and through to know what’s working and what’s not in your design. In this one, I break down key performance metrics like task error rates and system performance.
Users see a product; designers see layers. The 5 UX design layers — strategy, scope, structure, skeleton, and surface — help build UIs step by step.
This blog’s all about learning to set up, manage, and use design tokens in design system — all to enable scalable, consistent, and efficient collaboration between designers and developers.
Learn more →
