I made a couple of designs like this year ago. I Quickly moved on because of a simple but big problem. The problem is that every device has a different screen. If you make UI with low contrast than some will not see it at all. Another thing I learned when I worked in a printing house is that not every printer prints CMYK the same. It has a spectrum and won't register low values and that also translated to monitors. So if you use RGB low values there will be monitors that don't even register that color because it won't be on their spectrum and you will end up with Green shadows. I always test my projects on a laptop, other monitors and smartphones just to make it optimal for different viewing conditions. And the end result in web design, the majority of devices are not calibrated very well and clients won't adjust their brightness they will just leave the site. I always go with the rule. Is there a risk in my design, and what's the payoff. Here there is a risk but there is no payoff just looks neat.
You can find how to imply it. What if target audience are Apple users? If people with other devices couldnt see content properly Apple users would feel they are special:)
The problem isn't with the style, but with the current level of average devices. Theoretically, if the average screen display calibration has greatly improved in the future, this design isn't an issue. Advancing the 'average' is what flagship devices of Apple, Microsoft, & Samsung have been doing. Take a look at screen size, you most probably don't need to enable support for 360p phones or 144p if taken to the extreme. Rather than put a big 'No' in all use cases, it's definitely good to explore some edge cases like Apple-only apps, application on specific product with display like menu stands or automation hubs, etc. Even specifically for prints, the current technology can print gradients quite well though not perfect. If the creative direction demands this kind of style, you can work with the printer to set the lowest CMYK values the specific printer can distinguish. I would say this style isn't suitable for the masses but not necessarily banal.
@@delulu6969 Again I don't agree that all screens will be the same because of the prices and the purpose of the screen. Do you watch, movies, play games or watch websites there can be different profiles better to represent the colors. Your screen is Mat or Gloss. And all profiles have different spectrums. Screen manufacturers make new screen technologies all the time, that have differences between them. All those things make it impossible for different companies to make one calibrated screen for all users. Because for the customer color is subjective. Most companies add saturation to showoff the screen potential. Currently, if you want to have a truly calibrated device you must spend above 1000$ for the EIZO monitor and switch between 10+ profiles to calibrate the screen for a particular job. Nobody will mount that screen on a laptop just because it would cost more to produce than a laptop. Maybe it isn't banal but nobody will be blown away by it like seeing 2advanced website in 2003.
It's kind of fun to see so many people condemn Neumorphism because "it sucks". Just to remind, when flat design came in, many were calling it a design crime. Still it was around for quite a while.
Thank you for this tutorial. I must say i use Sketch and Figma a lot, and i find it much easier to create an "Inner Shadow" where you can just drop it on your rectangle.. too bad Adobe XD doesn't allow dropping 2 shadows at the same time and dropping inner shadows. But overall this was helpful even for me a sketch user :D
Amazing, when it is not zoomed I see a different perspective on the down shape, instead of depth, I see relief I mean it is also looks like 'up', do you?
Hello ! Great video and explainations as always. Just a simple question : Would'nt be easier to create assets on Photoshop with simple layer's effects and import them in XD than creating such complicated shapes with masks ? (sorry for my english I'm French)
Very informative tutorial as always. I have problem moving the shapes it seems like they are moving in multiples of 5 pixels not precise. Due to this i cannot check the white space because either they cover the component or not. I have problem describing my problem i hope you understand what i mean.
Hey Dansky, Thank you for the tutorial. Do you record the video and audio for your tutorial at the same or separately? I really like the way your mouse tends to move. Thanks
Hey Dansky, nice Video really loved it! I am trying this with Figma, but at the point where i should create a mask it wont work. I get a weird mask white blur and the red Stroke. Do you know what the Problem can be or how I can fix this? Thank you very much!
Hi! I created a "down" button per your tutorial, but when I try to scale it to different proportions like your doing in the video the shadows don't follow. Is there something I'm missing?
Looks great in design but very costly in development. All shadows cost processing power, as a developer I would certainly discourage the client away from it. But as I said, looks great, but really needs an iPhone 14+ imo...
What is the difference between Soft UI and Neumorphism? I am very much confused about it because when I see these types of shots in dribbble I find they write Neumorphism, not Soft UI design. Please Explain it. Thanks in advance.
I’m not a designer so this looks like futuristic magic to me 😂 I was just wondering: what is this exactly? what’s the utility of this? And how do you use it?
It's a newish design style based on an oldish design style. People will argue about how useful it is due to accessibility issues and so forth, but it could be used for interface elements in mobile apps or website design. Depends on how you decide to apply it to a creative purpose. Could make a cool book cover or event poster, etc.
@@borcsaster yes, with IOT devices that have screens, if you put too much fancy css in a webapp and is a webapp for one of those devices, it can get laggy, also with kinda old cheap phones, sometimes also happens, it is not that bad to throw a shadow here and there but if you have lot of components and each component has too many shadows it can get laggy.
Can you please help with recording prototypes in XD? Whenever I record ( using Windows+G), the top bar is visible (preview + project name). I want to use the recorded video in 3d mockup. Please help
I don't like this style a lot. Flat design is the best. It does not remain for iOS only but designers may use for android mobiles and on websites. Different screens will show white and dark shadows with different intensity. On some screen UI will appears with too much effect and on some screens too light. and this theme looks a bit blurry to me if we compare it with flat UI. Creating this theme in adobe XD is painful. I hope adobe Xd will have a quick tool to do this. Like photoshop has options to do something like this quickly.
I'm following you since you were at the beginning (and so was i) and so I started to work with XD. Now I'm trying Figma and totally changed my workflow. You should really give it a try. With Figma, it takes you 30 seconds to the same things: multiple shadows on the same object, inner shadows, or blur. Adobe XD never again.
I would mention that there can be serious accessibility and usability issues with this 'trend'. If you want to go this path, at least be aware of what can come with it.
Agree with you Peter. As he has a following he should be aware of his influence. I find it sad to just jump on a new trend without going into details about usability.
Absolutely. However, it'd be interesting to see how designers work to potentially evolve this style (or similar) to better tick the accessibility boxes 👍
Dansky I’m not saying you shouldn’t- I’m saying you could have addressed the potential issues with this “style” (and I believe it would give you credibility) Go ahead and use this and have fun - I just see a lot of people trying to lean UI design by copying - no harm there, but I believe you can educate in your position. That’s my 2 cents:)
Love you man. You have put on some weight..😋 Ok, so..... I have been facing an issue for some time now. Could you please make a tutorial on the best method for exporting XD prototypes to hd gifs for creating video mockups?
The problem i have with this design technique is it makes everything look like plastic. I'd rather have a matte-finish to my UI - it's softer and more inviting than something blaring and shiny.
This is like an emo state for designers, They will regret doing this in a few years. I hope this trend just stays in dribbble, and never in a working website/app in 2020. Great beard btw, Dansky!
Can you eloborate on that? What makes it emo per se? I'm digging the fact that we can stray away into the extremes and build some really sterile, but aesthetically pleasing designs with this!
I think in a few years you will regret saying this. Neumorphism is not going away anywhere. Mobile apps start to use it and Apple just showcased their new Big Sur redesign.
@Splendid Agree but you don't need to use it for everything you know :) It's just a design style, you don't need to like or dislike it, just accept the fact that it exists and it's perfect for some situations, simple as that. Cheers!
Well in the end of the day their companies will lose money and clients and that will be the end of that trend. I see it in a competition that jumped on Brutalism. Clients got furious with usability and overwhelmed on shopping sites. Next year you won't see it back.
I disagree. It gives more depth to the UX, and, coupled with subtle sound effects for user feedback, as well as snappy and non obtrusive animations, I'll probably implement this design element in a project I'm currently working on.
i have seen so many videos of neumorphism but the way he teaches is the best and easy .
Thank you :)
@5:05 you can also use command left click to toggle between objects stacking on one another. It was in the previous update :)
Perfect! I was looking for the pressed (down) state so badly! This video worths a million
I made a couple of designs like this year ago. I Quickly moved on because of a simple but big problem. The problem is that every device has a different screen. If you make UI with low contrast than some will not see it at all. Another thing I learned when I worked in a printing house is that not every printer prints CMYK the same. It has a spectrum and won't register low values and that also translated to monitors. So if you use RGB low values there will be monitors that don't even register that color because it won't be on their spectrum and you will end up with Green shadows.
I always test my projects on a laptop, other monitors and smartphones just to make it optimal for different viewing conditions. And the end result in web design, the majority of devices are not calibrated very well and clients won't adjust their brightness they will just leave the site.
I always go with the rule. Is there a risk in my design, and what's the payoff. Here there is a risk but there is no payoff just looks neat.
You can find how to imply it. What if target audience are Apple users? If people with other devices couldnt see content properly Apple users would feel they are special:)
@@artemfe6884 Still Not all Apple devices use the same screen. "Apple users would feel they are special:)" - They would not give a f.
The problem isn't with the style, but with the current level of average devices. Theoretically, if the average screen display calibration has greatly improved in the future, this design isn't an issue.
Advancing the 'average' is what flagship devices of Apple, Microsoft, & Samsung have been doing. Take a look at screen size, you most probably don't need to enable support for 360p phones or 144p if taken to the extreme.
Rather than put a big 'No' in all use cases, it's definitely good to explore some edge cases like Apple-only apps, application on specific product with display like menu stands or automation hubs, etc.
Even specifically for prints, the current technology can print gradients quite well though not perfect. If the creative direction demands this kind of style, you can work with the printer to set the lowest CMYK values the specific printer can distinguish.
I would say this style isn't suitable for the masses but not necessarily banal.
@@chrissre7935 Agree. Users just don't look at each other's devices testing how an app is running... It's our job.
@@delulu6969 Again I don't agree that all screens will be the same because of the prices and the purpose of the screen. Do you watch, movies, play games or watch websites there can be different profiles better to represent the colors. Your screen is Mat or Gloss. And all profiles have different spectrums. Screen manufacturers make new screen technologies all the time, that have differences between them. All those things make it impossible for different companies to make one calibrated screen for all users. Because for the customer color is subjective. Most companies add saturation to showoff the screen potential.
Currently, if you want to have a truly calibrated device you must spend above 1000$ for the EIZO monitor and switch between 10+ profiles to calibrate the screen for a particular job. Nobody will mount that screen on a laptop just because it would cost more to produce than a laptop.
Maybe it isn't banal but nobody will be blown away by it like seeing 2advanced website in 2003.
Your tutorials are my top 3 design tutorials to watch here! So relevant topics, on point script and shot at a very good pace! Thank you!!
It's kind of fun to see so many people condemn Neumorphism because "it sucks". Just to remind, when flat design came in, many were calling it a design crime. Still it was around for quite a while.
First time to this channel and loving this mans energy!
Awesome Robin! 😀
👌👍Akshrika channel also provides very good powerpoint presentation.
YOU ARE MY HERO!! I only knew how to do this on Figma and to be honest... I hate figma. But now I can do with Adobe. Thank you so so so much!!!!
Thank you for this tutorial. I must say i use Sketch and Figma a lot, and i find it much easier to create an "Inner Shadow" where you can just drop it on your rectangle.. too bad Adobe XD doesn't allow dropping 2 shadows at the same time and dropping inner shadows. But overall this was helpful even for me a sketch user :D
hi , do you recommend them more than XD??????????
@@Noor_Tala_Naya Yes. Figma is free and is almost the exact same as XD
Wow awesome tutorial. I was wondering how they make such Soft UI designs and this tutorial explained it all from the basics. Thanks heaps.
there's no one like you dansky ! u the best
every time i look for some adobe xd related feature its you, great work, well deserved follow keep on the good vide :)
Just love it! Thank you for sharing it step-by step! How are these elements handled to devs? Are they premade images or they can be done with CSS?
CSS
First time on this channel.... The exit got me shooked lol
Amazing, when it is not zoomed I see a different perspective on the down shape, instead of depth, I see relief I mean it is also looks like 'up', do you?
Really enjoyed. Thanks
You’re welcome! Thank you! 🙏
Thank you! Your videos are very helpful 😄
thank you Dansky! great tutorial right there.
Hello, is it a black MacBook Pro or did you put a cover? I can't find one even on apple store....
aweeeeeesome 🤩
Hello ! Great video and explainations as always. Just a simple question : Would'nt be easier to create assets on Photoshop with simple layer's effects and import them in XD than creating such complicated shapes with masks ? (sorry for my english I'm French)
Thank you, this was so simple and straight forward.
Very informative tutorial as always.
I have problem moving the shapes it seems like they are moving in multiples of 5 pixels not precise. Due to this i cannot check the white space because either they cover the component or not.
I have problem describing my problem i hope you understand what i mean.
Love This tutorial, as always!!
Hey Dansky,
Thank you for the tutorial. Do you record the video and audio for your tutorial at the same or separately?
I really like the way your mouse tends to move.
Thanks
Hey Dansky,
nice Video really loved it!
I am trying this with Figma, but at the point where i should create a mask it wont work.
I get a weird mask white blur and the red Stroke.
Do you know what the Problem can be or how I can fix this?
Thank you very much!
Hi! I created a "down" button per your tutorial, but when I try to scale it to different proportions like your doing in the video the shadows don't follow. Is there something I'm missing?
Hey Adam, you could try checking/unchecking 'Responsive Resize' from the property inspector on the right :)
@@ForeverDansky Thank you! I just figured it out. I had locked the proportion when I scaled it to 120px. It worked after I unlocked it.
Adam Leonards thanks for this I had the same issue
You do great content, Dansky, I even bought t-shirt. I hope you're making billions of dollars.
Hey thanks so much Michael, means a lot and I appreciate the support :)
Looks great in design but very costly in development. All shadows cost processing power, as a developer I would certainly discourage the client away from it. But as I said, looks great, but really needs an iPhone 14+ imo...
150e phone can easily pull off any modern layout and animation ... so dont know on what phones are you reffering to
Jesus, what phone are you using? HTC dream perhaps?
What is the difference between Soft UI and Neumorphism? I am very much confused about it because when I see these types of shots in dribbble I find they write Neumorphism, not Soft UI design. Please Explain it. Thanks in advance.
Thank you Dansky! love your beard by the way!!
Aha thanks, and you're welcome Sam :)
What is the size of the main artboard/
I want to ask you Mr. Dansky, what is the different neumorphism with skeuomorphism?
It's a play on words. Replacing "skeu" with "new".
love this vid
How could you get such a big platform size?? I only get a customized set of mobile cases.
Love this
Very good way of explaining really learnt from you
Thanks Pooja!
nice video, thanks for sharing!👍
Time to test this with VR interfaces
I’m not a designer so this looks like futuristic magic to me 😂 I was just wondering: what is this exactly? what’s the utility of this? And how do you use it?
It's a newish design style based on an oldish design style. People will argue about how useful it is due to accessibility issues and so forth, but it could be used for interface elements in mobile apps or website design. Depends on how you decide to apply it to a creative purpose. Could make a cool book cover or event poster, etc.
Thank you for the video!!!!!!👍🏼👍🏼👍🏼👍🏼
it's very fun, and easy to understand :D thanks Dansky
dev's nightmare :D
Actually this effect is silly easy with CSS. It's just two drop-shadows.
@@ORyanMcEntire is silly easy and adds a lot of processing tax to the css, two shadows per element is too much for low end devices
@@diablo.the.cheater Have you got any experience with that?
@@borcsaster yes, with IOT devices that have screens, if you put too much fancy css in a webapp and is a webapp for one of those devices, it can get laggy, also with kinda old cheap phones, sometimes also happens, it is not that bad to throw a shadow here and there but if you have lot of components and each component has too many shadows it can get laggy.
@@diablo.the.cheater Thanks! And with native apps? Is it the same? Maybe in this case it can proceed quicker!
Thank You!
Website from scratch design to html css (Javascript) one pager and multi pager pleace
Awesome!
Fantastic tutorial, thank you! Subscribed.
how can i make dark one
There was an error downloading your file.?
why this message appear when i click in direct download?
Can you please help with recording prototypes in XD? Whenever I record ( using Windows+G), the top bar is visible (preview + project name). I want to use the recorded video in 3d mockup. Please help
Use shareX
After so many updates, Adobe XD still doesn’t have an inner shadow built in?
Yes(
I don't like this style a lot. Flat design is the best. It does not remain for iOS only but designers may use for android mobiles and on websites. Different screens will show white and dark shadows with different intensity. On some screen UI will appears with too much effect and on some screens too light. and this theme looks a bit blurry to me if we compare it with flat UI.
Creating this theme in adobe XD is painful. I hope adobe Xd will have a quick tool to do this. Like photoshop has options to do something like this quickly.
Wow great
Thanks Sabir :)
Great, It helped me learn allot.
U r superrrr🤩👍
cool, dude!
thank you, beautiful
Very gooooood
How come you ALWAYS upload your tutorials right when I need them?
awesome video! I really hate this design but I would like to try it once :0
❤️
i use windows and i found no file option
Top-left-corner menu icon, slightly different layout for Windows compared to MacOS 😅
What is xd is itsimilar to photoshop or 🤔 isnt photoshop and illustrator enough my goodness so many apps
XD is special for UI UX Design. For example for programs, apps or websites ^^
@@rlBrave ooh thank you😁
I'm following you since you were at the beginning (and so was i) and so I started to work with XD. Now I'm trying Figma and totally changed my workflow. You should really give it a try. With Figma, it takes you 30 seconds to the same things: multiple shadows on the same object, inner shadows, or blur. Adobe XD never again.
The beard is fabulastic
😊👊
Your new subscriber here
Thank you so much. It's a very informative tutorials.
Its a cool effect but it makes the design look so much more busier
thanks
ok now I see why the Figma is better :D
Thanks.
Have you worked in vikings😂😂😅 you look like the character Bjorn Lothbrok😉
Haha, oh yea! I'll take that as a compliment. Bjorn is a BEAST! 😎
When he was blurring the element I could feel my pupils moving .
I would mention that there can be serious accessibility and usability issues with this 'trend'. If you want to go this path, at least be aware of what can come with it.
Surely it's purely graphical, e.g. there are no usability differences to any flat UI? If I'm wrong please correct me.
Agree with you Peter. As he has a following he should be aware of his influence. I find it sad to just jump on a new trend without going into details about usability.
@@maxpower9393 Who's jumping? Sometimes it's just good to learn a new style/technique and make something for fun 😉
Absolutely. However, it'd be interesting to see how designers work to potentially evolve this style (or similar) to better tick the accessibility boxes 👍
Dansky I’m not saying you shouldn’t- I’m saying you could have addressed the potential issues with this “style” (and I believe it would give you credibility)
Go ahead and use this and have fun - I just see a lot of people trying to lean UI design by copying - no harm there, but I believe you can educate in your position.
That’s my 2 cents:)
00:08: "Trends" for 2020.... if only you knew...
Love you man.
You have put on some weight..😋
Ok, so.....
I have been facing an issue for some time now. Could you please make a tutorial on the best method for exporting XD prototypes to hd gifs for creating video mockups?
literally going back to 2000
The problem i have with this design technique is it makes everything look like plastic. I'd rather have a matte-finish to my UI - it's softer and more inviting than something blaring and shiny.
What a beard man 😂
good videos q:
This is like an emo state for designers, They will regret doing this in a few years.
I hope this trend just stays in dribbble, and never in a working website/app in 2020.
Great beard btw, Dansky!
Can you eloborate on that? What makes it emo per se? I'm digging the fact that we can stray away into the extremes and build some really sterile, but aesthetically pleasing designs with this!
I think in a few years you will regret saying this. Neumorphism is not going away anywhere. Mobile apps start to use it and Apple just showcased their new Big Sur redesign.
@@S0ulH0und Don't worry. I won't regret it.
you are super
This trend just started and im already sick of it. Way overused in most designs.
It's definitely got designers divided 😅
Well we will just need to stop using it now that you are sick of it :))))
@Splendid Agree but you don't need to use it for everything you know :) It's just a design style, you don't need to like or dislike it, just accept the fact that it exists and it's perfect for some situations, simple as that. Cheers!
I've never seen this outside of dribbble
Well in the end of the day their companies will lose money and clients and that will be the end of that trend. I see it in a competition that jumped on Brutalism. Clients got furious with usability and overwhelmed on shopping sites. Next year you won't see it back.
Every ADA lawyer's wet dream
Uncle Dansky (Lols) what's on your face when did you grow this it's been a while I watched your tutorials
Uncle Dansky haha love it... Decided it just had to be done, big ginger beard 😂 Also welcome back 👊
Nigerians will always represent
Which one is Uncle Dansky again?
@@neemadania120 Hahahaaha don't come for my neck na
How sad is it that XD doesn't have inner shadow or multiple shadows, so you have to go through all these hoops...
The edges look to sharp
well, still think flat is better
Nice
ur looking like Vikings in clash of clans
Viking... I’ll take that 😜💪
Soft UI, also known as "Let's waste a ton of space and make the mobile experience even more annoying" 2020 edition.
this tutorial makes me less soft.
i dont think neumorphism will actually work when it comes to User Interaction.
I disagree. It gives more depth to the UX, and, coupled with subtle sound effects for user feedback, as well as snappy and non obtrusive animations, I'll probably implement this design element in a project I'm currently working on.
You are just making job hard for developers why can't you stick to material design or something
😂
no
Neumorphism is Skeumorphism for kids
Soon this gonna be overused AF...
You have gained too much weight :p
I don't like this style