SwiftUI Views Live: 2 - Using Shadows to Enhance Your UI

all right I think we are live yeah okay good so welcome everyone my name is Marc Moines i am i io s developer and this is my live series here and in this series this is an actual series that I'm doing that's live it's called swift UI views so - I've used live and I plan on doing this where we take a topic and then we talk about it a little bit and then we go in and we pick some kind of random UI and whatever it is I'm teaching we apply it to that random UI it's so it's it's a little bit scary right because I don't know what I'm actually going to be building but I think that adds a little bit of excitement to it because we never know what we're going to get so how did these live sessions work all right let me show you something here I actually put together a slide for you guys okay so this is how it works I'm gonna ask you to pick a random number and I'm gonna give you a range don't pick a number yet and then I'm going to teach you something I don't have that step in there I'm gonna teach or we're gonna talk about this topic a little bit and then we're gonna use that random number and we're gonna look for some UI inspiration and that is what I'm going to take and we're gonna build that in Swift UI using the topic or applying the topic that we just talked about okay now I want to limit these episodes to 30 minutes I think 30 minutes is a good time some people say they want it longer but I like 30 minutes because imagine if you're busy you're at work and you're on your lunch break and you want to watch something really quick then you can watch one of these sitting down for like an hour hour and a half that I can do that because if I have time but I know a lot of other people can't do that so I want to try to limit it to 30 minutes okay and then the fourth thing is uh we're all gonna hang out we're all gonna laugh and we're all gonna have fun alright alright cool so in the chat if you can say like where you're from and your what your name is that would be really cool kind of like introduce yourself and I am having a problem with live chat right now it says unable to connect chat please try again so what I'm going to do is I'm going to refresh this page and hopefully it doesn't end the stream I've never done this before so bear with me I hope it still works there we go all right good all right chat is back hopefully I didn't disconnect anyone or disconnect myself we have Stuart we got buggy man yami-yugi which i think is it Tim yeah it is Tim yeah right there it is right there Tim from the Netherlands we got Scott Smith all right cool all right welcome guys do the channel and let's jump into it so first we want to talk about shadows and the reason why I started I even picked this topic was because I found something that I thought was really cool and this is sort of like a trend a small trend but I've been noticing it more and more in you eyes and I found this on dribble and I really like this UI I love the the death that this designer stand here created with this UI oh nice we have someone from Russia we got Rahil from Pakistan Nepal alrighty cool oh buggy man is from the UK all right cool and so I really like this UI and that made me want to explore shadows a little bit more and how do you shadows to create this level of depth in UI so that's what we're going to talk about today so let's jump into Xcode we've got Marcel from Germany welcome Marcel I know it's late for a lot of you guys and I really appreciate you staying up for this it's noon my time okay so let's jump into shadow we're going to talk a little bit about the basics let's start with this one right here this circle now if you want to add shadow then you just say shadow and that is your shadow modifier that's a basic shadow modifier you can give a radius and think about that as like the that I won't say depth I would say how much the shadow is spread out you know from the center going out or from the edge going out so we have eight there I usually start with eight for a lot of things I think that looks good now you notice when you zoom in on that shadow it's it's I did some research on this and it's about 33 percent opacity it's not a solid color you can create solid color shadows I'll show you how to do that and that requires a different initializer for shadow so if we come here to shadow and if you want intellisense to come up on something like this when I back up a little bit I just hit control space and it brings up the other initializers here so we can apply a color to shadow here and let's just go with grey say gray and then we'll go with eight again and then for x and y that is like a offset if you want the shadow to go down go to the right to left then you can do that too actually what I'm going to do if you want a solid color shadow then your radius will have to be super small like a1 and then watch this when I apply a Y to make it go down now you see that that shadow is more solid right you can probably even go smaller than that I don't I've never tried 0 well 0 work yeah it looks like it does so there there you get an actual solid shape for your shadow and then you can offset it with X&Y ok levels of depth how do you create this illusion of levels of depth like this guy here you can definitely see when you look at this it actually looks like they're on different levels right nice we have Rabine from Nepal Juan from Spain thanks for joining me guys ok so let's explore that how to create those different levels of depth now we're going to start with this circle right here and let's say shadow and we can let's just go with the basic one for now let's see how that looks and there's eight so you can see there's a little bit shadow behind it but it doesn't look like it's that much pulled away from the background right from the UI so what can we do with that well the best way I found is to use the other initializer hit control space and then the color here that's optional we don't have to supply a color let's use eight again and this time we're going to offset it so imagine this imagine you're shining a light on your UI like a flashlight and depending on where you hold that flashlight if something is up from the surface it's gonna cast a shadow in a certain direction so we can pick a direction and if we say like this is our UI and we are shining a flashlight from here then we want the shadow to go down a little bit right so let's try that for X I'm just going to Oh what star have in here there we go for X I'm gonna say zero X is right and left for y though let's try 10 okay now when you look at this it looks a little bit more 3d you know where there's a light actually coming up from the top and it's casting a shadow on the bottom so that's how you give it a level of depth now if you compare it to the circle next to it you can definitely see more of a difference right and so the offset makes a huge difference so if we go back to zero zero then it's it's a little bit harder to see it looks a little bit 3-dimensional but it doesn't look like it's coming off the screen as much then when we had some offset applied to it okay so let's copy this and let's apply it to these other ones here okay now if we try to apply more offset to it I just want to give you an idea here so we're going to offset this by 10 and you notice you know compare the first one to the second one now the light is shining from a different direction right so what I recommend is when you create a UI it's okay to have that shadow go wherever you want but you should keep it consistent you know you should have them all go from the same direction if that light source is coming from one direction then all the shadows would go in the same direction now what you could do you could do this say this the light is pretty close to the center of the UI then you could actually let me just show you it'll be easier to shine explain it okay we're gonna go minus 10 oh that's minus 20 that's okay okay now look at this UI when you look at those three circles what's a the impression that you get here it looks like the light is in the center is so close to the UI that it's spreading outwards right so these are some things to keep in mind I want to give you some guys some ideas of the illusion that a shadow can create on your UI and you know when you look at this to that Center one doesn't look like it's as high up as it is with the other ones so you might want to increase the radius we can try doubling that and maybe that'll help compensate for that yeah not too much though so there's something else to when your radius goes up the color the shadow gets more it's lighter it's more diffused so it's like the opacity is increased but it's just that that transition that that gradient of you know going to clear it doesn't show up as much so what you might want to do in that case is actually apply a color now let's let's just look at something else - okay so we have eight and let's change these back to zero and then yeah for why let's go down so we'll say let's go with five five ten fifteen so here's another way to create a level of depth is basically just changing that offset the y offset you can do it with x2 I'm just using wise because it's just one value that we can compare and you notice when you look at these so as you go to the right like this this circle right here looks like it's further off the screen right then these so you can control that the radius didn't change the color didn't change on the shadow don't think that change is the offset so you can use the offset to give it more depth okay let's talk about colored shadows let's go down here so we can definitely apply shadows to these guys and we can choose the same color so this first one is pink so let's choose a pink shadow and radius I'll stick with eight I like to just start with that as my default and we're gonna go eight down there you go so having colored shadows let me just do the rest of these two so you can see them all together okay colors shadows are pretty cool because it kind of gives you that illusion that the back of the circle has is pink right like look at the first one the back of the circle is pink and the light is shining you know bouncing off the background hitting the bottom of the circle and it's showing this color that comes from the circle itself so that's another thing that you can use on buttons that kind of gives it a glow or like a reflection of light you can kind of simulate real-world reflections I guess you could say the thing about this that I want you to be careful about is you have to definitely test it against dark mode - the thing that I found is you don't want a shadow that's so strong that the edge of your shape it gets lost in it so sometimes what you might have to do is lighten up that color a little bit so let me show you how to do that first of all what I do is I usually have the color inside my asset catalog as a named color but we can do that here too so if you want to lighten up this color this is this is a pretty easy way to do it you can use a different initializer for color and you can say color literal start typing in color literal and hopefully it comes up it's not come on guys where's my autocomplete here maybe it's in here it's not working all right well you can apply color literal color literal is a UI color so let's see here let's try this yeah UI color no see sometimes it works and sometimes it doesn't let me try it again okay usually see it right in the intellisense so here's what I'm going to do let's change that back to pink let me try it with a property and then we can just copy it let color equals No yeah I just created a video with this too okay alright well skip it so color literal it's something that I actually learned from Meng - he taught me how to do that and it's really cool he just thought there's an initializer normally you can just do color literal it comes up in your intellisense right here there it is right there okay good sometimes it works sometimes it doesn't color color literal okay by the way um the guy from Russia I don't know how to pronounce your name I'm not familiar with those can you put like in a you know the like a regular alphabet like how I would pronounce your name okay so there we have color literal I'm gonna hit enter and then it creates a color right here now we started with pink right so I'm gonna click this other button and I'm just gonna grab that pink and then down here you have opacity so you can tone it down we can start with like 50% and see how that looks if I click resume it should give me a live preview as I adjust it yeah that might be too much let me increase the opacity there yeah that looks good Andrei okay good thanks Andre alright so there we go so you can line it a little bit and really that your main goal here is to not have your shadow blend in with your object blend in with your shape we could probably lighten up these colors too but I think you guys get the idea so I again I usually do this in my my name colors in my asset catalog I'll lighten the color up a little bit for dark mode and sometimes I lighten it up even more for light mode because I want to be very light okay so enough with shadows I want you guys to I should have had you guys do this before but I want you to pick a number between 7 and 15 and put it in the chat the first number that someone posts in there I'm gonna grab that number then we're going to do a search and we're going to count down and find a UI that we're gonna work from and create now what you got while you guys are doing that I'm going to show you my project setup here so I kind of like set things up a little bit to kind of prepare for this and one of the things that I created was in some named colors now this is how I normally set up my color scheme and we have an accent color that's gonna be the buttons or the things that you can interact with the background colors so if I want a background color for my screen I can use that foreground color as the color of your text then we have a secondary and tertiary colors those things are optional and you can supply them or you don't have to supply them at a minimum you should have an accent color if you don't have one then you're just going to be using blue with a white background or a black background you know the default colors but if you're creating a UI try to pick a unique accent color that stands out that catches people's attention so they know what to do on your screen okay now I have those colors set up here and I set them up for light mode and dark mode and then I have this other file here so I can easily access those those named colors the only reason why I had this is because I don't want to make mistakes and I'm trying to type in the name of the color so this is off the color object so all I have to do is type in color dot theme and then I'll see all of my colors I prefix all of them with the word theme so I want something in common amongst all my colors you could prefix it with color if you wanted to or scheme you know something like that I like it so as soon as I start typing in color dot th e it just shows five colors I just pick which one I want okay now that we've got that out of way here is the canvas I'm gonna be working with and let's take a look at our numbers Stewart's first one reply he says number 12 so what we're going to do is we're going to open up Google here now last time I used Google but there are other places that you can go for inspiration one of the places I use is dribble so we could definitely go here and do a search on dribble and find something we could also use up labs that's another one that I like to use when you go to up labs I usually go to you know Android or iOS design I usually start with iOS design and then I might do a search from there so while we do that we could start here then we can count down well we might hit one of these kits hey so it might not work as well let's just uh we can use Google again let's try that and to avoid to avoid getting the same set of results every time we do this we can also search for a certain industry as well so if you guys wanted to pick an industry you could say travel or health or finances you know something like that for now though we'll just search for mobile UI I go to images and then we'll just count down from there so we have 12 so we have 1 2 3 4 5 6 7 8 9 10 10 this is the one that we did last week 11 12 ok we have a login screen here and this looks pretty simple so I'm kind of happy about that you never know what you're gonna get you know ok good so we have this uh posted by graphics and we're going to mimic her or his login screen now what I'll do let's do this let's do the one on the right the one with the text fields ok so let's see how much where are we at time yeah I've already gone through 21 minutes so I should have been watching the time or I want to keep these two a half-hour so we're going to do is we're gonna spend 20 minutes or less doing this I'm gonna start my timer here horses soccer we'll do that next time all of you guys pick a number in a topic next time and then we'll kind of randomize their results a little bit all right so what I'm going to do I'm going to take this I'm gonna put up here so I can easily reference it and let's start building this out now there's a background here so let's add a background actually the first thing I'm going to do is set my colors okay now the accent color here this is tricky a lot of I find a lot of designers don't do this they don't have a definite accent color that directs the users attention to something you know that's consistent throughout their UI that is Apple thing Apple human interface guidelines and a lot of designers they're designing for Apple and Android so they don't have these same conventions his accent color is just white so it's gonna be that same color for both and you see the problem here is look at the text so it says create a new account oh you guys can't see this I'm sorry you see his his button here create a new account that's white and then his text up here log in to your account that's also white how do you know which one's a button you have to get the guess depending on the context right with the login screen it's pretty easy but you might have other screens where it's not so easy to tell okay so we'll just stick with white our background color will stick with sort of like that blue color what I'm going to do is let's open up this side panel here I'll say show color panel I'm going to use my color picker here and I'm going to grab one of these colors that's going to be my background color I'm gonna use the same one for dark if what you can do is you can hold down option and drag it over and just drop it then you have it for both for text color I'm gonna leave it with white and black so I think I think that's all we're going to use four colors for this example so let's work with what we have here whoa Abby just flew in here I don't know if you guys saw that I left the door open just a little bit all right okay we're gonna start with the background so I'm gonna hold down command and I want to click on text that we have here and I'm going to click on each stack v stack doesn't matter I want to change into a Z stack in the end now we have a background color so this is where my theme comes in I'm gonna say color theme then I'm going to choose background let's resume this again okay now what I'm going to do here to cover up to fill in those extra spaces on the top that's considered the safe area I want to go beyond the safe area so I'm gonna say edges ignoring safe area and set that to all and then all go into the safe area and then your hold on I think I'll be okay if I don't antagonize them I'll be okay okay now what I'm going to do is I'm gonna get some images on here and some get all the visual components this is how I usually design I get everything on there first and then I start setting up the spacing sizing and the general layout of things we want this to be in a V stack so let's definitely get that into a V stack and this top one will just say log into your account I say into your account looks like we have an image there too right you know maybe I can do this I want you guys to see it whoops I want you to see it as I'm developing it so let's try to let's get this down here we can scoot it over like that yeah there we go well let me pause this that usually takes up a lot of memory okay the image that looks like something we can get from san-francisco fonts so I'm going to use a system name and then let's look that up sf symbols and that's probably a person yeah that looks pretty close right there right so in order to copy that name person circle I'm going to hit command shift C to copy it and then we'll go back in here and we're just going to paste it for that argument there we go we have a nice small person there let's increase that we're gonna use a font to increase it usually if I say like you know if I want something large large title usually doesn't cut it for me I want something even bigger like if we let's go back to our page there yeah that's pretty big right and large title isn't going to get it to that size so what I'm gonna have to do is use system and right here size but I'm actually going to use this one down here so I'm going to change the weight of that font as well let's try 150 see how big that gets oh and we got to set these other things first the reason why I want to change the weight is because I want to make it a little bit thinner so I'm going to go with light or thin should work let's try thin for design I don't care about that design is like sans-serif the serif rounded we don't care about the design okay that looks good we're gonna need some spacing and padding maybe a little bit smaller let's choose a 110 yeah it's fine all right and then we have a couple of text fields on there now for text fields we're gonna need some state variables so what I'm going to do I really need to install my code snippets on here it makes it so much easier private VAR and then we have a username and then we're gonna have one for password - okay and then we can create our text fields and we are going to give it a hint text says phone email username I'll just say email let's keep it simple and then we need to give it what we're binding it to right so we're gonna bind this to the username so now if I type in something in there it's gonna update that variable if I update the variable it's gonna update the text field it's a two-way bind all right we'll just stick with that for now we're going to now actually let's design it let's do that okay so we're gonna add some padding around it and then we're gonna add a background and we're gonna use a shape for this we're gonna use a capsule shape capsule is like a rounded rectangle but you don't have to say the corner you'll have to set the corner radius okay there we go so let's resume that you should see it now cab shapes by default are gonna be black yeah there you go so it's black let's change that to we're gonna make it a light white color like maybe a semi-transparent color so let's fill that and let's change it to color white yeah that's good and then we can take that castle and we're going to change the opacity and let's try 0.5 see how that looks yeah let's make it a little bit a little bit more solid let's try it point seven just so we can see the hint text better point eight yeah I think yeah point seven is fine okay now that we have that set up we can copy that like that and this is going to be password okay now normally I use a secure field for this so let's just change that to secure field because it's a password and then we have our login button so we're going to button and for the action we're not gonna have any action for now and let's just set up the contents of that button we have a text there it says login now I'm typing everything in you guys of course you can use you know your object browser so I could just grab this button and drag it down right well I'm typing things in because I haven't memorized okay we're gonna use the same background for this we want to use that padding let me format here we're gonna use the padding in the same background and instead of the opacity we'll take the opacity off now something very important here you guys when you when you format your button you can format the content of the button you know like a like I did here I'm saying this is the content that the text and whatever else you want to put in there icons or whatever you can also format the button itself so not the content but the actual button now there's a difference here and let me show you just real quick let me run it wait for the preview to be done here this is taking a little bit of time okay because this is a 2015 laptop now notice when I click this bun only the text is changing right do you see that when I click it just the text fades out that's because what it fades out is the content here of the button this is outside of the content so that doesn't get faded so what I usually do is when I make create a button I put all the formatting and everything inside the button itself then that way when you click it the whole thing flashes it's more apparent okay there we go now we probably want to stretch that out a little bit so it's the same size what I'm going to do is I'm going to add a flexible frame to stretch it out there's there's a couple of ways that you can do this I like the flexible frame because it's just one line of code and the way I do that is with max width and I set it to infinity so I'm telling the frame of the button that you can stretch out horizontally as much as you want until something stops you now that's not gonna work you notice the blue outline stretched it out what you have to do is you have to set that flexible frame before your background so once you have a big frame your background will fill it in with the shape so let's move that up right there that should be fine okay now I'm gonna stop there everything we have everything in place and I'm gonna start working on spacing a little bit here with the V stack I'm going to change that to like 20 we'll start with 20 Oh so what I did is I held down control option and I clicked on V stack and it just brings up the inspector okay so we have 20 there I'm actually going to increase it to 40 because we're going to be playing with shadows a little bit and then our text we want to make that white as well actually let's finish with the space here there we go V stack I'm gonna add horizontal padding to this and just say dot horizontal there we go that looks good now let's start experimenting with shadows a little bit oh I'm going to I said it's gonna change the foreground color right so what I'm going to do here I'm going to change the color by changing it on the parent when I do that no I'm not going to do that because it'll also change it for the text fields as well I'll just apply directly to the text that I want to change so let's change that here I'm gonna set foreground color and I'm going to use my theme theme foreground color and it is white and then what I'm going to do is I'm going to copy that we're gonna change the color of this logo to we're gonna make that white and if it's a San Francisco symbol then foreground color will work just fine and I think we're good we just want those two things now let's start working with shadows we really want to practice getting some depth on these elements we can apply the shadows to the text fields and to the button applying it to the logo I will let me show you what happens it might look kind of funny okay we'll say shadow and let's just start with a normal one here I'm gonna make it ten so it actually doesn't look that bad I thought it'd look worse now it does it does definitely bring it off but sometimes like when shadow I see shadow on text it makes it actually harder to read I try not to apply shadow to text I try usually apply shadows to shapes when you apply shadow to text like I I don't like that that's that's my designer side of me like that so it just I don't know to me it doesn't look as clean I will apply shadow to text if it's like text on top of an image there's a lot of stuff going on with the image and maybe there's a white parts of the image that the text can get lost in I will apply a shadow to that and because you can't really notice the shadow and it makes it the text more readable so we're gonna skip adding a shadow to the tax I think it looks okay on the image so let's do that and what I'm going to do let's use the other override here or not override the other initializer let's not worry about the color and for radius let's start with 10 and for X that's going to be zero and we're going to experiment with these actually here's what I'm going to do I'm gonna create three variables one for the radius one for the X and 1 for the Y hey welcome Stefania from latina Italy we also have Dan O'Leary from Minneapolis we have a Monroe from Richmond Virginia welcome guys by the way Italy is one of my favorite countries it's probably the country that I've visited the most I keep telling my wife bout she's never been there so we plan on going there after my daughter graduates from college or from high school ok three variables private bar radius and we'll say that equals 10 and we have X I'll call it X offset and that'll be 0 for now the reason why I'm doing this is because I'm gonna have shadows on all these elements and I want to be able to change these values in one place and have it change for all the shadows and then we'll have Y offset and for a Y offset let's start with 5 okay now let's use all these values here 5 radius rady us if I can spell it offset and when are you coming to India I've been India I've been to Hyderabad and yes it was hot I went for someone's wedding one of my co-workers she was getting married it's quite an experience okay good so what do we have here it says it's having trouble with something I usually get this error when there's too many things when I have too many views like I reached the ten now that should be is it my last thing I did was the offset let's see if that did it let's try again oh you know what I might have to do is I might have to supply a type to those variables it might be thinking that types are intz when it needs something else so what actually does it need needs CG floats okay let's make those CG floats there you go should be easy okay let's try again all right good that looks like it's working but there's uh there's no shadow so why is that let's try something here is there a shadow no I don't think there is let me try to hard-code the value yeah that works so why can't I is that a reserved word all right let me try to give it a different different name here shadow radius could've been a reserved word anyway that works so let's just grab that shadow and we're going to add it to the rest of these items oh yeah let me show you guys something here this this will be interesting you guys are gonna learn something okay let's take a look at that button first I think we're okay with the our design inspiration here so I'm going to close that now let's zoom in yeah this looks fine and let's run it want to see something with the text field that's easy it's populating that because I didn't change it over to password alright let's change that that's copy-paste for you guys right there okay now here's something that you need to watch out for it actually looks okay here a lot of times when you add shadows like for example say I took this shadow off the button and I added it to our V stack thinking what's gonna happen is it's gonna add a shadow 12 my elements which will happen but what will happen is it'll add shadows to things you don't want so you can see some of the shadows are being doubled and it's adding a shadow to our text as well and sometimes you can get in trouble by adding shadows to things that have backgrounds or overlays because what's going to happen is it's going to not only add a shadow to your background but it's going to add a shadow to your overlay and it's gonna add a shadow to you know if you have text in there if you have other visual elements there it's gonna add a shadow to everything so normally what you have to do is you have to add your shadow explicitly to just the object that you want a lot of times for like background buttons you want to add the shadow just to your background your background shape so let's do that let's add the shadow just to the capsule in this case now what I do here when it comes to background I put the my background like my shape and modifiers with one one you know modifier it's okay with like one line but soon as I start adding more I like to break it out and the reason why I put the shape on a separate line is just for the indenting that's it then denting looks a lot better because what happens is if this capsule is on the same line as the the background like this watch what happens when I indent it oh this actually looks fine normally what happens is this these modifiers do this and then I can't tell is that fill on the text or is that fill on the capsule well this actually looks good and tenting you know there was an update to Xcode I don't know if you guys updated yesterday there's an update so maybe that update fixed this that would be super awesome if it did let's see did it fix it if I add another modifier here I'm just testing right now oh I think it did this used to just indent like that oh guys this is super exciting okay all right let's not get carries stay on topic here okay we have a shadow we have it on the text fields we have it on that image and what we could also do it doesn't look like the shadow is affecting the text inside the text view so that's good or inside the text field so that's good no but if it does if it does if you have problems with it remember go into your background right here and add the shadow to your capsule so as you can see we actually have some depth here and that's looking really good and if we change the Y offset to zero so the shadow is just evenly all the way around I don't think we need to go into a live preview right now to me this doesn't look as good it gives it a little bit of is it a little bit of depth but I really like it when there's offset and the offset can be you know just going down or like I said if you have a light source make it all go from one direction we have a saranya from Brussels welcome my last name is actually a Dutch or it's not Dutch is Flemish which is a part of Belgium Belgium is split up in the two different languages he had the Dutch in the French the the Flemish which are the Dutch and the Walloons which are the French and so I'm from the Dutch side not actually from there I'm well it's Barney United States but my family is from there okay so let's experiment a little bit let me show you one more thing before we end off so let's add an X offset and a y offset and there you notice where's the light source right the light source is in the top leading corner now there's another effect that you can apply with a shadow that can really enhance your UI and that is by instead of using a solid color background use a gradient so here's what I'm going to do I want to create a linear gradient real quick I'll just call LD I'm lazy when it comes to variable names for type II I they should be longer at work at work I spell them out but when it's personal I really uh shorten them okay this will be a linear gradient and we're going to have gradient colors so gradient the first parameter there is just an array of colors and our first color is going to be it's gonna be clear and I'll show you why you'll see how this comes together and our second color is going to be our theme color our theme background color now for the starting point if you're using shadows we said that the light source is coming from the top left the top trailing so what I'm going to do is set my start point to the top trailing and that top trailing is going to be the lighter color so which is going to be the clear color in this case yeah let's do that so I'm gonna say top it top leading is the it's actually that that's the top left corner that I want and then the end point is going to be the opposite corner it's gonna be bottom trailing okay and then we're gonna use that as our background so let's change color theme background let's replace it with our linear gradient and then let's resume and there you go so you notice you know it really adds to that effect that there's a light there is a light up in that corner and the shadow is going off to the side so if you want to experiment with that and see how much more you can offset that shadow to really give it that experience of a light source in that corner you can do that now you could just change these variables and it'll change them for all of them so I think you get the idea of the fact that you can create with shadows you can really separate your UI and really you know give the illusion that there's a light source on your UI and interesting you know makes your app just a little bit more delightful for your users okay Thomas welcome from Berlin and let's see I think that's it that's all we're gonna cover in this episode thank you guys for joining I hope you learned some things about shadows about layout you know as I was putting that together and laying that out and I hope I gave you guys some ideas for your UI now if you guys want to do an assignment you can do what I did grab some source of inspiration do a search find some inspiration and just mock it up the way you normally would or take one of your existing screens and add some shadows like we did here create some variables that you can easily change and play with and add that effect to your UI and then post it on Twitter I'd love to see it when you post it on Twitter show me the before and the after because then I can really get an idea of just what effect you can create with the shadows if you guys want to follow me on Twitter it's at big mount studio let me type it in here hey you welcome Dan you're welcome Tim there that's my twitter handle you guys want to follow me if you want to post something and then tag me ahead I'd love to see your work it's very it inspires my it inspires me okay great I'm signing off thank you guys so much for attending and taking the time out of your day sorry this ran a little bit over I'm going to try harder to make these a little bit shorter it takes some practice this is all in my third my third live stream alright see you guys

Channel: Mark Moeykens

Views: 3,112

Keywords: SwiftUI, Swiftui views, swiftui shadows

Id: VskWw7L4LmM

Length: 49min 35sec (2975 seconds)

Published: Sat Jun 13 2020