7

Rules to play Glassmorphism safe!

 4 years ago
source link: https://blog.prototypr.io/rules-to-play-glassmorphism-safe-414fac0ba315
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Responses (2)

I appreciate your breakdown of the issues you see in using these design techniques. They mirror my reactions to the information, and also provide practical considerations when trying to implement.

Dribble design by E.Tomato

Wow. Awesome. Never seen this effect.

I hope finally, the neumorphism trend came to an end. Because there is a new player in the field now. Glassmorphism! This style takes the properties of glass and uses it to give a bit transparent, Blurred look to the elements which obviously looks cool😉.

Image for post
Image for post
Dribble Design by Ibrahim emran

There are already thousands of designs in dribble using this technique. I even saw some designs which combined both neumorphism and glassmorphism that beats the crap out of usability. But unlike neumorphism, glassmorphism is not a new design technique. It’s been in use since 2013 when it was widely introduced with iOS 7. The Fluent design system even has a brush called acrylic which has similar characteristics. Now it’s started to get more attention because of dribble buzz.

where can we use this technique🤔?

Of course, you can make cool dribble designs. But it also helps to

To give the sense of Hierarchy

This technique can be used to introduce a sense of hierarchy to the design. As you can see through the blurry transparent elements it helps the user understand the hierarchy better.

To give the content a sense of belonging

Using this technique on an element with its parent element in the background helps the designer establish the relationship between the contents.

Image for post
Image for post
I know! I’m not a great visual designer😅

In the above example, you can see that this technique gives the synopsis a bit more relevance to the movie even though the movie name isn’t mentioned anywhere. The user can establish the relationship easily as the cue is given visually.

But, There are somethings that need be considered before using this style

Colorful Background

Glassmorphism heavily depends upon its background. You got a colorful background, the screen looks awesome. The background is dull or plain, the screen looks horrible. So, one must always be careful about this factor especially if the background is not static. You can clearly see the difference in the image below.

Image for post
Image for post

Accessibility Problems

This technique increases the risk of being inaccessible to people with vision problems. Especially when it comes to text. The fluent design system advises not to use any colors apart from black or white while using the acrylic brush. And we must be very cautious while choosing the font size as it plays a major role.

Performance Issues

The Fluent design system says that Using the acrylic brush is a GPU Intensive process. So, using glassmorphism can introduce the risk of the product being slow or increasing battery usage. Make sure you discuss these things with your dev before you start designing😉

Icons using Glassmorphism

I often see a lot of people using this technique to design icons. I even saw a Linkedin post saying it can solve the problem for people with vision problems.

Image for post
Image for post
Dribble design by E.Tomato

This looks cool when it covers half of your screen. But I highly doubt it can be usable in the size of 18px with 24px padding. I don’t feel that glassmorphism is a good suit to be used with any interactive elements.

Thanks for reading

I hope this article helped you get a bit more understanding of this trend.

I have to thank Michal Malewicz for his article on glassmorphism. It helped me a lot in understanding this technique.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK