Design

What’s skeumorphic design?

4 min read
Tony Ho Tran
  •  Oct 11, 2019
Link copied to clipboard

The term “skeuomorphic design” may have sent you to Google or Dictionary.com faster than you can say it (probably because it’s also hard to pronounce).

So let’s break it down: skeuomorphic designs are designs that mimic elements of real-life products and features. Skeuomorphismis applied when designers want to make interface objects more familiar to users by calling upon recognized, real-life objects and concepts.

You know how your camera phone makes the shutter sound every time you take a photo? That’s a great example of skeuomorphic design. It imitates the sound of an analog camera, even though that sound isn’t necessary to take a photo on your phone. This user-centered consideration of adding extra, not-strictly-necessary elements is a hallmark of skeumorphic design: adding features and elements to make products more recognizable.

Why do this? After all, if it’s not necessary to the product, you shouldn’t include it—right?

The answer is a bit complicated. That’s why we’re going to walk you through a few great examples of skeuomorphic design, the theory behind skeumorphism, and why you might want to use it in your own design process.

What is skeuomorphic design?

Skeuomorphic design is a design style that emulates the way users interact with and experience real-world designs and products. It’s used by designers to give their users a sense of familiarity with the design, with the goal of making users more comfortable and likely to engage with a product or feature.

A very good example of this comes in the form of the “save” icon.

Source: IconFinder

When the save icon was first introduced, it helped users know that the button saved their files to floppy disks. Now it’s a laughably archaic piece of tech, but has remained in the design sphere because it has become synonymous with “save.” 

Why keep it then? Why not replace it with a USB symbol, or just the word “save”?

Because it’s familiar. People know it what it means and are comfortable with it. That’s the essence of skeuomorphic design.

Another key element of Skeuomorphic design is the use of gradients and textures to emulate more life-like elements. A great example of this can be found in early iOS designs. 

Source: Wikipedia

The gradients used in the app icons gave users the sense that they could actually touch, feel, and use them like real life buttons. 

These designs were very prevalent in the early digital age when products like touch screen phones and smart pads were hitting the market. Users were unfamiliar with them and needed a way to adjust to these new experiences, and skeuomorphism helped smooth that transition. 

Like many things design-related, however, skeuomorphism comes with its controversies—one of which is the question of whether or not it’s even necessary anymore.

Is skeuomorphic design dead?

As time moves on and users become more and more digitally literate, skeuomorphism has begun to fall out of favor. This shift became very apparent when Apple released the major update iOS 7 in 2013, introducing flat design onto their iPhone software.

Source: Wikipedia

Flat design is a minimalist design trend that gets rid of all those gradients and textures that give designs that 3-D feel and flattens them out. It gives everything a more efficient, less cluttered look—and more designers are turning to it in favor of skeuomorphic design.

Check out our free flat icon pack.

By no means was Apple the first to employ flat design in their software; Windows leveraged the design as early 2006 with the release of their Zune. However, it was this change to the iPhone UI that thrust the design method into the forefront, causing many to boldly declare, “Skeuomorphism is dead!

Q: Is it really dead though? 

A: No, definitely not. 

The reason is simple: as long as technology advances, users will still need help familiarizing themselves with new technology. 

Even Apple, the flat design aficionado, still dabbles in Skeuomorphism with their Apple Watch.

Source: Apple

Notice the analog clock? That’s pure skeuomorphism. There’s no reason for it to be there when it could read digitally—but it’ll still be there because that’s what users are familiar with.

Even when designers implement flat design, there is often still an element of skeuomorphism. A good example of this is how many phone interfaces still include an old-fashioned phone handle for the call button.

Source: Apple

Now that we’ve looked at some of the theory behind skeuomorphic design, let’s take a look at a few great examples of it in action.

Five great examples of skeuomorphic design

These examples range from the digital software to physical products, with a few even come from ancient times. Each showcases the flexibility and depth of skeuomorphism. 

Let them inspire or just educate you on how skeuomorphism can be used in your own work.

1. Music software

Music software interfaces often employ skeuomorphic design elements by emulating the knobs, sliders, and buttons found on mix boards and amps.

A great example of this comes from Apple’s Logic Pro software (seen above). The interface includes the various sliders you can find on a mixing board to help producers get a feel like they were using a real-life board. 

They even dabble with skeuomorphism with their Garageband software. 

Music-making software Reason takes it even further by allowing you to display the front of different real-life amps and mixers.

Source: GearNews.com

And even the backs of the boards.

Notice all the wires, plugs, and even the fans? Technically they’re unnecessary — but they emulate their real-life counterparts, giving users a familiar experience. 

2. Note-taking apps

Source: The Verge

Great examples of skeuomorphic design can be seen in many different note-taking apps. Apple dabbled in this a lot with their early iOS designs for the iPad and iPhone.

In the example above, they emulated yellow legal pads for their note apps.

Macbooks today still include these elements with their Stickies app, which allows users to create sticky notes for reminders and to-dos. 

Source: Mac360

Similarly, calendar app Opus One also takes a skeuomorphic approach to its design (see below). 

Michael Flarup, one of the apps developers and designers, believes that the app’s skeuomorphic elements are a boon to its design, and show that skeuomorphism is still alive and well. 

“[Opus One] made it to the front-page of Dribbble,” he wrote in a Medium post in 2018. “A decidedly skeuomorphic design made it to the popular page of Dribbble between flat ui and illustrations. That, to me, is the biggest endorsement and an open opportunity for alternative thinking in interface design.”

3. Digital displays

Source: fliqlo

Clocks, calculators, and pretty much any other interface that displays numbers often feature great examples of skeuomorphic design.

The example above comes from the popular screensaver Flip Clock. With each minute that passes, the time changes with a flip of the number—emulating the old flip clocks of the past. 

Clock apps often display their numbers using a retro-digital layout (see below). 

Calculators are another great example of skeuomorphism in digital products. For example, early iOS designs for the iPhone’s calculator emulated the look and feel of actual calculators. 

Source: Cult of Mac

The example above showcases how Apple designers were inspired by Braun’s line of products and tried their best to emulate them. 

4. Delete icon

Source: Microsoft

One of the most persistent pieces of skeuomorphic design is the delete or trash icon. Typically it comes in the way of a bin filled with discarded pieces of paper. 

Apple first introduced the icon in 1982 with their Apple Lisa user interface. In the first rendition, it looked like an old trashcan one might find in an alleyway (see below). Designers wanted to convey that there was a method for users to permanently delete files from their computers. 

Source: Now I Know

Innocuous, right? Well, it might surprise you to learn that the history of the trash icon is rife with controversy and litigation. 

In 1988, Apple sued HP and Microsoft due to how similar their competitors’ user interfaces were to Apple’s — including their trash icon. The case eventually made it to the 9th Circuit Court of Appeals where judges ruled that the trashcan icon Microsoft used was too much like Apple’s. 

That’s why Microsoft’s delete icon (see above) resembles a recycling bin rather than trash cans. All that trouble due to a little skeuomorphic design. 

5. Files and folders

Source: OXSDaily

Despite files and folders going the way of the dodo, they stay alive through icon form. 

These icons are mainstays for designers conveying documents and ways to store documents. Its ubiquity doesn’t seem like its going to go away anytime soon either. Apple still uses it in their OS (see above), as does Google and Microsoft (see below).

Google Drive’s filing system

Source: neowin

These icons work well in conjunction with the trash icons. In fact, if you drag files and documents over to Apple’s trash icon you can watch it fill with papers. And if you empty the trash, it even makes a satisfying emptying sound. 

Source: StellarInfo

Is it absolutely necessary? No. Is it a prime example of skeuomorphism in action? You bet! 

Use skeuomorphic design wisely

Skeuomorphic design isn’t dead. It’s just evolved—just like the technology it’s trying to emulate.

When you use it, remember to keep your users in mind and ask yourself, “Will skeuomorphic design further their experience with the product?” 

For more on different design styles, be sure to check out our guide to using flat design.

Collaborate in real time on a digital whiteboard