Glassmorphism is a new trend in interface design
Another UI design trend is becoming more and more popular. You don’t know about him yet?
In the past year, I unintentionally began a craze for neomorphism, but, as I predicted then, he did not take over the design field. Then I mentioned all the potential accessibility issues that this style has.
Of course, there have been applications and products made in this style, but its most notable use was in Samsung ads and in the introduction of MKBHD videos. But these were separate elements, not products made in this style as a whole. This confirms my thesis that this style works if it is rarely used, and if objects against this background still retain structure and readability.
Hello Glassmorphism
Now a new style has appeared on the market, and its popularity is growing. While neomorphism mimicked a stamped plastic surface (but looked like a single layer), this new trend is more voluminous. Its main characteristics include:
Become a UX researcher – one of the most sought-after specialists in the product team
- Transparency (frosted glass effect using background blur)
- Layered approach with objects floating in space.
- Vibrant colors that accentuate blurry transparency
- Thin light border on semi-transparent objects.
This verticality, and the fact that you see through it, means that users can perceive the hierarchy and depth of the interface. They just see which layer is above which.
It seems to me that because of this glassy appearance, it is best to call this trend GLASSMORPHISM (glass morphism).
History
Background blur was first widely introduced in 2013 with the release of iOS 7. It was a pretty radical change, but despite all the controversy over ultra-light fonts and ugly icons, it was one of the few innovations that wasn’t controversial. People seemed to like it.
Quickly looking through notifications was fun, as you could clearly see (by slowly pulling down the notification shade) how the icons fade and blur under the new glass panel.
Strengthening the trend
Since then, Apple has significantly reduced the blurred glass effect in its mobile OS, but recently brought it back to Mac OS Big Sur. Just look at the Sketch window in the picture above and the blurry part of the photo seeping through it. I have highlighted the places where the background blur is most noticeable.
Of course, you can turn off this effect completely in the system settings.
Microsoft’s Fluent design system does a good job of doing this as well. They call this particular element The Acrylic and demonstrate it as an integral part of their design system.
Acrylic is a type of brush that creates a translucent texture. You can apply acrylic to the surface of your application to add depth and define visual hierarchy.
– Microsoft Fluent Design System
Dribbble analysis
Of course, as with any UI design trend, it is often overused on Dribbble. It is starting to develop slowly and there are already some good examples. Of course, these are all presentations, since everything will be more complicated on a real phone screen. Because all applications on phones run in full screen mode.
The example above may be on the verge of readability in some places, but it clearly reflects this trend. The background is very subtle, but still visible, and the shapes have a one-point semi-transparent white outline to simulate the edge of glass.
As with neomorphism, this style is especially pronounced when used for only one element. For example, the background in the above example. Of course, presentation plays a huge role here, but you can imagine a desktop web interface using the same level of transparency only for the background.
The icons can be a bit controversial, but they are also subject to glassmorphism, as in the above example from Marshall.
Now they are all published on Dribbble with the hashtag #glass, but I think the hashtag #Glassmorphism would be more correct. Glass might just be the glass you drink from, so I think this style deserves a name that makes it easier to identify.
How to achieve this effect
The effect itself is fairly simple, but there are a few things to keep in mind. The first, as is the case with any card layout – the closer the object is to us, the more light it attracts. In this case, this means that it will be more transparent.
This effect is based on a combination of shadow, transparency and background blur. In this style, you can use only one transparent layer or several, but it is most noticeable when at least two levels of transparency appear on a rather busy colorful background.
How to set the correct transparency
However, it is important to remember that you are not making the entire shape transparent, just the fill. Most of the design tools at 100% fill and a lower opacity of the object simply turn off the background blur.
In the example above, we have the same background blur value of 8, but the images look completely different. When the opacity of the fill is 100%, it doesn’t matter how low the opacity of the object is. We just won’t get the desired blurred background.
How to choose the right background
The background plays an important role in creating this effect (literally). It cannot be too simple or dull, otherwise the effect will not be noticeable. It also cannot be too detailed.
This may be the reason why Apple chose a colored background as the default wallpaper for Mac OS Big Sur. These noticeable tonal differences are easy to see when there is a blurred transparent surface on top of them.
When choosing a background, make sure it has enough tonal difference so that the glass effect is really noticeable.
Final details
The last thing you can try is to add a 1p inner border with a certain opacity to your shape. It simulates the edge of the glass and can make the shape stand out more from the background. Experiment! Although elements of this style, such as a blurred background, have been around for many years, its popularity is just beginning to grow. Therefore, there are many more interesting creative effects worth exploring.
You can also watch my quick tutorial on how to create this in Sketch and Figma.
Availability
As with neomorphism, this style is probably not as accessible as, say, Material Design. The main rule of neomorphism applies here too – if you have a good functional hierarchy, then on-screen elements should work without a background. This ensures that people with vision problems can still understand the interface.
This only happens when these transparency effects are purely decorative and not an integral part of the experience. You should avoid using them for buttons or switches (these important objects should always have more contrast), but you can use them for the background of cards.
Just make sure the inside of the card has enough contrast and the correct spacing so that you can define the hierarchy and visually “group” all related objects.
Glassmorphism 2021?
Apple has implemented this style in Big Sur – a sure sign that it will be and will be imitated in the coming months. It probably won’t penetrate all interfaces (which is good), but it will become a little more popular than it is now.
People get bored with trends easily, and every few years the pendulum swings the other way. We used super-minimalistic, almost flat interfaces for a while, but then they got more colorful, more vertical and more eye-catching.
Designers should investigate all potential creative ways to create a product. In some cases, the limited use of “glass” can actually improve the appearance of the product and make it more attractive to users.
While I love the unadorned, black and white, ultra-high contrast interfaces, I’d love to experiment a little more with this style and see where it leads me.
Because at the end of the day, design has to be fun, because it’s the only way to explore new paths, enjoy what we do, and create truly unique things.
See you on the other side of the glass!
