A complete guide to skeuomorphic design
Everything you need to know about the art of life-like design
When Apple redesigned iOS in 2013 with a ‘flat’ design, many presumed skeuomorphism dead. Others remained steadfast fans. If you ask us — or GitHub’s product designer Gavin Nelson for that matter — skeuomorphic design of the early 2000s might’ve simply been a case of “too much of a good thing”.
Today, skeuomorphism is making a comeback in mainstream design — but this time, with more subtlety. If you’re looking to get started with skeuomorphic design, we’ve got you covered! In this post, we’ll be taking a look at what skeuomorphism is and how it’s different from flat design and neumorphism. We’ll also be sharing some examples and a quick tutorial to make sure you’re ready to hit the ground running.
Let’s get to it!
Skeuomorphism and skeuomorphic design
- What is skeuomorphism
- Flat design vs skeuomorphism
- Anti-skeuomorphism
- Skeuomorphism vs neumorphism
- Skeuomorphism examples
- How to create skeuomorphic designs
What is skeuomorphism?
Skeuomorphic designs try to mimic as many qualities as possible of real-life objects. It goes beyond shape and color, focusing instead on texture, lights and shadows, dimensions, and most importantly: use.
Skeuomorphism dates way back to Ancient Greece where potters would create handles that mimicked metal. So it’s no surprise that the term we use today comes from the Greek word “skeuos”, meaning vessel or container, and the English suffix -morphism, which means the state of being a shape, form or structure.
But when it comes to UI design as we know it today, skeuomorphism had its boom with the advent of the first iPhone. Steve Jobs believed that, to increase ease of use, UI elements should mimic real-life objects as much as possible. For example, a Notes app that looked like a notepad. As people got more familiar with the iOS interface, Apple’s team realized users no longer needed the callbacks to real life — so they gave the whole UI a makeover.
Flat design vs skeuomorphism
What happens when skeuomorphic icons become well-known? Many would say that the user no longer needs intricate designs to recognize the icon’s function. And that’s exactly what Apple proved when they unveiled iOS 7.
A side-by-side comparison of iOS 6 and iOS 7 shows how Apple’s style radically changed to a flat design with very few shadows or textures.
To increase loading speed and declutter digital touchpoints, designers started stripping back skeuomorphic designs to their essentials. This is the basis of flat design. Volume, texture, and heavy color use were some of the main things to go. Designers began adopting sans serif fonts for their work, and started using a single vibrant color or a limited color palette. You might be wondering if flat design is the antithesis of skeuomorphism — but is that really the case?
Anti-skeuomorphism?
As humans, we have a tendency to perceive things as black and white. And as a new trend appears, it’s easy to see it as a beginning of a new era — and the end of an old fad. There were certainly reasons to move away from skeuomorphism as we stepped into the 2010s. And as digital marketing turned into a battleground, performance and efficiency became the key differentiators in a sea of similar products.
Flat design is faster to make — and faster to load. And once it was established as a trend, it also became a sign of modernity for users. Anti-skeuomorphism persists even today, partly because speed is still king. And partly because the next design trend hasn’t taken over yet. Or has it?
Skeuomorphism vs neumorphism
Turns out there is a new kid on the block, after all. From the creators of skeuomorphism comes: neumorphism. And yes, that is pronounced new morphism — a fitting name for the lovechild of skeuomorphism and (you guessed it) flat design. And, if you ask us, we think it’s the best of both worlds.
It’s true that apps and websites still need to be fast, especially if they want to rank high on search engines and app stores. But the overuse of minimalistic designs has also made some interfaces a bit… well, flat. That’s why designers have been playing around with neumorphism, adding depth and color to their designs. The main ingredient? A play on lights and shadows.
Here’s a great example by Andrei Simion, where he applies neumorphism all across the design.
Skeuomorphism examples
So now that you have a good understanding of what skeuomorphism is and where it came from, it’s time to see it out in the wild. Here are some great examples of what you can do with skeuomorphic design:
How to create skeuomorphic designs
Our very own Tiago Alexandrino put together this quick tutorial below to help you get started with skeuomorphic design. Have questions? He’d be happy to answer via Twitter or LinkedIn.
Thank you so much to you all for tuning in! The video will be on Youtube really soon ❤️ And as promised, I'm sharing a tutorial on how to design icons with @sketch applying the skeuomorphism technique 🚀✨#MadeWithSketch #icon #design #designtwitter #tutorial #tipsandtricks pic.twitter.com/IarknnMAY9
— Tiago from Sketch (@TAEvangelist) June 14, 2022
Got some skeuomorphic designs to show off? We’re currently running a #Sketchmorphism challenge! Read all about how to win one (or two) HomePod minis on our Twitter.
