What Skeuomorphism is, and Why it is Important

viktor
ubernative
Published in
6 min readJul 24, 2019

--

Many people believe that skeuomorphic design is outdated as a result of the introduction of the flat design. These people do not understand the meaning of skeuomorphic design — which is actually doomed to death, as they presume, but in a completely different way.

iPhone OS 1

What’s the first thing that comes to your mind when you hear “skeuomorphic design”? Probably early iPhone user interfaces with leather and wooden textures. But guess what? That’s not what it is. Skeuomorphic design is not equal to Realism and it can appear in various forms: monochrome, flat, three-dimensional or even with no visual at all!

So, What Then is Skeuomorphic Design?

This is skeuomorphic design.

According to the meaning of the term itself, a skeuomorph is an object that retains non-functional design features that were inherent in the original object.

Skeuomorphic designs are intended to help people understand how to use a new design, by allowing them to apply some prior knowledge about that precedent.

Explanation

Let’s cite some relatable examples for easier explanation.

C-3PO

See-Threepio, the droid from the Star Wars movie is an example of a skeuomorphic design because its form imitates the human body. This droid didn’t come from the whole evolution process like we did and there’s no other reason for it to be human-shaped, other than a desire for us to associate and empathize with the droid as a living creature.

Taken from starwars.com

R2D2 is another legendary droid in the same movie that neither looks nor speaks like a human. Therefore, we feel like Artoo-Detoo is more droid than See-Threepio even though they are both droids!

Pig snout

The diamond-shaped leather patch on backpacks is called a lash tab or pig snout. It was originally a design for outdoor packs; to pass a string through and fasten equipment or add extra gear.

String passed through Pig Nose to fasten equipment.

The leather patch is a popular trend with today’s backpacks. How often do you see it in use? A previously functional design now a non-functional fashion trend, a classic.

Smartphone

Application icons often represent physical objects (phone, mail, news, camera, clock, settings). These icon glyphs are skeuomorphic metaphors. While there are no gears inside smartphones, it still helps us understand what the icons represent, even without text labels!

Rotary dial telephone

Have you ever noticed that sound when you take a photo? That, also, is skeuomorph. There is no physical shutter or a photographic film winder in a smartphone; the sound was simply made for people to feel this feature right, to have familiar feedback from the unfamiliar tool. Modern mirrorless cameras also imitate the sound of DSLR camera shutter even though the devices don’t produce a physical feedback sound. This is simply a digital imitation to give users a familiar feel.

I bet you’ve felt that ultra-light vibration when you type on a smartphone keyboard. This was made for the same purpose as camera sounds. It is a tribute to PC keyboard.

That may be one of the reasons why the early iPhone interface felt so familiar to people using it for the first time. There was a time when a lot of people used to associate Apple with the term Intuitive.

Skeuomorphism was very important when user interfaces were introduced — as it smoothened the start of the digital devices use.

Non-Skeuomorphic Design

For a complete picture, I should definitely give an example of Non-Skeuomorphic design.

iPhone OS Mail application

Pull-to-refresh on mobile phones is a completely digital thing. It doesn’t have any references in the real world. There is nothing on our planet that you pull and get the update.

Curious Cases of Skeuomorphic Design

The Next Century Problem with the Phone Icon

Anyone who sees the phone icon in the year 2159 would probably not understand what it stands for because the person hasn’t seen phones like this ever before. Buddy was born when everyone already owned a smartphone without physical buttons.

Young generations don’t understand the Floppy disk icon that was widely used for the “save” action in software.

Floppy disk

Which Came First, the Book or the iPad?

Kids, who are familiar with the iPad, try to swipe and tap when they hold a real, physical book. They expect a book to interact in the same way as an iPad; because they learned that the thin, rectangular, colorful object can be pressed and swiped.

Don’t you find it interesting? The new object, that previously inherited its design from the notepad, is now the first point of reference for kids. That’s a paradox but welcome to the future.

Nowadays, books replicate the iPad, not the other way around.

Design Always Dies

Each skeuomorph will most likely live for as long as we remember the original object. If we are not familiar with the original object — there is no value in its skeuomorph. The phone icon skeuomorph will live a few more decades while the Floppy disk metaphor for a save action is dying.

Settings menu in Mac OS 8.0 (Control Panels). Taken from guidebookgallery.org

Picking a correct skeuomorphic metaphor for something completely new can be quite difficult. There are a few real-world objects that might be applicable to the Search function. In early user interfaces, there was a Light torch instead of the Magnifying glass which is used everywhere today.

Browser in IRIX 5.3 (Netscape 4.08) with thanks to Ian Young. Taken from guidebookgallery.org

Takeaways

Don’t confuse Skeuomorphism with Realism or as a predecessor for the Flat design. That will mislead you. Skeuomorphism is not a style of visual representation; it is deeper and more emotional than that. It is a connection between an object of design and our knowledge. This is a hint that designers made for us, consciously or not, to understand their product and to feel it in the right way.

Applying Skeuomorphic design principles, we must ensure that we are not trading-off the legacy drawbacks for new features.

VR and AR are booming right now. No better place to use Skeuomorphic design than in the real world or its imitation.

Footnote

I’ll really appreciate if you share some interesting examples from your experience. Looking forward to your feedback. If you like this — you know what to do.

Also, if you haven’t seen Star Wars movie — totally recommend. This is the only movie which you should start watching from Episode IV instead of Episode I. There is a cool story behind that. So, check the correct episode order before watching.

See ya.

--

--