"Glassmorphism" New UI Design Trend 2021 + Figma & Xd Tutorial | Design Essentials
HTML-код
- Опубликовано: 6 авг 2024
- A new UI design trend is recently blowing up, called Glassmorphism. In today's video I explain three crucial things:
What is Glassmorphism?
What are some good glassmorphic resources to use?
How to create glassmprhism UI in @Figma and Adobe Xd?
0:00 Video intro
0:50 Introduction to glassmorphism
2:29 Glassmorphism resources
3:44 Glassmorphism in Figma
7:26 Glassmorphism in Adobe Xd
For Sponsorship: punitwebdeveloper@gmail.com
Join Facebook Design Group -- / punit. .
Channel Sponsors:
1. LS Graphics - www.ls.graphics/
2. Blush: blush.design/
Follow Me on Twitter:
/ punitweb
Follow me on Medium:
/ punitweb
My Behance Profile:
www.behance.net/punitweb
#glassmorphism #uidesign #designtrends 
Хобби
Reducing opacity of both gradient color makes it more glassy....just an opinion from your fan❤️
I love feedback from the audience! Thank you for pointing that out :)
@@PunitChawla you're welcome always❤️
@@yashnikam5433 🔥🔥👍👍
Awesome video and tutorial! Clear and paced well! Thanks so much for sharing
I always admired this design and I didn't know how to go about it. Now, I can do it as I followed your step by step process. Thanks, this is really cool
Great video Punit! 👍👍👍👍
Thx so much!
Thanks a tonne for such crisp, concise snippets of actionable knowledge!
More power to you sir!
Whoa! We already have Glassmorphism?! I had just started with Neumorphism implementations since I came across it 2-3 months back! 🤣
Haha! Design world moves really quick
Great video, direct and simple to do!
Another awesome content 👏
Thank you so much for an amazing video!
This style has been around for a loooong time before becoming a "trend". I remember using it here and there in the early 2000s. Ultimately use what works in your project and reinforces the brand you're designing for. Trends look good now but aren't necessarily what's best in the long-term.
exactly, it's thing since windows Vista/7
Great video, Punit. Thanks for diving into the practical aspects of Glassmorphism. I had heard something about it before, but your video is the first to help us to re-create and experiment with it. I think it has its place in Design of user-interfaces. Perhaps to be used sparingly (to create moments of contrast during app interactions) rather than making "everything of glass". Will follow this trend with interest....
Thank you 😊 am definitely gonna try this now
Thank you Punit, you always give us awesome tutorial.. I learnt a lot from your channel... Thank's again...
Really cool!
Thank you so much for posting. I am in a program for UX design and these videos help me a lot. Take care.
Thanks for the video sir !!
Thanks, super helpful for my protoype!
This is awesome Chief.... Thanks for sharing 🙌🏼
Glad you liked it!
GREAT ! thanks a lot !!
I have been comment the first time on youtube in your video...
Very thankful to you
Learnt something new today!
Going to try it :)
Thank you sir!
I'm glad you found it helpful :)
super cool !
really useful!!!!
Thanks for the video, It’s inspired to make a project using this
Amazing
This is freaking awesome, I will definitely give it a try, glass neumorphism seesms the futrue !!!
Yes it truly is!
Thanks a lot, man!!!
Like it. Thanks.
thanks man!
This is something I'm definitely using in my future designs!
Do share the designs once done!
Designs always attract me. I really like Figma . I'm really excited for Glassmorphism. It really makes me feel more classy having such amazing effects.
Glad it comes back. I already did this shit in the 2010s and always loved the aesthetic.
great bro loved it
Glad you liked it!
Thanks for sharing :) I'll try to come up with something more interesting than glass and neumorphism next year ;-)
Aurora has not picked up yet but I am pretty sure it will soon. Hit me up if you ever make it to Amsterdam.
It’s just impressive that even nowadays there are so many designers trying to follow silly trends than trying to solve real problems.
kind of agree, it will become old fashion before there's a wikipedia page about it and products will still be shit and annoying to use in the end
Nice style
Your are awesome for making the latest technology 🤠 up to date for the users ❤️ with lots of love
Thanks for all the support!
I like glassmorphism than neumorphism.. I feel that sometimes looking at the interface with 3d depths feels too much with more elements.. In many instance elements in 2d plane feels better for any interface..
Amazing video sir. Explained everything in detail.I agrew with you on the fact that neuomorphism made everything look like a button but in the glassmorphism I feel like there is a readability issue with text on glass backgrounds and we'll have to be veey specific with the color of the fonts we use on them. Any suggestions on that?
Nice video sir.. i already met you at alexa event.. even I'm just behind you on your yt channel profile pic.
Why can't I find the Microsoft video with the glass online?
ruclips.net/video/miM6mBAfA8g/видео.html&feature=emb_logo
Спасибо. Годно.
At 2:36 I see a note where it says "Don't Become a UX Designer! Don't make the mistakes 1000's of jobless designers are making"
What does that mean? I am planning to take up UX as my career...though not very sure yet. I would love to hear your point of view on the same...why should I not become a UX Designer ?
I used in some of my ui 😅 which looks great
If I want to become a UX designer and maybe a Product designer, what path or learning/hands on would you suggest?
Yes glass is the new trend ❤️
Microsoft's promo videos use a lot of glassmorphism, and boy it looks cool! I think it's here to stay. Gives a premium finish to the UI.
Windows OS itself has it ig
Yes it does! Fixes everything wrong with neumorphism
Where can I see that windows glass video?
Lol I hate it but I gotta stay up to date on these things . Love the videos
I just love "Glassmorphism"
Sir , could you please share some more tutorials or articles on this topics , Please make a detailed video on this topic
I like it
I was using this last year and everyone was like why this effect, i replied it is so cool, but no one belived me 🙄🖖
Lol! Everyone follows the trend 👍👍
🙌🏻
What inspired you then?
@@DarkPa1adin I was working on project which needed neomorphism style & I was experimenting for some new style so i was checking all the effects of figma and I found background blur. & It looked damn cool 😬
MS fluent design also uses acrylic material....glassmorphism is amazing
I really like the new update for sure
Hi Mr.Punit. How can we export these elements to png with the same glassmorphism effect ?
Can i used this design in mobile application development if yes then how?
Where can we find the Microsoft's video visible at 1:00 ? It seems so cool !
Search on RUclips for "Microsoft Fluent 365 Teaser"
Sir ap best hoo
Wow
plz make more videos about UI effect.
What is your source of 3d hands in thumbnail?
Where is the article you said you were sharing?
Sir can you tell me please how I can export this glass morphism effect and give to the developer. Because I can't give this to the developer it shows only white button in android studio. This trend is only for designers but not for developers how I export this effect from xd
How can I traduce it from ui to code like css? Thanks
Sir, I am a beginner for techs and just learn website development with MERN stack. I am also a android app developer but which we create in Adobe is a masterpiece. I want to learn UI/UX designing. From where Can i start with figma or Adobe XD?????
I cant find that Microsoft latest windows 10 update with glassmorphism that you mentioned. Anyone got a link to the original windows 10 video?
ruclips.net/video/miM6mBAfA8g/видео.html
@@PunitChawla It's not this 1:00
ok so after some digging, I found the source. vimeo.com/436301932
Also here is the same video on YT : ruclips.net/video/5AGAGIFCtKI/видео.html
When I design "Glassmorphism" UI Trend, then I have always taken a Gradient background?
Glass 🍷
Sir please make videos series on ui design tutorial. From beginning to advance level.
when i add gradient then use background blur in adobe Xd,, my gradient gets overridden and object acts like it has one fill color
Might be you have some fill color in object before adding gradient do check
Figma is really cool next gen design tool
We can design & prototype in Xd, but how to export as a working APK application? (Exe foemat)?
I have a video on that: ruclips.net/video/T-nLOpomHjY/видео.html
Unfortunately Firefox does not support this feature in css, annoying
Ah geez. I hope there is a workaround for it
how many people still uses firefox nowadays
@@oyawoletoluwalagbara9846 lol... I do o, still my fav browser for css dev, even if I didn’t, m sure many people still do, and anything that will break look if my design on a browser I prefer to avoid it totally
@@oyawoletoluwalagbara9846 I use it. I love it
@@oyawoletoluwalagbara9846 not everyone wants to be a Google sheep.
Looks Great!
But how to export assets?
The best way to export glass is as transparent PNG (just remove any background color from artboard)
How can we do this in CSS please, anyone??
everybody using matte glass.. what about really clear and warping one :D could look fun
I am going to use this in my portfolio
Hi, how to export the design to an actual working APK format in Adobe XD?
How can a design work without logic?
Bro wat mic is that?
blue yeti
Okay but can it be efficiently developed
Make sure your glass designs are buildable in CSS or it’s just a pretty UI concept. 😉
Yes! Should be able to do it with css filters for sure
New design languages will keep cropping up as time passes. But whether these systems see wide adoption will depend on how intuitive and popular they are. And by the looks of it, Glassmorphism seems to fit the bill perfectly. If you're looking for more information on this topic, visit - www.yellowslice.in/bed/glassmorphism-in-user-interfaces/
It’s kind of matte glass
Isn't it what windows 10 uses?
Clicking ESC should obviously break the glass into fractures..
please do flutter tutorials
You talk great but look at the lens. We're down here 👋🏻
Great video. Thanks
No glass backdrop for FireFox users ;-;
Going back a decade to windows Vista?
dude u are awesome, come to Los Angeles.
Like all trends, it will disappear soon. But great video, thanks.
I like sharp edges
I want to see this used in apps and websites not on figma comps
It looks like playing with a glass block of LEGO kit
designcode.io website is a great example of Glassmorphism.
Welcome to windows Vista gui top bars.
Ikon not Iken
Glass is way better than neumorphism
This isn't new. It was used heavily in iOS 7.
I saw that affect a long time ago in some ui's is not something new and is was used by KDE and OSX ... Microsoft just copy other OS's as ever...
Isn't this literally aero on steroids?
@@CathrineMacNiel Yes in certain way... Even aero was copy from the ui that used some games and applications...
@@arieloq Well you know what they say, nothing new under the sun.