Glassmorphism or not?
My exploration on the “new” glassmorphism trend in user interfaces.
New term, old concept
The term glassmophism is introduced by Michal Malewicz, who wrote an article on medium that predicts the virtual glass effect would be the UI trend for this year. This transparent, multi-layered, blurry, and subtle effect is soon embraced by the designers, and the design shots tagged with glassmophism are getting populated on Dribbble. One of the classic examples would be the glassy credit card design.
This concept is actually not new. We can easily recall the similarities from the blur effect of iOS 7, and the macOS Big Blur as well as the latest iOS 14 follow the characteristics of the glassmorphism to a large extent. The classic interface is re-established.
My exploration on the glassmophism
The trigger of my exploration is a web project, in which we are supposed to build a bibliographic search engine and display the result in a graph representation. In short, a Google Scholar site with a new way of visualisation.
The database has three node types: person, article and journal. My initial idea is colour-code the nodes such that users would be able to differentiate node types easily with the colour consistency. Therefore, the homepage is designed like this. Clear, but ordinary.
Since the search engine is supposed to deliver a new type of visualisation with a different user experience, the glassmorphism concept came into my mind. After trial and error on colour, gradient, transparency and shadow, the final look of the glassmorphism search engine is completed. Pretty glassy.
When I was about to apply the design patterns to inner pages, I realised the visibility of elements would drop dramatically on the pages with more complex components, especially on dashboards. Different levels of whites in detailed elements could blind users over the information displayed. So I tried to combine the colour codes with the glasses, whereas the result is not ideal because the glass transparency has to be lowered in order to balance the solid colour of the icons. The effectiveness of the glassmorphism here is minimal, and the drawback is the low visibility of the clicking areas.
In the end, I decided to remove the transparency of clicking areas, so they became solid white. Visibility is boosted with the enhancement of shadows, colour codes of nodes also provide consistency across different pages. I’m satisfied with this version in terms of usability, but it’s definitely an unsuccessful application of glassmorphism.
Find the balance
I’m still searching for solutions on how to apply the glassmorphism to functionality-focused applications. Based on my research and discovery, the glassmorphism effect stands out in these areas:
- storytelling websites
- portfolio websites
- landing pages
The above categories usually contain images, coloured blocks and blank spaces, which are essential elements to allow glass layers to be placed over the pages. The colours can be balanced out by the semi blurry glass layers, this also made consistency to be easily achieved across different blocks. Not only the colour balance, aesthetics and usability are well balanced as well by highlighting important messages on the glass layers.
