Peach P2P Chat: A Study on Glassmorphism

Preface

I originally programmed Peach in college as an encrypted peer-to-peer messaging CLI. the benefit of Peach over other encrypted messaging apps like Telegram and WhatsApp is that there is no centralized database which stores messages. By design, messages are deleted after they are viewed and a user leaves a chatroom. If a user decides to save a message, they will be saved locally to their device, and nowhere else.

In order to sharpen my design skills and learn the Svelte Framework, I tried wireframing a web GUI that would allow non-technical users to use the app. In an attempt to visually express the transparency that comes with FOSS, I learned basic implementations of glassmorphism in Figma, and tried to apply them to a cohesive aesthetic for the UI.

What I Learned

I learned that glassmorphism is a simplified offest of skeuomorphism, a design aesthetic wherein assets try to mirror reality as much as possible in their design. I also learned that glassmorphism works very well with it's sibling aesthetic neumorphism, which tries to emulate the depth of objects rather than their form. I ended up using both neumorphism and glassmorphism in the design above, as well as in subsequent pages of the UI. Overall, I had a fun time doing this study. I learned how important design was to the overall tone of a project. However, I also learned why these aesthetics may not be as widely used as something like Material Design.

Pros

• Having literal transparency does successfully reflect the transparency of FOSS.

• UI had a very modern, unique look

• At the time, Web3 fronted development was heavily into glassmorphic design, meaning that the UI could be recognized among a certain demographic of users

Cons

• The blur is extremely graphics intensive. Although there is a CLI version, this UI limitation would lead to a divergent demographic of users. One type of user would be someone comfortable with using the terminal in their daily driver, the other would be individuals with beefy computers.

• Developing nested components which can only inherit certain styles (color, display) and avoid others (filter, opacity, mix-blend-mode) proved extremely difficult to scale on a 2D webpage. While it was possible, every time a component with depth was added on top of another component with depth, hard coded adjustments would have to be made for each layer of nesting

• Since shadows were used to emulate depth, components that were too close to each other would break the illusion. This makes good design difficult on compact screens.

After this experience, I can conclude that I will not be using glassmorphism on a large scale for any non-artistic endeavors. While the aesthetic lends it self to expression, uniqueness, and futurism, it complicates design and may even render an app unusable on older machines. However, I do this that if it used sparingly, and perhaps run on a 3D engine like Three.js, I think that glassmorphism could actually be used to created small but effective aesthetic components of a UI.