<--Back To R&D Website

Trying To Glassify A Website

Research And Development Department

What Is The Proposed UI Concept?:
ComDash uses randomly generated wallpapers from Unsplash as it's background and displays critical infomation on top of it, this means it is important that the font colour of the info displayed does not mix with the colour of the background image. We have implemented boxes and borders around different infomation and gave them a background colour (preferably black) to help categorize and group similar infomation together.

The proposed UI has a glass-like effect which is based of a trend that started to grow in popularity in the end of 2020. Its main characteristic is the background separation it achieves by using transparencies and blurs. This way the effect resembles a frosted glass. It creates “through the glass” look and feel on the elements. The name of this UI design trend is known as "Glassmorphism".

Why Use This UI Concept?:
Glassmorphism is a design trend that gained popularity in recent years, characterized by its use of frosted glass-like elements in user interfaces. This style often aims to create a sense of depth and modernity by mimicking the appearance of glass or transparent materials. Here’s a deeper look at the key features and advantages of glassmorphism:

Key Features:
Frosted Glass Effect: The most recognizable feature of glassmorphism is the frosted glass effect, which involves blurring the background behind an element. This creates a semi-transparent, blurred glass-like appearance.
-> Transparency: Glassmorphism often incorporates semi-transparent or translucent elements, allowing users to see through layers of the UI while still being able to distinguish the content.
-> Blurred Backgrounds: Elements typically have a blurred background, which enhances the depth and separation between different layers of the interface.
-> Soft Borders and Shadows: Soft, subtle borders and shadows are commonly used to give a sense of depth and to make the glass-like elements stand out against the background.
-> Vibrant Colors: While the glass effect itself is often neutral or muted, glassmorphism can incorporate vibrant colors and gradients to make elements more visually appealing.

Advantages:
-> Aesthetic Appeal: Glassmorphism creates a modern and stylish look that can enhance the visual appeal of an application or website. It provides a clean and sophisticated appearance.
-> Depth and Layering: By using blurred backgrounds and transparency, glassmorphism can create a sense of depth and layering in the user interface, making it feel more dynamic and interactive.
-> Focus on Content: The frosted glass effect can help emphasize important content or UI elements by making them stand out against a blurred background.
-> Visual Hierarchy: The use of subtle shadows and layering helps in establishing a clear visual hierarchy, guiding users' attention to key elements in the interface.
-> Customization: Glassmorphism can be easily customized with different levels of transparency, blur effects, and color schemes, allowing designers to adapt it to various themes and styles.
-> Modern Look: This design trend aligns with current design aesthetics, making it suitable for contemporary applications and websites that want to stay on-trend.

Considerations:
-> Performance: Implementing glassmorphism can sometimes impact performance, especially on lower-end devices, due to the use of blur effects and transparency. Optimizing these effects is crucial to maintain good performance.
-> Accessibility: Ensure that the design remains accessible, with sufficient contrast between text and background. Glassmorphism’s transparency and blurring can sometimes make text harder to read.
-> Browser Support: While most modern browsers support the CSS properties required for glassmorphism (like backdrop-filter), it’s essential to check compatibility and provide fallbacks for older browsers.
-> Overuse: Using glassmorphism excessively can lead to a cluttered or confusing interface. It’s best used selectively to enhance specific elements rather than overwhelming the entire design.
Overall, glassmorphism is a visually striking trend that, when used thoughtfully, can contribute to an elegant and modern design.

Applying The New UI Concept On ComDash:
R&D came across an article on Glassmorphism while researching on different UI concepts and then decided to adopt this UI concept since it uses a glass-like effect to not only hint at what's in the background but also helps to make sure that the displayed text's colour doesn't mix with the background colour (Example, white font colour not mixing with a white background).

Below is the image file of ComDash with Glassmorphism applied.

Upon adding Glassmorphism to ComDash, Text's colour can now be displayed properly without fears of overlapping with the background picture's colour. On top of that, now UX and readability has also been improved thanks to the blur effect which gives users a hint at what's going on in the background.

Below is the current code R&D has implemented into our css code to achieve Glassmorphism:



'background: rgba(255, 255, 255, 0.1);' : Sets a semi-transparent background color. You can adjust the opacity to make the glass effect more or less pronounced.
'backdrop-filter: blur(10px);' : Applies a blur effect to the content behind the element, creating the frosted glass effect. Note that backdrop-filter may not be supported in all browsers.
'box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);' : Adds a subtle shadow around the element to give it a lifted appearance.
'border: 1px solid rgba(255, 255, 255, 0.2);' : Adds a light border with a slight opacity to enhance the glass effect.

Additional Considerations:
-> Browser Support: As of now, backdrop-filter is supported in modern browsers, but older browsers might not support it. Always check compatibility and provide fallback options if necessary.
-> Performance: Blurring effects can impact performance, especially on lower-end devices. Test your design on various devices to ensure it performs well.
-> Accessibility: Make sure that text and interactive elements remain legible and accessible. Adjust contrast and colors as needed to ensure readability against the blurred background.