Glassmorphism Web Design
1438 次观看 · 2021-10-29
UI 设计
In this Figma UI Design Tutorial, I'll show you how to design a glassmorphism website snippet. Unlike most examples found on YouTube and Dribbble, this tutorial focuses on showcasing the versatility of glassmorphism beyond just credit card designs, making it easier to stand out.
Chapters:
00:00 Intro
00:46 Essential items
01:22 Let’s go
01:34 12 column layout
01:57 Website background
02:23 Making “logo”
02:36 Adding navigation
03:05 Icons
03:20 Hero header
03:28 Adjustments to the layout
04:06 Filling header with photo
04:20 Header title
04:36 Glass header title background
06:14 Glass play button
06:41 Icon adjustments
07:01 How to copy layer style
07:15 Glass style adjustments
08:20 More layout adjustments
09:16 Glass cards
11:00 Glass pills
11:40 Indicator
12:08 More details
13:14 Outro and Summary
Watch more Figma tutorials here: https://youtube.com/playlist?list=PLtZjSN7j6ANwYc2jAkdAz4HWndJNGLjVK
#glassmorphism #figma #tutorial #designtrends #uidesign #productdesign #ui #ux #uxdesign
Chapters:
00:00 Intro
00:46 Essential items
01:22 Let’s go
01:34 12 column layout
01:57 Website background
02:23 Making “logo”
02:36 Adding navigation
03:05 Icons
03:20 Hero header
03:28 Adjustments to the layout
04:06 Filling header with photo
04:20 Header title
04:36 Glass header title background
06:14 Glass play button
06:41 Icon adjustments
07:01 How to copy layer style
07:15 Glass style adjustments
08:20 More layout adjustments
09:16 Glass cards
11:00 Glass pills
11:40 Indicator
12:08 More details
13:14 Outro and Summary
Watch more Figma tutorials here: https://youtube.com/playlist?list=PLtZjSN7j6ANwYc2jAkdAz4HWndJNGLjVK
#glassmorphism #figma #tutorial #designtrends #uidesign #productdesign #ui #ux #uxdesign