6 Ways You Keep Screwing up Your Layouts!

[Music] what is up everybody gary simon here so today we are going to be checking out six different ways that i see people screwing up their layouts and their web designs or app designs uh the most common and so what i'll show you is what i see people doing wrong and then i will show you uh fixes essentially and some of them i'll show you several different methods of which you can fix these common layout problems all right so if you haven't yet make sure to subscribe and let's get started now if you're interested in layout design you might be interested in front-end development as well so if that's the case you should definitely check out the sponsor of this video screenbot.com they've recently launched their front-end development career path which is a collection of courses that cover html css javascript react and much much more as you see it's over 75 hours of awesome content there are hundreds of interactive coding challenges and it's all geared towards helping you go from beginner to someone that's hireable as a front-end developer so click on the very top link here in the youtube description and you'll get access to the front-end development career path for a low monthly fee all right so here's our first example what exactly is wrong with this this is a testimonial section that has a testimonials label and three cards underneath it so i'm going to show you how this can definitely be improved and what i'm talking about specifically is the label so sometimes you'll see on landing pages you know each section has a label like uh testimonials uh services whatever and there's ways that i you should tackle that versus which you shouldn't and this is one of the ways i would say you shouldn't and that is to encase the type or the label in a rectangle of some sort i don't think this is ever the right approach uh just because it's kind of boxing now you might say well what about these cards those are encased in containers right well they're low contrast for one and i also just think if you just have one word like a label or a few words it doesn't make sense to put it in a box so let's take a look at a couple different ways that you can handle this type of thing i when you if you need a label you want a label and you don't know you don't necessarily even need a label for this because the content itself is pretty self-explanatory about what's happening but if you want to label all right there you go already better i this just is unnecessary um unnecessary clutter this much more simple and open-ended i you can also do a couple other things uh for instance i'm going to take a design i did on the other monitor and just paste this in and there you go and so with labels you can do certain things like i you know add these little borders uh you can do things like that but also you can finally like i mentioned a little bit ago just opt not to have a label you know these are testimonials these would be people's faces of course you know unique testimonials with the names the context is there in the content all right so we go from this to this which is better this is this works as well this could be centered i if you wanted to it doesn't have to be left in line and then finally this i think all those iterations are better than this boxy approach next up here's another example where sometimes you have two columns and in one column you might have some text that's left a line or it may not even be text it might be like a picture or a photograph and then the second column you have type that is centered and this just flow throws off the flow of the layout in my opinion and one way that we can definitely improve that is by taking this and left aligning this type right there so now you can clearly see because everything starts on that invisible sort of vertical axis it just gives more structure to the layout so if you take a look at this one versus this one it's definitely an improvement so you don't want to mix and match alignment especially when you have uh you know two adjacent elements or two adjacent columns another thing that you could do is you can reverse it so for instance um if we take the original and what i mean by reverse it is instead of making both of them left line just make both of them center so i take this center as well and this here is also consistent which works another example number three high contrast thick borders i i see this sometimes in in different areas sometimes on the hero section like this example um this is just unnecessary right here this adds unnecessary clutter so how would we fix it well i would just say remove it just remove it entirely it serves no purpose honestly i and in this context it works much much better if we look at this version where we just have this big old high contrast border that doesn't really serve any purpose versus this one now if you want to do the high contrast or or if you want to do a border of some sort i i would say in this context maybe if you had like two columns we could take this right here we'll make it white and we'll also take the opacity down so real light thin low contrast borders i think are an option you can then you could have some content over here to separate them i but when it comes to thick borders like this where you're separating out content never a good look in my opinion all right number four so i see this often you'll see like a section of a landing page that has you know a clearly defined block and then inside of it high contrast cards of sort or big areas that are just kind of wrapped around this high contrast card as you can see here so i think we can definitely improve this one uh in a couple of different ways with some alternative options so what we could do is get rid of that and we'll make everything white and then also i'll take these just to reinforce that hierarchy i will grab this color and maybe bring it up and then we'll just give some white space around these areas maybe drag these two in just a second there you go do the same thing here just to give ourselves a little bit more white space and i think this right here compared to this is much better this is just unnecessary what we have is we have two really high contrast elements sitting on top of each other um and i think it's just unnecessary this right here it feels much more open um you could also do something like this if we take the same example and um we copy this if you want if you absolutely for some reason want to wrap something in inside of a container like this then same kind of roll as the borders just make them low contrast so for instance we'll take this so we can go a little bit darker maybe give it a little bit more room so you could do this although personally i would opt for this route just because it's much more simple but i would not go with this wrap for sure all right another example that i see often and this is in a portfolio section and you have your project thumbnails and they're just screen shots of the actual interface or the mobile app interface or whatever and there's text all over it it is so freaking cluttered and it just does not look good so we can drastically improve this one so the first thing i'll do is i'm going to take this background and we're going to make it white that's already an improvement and the reason that is an improvement if we compare these two you'll see that there are certain areas like based on this thumbnail that don't contrast well with the other color they're too similar to each other and they just don't look good so changing that to white isn't meaning improvement but we can still improve this much much more so what we want to do is we want to use different thumbnails try to think outside of the box think about how you can really present these in the manners i'm about to show you so here's an alternative route uh yeah there's some type in here but not much and it looks interesting it's not just a screenshot here's another one there we go so it's somebody holding a phone showing maybe you could show the app in here there's plenty of templates that you can uh use to do that like photoshop templates um and maybe if it's an identity project you know you're featuring the logo and some unique real world atmosphere so if we compare these to these oh my god it's like it's it's world apart in terms of the quality this looks this right here looks far superior than this all right and last but not least i also see i this done quite frequently we'll have a series of cards but then we just don't have consistent proper alignment uh and so i'll show you two iterations that we could work with this differently so the problem here is we have centered icons but these two elements are not centered uh they're left aligned so we can either center these elements so they're all centered or we can left align the icon so everything's left aligned so let me just show you an example real quickly so i'm going to grab all these and then we'll just push them over here we're going to drag them up and then we'll to grab all these we'll push them up and then finally get that unnecessary white space at the bottom fixed up all right so we take a look at this compared to this this has much more of a structured flow inside of the layout in the layout and hold when you just look at them from a macro perspective this is much more like pleasing to the eye um another thing we could do and this is just me having fun at this point i you could take these let's make them each large so i'll put this one right here this one right here this one oops this one over here and then finally this one right here and we could take these and there we go so just different options here um the the moral of the story here keep your alignment consistent especially in uh components you know small components like cards i don't try to mix and match your alignment because it'll just really it'll just throw off the flow of the layout overall all right hopefully you enjoyed that you learned something new let me know what you think or there's probably about 100 other things people do wrong commonly but these are the things i see that are most often or most prevalent among aspiring ui designers so anyhow make sure to subscribe if you haven't yet and i'll see you soon goodbye [Music] you

Channel: DesignCourse

Views: 13,241

Rating: 4.8854413 out of 5

Keywords: layout mistakes, common layout mistakes, ui design, ux design, ui ux, ui ux design, designcourse, gary simon

Id: DaFgHivBbBo

Length: 11min 50sec (710 seconds)

Published: Tue Sep 28 2021