This is typical „dribble design“, looking awesome but not really working on real life products, nice effect to showcase portfolio content though, brings me back to those good old photoshop times 👍🏻
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
@@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.
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)
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...
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
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?
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.
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!
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.
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.
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.
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?
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?
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'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 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.
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:)
@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.
![Interactive Menu (UI design & Prototype) - Adobe XD tutorial [2019]](http://i.ytimg.com/vi/n2ut_ylP8Gk/mqdefault.jpg)
i have seen so many videos of neumorphism but the way he teaches is the best and easy .
Thank you :)
Perfect! I was looking for the pressed (down) state so badly! This video worths a million
This is typical „dribble design“, looking awesome but not really working on real life products, nice effect to showcase portfolio content though, brings me back to those good old photoshop times 👍🏻
100% agree.
You mean dribbbbble!
I agree. Looks really cool, but not very accessible. Which is a problem.
Could you explain why?
@@delulu6969 Lack of contrast, really bad for a11y.
Also, I can tell you this would require some work for frontend devs (as with anything new).
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.
First time to this channel and loving this mans energy!
Awesome Robin! 😀
@5:05 you can also use command left click to toggle between objects stacking on one another. It was in the previous update :)
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!!
every time i look for some adobe xd related feature its you, great work, well deserved follow keep on the good vide :)
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.
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 :)
Wow awesome tutorial. I was wondering how they make such Soft UI designs and this tutorial explained it all from the basics. Thanks heaps.
First time on this channel.... The exit got me shooked lol
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
👌👍Akshrika channel also provides very good powerpoint presentation.
there's no one like you dansky ! u the best
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 Dansky! great tutorial right there.
Really enjoyed. Thanks
You’re welcome! Thank you! 🙏
Thank you, this was so simple and straight forward.
Love This tutorial, as always!!
Thank you Dansky! love your beard by the way!!
Aha thanks, and you're welcome Sam :)
it's very fun, and easy to understand :D thanks Dansky
Thank you! Your videos are very helpful 😄
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
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!
aweeeeeesome 🤩
Fantastic tutorial, thank you! Subscribed.
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 good way of explaining really learnt from you
Thanks Pooja!
Awesome!
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?
love this vid
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
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?
Love this
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.
Time to test this with VR interfaces
nice video, thanks for sharing!👍
Thank you for the video!!!!!!👍🏼👍🏼👍🏼👍🏼
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!
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.
awesome video! I really hate this design but I would like to try it once :0
Thank You!
Great, It helped me learn allot.
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.
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! 😎
❤️
Hello, is it a black MacBook Pro or did you put a cover? I can't find one even on apple store....
Wow great
Thanks Sabir :)
How come you ALWAYS upload your tutorials right when I need them?
Very gooooood
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, beautiful
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
cool, dude!
I want to ask you Mr. Dansky, what is the different neumorphism with skeuomorphism?
It's a play on words. Replacing "skeu" with "new".
How could you get such a big platform size?? I only get a customized set of mobile cases.
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?
U r superrrr🤩👍
The beard is fabulastic
😊👊
Your new subscriber here
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
thanks
There was an error downloading your file.?
why this message appear when i click in direct download?
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.
Thanks.
What is the size of the main artboard/
After so many updates, Adobe XD still doesn’t have an inner shadow built in?
Yes(
Website from scratch design to html css (Javascript) one pager and multi pager pleace
Thank you so much. It's a very informative tutorials.
What a beard man 😂
good videos q:
you are super
When he was blurring the element I could feel my pupils moving .
Its a cool effect but it makes the design look so much more busier
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😁
literally going back to 2000
how can i make dark one
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.
00:08: "Trends" for 2020.... if only you knew...
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.
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
ok now I see why the Figma is better :D
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:)
i use windows and i found no file option
Top-left-corner menu icon, slightly different layout for Windows compared to MacOS 😅
How sad is it that XD doesn't have inner shadow or multiple shadows, so you have to go through all these hoops...
well, still think flat is better
Nice
The edges look to sharp
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.
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.
ur looking like Vikings in clash of clans
Viking... I’ll take that 😜💪
You are just making job hard for developers why can't you stick to material design or something
😂
no
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.
Neumorphism is Skeumorphism for kids
Soon this gonna be overused AF...
I don't like this style