Glassmorphism - UI Design Trend 2020 | Summary and Q&A

27.8K views
November 24, 2020
by
Malewicz
YouTube video player
Glassmorphism - UI Design Trend 2020

TL;DR

Glassmorphism is a design trend that imitates the look of frosted glass, providing hierarchy and structure, and this video explains how to achieve the effect in Sketch and Figma.

Install to Summarize YouTube Videos and Get Transcripts

Key Insights

  • 😎 Glassmorphism is a design trend that imitates frosted glass, offering transparency, hierarchy, and a visually appealing style.
  • 🪜 Achieving the glassmorphism effect involves using background blur, adjusting opacity values, and adding subtle shadow and border effects.
  • 🎨 Glassmorphism can be implemented in various design tools, such as Sketch and Figma.
  • 🎨 It is important to consider accessibility and not overuse glassmorphism in a design.
  • 📳 Glassmorphism can be used in both light mode and dark mode designs.
  • 👻 Experimenting with new design trends allows designers to have fun and create unique and visually interesting projects.
  • 🥺 Sharing and learning from the design community can lead to further exploration and improvement of glassmorphism techniques.

Transcript

i did it again oh here we go again so remember last year when i kind of accidentally came up with this whole new morpheme thing yeah i'm sorry to say that this story is gonna repeat itself this year when i see a design trend and uh it doesn't have a name i usually try to think of ways to actually define it a little bit better and possibly give it a... Read More

Questions & Answers

Q: What is glassmorphism and why is it a popular design trend?

Glassmorphism is a design trend that imitates the look of frosted glass, providing transparency and hierarchy within a design. It is popular because it offers a visual and functional appeal, enhancing the user experience.

Q: How do you achieve the glassmorphism effect in Sketch and Figma?

To achieve the glassmorphism effect in Sketch and Figma, you start with a background image, apply maximum blur to create a tonal gradient, and then add a rectangle with a white background and background blur effect. Adjusting opacity values and adding subtle shadow and border effects helps create the glassmorphism appearance.

Q: Can glassmorphism be used in dark mode designs?

Yes, glassmorphism can be used in dark mode designs. For dark mode glassmorphism, the color is changed to black or dark gray, but the border should still be white to maintain the lighter edge effect. The same principles and techniques apply to achieve the glassmorphism effect in dark mode.

Q: Are there any accessibility concerns with glassmorphism?

There are some accessibility concerns with glassmorphism, especially when overused. It is important to consider contrast, readability, and user experience when implementing glassmorphism. It is recommended to use glassmorphism sparingly and to ensure that other elements in the design complement the glassmorphism effect.

Summary & Key Takeaways

  • Glassmorphism is a popular design trend that mimics the appearance of frosted glass, allowing for better understanding of hierarchy and structure within a design.

  • Achieving the glassmorphism effect involves using background blur, transparency, and subtle shadow and border effects.

  • The process of creating glassmorphism in Sketch and Figma is similar, requiring the use of background blur and adjusting opacity values.

Share This Summary 📚

Summarize YouTube Videos and Get Video Transcripts with 1-Click

Download browser extensions on:

Explore More Summaries from Malewicz 📚

Summarize YouTube Videos and Get Video Transcripts with 1-Click

Download browser extensions on: