Soft UI Design in Adobe XD

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ • 179

  • @merryamsalim4515
    @merryamsalim4515 2 роки тому +1

    i have seen so many videos of neumorphism but the way he teaches is the best and easy .

  • @amphreded
    @amphreded 4 роки тому +3

    @5:05 you can also use command left click to toggle between objects stacking on one another. It was in the previous update :)

  • @ArianMozafari
    @ArianMozafari 4 роки тому +7

    Perfect! I was looking for the pressed (down) state so badly! This video worths a million

  • @chrissre7935
    @chrissre7935 4 роки тому +79

    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.

    • @artemfe6884
      @artemfe6884 4 роки тому +1

      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:)

    • @chrissre7935
      @chrissre7935 4 роки тому +2

      ​@@artemfe6884 Still Not all Apple devices use the same screen. "Apple users would feel they are special:)" - They would not give a f.

    • @delulu6969
      @delulu6969 4 роки тому +4

      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.

    • @borcsaster
      @borcsaster 4 роки тому

      @@chrissre7935 Agree. Users just don't look at each other's devices testing how an app is running... It's our job.

    • @chrissre7935
      @chrissre7935 4 роки тому +2

      ​@@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.

  • @Viehere
    @Viehere 4 роки тому +4

    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!!

  • @alexandrameas4436
    @alexandrameas4436 4 роки тому +1

    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.

  • @robinjames9898
    @robinjames9898 4 роки тому +3

    First time to this channel and loving this mans energy!

  • @ms.raryang9411
    @ms.raryang9411 Рік тому

    👌👍Akshrika channel also provides very good powerpoint presentation.

  • @MSantanaG61
    @MSantanaG61 4 роки тому

    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!!!!

  • @Yearningartisan
    @Yearningartisan 4 роки тому +4

    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

    • @Noor_Tala_Naya
      @Noor_Tala_Naya 4 роки тому

      hi , do you recommend them more than XD??????????

    • @tartarus1322
      @tartarus1322 4 роки тому

      @@Noor_Tala_Naya Yes. Figma is free and is almost the exact same as XD

  • @sachcha88
    @sachcha88 4 роки тому

    Wow awesome tutorial. I was wondering how they make such Soft UI designs and this tutorial explained it all from the basics. Thanks heaps.

  • @11221122gamer
    @11221122gamer 4 роки тому

    there's no one like you dansky ! u the best

  • @robertotraspalacio6059
    @robertotraspalacio6059 4 роки тому

    every time i look for some adobe xd related feature its you, great work, well deserved follow keep on the good vide :)

  • @borcsaster
    @borcsaster 4 роки тому +1

    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?

  • @brucemooney1277
    @brucemooney1277 4 роки тому +2

    First time on this channel.... The exit got me shooked lol

  • @mosesakrel1272
    @mosesakrel1272 4 роки тому

    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?

  • @uiux9488
    @uiux9488 3 роки тому +1

    Really enjoyed. Thanks

  • @mitsu3996
    @mitsu3996 3 роки тому

    Thank you! Your videos are very helpful 😄

  • @lydiawere
    @lydiawere 4 роки тому

    thank you Dansky! great tutorial right there.

  • @GeorgeAbdouche
    @GeorgeAbdouche 4 роки тому

    Hello, is it a black MacBook Pro or did you put a cover? I can't find one even on apple store....

  • @vikassuthar9017
    @vikassuthar9017 4 роки тому

    aweeeeeesome 🤩

  • @charlesboistier4201
    @charlesboistier4201 4 роки тому +1

    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)

  • @dipooladepo6629
    @dipooladepo6629 4 роки тому

    Thank you, this was so simple and straight forward.

  • @hiteshkaushik4563
    @hiteshkaushik4563 4 роки тому

    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.

  • @Ammad.nadeem
    @Ammad.nadeem 3 роки тому

    Love This tutorial, as always!!

  • @za9067
    @za9067 4 роки тому +1

    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

  • @hamzahqazi8960
    @hamzahqazi8960 4 роки тому

    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!

  • @adamleonards8741
    @adamleonards8741 4 роки тому +1

    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?

    • @ForeverDansky
      @ForeverDansky  4 роки тому

      Hey Adam, you could try checking/unchecking 'Responsive Resize' from the property inspector on the right :)

    • @adamleonards8741
      @adamleonards8741 4 роки тому +1

      @@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.

    • @jpatiet5026
      @jpatiet5026 4 роки тому

      Adam Leonards thanks for this I had the same issue

  • @mmdub1111
    @mmdub1111 4 роки тому +11

    You do great content, Dansky, I even bought t-shirt. I hope you're making billions of dollars.

    • @ForeverDansky
      @ForeverDansky  4 роки тому +1

      Hey thanks so much Michael, means a lot and I appreciate the support :)

  • @bodyhanger7137
    @bodyhanger7137 4 роки тому +3

    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...

    • @sykowhite9465
      @sykowhite9465 4 роки тому +2

      150e phone can easily pull off any modern layout and animation ... so dont know on what phones are you reffering to

    • @S0ulH0und
      @S0ulH0und 4 роки тому +1

      Jesus, what phone are you using? HTC dream perhaps?

  • @tanvirahasan2880
    @tanvirahasan2880 4 роки тому

    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.

  • @ChromaticaCitizen
    @ChromaticaCitizen 4 роки тому +2

    Thank you Dansky! love your beard by the way!!

  • @QadeerRais
    @QadeerRais 4 роки тому

    What is the size of the main artboard/

  • @octofancisco8977
    @octofancisco8977 4 роки тому

    I want to ask you Mr. Dansky, what is the different neumorphism with skeuomorphism?

    • @velvetdevil4816
      @velvetdevil4816 4 роки тому

      It's a play on words. Replacing "skeu" with "new".

  • @hasinulhudaenu8098
    @hasinulhudaenu8098 3 роки тому

    love this vid

  • @coderarcher7122
    @coderarcher7122 4 роки тому

    How could you get such a big platform size?? I only get a customized set of mobile cases.

  • @tanzylrevelation7053
    @tanzylrevelation7053 4 роки тому

    Love this

  • @poojadhanesha4892
    @poojadhanesha4892 4 роки тому +1

    Very good way of explaining really learnt from you

  • @zexinzhao5423
    @zexinzhao5423 4 роки тому

    nice video, thanks for sharing!👍

  • @teroblepuns
    @teroblepuns 4 роки тому

    Time to test this with VR interfaces

  • @bloojkl4520
    @bloojkl4520 4 роки тому

    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?

    • @whitewolfpack0
      @whitewolfpack0 4 роки тому

      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.

  • @jewelry40168
    @jewelry40168 4 роки тому

    Thank you for the video!!!!!!👍🏼👍🏼👍🏼👍🏼

  • @SRockstd
    @SRockstd 4 роки тому

    it's very fun, and easy to understand :D thanks Dansky

  • @thefpsguy9416
    @thefpsguy9416 4 роки тому +78

    dev's nightmare :D

    • @ORyanMcEntire
      @ORyanMcEntire 4 роки тому +16

      Actually this effect is silly easy with CSS. It's just two drop-shadows.

    • @diablo.the.cheater
      @diablo.the.cheater 4 роки тому +1

      @@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

    • @borcsaster
      @borcsaster 4 роки тому

      @@diablo.the.cheater Have you got any experience with that?

    • @diablo.the.cheater
      @diablo.the.cheater 4 роки тому +1

      @@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.

    • @borcsaster
      @borcsaster 4 роки тому +1

      @@diablo.the.cheater Thanks! And with native apps? Is it the same? Maybe in this case it can proceed quicker!

  • @PranavpuriGoswami
    @PranavpuriGoswami 4 роки тому

    Thank You!

  • @Sebastian-zs8cp
    @Sebastian-zs8cp 4 роки тому +1

    Website from scratch design to html css (Javascript) one pager and multi pager pleace

  • @suryakrishna4662
    @suryakrishna4662 4 роки тому

    Awesome!

  • @rekadoesux9917
    @rekadoesux9917 4 роки тому

    Fantastic tutorial, thank you! Subscribed.

  • @Mbasrak
    @Mbasrak 4 роки тому

    how can i make dark one

  • @ahmedsaeed234
    @ahmedsaeed234 4 роки тому

    There was an error downloading your file.?
    why this message appear when i click in direct download?

  • @bismailyas7020
    @bismailyas7020 4 роки тому

    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

  • @RolandoMoralesD
    @RolandoMoralesD 4 роки тому

    After so many updates, Adobe XD still doesn’t have an inner shadow built in?

  • @GraphicsGuruji
    @GraphicsGuruji 4 роки тому +1

    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.

  • @sabirnawaz1304
    @sabirnawaz1304 4 роки тому +2

    Wow great

  • @fahadmanzoor6789
    @fahadmanzoor6789 4 роки тому

    Great, It helped me learn allot.

  • @mohitverma9676
    @mohitverma9676 4 роки тому

    U r superrrr🤩👍

  • @jun6015
    @jun6015 4 роки тому

    cool, dude!

  • @karoleenhee8452
    @karoleenhee8452 4 роки тому

    thank you, beautiful

  • @MACH_SDQ
    @MACH_SDQ 4 роки тому

    Very gooooood

  • @jordydejong2960
    @jordydejong2960 4 роки тому +1

    How come you ALWAYS upload your tutorials right when I need them?

  • @elainedesign5763
    @elainedesign5763 4 роки тому

    awesome video! I really hate this design but I would like to try it once :0

  • @hasinulhudaenu8098
    @hasinulhudaenu8098 3 роки тому

    ❤️

  • @meghanakankara2883
    @meghanakankara2883 4 роки тому

    i use windows and i found no file option

    • @ForeverDansky
      @ForeverDansky  4 роки тому

      Top-left-corner menu icon, slightly different layout for Windows compared to MacOS 😅

  • @bishalscreation9793
    @bishalscreation9793 4 роки тому

    What is xd is itsimilar to photoshop or 🤔 isnt photoshop and illustrator enough my goodness so many apps

    • @rlBrave
      @rlBrave 4 роки тому +3

      XD is special for UI UX Design. For example for programs, apps or websites ^^

    • @bishalscreation9793
      @bishalscreation9793 4 роки тому

      @@rlBrave ooh thank you😁

  • @12rapdl
    @12rapdl 4 роки тому

    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.

  • @alaeddinezaoug
    @alaeddinezaoug 4 роки тому +1

    The beard is fabulastic

  • @rifatmehedi2082
    @rifatmehedi2082 4 роки тому

    Your new subscriber here

  • @nidhinjoseph8466
    @nidhinjoseph8466 4 роки тому

    Thank you so much. It's a very informative tutorials.

  • @cwgunn
    @cwgunn 4 роки тому

    Its a cool effect but it makes the design look so much more busier

  • @narivari1234
    @narivari1234 4 роки тому

    thanks

  • @lika_cola
    @lika_cola 4 роки тому +4

    ok now I see why the Figma is better :D

  • @krushik11
    @krushik11 4 роки тому

    Thanks.

  • @PratikDeshmane7006
    @PratikDeshmane7006 4 роки тому +7

    Have you worked in vikings😂😂😅 you look like the character Bjorn Lothbrok😉

    • @ForeverDansky
      @ForeverDansky  4 роки тому +4

      Haha, oh yea! I'll take that as a compliment. Bjorn is a BEAST! 😎

  • @shivanshu2959
    @shivanshu2959 4 роки тому

    When he was blurring the element I could feel my pupils moving .

  • @goroh83
    @goroh83 4 роки тому +5

    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.

    • @the_wilson_smh
      @the_wilson_smh 4 роки тому +1

      Surely it's purely graphical, e.g. there are no usability differences to any flat UI? If I'm wrong please correct me.

    • @maxpower9393
      @maxpower9393 4 роки тому +1

      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.

    • @ForeverDansky
      @ForeverDansky  4 роки тому +4

      @@maxpower9393 Who's jumping? Sometimes it's just good to learn a new style/technique and make something for fun 😉

    • @ForeverDansky
      @ForeverDansky  4 роки тому +1

      Absolutely. However, it'd be interesting to see how designers work to potentially evolve this style (or similar) to better tick the accessibility boxes 👍

    • @maxpower9393
      @maxpower9393 4 роки тому +3

      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:)

  • @youreale
    @youreale 4 роки тому

    00:08: "Trends" for 2020.... if only you knew...

  • @smsm8731
    @smsm8731 4 роки тому

    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?

  • @TheGryphon14
    @TheGryphon14 4 роки тому

    literally going back to 2000

  • @evvveeeeeeee
    @evvveeeeeeee 4 роки тому

    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.

  • @Kerohalim
    @Kerohalim 4 роки тому +6

    What a beard man 😂

  • @newo-audiovisual6481
    @newo-audiovisual6481 4 роки тому

    good videos q:

  • @deificGashsaucer
    @deificGashsaucer 4 роки тому

    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!

    • @unQuishable
      @unQuishable 4 роки тому

      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!

    • @S0ulH0und
      @S0ulH0und 4 роки тому +1

      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.

    • @deificGashsaucer
      @deificGashsaucer 4 роки тому

      @@S0ulH0und Don't worry. I won't regret it.

  • @qbaistok9420
    @qbaistok9420 4 роки тому

    you are super

  • @MuppetsSh0w
    @MuppetsSh0w 4 роки тому +74

    This trend just started and im already sick of it. Way overused in most designs.

    • @ForeverDansky
      @ForeverDansky  4 роки тому +7

      It's definitely got designers divided 😅

    • @grav3ns3n
      @grav3ns3n 4 роки тому +5

      Well we will just need to stop using it now that you are sick of it :))))

    • @grav3ns3n
      @grav3ns3n 4 роки тому +3

      @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!

    • @luman1109
      @luman1109 4 роки тому +5

      I've never seen this outside of dribbble

    • @chrissre7935
      @chrissre7935 4 роки тому

      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.

  • @Foxygrandpa2131
    @Foxygrandpa2131 4 роки тому

    Every ADA lawyer's wet dream

  • @ogunkayodeoluwaseun9348
    @ogunkayodeoluwaseun9348 4 роки тому +2

    Uncle Dansky (Lols) what's on your face when did you grow this it's been a while I watched your tutorials

    • @ForeverDansky
      @ForeverDansky  4 роки тому +1

      Uncle Dansky haha love it... Decided it just had to be done, big ginger beard 😂 Also welcome back 👊

    • @neemadania120
      @neemadania120 4 роки тому +1

      Nigerians will always represent
      Which one is Uncle Dansky again?

    • @ogunkayodeoluwaseun9348
      @ogunkayodeoluwaseun9348 3 роки тому +1

      @@neemadania120 Hahahaaha don't come for my neck na

  • @gabeBucur
    @gabeBucur 4 роки тому

    How sad is it that XD doesn't have inner shadow or multiple shadows, so you have to go through all these hoops...

  • @martinseal1987
    @martinseal1987 4 роки тому

    The edges look to sharp

  • @mykytademchenko3044
    @mykytademchenko3044 4 роки тому +3

    well, still think flat is better

  • @luqmanalhakim9920
    @luqmanalhakim9920 4 роки тому

    Nice

  • @dukeduke2587
    @dukeduke2587 3 роки тому

    ur looking like Vikings in clash of clans

  • @LuBre
    @LuBre 4 роки тому

    Soft UI, also known as "Let's waste a ton of space and make the mobile experience even more annoying" 2020 edition.

  • @yourpandaprince9962
    @yourpandaprince9962 4 роки тому

    this tutorial makes me less soft.

  • @AdityaChintha
    @AdityaChintha 4 роки тому +1

    i dont think neumorphism will actually work when it comes to User Interaction.

    • @bren.r
      @bren.r 4 роки тому

      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.

  • @sahilm3301
    @sahilm3301 4 роки тому +1

    You are just making job hard for developers why can't you stick to material design or something

  • @abazhutov
    @abazhutov 4 роки тому

    no

  • @Vectorveen
    @Vectorveen 4 роки тому

    Neumorphism is Skeumorphism for kids

  • @IFMstudio
    @IFMstudio 4 роки тому

    Soon this gonna be overused AF...

  • @ShubhamYemul
    @ShubhamYemul 4 роки тому

    You have gained too much weight :p

  • @thewaliiiii
    @thewaliiiii 4 роки тому

    I don't like this style