Three-dimensionality in interfaces: skeuomorphism, flat design and neomorphism

If you look at the latest digital interfaces, you will notice that many styles rely at some level on the two-dimensional representation of physical components. This article does not purport to describe these styles in detail, but explores the characteristics, rationale, and presentation resources of three of the most relevant user interface styles today.

Why did I choose these styles? In terms of the history of digital interfaces, there have been several styles and design variations. In a simplified description, we have the first stage, driven mainly by technical constraints (pixel count, color and memory usage). In the second phase, computers opened up possibilities for designers, and more thoughtful visual styles emerged. Two of the most relevant for this period are skeuomorphism and flat design. Neomorphism is not a uniform style, but I included it in this study for reasons that I will describe below.

Process

After examining the characteristics of each of the styles, I created a conceptual interface for each of them. Using a CAD tool, I built the corresponding 3D models that included the background and appropriate lighting. Then I made some realistic top and isometric renders. Taking a top view as a reference, I put together a 2D view using Figma. These components use common patterns that can be built with code and used in final products.

Below you will find images of this process useful for comparing different views and styles.

Skeuomorphism

Skeuomorphism is more than just a delimited style, it is the rationale for imitating the interfaces of the physical world in the digital world. It was originally a resource used to make interactions more intuitive for users. According to this principle, skeuomorphism combines several visual styles.

These renderings showcase a clean style with geometric and uniform elements combined with slightly rounded corners.

These components try to resemble a high-quality plastic interface from the physical world. Microinteractions also mimic the physical patterns of common buttons and controls.

You can read a more detailed description of skeuomorphism here…

Flat design

Flat design emerged in response to skeuomorphism. Once users became familiar with common interaction patterns, literal elements became unnecessary. Designers changed the semiotics of components and shaped this style.

Flat design broke physical rules. Reliable and realistic representations were no longer needed. The message is conveyed through icons, abstractions, and conceptual interactions. Users were already familiar with digital interaction patterns.

The orthodox flat design options rely solely on the two-dimensional nature of the screen. References to the physical world, such as shadows, transparencies, or reliefs, are not used.

However, some of the later variations on this style included a 3D representation of overlapping layers, expressed as drop shadows, opacities, and gradients. Material design Is a great example of this concept.

For this research, I used simple components that resemble laminated objects floating on canvas. Microinteractions do not obey the laws of gravity and do not take into account the roughness of materials.

You can read a more detailed description of flat design here…

Neomorphism

This trend is not a uniform style and probably never will. At least as long as he retains his characteristic visual gestures. The reason is obvious accessibility issues. Because of this, neomorphism has almost never been used in final products.

What is neomorphism? Let s take a look at neomorphism in terms of accessibility.

Neomorphism is predicted to become one of the main trends in user interface design in 2020

However, there is something beautiful and mysterious about this style. This is why I included it in my research. I think its potential lies in the combination of physical elements with digital gestures. It is like a 3D world created entirely in a digital environment. It looks like a perfect thermoformed plastic interface that doesn t obey physical rules. It s likely that if neomorphism can find enough balance to maintain legibility, it will take hold as a UI style.

To visualize this style, I used the current paradigms and specifications of neomorphism. These components are part of a single surface formed by bas-reliefs and high-reliefs. His interactions are the middle ground between the two previous styles.

For a better understanding of neomorphism, read this article…

Output

Understanding the reasons and geometric constraints of these styles can open the door to improving current patterns and ultimately generating new styles or variations on existing ones.

When designing a device, the physical and digital interfaces are usually formulated independently of each other. These two worlds are gradually starting to merge into more cohesive products, in which users will be blurry to move between the two types of interfaces. Design systems cover various product dimensions.

Imagine a design system that includes digital components, physical components, materials, colors, interactions, sounds, language, and more.