How to use neumorphism in SwiftUI

[Music] new morphic design is easily the most interesting design trend of recent months or that'll be fair Apple did use it as a design motif way back at dub dub DC 18 in this video we'll look how you can build new Moffitt designs using swifty why why you might want to do so and most importantly how can modify those designs to be more accessible that's important new morphism sometimes called neo morphism has serious implications for accessibility so though it's tempting to watch the first pilots video then skip the rest I encourage you to stick around and then the downsides as well as the upsides so you get the full picture and if we get into some code I want to briefly touch on the two core principles of this design trend so we relevant as we progress first it uses highlights and shadows to define the shapes of objects on the screen and second contrast is generally reduced full white or full black aren't used which is what allows the highlights and shadows to stand out the end result is an extruded plastic sort of look a UI design that certainly looks fresh and interesting without being harsh on your eyes now I can't repeat enough that reducing contrast and relying on shadows for shapes has serious impacts on accessibility I will be coming back to this later on however I still think it's worth taking the time to explore new more prism and Swift UI even if you don't use it in your own apps it's a bit like a coding kata that will help you hone your skills ok enough waffle let's look at some code the simplest starting point is there was a new morphic card which is a rounded rectangle that contains some information from there we look at how you can move it over to other parts of 50y but the principles remain the same stop making a new IRS project like this one use the single view app template and make sure you use Swift ey for the UI otherwise this be a very confusing video I've named mine new morphism call yours ever you want now if you have access to X codes preview window that says canvas over here I highly recommend you enable it you'll find it much much easier for experimentation so we're gonna start off by defining a color to represent our off-white shade remember no full white no full black is off-white so it's not gray it's a subtle tint and a little bit of warmth or coolness to your UI now if you want to you can use an utter catalog for this and a name color but here it's just easier in code and I'll go ahead and add an extension to color I'll say my code the extension color I'm gonna find my off-white color right here I'll say static let off white equals a color and I use the initializer red green blue and for red I'll say 2 2 5 divided by 2 5 5 so quite red and for green out a 2 to 5 a 255 so quite green and for blue gets light tint it's not great at a slight tint and I say 2 3 5 divided by 2 5 5 it's a really really subtle blueish off-white color so yes nearly white but still dark enough that actual white will stand out I heard glow when we need it so now you can fill in the body for our content view down here just hello world right now we can give it a Zed stagnant takes up a full screen and he's our new off-white color to fill that whole space a replaced text hello world with a Zed stack and right there I'll just do our color off white so it fills a whole screen tell us staying edges ignoring safe area dot all and then ask my preview to resume so hopefully see how that looks and boom I mean you've probably had him turn the video that's not white but it isn't quite white you play it back in the simulator you'll see the white status bar does stand out ever so slightly on that background so it's not pure white it's just that off-white so that pure white stands out as a glow so we're gonna use a rounded rectangle for our card and we'll fix it I was 300 by 300 make it a nice and clear space on the screen so we'll do that by going back to our code and after the off-white Zedd stack I'm going to add our rounded rectangle so I'll say there's a rounded rectangle I'll use the corner radius initializer I'll say it's got a 25-point corner radius with a frame and I'll do width of 300 height of 300 like that and that'll have a default color of black you see it jumped into space there take out all this space and a rather ugly black color but of course in new morphism we want to dramatically reduce contrast and so we're gonna replace that black color with the same off-white color we used for our background effectively making that shape completely invisible so down here I'm gonna say before the frame dot fill color dot off-white like that so now you can't see it in the preview cuz it's got blue border around it but it's basically gone and so we've hidden the box effectively but now for the important part we define where that rectangle shape exists using shadows one dark and one light as if there were a light casting rays from a top left corner of the screen as it actually fairly easy to do in 50y because we can apply modifiers like shadows multiple times which makes new moralism super easy to achieve and so we're gonna add two modifiers to our rounded rectangle when they say this thing is filled in the color off-white how the frame of funeral by 300 but then has a shadow and I use this color radius XY initializer here I say the color is going to be color black got opacity so not full black not point to so mostly transparent black for radius I'll do 10 points then for X the offset of this thing I'll say off at my X 10 + y 10 so up here just about in the bottom right of the the square here and then we'll do another shadow in the top left corner so I'll say another shadow again with color radius x and y the color will be colored up white so a white shadow but with opacity of not 0.7 so 70 percent visible all right already sit still 10 points of X&Y I'm going to do minus 5 and Y minus 5 so pull it 5 points up and left through a dark shadow in the bottom right and a light shadow offset in the top left and that light shadow becomes visible because we used off-white for our background and a combination of two if I build the code and run it back hopefully you can just try to pick out we have this white glow defining the rectangle here and also a shadow down here so it becomes visible on the background because of those two shadows and we've written what I mean that's pretty much all our code plus a a color here but already we have this nice new morphic card I hope you'll agree Swift ey makes this surprisingly easy as UI elements go cards like this one a fairly low risk anymore prison because as long as the UI inside the card is clear that card border itself could easily not exist and you wouldn't really affect the accessibility of your UI buttons on the other hand that's a different matter because they exist to be tapped right that's the point of these things so reducing their contrast can do more harm than good I want to explore this with you by making a custom button style which is how Swift UI lets us share button configurations in many places it is much more convenient than trying to attach lots of modifies every button we create having lots these things below every one of them is used to find the style once and share it in many places I'm gonna start by making a button style that's effectively empty there's a passing through stuff switch of all hand Leslie the label for the button which might be some text or and they made your or both or or neither becomes entirely and will send it back unmodified so I'll go ahead to good Xcode and add this strut somewhere outside of content view so can be used elsewhere I'll say struct simple button style it's in conform to the swift UI protocol button style until conformed button style you must implement one method called make body I'll just make this thing or turn some view like that boom and in here all we'll do is take the label we're given and send it back so the text or the image whatever is we are given we don't care what it is just send it back straight away and that configuration label is what holds the contents of the button I'm going to add more to it shortly first though I wanna make a button that uses that style you can see our design evolved over time so I'll get rid of us around a rectangle down here in content view and replaced with a button I'll say the button with an action and we'll say when it's tapped we'll just do bottom tapped doesn't really matter what does but it's just there as a placeholder and for its label the thing inside there I'll do an image using the system name initializer to get SF symbol stuff I'll say heart dot fill and give that thing a foreground color of gray and critically button style our simple button style like that it knows to use our custom UI for the button but right now of course just a pass through the next special at all you can see it there in the canvas if we run it back in a simulator you'll see what I mean it's just an empty simple button boom is it's nothing special right we can fix that by adding our new morphic effect to the button style this time we're not gonna use a rounded rectangle because for simple icons like this one a circle looks better but we do have to add some padding so the tap area is nice and big so back in Xcode again and we'll look for this make body method or a same about the label I'm going to modify that thing so we add some padding around our button then place our new morphic effect as a background to the button so I'll say have that label then a padding of 30 points on all sides then for the background let's a tab this neatly boom and in there and there the background I'm going to place a circle using the fill of color dot off-white our custom white color and then I apply on numeric shadows so I'll say we have the first shadow which was remember as whose initializer that one it was color dot black with the opacity of no point to the radius of 10x of 10 and Y of 10 and then the second shadow was initializer color white dot opacity not 0.7 radius this time will be ten still but we'll use minus 5 and X minus 5 for the shadows offset make it look not quite a far away as a dark one and I'll run that back in a simulator again and you'll see how it looks boom basically gone a lot of the way towards the effect we want but it doesn't behave well in practice you know if I if I try and press this button you'll see it prints a button tap which is just great but there's no visual representation of that it just looks odd it's not moving or highlighting or pressing in or something when it's activated which just looks odd quite frankly and to fix that we have to read the is pressed property of the configuration passed to our make body method over here in Xcode this thing I'll tell us if it's pressed down or not it was actively being held down by these finger and iOS or mouse pointer on on Mac OS and it's our chance to adjust our styling give some sort of visual indication of whether the buttons currently pressed and again we're going to start simple and work our way forward we're gonna start by placing our background in a group and then check configuration is pressed and if it's either down or up depending on whether it's pressed or not so I'll say that our background here has a group inside of it and I'm gonna put this whole circle in that group like that boom and inside the group that's where I'll check if it's pressed or not so I want to say here if the configuration is pressed so I say if in figuration dot is pressed then we'll just do a off white circle so I'll say Circle dot a fill color dot off white if it's not pressed if the users not holding down it right now then we're going to show our existing circle code like that so everything hinges on the value of this is pressed is this thing being held down right now so hopefully if I press command R we can give that a try and there's our button and if I try to press it this time you'll see it goes down and up again and out comes button tapped so that's working quite nicely right lots of times you'll see lots of button taps here if I clear that output window press again on the heart you'll see button tapped if I press over here away from the heart you'll see it goes down and up but there's no more button tap being printed out I've got a tap on the heart itself to get button tap being printed out tapping in this space triggers the down up motion but isn't triggering the button itself which is a problem and wheat so we we actually just accidentally made the capital area for our button really really small you have to have the image itself inside the button not the new morphic design around it to fix that actually very simple we have to use the content shape modifier saying this thing is a full circle and you'll put that after the padding so if factors in the padding to the button size forcing Swift's UI to use all available space for that tab so I'm going to do that in our code now here's our padding being applied I'm going to say this thing at this point has dot content shape of circle like that use all the space we have and now press command R again I can type anywhere to get the effect but also C button taps being printed out each time so that's a big improvement so this kind of looks okay I mean it's it's it's better the buttons obviously got two states now at least it is better nothing but we can do better now we could create a fake depressed effect by flipping the shadows basically copying our two shadow modifiers from a regular effect and exchanging the white and black values for the X&Y let's give it a try see Outlook so you can see what I mean by fake because it isn't really ideal so I have our modifiers here I'm going to take those two and apply them to the is press state as well so we have the same shadow on pressed and not pressed but we'll have to do though is flip the X&Y value so we have the black being put X 10 Y 10 and white being put it - 5 y - 5 I'll put that around so we'll say black we put at minus 5 y minus 5 and X we'll put that at 10 and 10 so we've flipped around the X&Y for the white and black and that will cause a sort of faux the press event that's try on so you think and our button press down in it there you go so Amit it kind of works so our current code works it works fine but people interpret this effect differently some see this thing when it's pressed in as a concave button when it's been pushed inwards others see it is still being convex you know raced out the way with a light coming from a different angle just moved from one language to another language is what of course it actually is doing a much better idea is to make it in a shadow and it looks much more like the buttons being pressed inwards now this doesn't come in Swift UI as standard we can make one easily enough now creating these things requires two linear gradients and either be the first of many gradients we'll be making this video here so we're gonna add a small helper extension to linear gradient to makes these span the gradients easier to make I'm gonna go up here before our struct and add an extension on linear gradient and this will be a new initializer it takes a colors very attic like that so if we one color three colors ten colors thousand colors I don't recap some number of colors in there and all we'll do is pass it on to the regular initializer like this passing in a gradient like this now the colors will do whatever colors they pass in to us I'll just say colors colors for the start point I'll say dot top leading the top left corner and the end point our say bottom training so the end in the bottom right corner these diagonal gradients now very very easily with that in place we can now just provided a list very addict list of colors to get back a linear gradient of them in a nice diagonal direction it's gonna look great that's the important part rather having our to flip shadows down here there's still hack we're going to do something quite different entirely we're going to overlay a new circle on top of what we have our pressed circle then give this new circle a stroke and blur that stroke you get it's blurry stroke then mask that blurred stroke with another circle that has a gradient that's a lot but round break it down so our base circle is the new morphic effect occur we have right now that's our base circle filled with our off-white color we then place a circle over that stroke with a gray border and blurred a little bit to got a soft gray border edge over our new morphic effect button we then mask that overlaid circle with another circle this time filled with a linear gradient and when you mask one view with another view swift UI uses the alpha channel of the mask to determine what should be shown of the underlying view so it's the important part if we draw a blurry gray stroke then mask that with a linear gradient of black to clear alpha 0 and the blurry stroke will be invisible on one side and fade in on the other side it's lovely smooth grating effect it was great and to make the effect more pronounced we can actually offset these stroke circles a little bit in either direction and with an experimentation I found that drawing the light shadow in a thicker line really helped you know maximize the effect really hit hard on the new morphism I remember new morphism uses two shadows one light and one dark to create sense of depth so we're gonna add in a shadow effect twice with different colors so under some code here this is hot was all in the configuration is press section of our code I'm getting two shadows I'll keep our current circle this thing and our current fill of off-white that isn't changing but I'm then going to do an overlay on that thing there so on you there we go in dead slightly boom and overlay inside there this our first circle so I'll say our second circle I'll overlay it with another circle and if I draw that back you'll see it it just looks grim by default because I'll just place a nothing like that useless I bring it back it's emitting see what I mean should just see a colored circle there we go there's plain white circle not we want we're going to stroke that thing in great so I'll say the overlaid circle has a stroke and we want content line width so the content will be colored up gray a line width will be full right eye again will see or being well there's our gray stroke I'll then blur that stroked circle I'll do blur with a radius of 4 points so the full width of online and that getting feel it looks like there's our blurry stroke boom and I'm gonna move that slightly dot offset by x2y2 just a little bit off down and to the right pulling it into the area of our circle you can see it isn't quite centered on the heart anymore like that and now for the important part we're going to add our third circle the masking circle I'll say there's a mask on that boom and that mask is another circle this time filled with that linear gradient using our new initializer and this thing takes a very big array of colors so I'll just do colored off black and color clear like that so we've got the first circle which are simple off-white background the second circle overlaid it which has that blurry stroke slightly offset and that circle is masked using a linear gradient an hour or night like again and you'll see how that looks boom look at that that is an inner gradient right there in a shadow that looks super nice great so that's our first one and we want to have effect light and dark at the same time what I would say is that the colors we use for this linear gradient don't really matter we're going to clear on one side which is what does matter black on the other side could be red or blue whatever that's not what you're seeing when you're seeing this sort of like um dark area over here that isn't coming from our black that's coming from the gray stroke we made that's what you're seeing there what we care about for this thing is any color that has full alpha so even if I had you know orange here it really wouldn't matter it'll still look exactly the same it has the same alpha value we're doing masking here not drawing anyway so that is our first overlay will then add a second overlay so I'll do another overlay here boom not all activation over a by itself boom and indent it that add another circle inside there and there's like before we're going to stroke this thing I'm gonna use color got white this time this is the highlighted side and give it that thicker line width I mentioned to really emphasize the bright glow on one side of this thing then for its blur again we'll do the same blur radius so isn't any more blurred than the other one then we'll offset this thing I'll use the opposite the other one so it's X minus 2 y minus 2 and then again the mask so we'll do a mask using the circle sir cool boom and then fill that thing with a linear gradient and this thing again take some color so I'll do color got clear comma color dot black so go in the other direction now so we have the same thing this time in Reverse the other side so let's uh we're missing a parens here that one that one there great cool so let's run that code back and see how the combination looks okay there's our nice emphasize glow Anna a nice shadow both coming together at the same time smoothly blending in the middle it looks much more pronounced but I think much more effective now before we start looking at how we can improve the accessibility problems of new morphism let's take a look at how we can play with the effect to create other interesting styles so first I want to go ahead and add two more colors to our color extension up here you have this off-white color right now so we're gonna add some more here so I have some more constant values to work with I'm going to say static let dark start dark start equals a new color with the same red green blue initializer and this time we're going to use for red 50 divided by two five five so dark then 60 divided by two five five and blue 65 divided by two five five this has got a sort of greenie bluey tint to it and then static let dark end equal a new color and again red green blue boom and we'll use lower values now so we'll use bread of 25 divided by two five five and then green of 25 by two five five and blue of 30 divided by two five five so it's a greeny blueish color what we see on the screen so now we can use that as the background for our content view we have that off-white color right now and I switch it out to be this new color instead which is down here our off-white color we're gonna use our new linear gradient initializer to make that easier I'll say there's a linear gradient using colors of color dark start and color dark end boom that hopefully will see our layout the bottom now looks strange because it's of course got this bright styling on a dark background so we're going to create a new dark style that works better in a dark layout and this time we're gonna try and split our code into we'll create a background view that we can apply anywhere you want new morphic a design in our code then a button style that wraps that alongside the padding and content shape modifiers this allows some more flexibility as you'll see it's gonna be awesome so the new backgrounds you're gonna add will actually allow us to specify any shape for our we aren't as tied to having circles everywhere and it'll also track well they want to have a a concave or convex effect you know is it in or out depending on and is highlighted property we can send in externally to control the effect externally so when I start off really simple using the same modified flip of shadow approach we had earlier on just slightly modified to get a simple press effect so we're gonna do is ice to make up by a new view type to handle all that so I'm gonna let's go here's financially I'm going to say that a new struct which is called a dark background and I'll say this is generic over some sort of shape there could be a circle could be a rectangle roundedrect or a capsule or a custom shape we don't care what it is anymore it can handle any kind of shape and it'll be a view and it'll have two properties inside there one is is highlighted which is the boolean is it currently depressed or not activated or not the second will be the shape we want to draw like that and that's the generic parameter coming in capsule circle whatever and then it's body by body some view we're gonna have our layout of stuff here this will be our background we want to draw our new morphic effect and this where we have our is hyda code and whatever you want to and I'll put all that inside a Zed stack we can layer things if we need to well then say if we are currently highlighted awesome we will draw ever shape we were asked to draw might be a circle we don't really care well then fill that with color dark end the darkest dark we have defined not black just duck then will you use our shadow I have a color we'll say color dark start radius will be 10 X will be 5 and why are we 5 then do another shadow with the color of color dark end where it's 10 and we'll do minus 5 minus 5 there we go I'm minus 5 as if were highlighted draw that dark end with the shadow on either side otherwise if we're not highlighted all draw the same shape then fill that with color dark end still same color well then give that a shadow using color base XY color now will be color dark start boom with radius of 10 and this time I'm gonna have minus 10 and minus 10 giving a stronger view and isn't being pressed and then we'll do the other shadow using color again of color dark end radius of 10 x of 10 y of 10 so we have both these shapes being used for the button depending whether it's pressed or not so the modification here is very simple the shadow size is slightly smaller when it's depressed it's not 10 points it's 5 points that's the small difference I've made this it looks better in dark mode I think so that is our dark background some sort of view we can put behind something else it's not a button style it's a generic background let me use anywhere that's important we can now wrap that inside a custom button style it applies padding and a Content shape so we'll say struct dark button style conform to button style yes make some space down here there we go I will have you know funk make body like last time and make the stainless return some view boom like that and we'll pass in our configuration label whatever is inside the button give it that padding of 30 and our case of these buttons this will have a Content shape of a circle like that and for the background we can now use our new view we can say that our background uses our dark background view and let's pass some parameters here so we'll say is highlighted will be configuration dot is pressed I have a shape we'll use circle we could use something else you wanted to but circle here is fine and finally we can activate that for our buttons right now we have this button down here content view which is a simple button style we can activate that by saying I want a dark button style here instead I give that a try let's see you think of that I press play and we'll see it ourselves here you can see lovely sort of pillowy smooth button or a press in flips around like that really simple but nice effect I think give a little Co we've wrote I think it looks pretty good so now's a really great time to experiment with this effect so you'll help you understand what swifty Weis doing for us how these button Styles work and how new morphism could fit into your UI designs if at all for example we could create a smooth bump like button by adding a linear gradient we have the sort of flat color right now this whole dark end color in the middle and we got a smooth gradient there instead using a linear gradient and flip it when it's pressed this is really easy to do thanks to that initializer we made for linear gradient so back in our code we have boom up here we have this whole dark end thing going on that works to get started with we replace that with a new linear gradient and give this thing color dark end and color dark start as parameters then put the same thing down here in the unpress state and just flip those around so we'll do cuz Dark Star and then color dark end so the same values just in a different order now if you try that you'll find hopefully this sort of smoother there we go super pillowy effect now you can just press that in look at that it's a bit squidgy lovely it animates up and down as you release it and activate it it looks nice I happen to find animation that bit distracting so I would recommend that you disable it that's fortunately very easy to do if you go back to your button code down here you can just say after this background animation nil and scrap generation entirely and it's gets over a a quicker button press going on like that boom there we go this pillar effect I think it's fascinating I think it's very interesting and very nice for some UI designs perhaps but if you're considering using it I would suggest you try out at least three changes to help that button stand out a little more because it's super super low contrast right now you know first even though it directly against the low contrast principles of new morphic design I would just ditch this gray color for the heart and go with white instead so it stands out significantly more so we have foreign colour gray I would say instead foreign color of white and it pops much much more as you can see it was gray like that dark and dim now it's white stands out much much more you're much closer to getting the recommended contrast ratios for your colors which is great secondly if you add an overlay in the pressed state for the button not only does it look more like a physical button being pressed but also helps distinguish that pressed state for its unpress state and it's actually a space to do so ever do is go up to our code again which was up here here's were pressing the button or not and we'll say this thing to have a linear gradient which is fine but after that we're gonna add a overlay we're gonna say add another circle another shape in this case we'll use a generic another shape over that thing with a custom gradient to add a little border around it so I'll say after the film dot overlay boom I'm gonna use the same shape we had already whichever that is gonna be and we'll stroke that shape using another linear gradient you can see now I have that convenience initializer because it makes life so much easier I guess a is house color dark end as our ducts start and then color got dark end that's the opposite direction to the fill we have which was dark and dark start is a dark start back end and then we want to have that stroke have a line width of 4 points so a nice chunky border when the thing is being pressed down add a small small change but let's try see you see I mean it's pretty clear nice pressed in click see that nice bevel appears around the button is now more obviously being pressed which is an important thing having actual visual representation of activity you know really really matters you knew you know for an even sharper look you could actually remove these shudder modifiers entirely you don't need these two if you don't want them for the pressed state if you were to comment out these two for example you would get just that sore press bevel like that so you can choose nice sort of glowing smooth pillar button without pressed and then harshed press the button when it is pressed either way it's pretty clearly not the same state which is what really matters here the third thing you do is to add an overlay to the unpressed state again just to highlight that this is a real button it's really interactive and so you put that after the fill modify in the unpressed state you'd say overlay using again the same shape we had stroke that shape and we'll do the whole thing in that dark end color so it's a dark color with a line width of let's do four like that boom that boom so we get this an overlay when it isn't pressed as well I press command ah now you'll see it's really clearly a button it has this nice black border around it this thing is standing out on the screen when it's pressed in and that bevel effect as well so it's an improvement it's still not anywhere near as clear as it ought to be quite frankly but we're gonna get on stat soon now one of the benefits of splitting our button style from our new morphic background style is that we can now add a toggle style using that same effect this means making a new strike that conforms to swift you eyes toggle style protocol or just simmer the button style except that first we get configuration dot is on the track where the toggle is enabled or not and second we have to make a button ourself to handle the actual toggle action the flip that is on boolean or at least some sort on tap gesture or similar so we can do is we can go back to our code and then underneath here and they start button style we can add a new struct to handle our toggle style I'm gonna say struct dark toggle style conforms to toggle style and just like button styles has one method you must provide which is called func make body may return some view that inside there they have a button to toggle that boolean so we'll say button as an action and all doing their say is configuration dot is on toggle flip the boolean every time this button is tapped and then if the label of the button I'm going to say our configuration label so again what's inside the toggle with some padding so I'll say thirty points of padding again nice chunky finger tap with the content shape of our circle and then after the button not the image or label inside the thing I'm going to apply our new morphic background effect so I'll say we've got a background using that dark background we made earlier is it highlighted that's going to depend on configuration is on I have a shape will use a circle again like that and we want to put one of those in content view so you can try it yourself and see in action so to do that we're going to start by making a new property that will track the current of boolean property being flipped in the toggle down here at content view I'm going to say we have at state private VAR is toggled catchy name is false and next we're gonna wrap this button we have already inside a V stack with a spacing so we can place the button and a toggle side-by-sides you can see them both in action as we work so we'll save a full button there is a V stack and push all that inside there I don't really want this button toggled to be overlapping because their shadows would look strange so instead I'm gonna add a little bit spacing to that V stack and I say this thing has spacing of 40 points so things are spaced out quite nicely in the screen and below the button I'm going to say that is a toggle and if it is on property I'm gonna give it dollar is toggled like that for its label we'll do the same thing here before words image system name I'll use heart dot fill again creates a nice little shape with the same foreground color got white - it's nice and bright on the dark background and we'll use our toggle style toggle style of dark toggle style boom like that so that's our new content view using our custom toggle style like that I'll press come on our open well it should retain the same thing we already made for the button so on top of our button like that and below a toggle it's now pressed press again it's unpressed so we now have that same new morphic design that same piece of code being shared in both places it's a much much easier way to work we've now had ample time to play around with the various new morphic styles but I want to address its problems head-on the extreme lack of contrast we have in our buttons and our toggles and other important controls means they don't stand out sufficiently from the other things around them which makes it hard for folks with visual impairments and similar to use our apps notice the point where I've seen some confusion circling so want to try and clear a few things up up front yes I realize apples default buttons just look like blue text okay they don't look like buttons at least at first they do have a high contrast or ratio they stand out on a white or dark background second it is not enough to say well it works fine for me well I'll add a special option to make it more accessible to folks who need it and that doesn't work accessibility isn't a nice thing to have it's a requirement our app should be accessible by default rather than opt-in accessible available to everyone by default that's our goal and third the controls we made this button on is toggle they're still Swift UI buttons and Swift dy toggles which means that all our changes haven't affected their visibility or their functionality for voiceover or Apple's other assistive technologies now you already saw with a very simple change how you could switch out gray icons for white icons and get an immediate boost in contrast without losing too much new morphic quite frankly but buttons and toggles still need a lot more contrast if they want to really be accessible to everyone so we're going to explore what changes we could make here to help things really stand out without straying too far from the new morphic design style first I'd like to add two new colors to our extensions we have some bright colors to work with and really contrast the colors to work with so up here in our colors extension all the way up here boom below dark start and dark end we're going to add two new colors we'll say static let light start equals a color using red green blue and is it being much brighter so red is sixty through our 255 green is going to be 160 divided by two five five so quite green and then blue will be 240 divided by 255 it's almost full blue so this is going to be a psionic blue then we'll say static let light end the other side of our light gradient there going to be another color and we'll say this has the same red green blue and all we'll do is have the values from the start so we'll say red will be 30 divided by two five five green will be 80 divided by two five five and blue will be 120 divided by 255 so those are the new cards we want to include in our gradient the second step is going to duplicate our existing dark background struct so we have it down here somewhere dark background I'm gonna select that whole thing and just copy and paste it in there boom I'll rename it from dark background to be colorful background like that now I'm not gonna change anything else inside there we'll do that shortly we'll get some setup done first though that's enough for now our third step will be to duplicate the dark button style and dark toggle style strokes I'll select both those two paste both those in and call this the colorful button style and call this the colorful toggle style and inside there they will use colorful background and not dark background here and here boom okay that hasn't actually changed anything yet we'll just copy and paste this stuff and rename it slightly almost done the setup code we're gonna go down to content view now we make our button and our toggle or make those things use the colorful button style instead and the colorful toggle science dead remember we haven't actually changed what those styles do we press command idled build and run your new code but it will look identical right there's our buttons pressing it it presses in and look like that nothing's actually changed here okay to bring our colorful version to life we're gonna change the modifiers you go to our code again up here for colorful background where are we that butter and come back out here we have fill oval a shadow and shadow we're gonna change the fill and overlay modifiers for the pressed and unpressed States so when is highlighted this thing here is true when it's toggled on or the buttons being held down we're gonna change dark in the overlay to be light and in the film so the rallies in dark start and dark end it'll be a light start a light end in the fill and overlay so here we have dark end I'll say a light end we have dark start becomes light start and light start here and light and they're so a fairly small change but if you're on the app now you'd already see it looks like a big improvement I press command ah presses buttons boom it's now got a much clearer brighter more obvious activated state that toggle is now clearly on it's ready to go right but we can still do better you know we you have the same color this this blue could be applied around the button around this of black thing here when the button isn't pressed helping draw attention to it making it clear this thing isn't attractive button after to do that or to modify the overlay modifier here this thing here for our non highlighted state we have dark hen right now as a solids of dark color around the circle will train it to be a linear gradient using color dot light start and color dot light end so we have dark start and dark end for the fill and then light start and light end for the overlay so using different colors at the same time when I press command R now you should see how that looks boom so the button and toggle when they aren't pressed have a blue border around them that makes it clear these things can be activated they stand out from the background really nicely and still get this off full-on button press when they're depressed or I enjoyed it like that and I think it looks significantly better and it's ending a lot clearer for everybody not just folks with vision impairments in practice you're just not gonna have all these multiple button backgrounds and button styles and toggle styles in the same you're just not unless you like creating a headache for your users but it is fun to experiment and I hope that's something that's come across in this video because you can create some really beautiful effects without a great deal of work thanks to the way swiftie wire lets apply modifiers again and again like shadows and offsets and more now I have repeatedly said that I hope you always keep an eye on your apps accessibility that means more than just making sure whatever works with your UI okay make sure your buttons look interactive make sure your text labels and your icons have sufficient contrast ratios to their backgrounds at least four and a half to one aim for seven to one really contrasty and makes your tap areas are nice and large at least 44 by 44 points so by all means use new morphic design to experiment have fun use it to help increase your knowledge of swift UI but never forget if you sacrifice usability for a fancy new design trend no one wins if you enjoyed this video hit the subscribe button I make lots more like this one teaching you swift swift UI and much more free right here on YouTube you

Channel: Paul Hudson

Views: 31,601

Keywords: neumorphism, neomorphism, neumorphist, neumorphistic, swift, swiftui, design, trend, code, ios, xcode, app, project

Id: z3tJdxwlo_Y

Length: 51min 8sec (3068 seconds)

Published: Wed Feb 26 2020