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.
Glassmorphism has 4 characteristics as defined by Michal in his article–
- Translucent objects to give a frosted glass effect
- Multiple layers to give a floating effect
- Bright colors around the translucent objects
- 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.
This Post Has 8 Comments
Pingback: 10 UI/UX Design trends in 2021 | UI UX Design Guide
I am genuinely pleased to read this blog posts which carries plenty of valuable information, thanks for providing these kinds of data.|
Thank you so much 🙂
you are actually a excellent webmaster. The website loading pace is amazing. It sort of feels that you are doing any distinctive trick. In addition, The contents are masterpiece. you have performed a magnificent job on this matter!|
Hi would you mind stating which blog platform you’re using? I’m looking to start my own blog in the near future but I’m having a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your design and style seems different then most blogs and I’m looking for something completely unique. P.S My apologies for being off-topic but I had to ask!|
Hello to every , since I am genuinely eager of reading this blog’s post to be updated daily. It consists of good material.|
Fantastic blog you have here but I was wondering if you knew of any message boards that cover the same topics discussed in this article? I’d really like to be a part of group where I can get comments from other experienced people that share the same interest. If you have any suggestions, please let me know. Appreciate it!|
I think that everything posted was very reasonable. But, think about this, suppose you were to create a awesome title? I mean, I don’t wish to tell you how to run your blog, however suppose you added something that grabbed folk’s attention? I mean BLOG_TITLE is kinda vanilla. You might look at Yahoo’s home page and note how they create news titles to get viewers to open the links. You might add a video or a pic or two to get people interested about everything’ve written. Just my opinion, it could bring your posts a little livelier.|