Can you still DROP SHADOW like it's 2004?

Oh somebody wants me to check out the design awesome let's check it out okay yeah I do too funny Bonnie that was really funny another person wants me to check out design drop shadows they deserve care they deserve to be caressed like this that's why in this video I'm gonna help you master the drop shadow before we begin the note makes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with back-end access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work Linode has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors lonoa can do that too so sign up using the link below in the description to get $20 in credit on your new alone owed account alright so for the very first rule I'm going to give you that as students of myself your pupils that I want you to Bay is don't add drop shadows to text this of course looks horrible and you may be thinking to yourself well Gary you know maybe that's just too much contrast maybe we just need to take the shadow opacity down and yeah that does look better but what purpose does it really serve I've seen people do things like this and really it just doesn't help it's really just screws up the accessibility the readability of the type and so pretty much I'm gonna put this out there I mean if you have to say for instance you're dealing with a horrible client and they want shadows and want drop shadows on their text if you're in that situation and you've done all you can to convince them that that is a horrible approach I then make sure that you're your alpha is below around 10% and of course you have to even go lower the less the blur ratio is because right here we can see if we come up here maybe to say like 16% that's that's a shadow that's really contrasting a lot it's gonna make it hard to read the type for instance if we change the blur ratio up to this now it becomes a lot easier to read so the less blur that you have the less contrast that you should have as well or the lower the opacity mark all right either way though I'm gonna say don't add drop shadows to your text one thing that we used to see back around either web 2.0 era or so I are these real small type of shadows like they're like a sort of like an emboss effect or whatever some people would even do this and have their embossed X don't do that either just because that's a very dated thing to do so if you want to try to look like you actually have modern design skills stay away from that please please please all right next up I'm gonna give you another roll rule number two if you have an element that you want to add a drop shadow to ask yourself how much does it contrast with the background so in this case the background is white and by the way we're gonna have different backgrounds and the other outboards but for now it's white and this right here this element will say we want to add a drop shadow to it this one is very light blue so the contrast is low there's not a lot of contrast between these elements it's not like this element I you know is this much contrast right so if you have a situation like this don't ever put a drop show up shadow on in any case I I don't care how you try to adjust it it's not going to look good in fact I'll show you so let's just do a few these here we'll take our shadow over turn on by default that's the default shadow hood that we have here it looks like crap right now what if we try to lower the eye the blur ratio okay okay it still doesn't look good what if we try to drop down the opacity it it looks horrible you are wondering why is that the case well it's because when you have two elements that don't contrast much with each other and you're throwing in another element that doesn't have a lot of contrast you're blurring the container it's kind of hard to tell where it goes there's not enough contrast so it just looks like crap that's why when we turn it off it looks much better now I know some of you are probably thinking but Gary why don't we just really increase the contrast of the shadow itself in which case I will do that for you and show exactly why you're wrong so yes this does contrast a lot right we can clearly see the container outside of just looking really really bad in terms of UX what do you think people want to focus on the most you know I mean they want to read the eye should be the focus the eye should be the text in the icon not your stupid shadow for instance have you ever heard of heard the term he was lurking in the shadows right well you don't see him because a shadow is something that you really don't see you want your shadows to be low opacity something that's more of an afterthought so in this case this is a no-go don't add shadow next up what if we have containers here but they're the exact same color as the background this is actually a good potential use case of Shadows and this is something that I've seen in sort of a kind of like a modern design trend in the past couple years so let's get our shadow on now of course this right here the shadows way too much of an of the focus already needs to come down quite more so we'll take our shadow now again this is like up to 50 one percent at all the way black for the shadow like I said there's there's kind of like a 10 percent roll I'm gonna call it a 10 percent rule you want to make sure that your shadows are exceed no more than 10 percent of the opacity assuming it's a black shadow of course we're gonna get into coloured shadows as well and the shortly but for black shadows you don't really want to go more than 10 percent or so and then you're left with this which is kind of an interesting aesthetic it's almost kind of like Google trendy new morphism that thing that's going on because there's not a lot of attention that's drawn to the container or the button or whatever you're placing it on but that's okay because we see the content inside of it is high contrasting and that's what they're there for so in this case it's perfectly fine let's say for instance you want to have a shadow eye and you want you want it to be not a soft shadow but a hard shadow so the hard shadow would be one with the blur radius where it's really low so all right this is a high blur radius we take it all the way down here yeah you could do that in this case it's a little bit funky this is a little bit too exaggerated in my opinion so if you're gonna have a hard shadow generally speaking I would take your x and y values and kind of just bring them in kind of like that so that they don't really take up too much space in a sense so I would say for another roll and of course these could be bent a little bit I you know the heart of the shadow the more it should be brought in towards the container whether it be a card like this or a button next up what if for that what if we have maybe a slightly colored background how two shadows work in this context so if I take this and we'll turn our shadow on again it's pretty much the same situation but there is some one consideration that you need to make so right now this shadow if we take a look at the opacity it's up there pretty high probably to come down you know no more than 12 13 maybe 10% and just there's something off about it get in there real close it it's it's gray it's like mixing gray in this light blue which is absolute crap color combination so what you would want to do is match it up with the hue of the background the color that I'm talking about basically of the shadow so right now we're all black but if we get into roughly around the same hue push this into that section and then maybe we'll push this up maybe you can make it a little bit darker now it looks a lot better it functions a lot better than it did with the all-black version because this it just created a grayscale in there between the shadow itself in the background so that looks actually pretty decent next up so let's say for instance you wanted to have colored shadow now you're getting into pro level territory and a little bit risky let's try it anyhow a colored shadow how the hell would that even work well we'll take our colored shadow here let's do same you know around the same area we're gonna do this blue or so and again the same ideas ultimately apply round around right around 8% you want it to be very soft especially when it comes to color you push it up to like 10 or 11 percent it's really starting to stick out quite a bit maybe a little bit lower maybe around 8% I would go oh boy that's the finicky and right around there looks good now if you try to do a different color you're gonna want to try to use colors that are also in your user interface ideally if you want to be the safest as possible stick with your primary color in this case it happens to be blue if I had a secondary color which many user interfaces do I you could bring that in as well but don't just start just randomly choosing colors that don't exist in other areas of your UI for instance like if we have this purple or something you might want to change up some of the other elements to match up that purple possibly so we could take like this now this kind of makes a little bit more sense because you're drawing out colors that exist in other areas of the UI and you want to be consistent this still in this context I still kind of don't like that again we want to go back to more of like the blue and now it fits much much better and it does help frame the overall containers here the card containers now what about if you have a dark back and can you add shadows to something that's already dark well the answer is if you actually have this black the no you can't add shadows don't ever try to add any type of shadow because that would just defy the laws of light and anything else in science I suck a science um but you can see right here we actually have kind of like a very dark grey background so in this case what happens when we add actually add a shadow all right so our shadow I just toggled on the shadow you can barely tell because we already have a dark background so it's already at 7% if we dial this all the way up again it's still the same rolls it this is just drawing way too much attention to the shadow itself and we don't want that it needs to be the content that's inside the card of a button or the type or whatever it is so again you want to draw back down you know under 10 and it looks pretty solid right there I would have no problem with this another rule I'm going to give you though is if you have like a dark background like this don't in it's it's it's D saturated or in other words there's no color in it don't add color because there's not a single color that we can try to add here that's wrong one that would actually look good in contrast well I with the design so for instance if we take this up we start going through the wheel just look how disgusting that is I mean none of these are doing the design any justice and that's because really it's it's situated between two elements that are completely I lack the devoid of colors so you add in a colored shadow it just looks like garbage I've seen people do this unfortunately so if if you want a shadow if you got to have a shadow in there again right around ten percent or less and you're good to go you're not killing your design what about a high contrasting background how would that work all right well let's see let's add another shadow that looks nice already whatever I just did that looks pretty good it happens to be black and this is working well it's eight percent its feathered pretty well again you don't have to go the feathered route I know I've been showing that a lot here this could actually work it's actually pretty far away and it still looks not too bad you just want to you wouldn't want it to have a lot of contrast in this case like bring it up then it becomes just too much in my opinion now what about this type of example of course we could go through a million of these this is the last one I promise you I wear we have the same color background except this time it's not white and white like we had before this is both blue you'll try adding a shadow here so now this kind of taking on half of the the new morphic effect that everybody has been creaming about basically I it doesn't have the the highlighted version over here but still I would say this works because it's not the container that's the the point it's it's the content inside of the container people can clearly see each one of these elements and click on them and access them and read them and all of that so really if again if we check out the the settings of this we'll see that again to a two percent you go up much higher just a tad bit too much in my opinion they're at 20% there so you wanted to go around quite low right around there looks to be a pretty good sweet spot alright everybody hopefully you are able to gain something from that if you suffered from bad drop shadow ism or something in the past hopefully we can cure that so that you know you can make designs that just don't suck alright I'll talk to you guys later make sure to subscribe I'll see you more good bye

Channel: DesignCourse

Views: 44,879

Keywords: drop shadow, drop shadows, css drop shadow, ui design drop shadow, modern drop shadows, ui ux, ux, ui ux drop shadows, ui ux shadows, ux drop shadows, ux drop shadow, ui design, text shadow, text shadows, ui design text shadow, box shadow, css box shadow, box shadows

Id: 4anIHp9INsU

Length: 15min 6sec (906 seconds)

Published: Thu Feb 20 2020