Introduction

Over the years user interfaces (UI) have evolved from simple text commands to advanced visual displays of device functions. Technological advancements and shifting user expectations have continuously shaped UI aesthetics. With the heavy usage of smart devices, UIs adapted to accommodate complexities such as varying screen sizes and the overall look and feel of UI elements. In the early days, interacting with computers was limited to text-based commands, which were nothing like the interactive and visually appealing screens we have now. The introduction of GUIs (Graphic User Interfaces) brought about a significant change, introducing visually engaging and intuitive interfaces along with new design styles. In this article, let's explore the evolution of UI design throughout the different eras of computing.

Skeuomorphism 1990s-2010s

As GUIs first began to emerge, they closely resembled real-world objects to create a sense of familiarity for users. Textures, shadows, and gradients were used to give icons and elements a lifelike appearance, making them look like everyday objects. For instance, radio apps used conventional radio-like icons to help new users, still unfamiliar with digital interfaces, understand the app's function. Early versions of iOS prominently used skeuomorphic designs in their icons to assist users in transitioning from physical to digital tools, especially as one of the first touch-based devices. Skeuomorphism remained the standard until the 2010s, paving the way for simpler and more minimal design styles.

Flat design Mid 2000s

As time went on, designers and users transitioned from clunky and cluttered three-dimensional designs to a more simplistic approach. Flat design was a trend, characterized by its two-dimensional, simple, and colorful style, in stark contrast to the previous design styles. The excessive use of shadows and textures was abandoned in favour of cleaner, more visually pleasing user interfaces. The rise of responsive design, allowed interfaces to be viewed across multiple devices, further pushing this shift. Skeuomorphic designs, as mentioned before, struggled with scalability across different screen sizes, leading to the adoption of flat colors for elements like buttons and backgrounds, which could easily be adjusted for web and mobile screens. However, this approach had its limitations, as users felt it lacked depth and tactile feedback. In response, Google developed its own design system known as Material Design. This system aimed to combine the best of both worlds by incorporating subtle shadows and animations to provide a sense of depth and interactivity while maintaining the simplicity and scalability of flat design.

Material Design 2010s – 2020s

Material Design, introduced by Google in 2014, marked a significant shift in digital design philosophy. By addressing the principles and shortcomings of flat design, Google aimed to create a cohesive and adaptable design system. Initially launched to enhance the Android platform, Material Design quickly spread across various Google applications and services, influencing web and application design globally.

PS. At Rootcode, we designed a design system, that helps to design, and design systems, and we made it free for the world to use. You can now access this free resource on Figma Community.

The design system is built on a grid-based layout, responsive animations, and depth effects such as lighting and shadows, providing a contrast to the flat design. One of its core objectives was to make interfaces feel more realistic and engaging without mimicking real-world objects, thus avoiding the complexity of skeuomorphism while maintaining the simplicity of flat design. This balance resulted in a visually appealing, intuitive, and flexible design approach suitable for a wide range of devices and screen sizes.

Flat Design 2.0

Due to the weaknesses of its predecessor, which lacked strong visual cues for users, flat design 2.0 reintroduced some depth and dimension from previous design trends, striking a balance between minimalism and usability. Rather than mimicking real-life imagery like skeuomorphism, this new approach adopted subtle gradients and shadows to create a sense of hierarchy and enhance user interaction. Features such as bold color palettes and micro-interactions became popular with this design system. With the release of Apple’s iOS 7 and Google’s Material Design, flat design 2.0 has maintained a prominent role in digital design, offering a visually appealing and user-friendly experience across various platforms.

Neumorphism 2020s

As design trends evolve, neomorphism has gained traction in the modern era. Taking a step back from flat design and amplifying the changes introduced in flat design 2.0, neomorphism draws inspiration from skeuomorphism while blending minimalism with subtle three-dimensional backgrounds. This approach adds depth and physicality to UI elements without reverting to the heavier skeuomorphic elements.

Neomorphism gained popularity in 2020 when designer Oleksandr Plyuto concept for a mobile banking app went viral. The style quickly caught the attention of the design community, inspiring various interpretations. However, accessibility issues related to low contrast and minimal color differences have prevented neomorphism from becoming mainstream. Nonetheless, designers have explored hybrid solutions, such as Apple incorporating neumorphic elements in the macOS Big Sur update. This indicates a continued interest in blending modern design aesthetics with practical usability.

Glassmorphism

Glassmorphism is a UI design style that emphasizes a frosted glass effect where backgrounds are blurred behind glass-like layers. Through frosted glass this style highlights depth and hierarchy via translucent elements. Though background blurs of this sort were used from time to time in UIs over the years, glassmorphism as a concept gained traction recently. The term was coined by the YouTube content creator, Michał Malewicz in 2020 to unify the UI style implemented by different names under different brands. Both Windows and Apple used glassmorphic elements in their UI. Windows integrated this under the name “Acrylic”. However, glassmorphism became more prominent with the release of macOS Big Sur. With the rise of AR and VR applications, glass-morphic UI is being applied more and more, as evident with Apple’s VisionOS. Nevertheless, accessibility appears to be an issue here as well, with poor contrast between foreground and background being high on the list. Overall, designers are finding new ways to adjust, so glass morphism is most likely here to stay.

Neo-brutalism

Rejecting minimalism, neo-brutalism, also known as neubrutalism, harkens back to pre-2000s design trends characterized by stark and severe appearances. This style employs bold, eye-catching visuals to create a raw and unpolished aesthetic. High-contrast color palettes and prominent borders are used to contrast with conventional flat design, making neo-brutalism distinct and memorable. Figma has been a strong advocate of neo-brutalism, as seen in its UI design, although recent updates have shifted towards a more conventional minimalistic UI. However, neo-brutalism's intense visuals and potential accessibility issues require careful consideration and thoughtful implementation. As the digital landscape continues to evolve, neo-brutalism stands out as a testament to the enduring appeal of raw, unfiltered design.

Wrapping up

As design evolves, certain trends take over the design landscape and new trends emerge. From simple line interfaces to complex skeuomorphic graphic user interfaces, then finally settling on minimalism, UI design has taken its shape from the culture of its times, user preferences and technological advancements. Today we see these styles merging tightly together to create new creative and fresh ideas that lead to intuitive and appealing designs. Because of issues such as accessibility, neomorphic and glassmorphic elements are integrated into flat design style UIs to go beyond that barrier and implement a more tactile and immersive experience.

In this dynamic landscape, designers continuously experiment and innovate, pushing the boundaries of what UI design can achieve. As new technologies and user needs emerge, the evolution of UI design will undoubtedly continue, blending past influences with future possibilities to create even more engaging and effective user experiences.