FLAT vs. Depth for Web Design in 2018? A Quick Tutorial

Key Takeaways

you hey everyone Gary Simon of course etro today I just want to do a real quick video that will cover a very specific UI topic and that is whether or not you should go to flat design versus maybe something that's more 3d or has shadow or gradients so I would say within the last five six seven years flat design has really taken you know hold in terms of trends however I think you've done correctly you can't really say that flat is always better so I'm going to show you my way in my approach of designing first flat and then also doing a second variation where you introduce gradients and shadows and if you do it right it's not actually bad so I'm gonna show you here in the desktop we're going to use just for this Adobe XD or experience design and of course you don't always you can use anything else the same principles of course still apply so I'm going to use a web 1920 and let me get rid of the layers here yeah and so real quickly I'm gonna make a very simplified almost kind of sort of like a okay call it like a a wireframe I'm not going to do a full-fledged sort of layout with all the bells and whistles but we'll get most of it out alright so the very first process or the first step in this process is to always start with flat first and then work in gradients after so we'll replicate what we have here after we have it done and then introduce a variations will do actually what we'll be doing to variations so basically a total of three different attempts in terms of color gradients and all that so starting off going with flat I'm gonna make a background I'm just gonna just do like a mid blue here and for the background I'm just going to keep it kind of high in the middle in terms of brightness and on the more desaturated side I'll go ahead and also add that to color swatches here next we'll have this an actual container that will contain the UI itself and I'm not too picky in terms of measurements and making sure everything lines up perfectly it's just for demo although XD makes it very easy to make sure everything's lined up and at this point you could actually go with a white container because it contrasts well but I'm gonna choose a different route and I'm gonna make the fill here first gonna select this so we get the same color and make it just a little bit darker so we still have decent contrast on here alright so I'm gonna take this and ctrl D to duplicate it and we'll have kind of just like a vertical sidebar over here so we'll make this stand out pretty well in terms of contrast for the background and this container right here okay outside of that I'm not going to do actual icons here however I will kind of simulate what it looks like when a given icon is selected so ctrl D and I'm going to just make this all the way up there maybe change the hue just a tad bit and there we go so you see it's very quick and easy if you know what you're doing to create you eyes so right here I think I'm going to put in maybe like a label of some sort like latest resources you can't see that yet I'm gonna make it white I'm gonna use Mont Surat however you pronounce that I have no clue latest resource is something like here underneath here we'll have just three kind of just container blips I'm not gonna need to actually put any content inside of them though and I'm gonna get rid of the border for this I let's go ahead and use this color I think that actually looks pretty decent but maybe I'll change it up just slightly right around there alright cool so now I'm gonna go ahead and repeat grid pull it out and then I'll adjust it right around there I think that looks pretty even all right and then I'll duplicate that control I drag it down and then we'll just put in I don't know some random label here of other and then let me get out lips um calm well grab some filler text we're just about done all right so then I'm gonna left click and drag out an area for the type and then make it smaller secondary we can go ahead and we'll make the fill let's see here we'll get this color here but we'll make it lighter so it's not quite white but you could still see it enough contrast okay so that is it for the flat design kind of just like a wireframe for this user interface so now at this point let's say for instance we want to experiment with actually adding you know going beyond flat and maybe adding a little bit of depth and maybe some gradients so let's go ahead and control D the entire artboard and the very first thing i'll do is we're gonna take this container here and we're going to add a very soft barely noticeable shadow that comes you know kind of it'll come off to the sides but it'll also be down a little bit more so so the way we do that here is to put a shadow and then we have our x coordinates Y coordinates just make those zero and then actually for the Y we're gonna pull it down as you can see it's coming down but we're also gonna blur the crap out of it so we're gonna drag that up okay so as you can see right here it's barely noticeable however it's it does give you a nice sort of effect when compared with the completely flat design on the left so it would be silly to say that this would always be superior you know it's rather subjective so let's continue on with this one thing I don't want you to do though when you're adding shadows onto pretty much anything I'm pretty you pretty pretty much never add a shadow onto a logo in terms of like a nice soft a soft shadow like this but for almost any type of element whether you're using you know you're designing for a user interface or a poster design or any type of composition what you don't want to do is this that just looks like crap yeah it's terrible you really need to mind how you apply your shadows so I'm gonna back up you can see this is this is in my opinion a thousand times better than just going you know completely you know crazy in terms of your shadows like you don't want to do that either you don't want too much contrast in other words all right so let's continue on we can also add a shadow to this container or a gradient rather and so what we'll do is change from solid color to gradient now let me first make sure we have this color in the swatches because it's gonna change up when we go to our gradient here alright so now we can see we can drag this around if we want you know if we wanted to be 90 degrees we can leave it as it is we can also make it kind of more like 45 degree by dragging things over here I think I'll do that and so let's go ahead and make the first one the color that we started with right here and then the second color picker we can experiment with we could start off oops yeah right there let's try to make it just a little bit darker all right so it's just barely noticeable once again you know if we were to do something like this that would not look good so it's up to barely noticeable I think would work well we go back to gradient I'm not really sure if I like the idea of going I let me move let's see if I can get this adjusted here there we go I I think I might want to just stick with the 90-degree angle and that seems pretty decent we can also experiment if we want with adding gradients on to this so we'll try that and again there's really no right or wrong here for the most part at least so let's experiment we'll take this color picker here and to go lighter even if you wanted to now do you want to try adding a shadow on this now this might be a little bit too much so again there's a fine line between excessive and just right so let's try maybe zero will increase this maybe take the Y up I think is that cutting that off one second here okay yeah the actual the repeat grid is cutting off from the bottom that's why that was not working so instead all I can do is this I can take this I'm going to let's see here ungroup the repeat yeah there it is okay and then I'm just take these two and delete them and then again you want this to be very subtle I'm at five percent opacity right there alright and maybe that's okay we'll see so I'm just going to take that repeat grid once again and let's see here just a little bit more we want the alignment to be even from here to there basically all right and so you could even try further let's say for instance you want to try added a gradient on here again if you try to add it on too many elements it might be just a bit too excessive but it doesn't hurt to experiment so maybe this one could be on a 45 degree angle or so we could take this I don't know maybe make it a slightly different queue something very barely noticeable in terms of the gradient transition okay so that right there will probably be ideal in terms of trying to add some depth and color variation to a user interface especially when compared to this so again it's pretty much subjective at this point when we're comparing both of these in terms of which is actually better ultimately to find out you know based on the project assuming it's live you can find out by doing a survey but we could take this a step further some other things you can do in terms of introducing more color with your user interfaces so I'm going to duplicate this and here's just a simple trick I'm going to show you real quickly so let's just go to images at Google and you can go anywhere that you can find free images that you want to use I'm just going to type in something random like mountain all right so I'm gonna go to tools usage rights and label for you reuse with modification so you can use this and we're not even going to see mountains you'll see what I mean in a second let's also change the size to exactly 1920 by 1080 which is our artboard size and let's go ahead and I'll choose this one alright so I'm going to on my other desktop on my other monitor I'm just going to replace that drag it on to the desktop close this out and then you can't see this part but well maybe I'll show you let me just show you right here real quick just gonna drag it anywhere on to the artboard make sure you don't have any other element selected when you do that alright so now we can take this right here drag it up to the full size and then we'll go to our layers drag it down to the very bottom that kind of looks cool already but then I'm not done yet let's choose a rectangle tool alright and then hide the border for now the color I don't really care about but let's put it right on top of that that photograph and then we can choose blip background blur ooh look how cool that is so you can control the amount of blur so if you don't want just a little bit that's fine if you want a ton like in our case you could do that too so what's really cool about this black mount black around background blur is the fact that you can change the color too and this will change basically the the the hue it'll it'll basically make it barely notice the bowl so if we choose if we change this to like a um let's see here a red and the past let's see here we turn the opacity up sorry about that you can really begin to change the entire original image if you will depending on the background amount for the blur the brightness is also you can change so it gives you a lot of control which is pretty awesome in my opinion so I don't want red though let me just make it let's see here if I stick with the same blue area the brightness I think it may just take the uh passing down all the way yeah the brightness is too much right there and what I'm looking at when I was messing with these sliders is you don't want I didn't really want this container to kind of just get lost into this background color so if I were to select this again and I took that brightness down you can see all of a sudden and you get this clashing of these hues right here so you don't want that you want the contrast there alright so again there's no 100% wrong way to approach this well there is again under this extreme circumstances where you're doing something crazy like you know that don't ever do that please but yeah that is it really just for this quick demonstration go through these once again so this is completely flat again it's very effective it's very simple I'm glad this has become more of I guess you won't call it I wouldn't call it a trend because it's been around for quite a while and I think it's been a push back against we not this necessarily but way overusing you know these gradients these drop shadows and all this other crazy stuff but again this does not look bad it's definitely effective in my opinion you can mix the two styles by the way so if we ungroup this we got rid of the shadow and we got rid of the gradient still looks effective but we still have a little bit of depth as compared to this over here and then of course this one over here is just experimenting with a different type of background again you could die export this as a JPEG for instance a low quality one it would still work being that you don't need all the fine edges because we blurred the out of it all right guys I the new year's gonna be here in two days I'm really excited for the content that's coming up and yeah we're gonna be focusing on a few new technologies that can be new at least in terms of this channels content in the direction that we've been focusing on so I'm not going to get too much into that now though