The last few years have seen a lot of flux in web design trends. It almost seems like there’s a new trend emerging every other year. With all this volatility, it’s easy for designers to get caught up in the latest craze, while ignoring the more meaningful concepts that stand the test of time.
In this article, we’ll take a look at some of the most significant design trends in recent memory—skeuomorphism, flat design, and material design—and what’s in store for them in the future.
Skeuomorphism
The word skeuomorph comes from the Greek words skeuos (meaning “container or tool”), and morphḗ (meaning “shape”). In product design, we define skeuomorphism as a technique used in UI design where objects, icons, and buttons mimic their real-world counterparts. For example, a trash icon that looks like a trash can.
Why do this? For one, it helps us improve human-computer interaction (HCI). This was important back in the 1980s when the personal computer was a new concept for almost everyone. Big companies like Apple tried to minimize the learning curve by creating elements and icons that would look familiar to users. Steve Jobs loved skeuomorphism because he believed it made technology easier for people to use.
The second wave of skeuomorphism was at the end of the first decade of the 2000s. The rise of mobile devices forced designers to use skeuomorphism yet again to help users understand how to interact with these new devices. Back in 2008, the concept of the touch screen was new for many users, so designers created UI elements that allowed users to reference their prior experience. For example, the icon for the camera app in Apple iOS 6 had 3D effects like drop shadows, depth, and textures to make it resemble a real-world camera.
Examples of skeuomorphic icons on the Apple iOS interface. Image credit Apple.Designers used skeuomorphic design both in small elements like icons, as well as larger elements like UI backgrounds.
Apple iOS 6 used a skeuomorphic bookshelf that looked like a real physical bookshelf, with 3D shelves and wood textures. Image credit ipadyoupad.A few years after Steve Jobs’s death in 2011, Apple abandoned skeuomorphism. There were a few major reasons why Apple and other design companies made that decision:
- By the mid-2010s, most users had already learned how to use the interfaces and they no longer needed real-world elements to help them with that.
- Skeuomorphism makes it difficult to scale a design, since it isn’t response-friendly. It uses a lot of purely decorative elements, which are much harder to adapt to various screens and resolutions. To do this, you would need to create visual design details for each size/resolution.
- Skeuomorphism is resource-intensive, which means longer loading times and more bandwidth consumed. The latter is especially critical for websites.
Many designers believe that skeuomorphism is dead, but that’s not true. Skeuomorphism exists in subtle visual details within many products that we use today. For example, in 2020 Apple brought elements of skeuomorphism into the macOS design called Big Sur.
In the screen below, take a look at the OS Control Center, specifically the Display and Sound controls—the Display brightness bar uses small details of skeuomorphism, such as a heavy shadow for brightness control.
The visual style of the Control Center in macOS Big Sur uses elements of skeuomorphism. Image credit Apple.Another notable example is the icons in Big Sur. Check the Apple Mail and Apple Messages icons in the screenshot below.
The Dock in macOS Big Sur features pseudo-3D icons. Image credit Apple.Flat design
In 2006, Microsoft released a music player called Zune. The player was supposed to compete with Apple’s iPod—and as we know it, Microsoft lost this battle. However, the player introduced the world to a new concept: flat web design.
To build Zune, designers created a new visual language called Microsoft Metro, which was Microsoft’s interpretation of flat aesthetics. Metro was quite the opposite of skeuomorphism. With minimalism at its core, the goal behind this language was to remove all purely decorative elements and make the design purely utilitarian. Metro was one of the first instances of flat design in digital products and Microsoft used this language for many products, including Windows 8.
The visual design of Windows 8 is based on the Metro language. Image credit Giorgosarv18.This established the trend of flat design, which strips out any three-dimensional elements. It removes any stylistic details that try to imitate the real-world. Everything that’s part of a flat design appears as if it’s lying flat on a single surface. That’s where the name “flat design” came from.
As its name indicates, this trend uses characteristics like:
- 2D elements
- Simple typography
- Minimalism
- Bold colors
But why did flat design suddenly get so popular? Some designers think that flat design was a revolution in the design world. In reality, the move to a flat design represents not revolution, but the evolution of design. As users became familiar with digital patterns and interactions, there simply wasn’t a need to introduce unnecessary visual elements that mimic real-world elements.
However, flat design has a major flaw. Flat design is great for experienced users who are highly attuned to digital interaction, but it isn’t the most intuitive language for users who don’t have much experience with digital interactions.
Since flat aesthetics trim all visual design details, the final design has weak visual signifiers. This can cause a lot of usability problems, because users have to guess whether a certain element is interactive or not. Without visual cues it’s much harder to predict how elements will behave.
In an attempt to solve this problem, the design community developed Flat 2.0, a visual style that embodies all the sleek, minimalistic characteristics of flat design with a few, notable exceptions that move it a bit closer to 3D. For example, it introduces only subtle shadows and gradients to offer an improved UX. Since then, Flat 2.0 has become the de-facto standard for app and web design today.
Material Design
Later on in 2014, Google released its own language called Material Design. This design system is a more balanced interpretation of Flat 2.0 and attempts to marry the real and digital worlds. The word “material” alludes to digital objects that resemble the properties of real-world objects.
While it’s not clear why Google created Material Design in the first place, one possible reason was a need to unify the way things looked on different Android devices, including different screen sizes and resolutions. Material Design plays well as a set of guidelines that make this task easier. A large part of Google’s UX evolution, the internal giant incorporates Material Design into most of its products. Material Design examples include YouTube, Evernote, and many other apps.
So, what is material UI from a design perspective, exactly? In essence, Material Design is about using mostly flat elements with subtle 3D touches. The 3D touches help designers create a multi-dimensional experience, allowing them to create multiple layers by playing with the Z-axis.
Material Design also introduces physics. One of the main principles of Material Design is to mimic the ways things work in the real world but doing so in an utterly simplified manner. Material Design uses realism only as a tool to make our brains more familiar with how the interface works.
Animated transition in Material Design. Video credit Google.Conclusion
Design is never static. It’s constantly evolving and pushing back against perceived excesses. Some of those evolutions can also just be slight modifications to existing trends, which result in entirely new trends for us to discover. But remember: always evaluate every design trend in accordance with the needs of your users. You should never sacrifice user experience for the sake of trendy aesthetics.