5

How we moved away from Skeuomorphism

 3 years ago
source link: https://uxplanet.org/how-we-moved-away-from-skeuomorphism-34ff223f5318
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

How we moved away from Skeuomorphism

collage depicting screenshots of interfaces from early 2000s to 2020

If you ever look at how digital interfaces looked like a decade ago and compare them with what we see today, I am pretty sure it is not difficult to say that they are very different. The kind of UI we used to have on personal computers, mobile phones, etc. has changed dramatically. It is evident that a lot has changed through the last decade. But, how did this change happen? And why?

What is Skeuomorphism? 🤔

Skeuomorphism is a design trend that builds affordances in a manner such that the users recognise and relate the on-screen elements of the digital interface to the examples of the real world. This has been a very common practice in designing software, websites and apps since quite a long time. For example, a settings icon is usually designed like a gear, which comes from the mechanical gear in various physical parts. A delete icon is usually a bin, resembling the actual trash bin in the real world. The sound when you click a picture using the camera app is just like the shutter sound of an actual camera. There are numerous other examples that showcase how the cues from physical world have been incorporated in the digital interfaces.

How it started… 💭

It might not be so easy to deduce this, but skeuomorphism has been influencing the design on digital devices since the age of personal computers. And there is a pretty good reason for that. Technology had started evolving and the concept of personal electronic or digital devices was gradually becoming common. People hadn’t experienced something like this before. Television and radio were probably the only digital interaction for people back in those days. As personal computers were getting more popular, people had to “adapt” themselves to these new devices. They had to “learn” to operate the computers. Introduction of skeuomorphic design essentially eased this for the users. The elements of the interface looked similar to the objects that people had been seeing in the real world, which helped them understand the meaning of the stuff they saw on the screen.

screenshot of windows xp
Windows XP with 3D look and heavy use of Skeuomorphism (Source: Twitter)

Though skeuomorphism was the guiding path for designing UI for computer software for a considerable amount of time, the trend caught a big momentum with the introduction of smartphones. This is because computers were primarily used by experts and professionals, and they were trained to perform a specific set of tasks. On the contrary, smartphones were meant to be used by all people, irrespective of their familiarity with technology. With the advent of smartphones, there was a need to create intuitive interfaces. The approach taken by various companies to inculcate skeuomorphic design can be evidently seen in the older versions of their products. When Apple revealed the original iPhone back in 2007, iOS (called as iPhone OS back then) had a strikingly different look with detailed icons and layout. Most of the elements of the interface had a 3-dimensional look, the idea of which came from the real world elements. Same is the case with early versions of Android.

iPhone OS 1 on the first iPhone
iPhone OS 1 on the first iPhone
Skeuomorphic design in iPhone OS 1 (Source: FirstPost)

The transition to Flat Design 🍥

screenshot of Windows 8 start menu
Flat Design in Windows 8 (Source: Wikipedia)

Over the years, laptops and smartphones became a part of our everyday lives. These devices were now becoming essential gadgets for most people. With a prolonged usage and acquaintance with technology, people no longer needed so much detail that skeuomorphic design brought with it. And then, flat design arrived. This trend removed all the clutter and unnecessary details in order to present a fresh and clean user interface. No gradients, no extra colours, not much shadows, no reflections. Flat design brought a simple yet powerful 2-dimensional aesthetic, and hence the name. Microsoft took a major leap into Windows 8 with flat design principles in 2012 (though it didn’t receive positive feedback for its Start Menu, but that’s a different story). Apple made the big transition to flat design with iOS 7 in 2013 and so did Google, with its well known Android Lollipop update and Material Design.

picture depicting difference in design of iOS 6 and iOS 7
picture depicting difference in design of iOS 6 and iOS 7
Transition from Skeuomorphism in iOS 6 (left) to Flat Design in iOS 7 (right) / Source: ExtremeTech

Though we moved away from Skeuomorphism with flat design, I wouldn’t say that the skeuomorphic design principles vanished completely. Even with flat design, there are certain aspects that can be still related to skeuomorphism. For example, the camera icon retained its relevance to skeuomorphism, but is now more clean and minimal in terms of visual look and feel.

Eventually, flat design took the digital space and the trend heavily influenced the design of websites, apps and native OS interfaces across multiple segments of devices including laptops, smartphones, tablets, smart displays, etc.

picture depicting design of Android 11
picture depicting design of Android 11
Modern and clean look in Android 11 (Source: Google)

Return of Skeuomorphism…? 🔙

As I mentioned earlier, skeuomorphism did have some part of it alive even when flat design thrived. In fact, most of the interfaces that we see today combine the best from skeuomorphism as well as flat design. For instance, a button doesn’t look clickable on a mobile phone unless it has been given some kind of elevation or shadow, the app we use for calls still has an icon that closely resembles the shape of a telephone, and so on.

picture depicting macOS Big Sur
Design in macOS Big Sur (Source: Apple)

One of the most recent comebacks of skeuomorphism is with macOS Big Sur. The latest update to Apple’s OS has incorporated a 3-dimensional look across the system (especially the icons!) in a vivid manner. It’s a fresh take on skeuomorphism and certainly revives the design trend in a modern way.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK