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.

MKBHD used this style in the intro of their videos.

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:

UX researcher
UX researcher

Become a UX researcher – one of the most sought-after specialists in the product team

Book your place

  • 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).

Glassmorphism is a new trend in interface design

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.

Glassmorphism is a new trend in interface design

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.

Glassmorphism is a new trend in interface design

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.

Glassmorphism is a new trend in interface design
Source: Microsoft Fluent Design System

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.

Glassmorphism is a new trend in interface design
Ghulam rasool

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.

Glassmorphism is a new trend in interface design

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.

Glassmorphism is a new trend in interface design

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.

Glassmorphism is a new trend in interface design

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.

Glassmorphism is a new trend in interface design
The image on the left has a semi-transparent border and the image on the right has no borders

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.

Glassmorphism is a new trend in interface design
This is an example of bad design. As in the case of neomorphism – the abuse of the effect on all possible elements of the screen. This approach makes the entire interface almost inaccessible for some users, and also makes it boring and unoriginal.

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 is a new trend in interface design
This is the best example – this card has a well-defined structure, so its contents will work even if the glass background is completely removed. This is a quick example – color contrasts can still be improved

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.

Glassmorphism is a new trend in interface design

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!

Author: Clark Douglas

Leave a Reply

Your email address will not be published. Required fields are marked *