Glassmorphism

At hype4 we are proud to be at the forefront of the UI design industry. We had the privilege to not only follow, but also help create (or rather "name and define") some design trends that went global. glassmorphism first use

One such example is Neumorphism - which I coined back in December of 2019 after going through potential 2020 design styles at our Design event DGS.

Neumorphism first public use 2019

Neumorphism

The naming and defining this led to over 600 000 views of the first articles and nearly 800 000 views of all our articles on the topic.

It quickly became a global, worldwide phenomenon and a hashtag in it's own right. 🤓

Neumorphism by hype4 example

It has since been used in some real products, including ones by big, worldwide corporations.

What is glassmorphism

Hello, Glassmorphism

This year we're coming back with a definition and a name of yet another UI trend that has been steadily growing in popularity over the last year. We call it Glassmorphism.

The premise of this style isn't new in itself. It has been used in Windows VISTA, iOS 7 and many other styles. It's also a part of the Fluent Design System by Microsoft - they call it Acrylic. Later this year Mac OS Big Sur came out with an implementation of this effect, making it even more mainstream.

glassmorphism in windows vista and ios 7

There isn't however a clear name and definition of how you can make this style work so we decided to change that with an in-depth article that you can read below: 👉 https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9

How it works?

The general idea is to have a background-blur on an object, giving the impression of a frosted glass. Contrary to Neumorphism, this style is not "connected" to the background, buy rather a series of glass panels floating in the vertical space.

the layers of glassmorphism

That floating and some minimal translucency gives a sense of perspective of where each panel is in the 3d space. That gives some clarity and understanding of both the hierarchy and structure. It's a series of clear layers that define where each object is in the 3d space. Of course, just as with Neumorphism, overusing this element for every part of the UI is not recommended. It works best when there's one or possibly two objects done that way, with the rest having proper contrast and opacity.

What is Glassmorphism? In simple terms it's a light or dark surface, placed on top of a colorful background. The colorful background is necessary for the effect to be properly visible, as dull, low-contrast backgrounds simply fade away under the panels and most of the effect is lost.

glassmorphism border

You can also add a 1 pixel light outline (with some transparency of its own) to the shape so it can simulate the glass edge.

The last step is adding a nice shadow under the objects so the depth is preserved and voila - we end up with a glassmorphic card layout.

glassmorphism and accessibility

Accessibility

Neumorphism has been universally dismissed for its poor accessibility, and while this style works a little bit differently it also has some problems there. But let me say that again. The UI decorations (like neumorphism and glassmorphism) work best when it's all they are - decorations. That means that if they're backgrounds, the objects on those backgrounds need to be well structured and defined to exist even without that decoration. If the hierarchy is clear then we can keep that decoration for a little extra excitement from our users.

glassmorphism UI example

Exploration

At HYPE4 we love exploring new trends and ideas. While we would not recommend making a product entirely in that style we believe it has its place in UI design and definitely needs to be explored in more detail. We plan to do it over the next couple of weeks with both video and blog explorations of what else can be supplemented with a bit of frosted glass. Pushing and bending new trends as they emerge is the best way to both stay relevant in the industry and delight the users with something new and exciting. So let's play with glassmorphism and see where it takes us!

And this has been our goal from the start!

If you'd like us to audit or design your product, send us an email.

Also read

Design + UX

LinkedIn is in need of a redesign - so we made one

Linkedin has for years been a "facebook for people in business suits" and even though it's full of almost meme-like materials nowadays, it's still more "professional" oriented than other social networks. However it looks a little bit "outdated" visually so we decided to take a look on how we can improve it.

Design + UX

the 3 pixel paradigm shift

Why all those little detail matters - i.e. let's not make sh** products, please.