With the number of uniquely different digital devices entering the market each year to provide users with new ways to connect themselves with technology, the world of digital design has remained in a constant state of growth and evolution. This rapidly changing landscape has led to the development of different types of user interfaces designs, which range from flat minimalistic components and elements to the more realistic design of skeuomorphism.

What is skeuomorphism?

Skeuomorphism is a type of design style commonly used in user interface design to try and mimic how real-world objects and interfaces appear and function when users interact with them. Since skeuomorphism design is a digital mirror to how an object would appear in the real-world, it increases recognition and improves the speed at which a user may learn how to use the UI when already familiar with its real-world counterpart. This is likely why Skeuomorphism was one of the most popular design styles for user interfaces at the launch of the smartphone and in early-on desktop computing.

A well-known example of skeuomorphism can be seen in the early UI designs for digital music players, which used the 3D-like skeuomorphic design style to display knobs, buttons, and slider components almost identically to how they would appear on a physical music player. In doing so, skeuomorphism equipped designers with the ability to build products that were intuitive and easy to use.

Where and how is it used?

Fully understanding the relationship between the human mind and technology is crucial to building any good user interface design with your preferred web design software. Skeuomorphism takes it a step further by bridging the intersection of digital and industrial design. It is about facilitating non-traditional device interaction without sacrificing usability, which can be a result of a minimalistic design that makes better use of the space but at the cost of losing intuitive recognition. Ultimately, it is about enriching and enlivening real world objects in the context of our human physiology through our digital devices.

Although skeuomorphism was popular in the early days of mobile design and computing, it inevitably became less popular as web and application design began to drift more towards the benefits of minimalistic design, specifically its superior use of space and versatility. However, now with the rise of wearable technology including both smartwatches and virtual reality (VR) hardware, a new and modern skeuomorphism design has been growing in popularity once again.

As an example, if you were to take out your mobile device today and open your built in calculator app, you would quickly discover its use of a flat and minimalistic design. Now, if you were to put on a VR headset and pick up a calculator off a desk within the gaming space you would have the opposite experience as it would have been designed with skeuomorphism in mind. This need to make VR as close as possible to the real experiences we have in the real world is imperative to its success, which is why skeuomorphism has once again become a popular form of UI design. This is because

Practical tips on how to include skeuomorphism into your designs

Don’t overuse skeuomorphs: Skeuomorphism is best used with the right intention, for example in VR or the watch dial on your smartwatch. However, if you are incorporating it into your web design app design use it sparingly as too many objects can clutter and complicate an interface.

Keyboard UI with skeuomorphic design. Image credit Milan Maheshwari.

Serve a function: A skeuomorphic design object needs to support a function and even better if it makes a smoother user interaction or experience. Avoid using skeuomorphism to introduce users to a brand new type of interaction that they would not find in the real world. In the example above, designer Milan Maheshwari used a skeuomorphic design to make the keyboard UI more intuitive for a touch interface.

Apple’s original Book app UI. Image credit Neowin.

Don’t complicate known interactions: If you incorporate a skeuomorph design element it should not make any process, action, or interaction more complicated. It should serve with the purpose of simplifying. A great example of overcomplicating a design with unnecessary skeuomorph implementation is the original UI for Apple’s Books app, which tried to make the experience so similar to the real-life experience that it missed all the opportunities of having a digital version, like quick page-turning or even optimal use of space.

Create the real world but better: Don’t feel limited by trying to simply replicate a real-world object or element, with a skeuomorphic design you can also think about how to improve that interaction in a digital space.

Calculator with skeuomorphic buttons. Image credit Ali Hammoud.

Familiarity helps with usability: Skeuomorphism at its best is when the interaction or function of the design has a clear link to how a user would expect to interact with the object in the real-world. As seen above, designer Ali Hammoud used skeuomorphism to ensure his calculator design remained familiar despite its unique appearance.

Find balance: The most innovative or useful skeuomorphic designs find balance across all design elements and types. Finding the balance between real-life inspiration and the digital world is key, as it helps the user understand their experience the best.

Getting started with skeuomorphic design

The key to good skeuomorphic design is to first understand the benefit some real-world objects and interfaces have in terms of recall and recognition and then leveraging those mental models to incorporate them into your designs to improve the overall user experience. Start by looking at current and modern day uses of skeuomorphism to understand why the style was chosen and the benefit it provided to the user experience.

Author’s bio:
Dan Silveira is a UX designer, foresight strategist, and writer based out of Toronto, Canada where he works for IBM. He is passionate about design and sharing his experience with others in the field.