Glassmorphism | New UI Trend

So we again have a new UI style called Glassmorphism which is trending these days. And it is started by the same guy named Michal Malewicz who made Neumorphism popular. A lot of designers have already started creating cool designs using Glassmorphism on platforms like Dribble and Behance.

Let’s learn what it is exactly and how to use it in your design…

What exactly is Glassmorphism?

Neumorphism gave a plastic effect to the interface while Glassmorphism gives it a glassy look. You must have already experienced a similar blurry background style in Windows VISTA and iOS 7. But recently, it has been carried forward in Mac OS Big Sur and Microsoft Fluent Design System.

Characteristics

Glassmorphism has 4 characteristics as defined by Michal in his article–

1. Translucent objects to give a frosted glass effect
2. Multiple layers to give a floating effect
3. Bright colors around the translucent objects
4. Fine border on the translucent objects

Steps to attain Glassmorphism

1. Choose the object/s to be highlighted

Decide which object or objects you want to highlight by giving the translucent glass look. Remember, this effect looks good only when it is used for a few elements in the UI. Overloading your design with glassmorphism is not a good idea.

2. Make the objects look translucent

While making the objects translucent, you have to take care of the distance at which they are placed. The closer the objects, the more transparent they should appear. The farther the objects, the more opaque they should appear.

To give this effect the right way, the fill of the object needs to be varied and not the opacity of the object. We don’t intent to make the whole object look transparent. By only lowering the fill of the object, we will be able to see the background through the object with the desired blur.

3. Choose a colorful background

One of the most important thing in glassmorphism is the selection of right background. Only a colorful background can make your design stand out and properly highlight the translucent objects. Choose bright colors and loose designs for the background.

But make sure that the background is not too detailed. Otherwise, it can make the design look messy rather than cool.

Different types of Color Schemes

4. Add a subtle outline to the objects

Now, revert back to the objects and add a subtle outline of 1 px to them. Adjust the transparency and the color of the outline according to the object. The outline should look a little brighter as compared to the object to give it a feel of glass edge reflection.

5. Add a light shadow under the objects

At last, add little shadows under the objects to give them floating effect. The shadow value should be very less to give it the desired effect. With this step, glassmorphism of user interface is completed.

Do’s and Don’ts

We need to analyze what happened with Neumorphism before starting to use Glassmorphism formally. Neumorphism had high accessibility issues specially for the people with vision problems. Because of this, it was kept limited to be showcased in design portfolios.

The actual use of it was found rarely and could be seen in some Samsung advertisements.

Glassmorphism can have similar issues if not used carefully. Avoid excess use of this style in your interface and do not use it for important interactive elements. Wherever you use this style, make sure to give enough contrast to the surroundings and texts.

Remember that Glassmorphism is only meant for user interface decoration purposes and should not mess with the functionality of the product.

Future of Glassmorphism

Keeping all these important things in mind, we will be effectively able to use Glassmorphism without affecting the accessibility. A few trend driving brands like Apple and Microsoft have already brought it into reality with their own set of rules. So, we can say that it is definitely going to do better than Neumorphism in the market.

Glassmorphism can really add to the aesthetics of a product if the designer is able to use it the right way. This UI trend is expected to stay here for long. So keep practicing till you master it.