Design + UX
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.
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.
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. 🤓
It has since been used in some real products, including ones by big, worldwide corporations.
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.
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.
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.
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.
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.
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.
We received Clutch Leader Award for Top Developers in Poland!
We’re a digital design and development agency that builds truly amazing products. Although HYPE4 is based in Warszawa, Poland, we don’t let borders hold us back; we’ve developed web and mobile solutions for clients in more than 20 countries, including the US, Canada, Israel, and Spain.
Design + UX
Redesigning the Polish Train Travel Mobile experience
I travel by train a lot. Usually the same 3 hour route between the cities HYPE4 is most active in. The trains are fast and high quality, but sadly the mobile app experience leaves a lot to be desired. First of all it's made in a very oldschool way, without a proper UX process.