I love glassmorphism. It's a truly cool and beautiful design. Microsoft, Apple, and Toss seem to be using this glassmorphism well. In particular, the recent work from Microsoft Design team seems to showcase the essence of glassmorphism. In Windows 11, which was unveiled a few weeks ago, you can see glassmorphism cleanly applied to the widget panel, start menu, and other elements.
Microsoft's Fluent Design System actively utilizes glassmorphism. Windows in Korean means "창문" (window). Glassmorphism is a design that really suits Windows. They've beautifully and perfectly implemented transparency, subtle shadows, a very slight sense of depth, and colors.
Diamonds, transparent seas. Is being drawn to sparkling and transparent things human nature? Around the time of the transition from Windows XP to Vista, I was only in 2nd-3rd grade of elementary school, but I remember being fascinated by the transparent Aero installed on my mom's newly purchased laptop with Vista. Compared to XP's green and blue menu bars and taskbar, the transparent and glass-like beautiful windows were a major design change regardless of the OS's overall success or failure.
According to an article from UX Collective, the characteristics of Glassmorphism are as follows:
Transparency (frosted-glass effect using a Background Blur)
- Multi-layered approach with objects floating in space
- Vivid colors to highlight the blurred transparency
- A subtle, light border on the translucent objects.
Simply adjusting transparency isn't enough. As mentioned above, to give that semi-transparent glass texture, you need to apply blur effects to properly achieve that feeling, and other elements like high saturation backgrounds and borders that can create 'glass'-like effects need to be added in detail.
Actually, the reason I decided to write this post was because I discovered this site: https://ui.glass/generator/
You can easily see how glassmorphism feels different depending on the intensity of Blur, Opacity, and Saturation, and it's convenient because you can export to CSS code. There was also a neumorphism site that shows visual changes according to value changes in CSS at a glance... Thanks to people who create things like this, designing becomes more convenient.
While I prefer glassmorphism like this, Google's Material Design isn't really my taste, probably because of its use of strong primary colors and the stuffy, matte feeling it gives. If glassmorphism is modeled after glass materials, material design can be seen as modeled after colored paper. It expresses hierarchy by layering colored paper (cards), but maybe the color combinations were the problem... Even though it's clearly a minimal design system, it felt tacky. Material You, the evolved version of Material design unveiled at Google IO this year, was also disappointing by my standards. How it looked applied to Android 12 was even less appealing.
Neumorphism is the same. I once saw this neumorphism in an Android app and readily applied it. But the results weren't very good. I realized that even slightly off CSS values result in a very tacky design. The more serious problem lies elsewhere. There's criticism of neumorphism saying it has serious accessibility issues because UI elements aren't clearly distinguished from each other. That's absolutely true. When you look at applications that actually implemented it, buttons are hard to distinguish and I think it's just UI that 'looks plausible.'
I don't know how long glassmorphism, which emerged as a hot design trend of 2021, will remain trendy. From skeuomorphism through flat design and material design to new neumorphism, and then glassmorphism emerging as another style. Trends will continue to change and another design might emerge next year.
But I think glassmorphism is a UI design that will be used for quite a long time. At minimum, I expect the element of 'transparency' in glassmorphism will inevitably continue to be used in various transformed forms. When you imagine interfaces in AR/VR that will emerge in the near future, transparency and holograms will be actively used. We consider new forms that transcend the limitations of current displays as futuristic interfaces. Many SF movies like Iron Man's JARVIS or Minority Report emphasize holograms and glass-type displays. Transparent interfaces help add naturalness and stability between reality and graphics. Current glassmorphism gives a 'glass-like effect' on the flat surfaces of web/apps, emphasizing aesthetics more than functional effects. However, when transparent displays (or glasses-type displays) are commonly used and various modality products using them are used, couldn't we enhance UX consistency by reducing the gap between 'interfaces actually applied to glass-type displays' and 'interfaces that look like glass'? Or maybe glass'applicable' UI for real glass-type displays (effectively expressing depth on transparent displays, improving color reproduction, etc.) rather than glass'morphic' UI might emerge. What would interfaces be like then?
I imagine what design trends might be like when designs that feel beautiful and trendy now might one day feel outdated and tacky. I started writing this post simply wanting to say that glassmorphism is really beautiful, but as I wrote, I found myself contemplating why I feel beauty in such designs, the value of transparency, and thoughts about future design trends, and the post became longer as I included my various thoughts.