Skeuomorphism: Design We Learned To Outgrow

While Skeuomorphic design may no longer be in vogue, it served as a stepping stone to more contemporary design trends, like material and flat design.

Scott Oliveri
Design Warp
Published in
4 min readJun 16, 2020

--

It is 2013. The busy gradients, textures, and shapes of Apple’s iOS 6 have given way to the flat and simpler designs of iOS 7. The ubiquitous skeuomorphic UI design Apple leveraged to familiarize a generation of new smartphone users fades into the past. Many designers and users welcomed the visual refresh, hailing the new flat designs as minimal and lightweight, compared to the dated and ugly clutter of yesteryear.

To the left, an iPhone home screen pre iOS 7, showing more pronounced buttons. The sleeker iOS 7 redesign is to the right.
It’s possible no iOS update will ever be as visually drastic as the transition from iOS 6 to iOS 7 in 2013. Image Source: Reddit.com

As dated as it may appear now, the skeuomorphic design that proliferated during the early years of smartphones enabled users new to digital touch screens to become familiar with interfaces they had never seen before. This era of mobile UI design served as a foundational stepping-stone for the refined, minimal experiences and visuals we enjoy today.

What is Skeuomorphic Design?

Skeuomorphism, in the sense of interface design, refers to when a design imitates the form of an object in real life. The intention behind skeuomorphic design is that by making something familiar, users don’t have to learn how to use it from scratch. A popular example of skeuomorphic design is Apple’s initial design for their calculator application.

The pre-iOS 7 calculator application. Digital buttons are visually styled to look real with heavy drop shadows and lighting.
The UI design of this application is literally a simulation of an actual calculator, down to its screen reflection and raised button. Image Source: https://uxdesign.cc

Note that interfaces can still be skeuomorphic if they also emulate the UX of a real object, not just its look. The more updated apple calculator, seen below, no longer looks like an exact port of a physical calculator, but it is still skeuomorphic in the way that it is used.

The current iOS calculator app. The design is simplified and flat, resembling a digital interface, rather than a physical one
Chances are that if you’ve used a physical calculator before, you’ll still know how to use this one. Image Source: https://uxdesign.cc

Skeuomorphism & Affordances

So we know that Skeuomorphism emulates real life objects to present familiar, easily understood interfaces to users. What made this design trend so successful in introducing users to new touchscreen technology was its relation to affordances.

Affordances indicate possible actions that can be performed on an object or interface. A common, real life example could be a door knob or a push button. These objects have physical designs that indicate that they can be rotated or pushed. Skeuomorphism brought affordances into digital interfaces so that humans could become accustomed to the digital world as much as we are to the physical one.

Steve Jobs was a proponent of skeuomorphic design, and felt its use in iOS enabled users to make connections to the designs on their screen, like buttons resembling glossy “real” buttons, indicating their intractability. In a time where user interface navigation on a touchscreen was not nearly as familiar to us as it is now, skeuomorphism provided a shared visual language that could be intuitively used.

Pre iOS 7 apps. Notepad app emulates a yellow notepad and handwritten font. An alarm app with a realistic dial.
Buttons, notches, and sliders pop out of the screen, heavily telegraphing their intractability. Image Source: https://uxdesign.cc

The Transition to Minimalism

As our ability to understand technology progressed, so did design language. With this understanding and familiarity, interfaces began to grow increasingly complex. Cluttered skeuomorphic interfaces, with their inelegant gradients and glossy buttons, were beginning to hinder user experience.

Skeuomorphic interfaces, which relied on familiarity, were sacrificing ease of use, interface scalability, and navigability. The design community began to move towards flatter, more standardized styles that could be easily ported between mobile, tablet, and web. The boxes, squares, and flat backgrounds that replaced the more theatrical emulations of the past were responsive, clear in hierarchy, and practical.

Post iOS 7 designs featuring flatter, more minimalistic design. Interface elements are simplified and less pronounced.
Apple’s iOS 7 design featured flatter, simpler designs that relied on previous user knowledge of touch interfaces. Image Source: https://www.independent.co

With a new focus on clean, lightweight, and function-first interfaces, elements like hamburger menus, pull to refresh, and swipe to delete were implemented to declutter and save space. These elements are non-skeuomorphic, because they have no counterpart in real life and their meaning and functionalities have to be learned.

Under the lens of skeuomorphism, you may view such elements as problematic considering they are not inherently intuitive. Critics of skeuomorphic design argue that users have become so accustomed to interacting with graphical user interfaces that skeuomorphism is no longer necessary.

However, Skeuomorphism is not truly gone, and has returned minorly in the form of visual cues. Within flat and material design styles, designers have since utilized many skeuomorphic cues to showcase hierarchy and affordance, such as drop shadows and depth.

Skeuomorphism in Retrospect

While flat design and the visual trends from 2013 onwards may seem prettier and preferable to what came before, we never could have implemented such design without the foundation that skeuomorphism established. It makes sense for emerging technology and designers to use skeuomorphism in their designs to anchor us to more familiar analogues. Skeuomorphic design in the sense of pre iOS 7 interfaces may be past its expiration date, however, all designers should know of its important role within UX / UI design.

--

--

Scott Oliveri
Design Warp

UI Designer, Product Designer, and Illustrator. Former Mechanical Engineer. https://www.scottoliveri.com