Your Layouts are BORING! Layout Design Tutorial

Key Takeaways

if all your designs look like this boring cookie cutter web design template and you want to make something that looks more unique this video is for you hey yo what's up Gary Simon here so today I want to talk about a layout building technique if you will and how I like to approach building layouts that I think is really gonna help a lot of you break out of the typical hero section with the center text or even just standard boring web designs that you see everywhere and then this technique will really help you branch out and be able to create your own unique layouts you know layouts perhaps sets so people have never seen before and also make sure you know while doing so that you are adhering to good solid UI design fundamentals alright so make sure to subscribe if you haven't yet and let's get started before we begin the node makes it easy and affordable to host your website your portfolio your online store and more on whatever technology stack you use getting up and running is fast and easy with one-click app installs like WordPress and Drupal with back-end access to your server customization and scaling options are all but limitless if you just need something small like an online portfolio to showcase your work Linode has you covered if you need to manage tons of clients websites and reliably serve them to millions of visitors Linode can do that too so sign up using the link below in the description to get $20 in credit on your new alone owed account alright so here I am in Adobe XD you can use whatever app you wish it doesn't matter and I want you to start thinking about when you're constructing a layout i boiling it down to something more simple and you can call them blocks or you can call them containers and a block or a container is created when you add any element that has high enough contrast so you're probably confused on what I mean but let me just show you maybe just a couple examples are an example to show you what I'm talking about so think about for instance a button just a simple button where it has you know it's like maybe it's a rectangle with rounded corners whatever with some text inside of it let's just get that out so we'll put a button here near the middle I will get rid of the border won't give it a background color like that something high contrast with the background this right here is a is a container it's a container of sorts right we can stick something inside of it sometimes you know if it's a shorter smaller small button like a square button you have an icon in it if it's like this perhaps you'll have text in it sometimes you can have text and the icon either way this is a container and whenever you're going to put something inside of this container you have to adhere to basic design fundamentals those basic design fundamentals are contrast so if we put something in here that's meant to be read like type for instance or an icon it needs to be has a lot of contrast based on the containers background color in this case it's a button background color right so contrast is one color is another one you want to make sure that you're using colors that complement each other well and work well as well another outside of color and contrast is scale you don't want to put anything that's meant to be red for instance like type or an icon too small or too large alignment or proximity that's also very important for instance if we add some type like I my button well we can now all the other design fundamentals but if one of them are off such as proximity or alignment it just throws the whole thing off so we're gonna make it white so that color and contrast is taken care of because white in this instance on the darker background eye is a hundred percent contrast we're making contrast as much as possible but proximity or alignment you can use those interchangeably I think I'll just refer to as proximity we have the if you stick the button up there it just looks absolutely ridiculous right so that's another design fundamental which is proximity another one would be visual hierarchy which we can't really illustrate that here visual hierarchy comes into play when you have multiple elements on the same layout I and those are basically the fundamentals so it's color and contrast scale visual hierarchy proximity and I may be forgetting one in the back of my mind but every time you make a decision in terms of building your layout like we're going to do you have to think in terms of blocks alright and along with all those UI design fundamentals for each block that you create and then visual hierarchy comes into play when you're looking at the big picture which is the layout which is just a bunch of blocks that's attached together so let's create a layout with this in mind so we're gonna I'm gonna go like a dark UI for this one so we're gonna choose like a darker background color not quite black we were right around there one C one C one C and we'll have next a I usually when I start on a layout if I'm going for a desktop or even just mobile I want a I want to put my headline on there you don't always have to - it's like a personal preference so I'm gonna pull it to choosing a color yeah we'll do this color scheme alright so yeah largest make it larger alright well put it right there gonna choose a different font this time something I've never used on this channel before I know we're going crazy here near 2020 and that font is Nusa next STD I kind of like it has a several different weights light medium I think we'll choose medium for this and let's take our line height just in a little bit and like I said we have one block to begin with right that is the canvas itself that is a block I when we create another element like this for instance I this little headline which I decided to put it on two lines it doesn't matter that's not necessarily a requirement you can put it on one line whatever you've essentially created another block and I'm not talking about just the headline itself yeah this is a block we can see the outline when I select it right because it's text layer yeah that's a block but the block actually can help extend vertically and horizontally so here's what I'm talking about this is just temporary I just want to illustrate what I'm talking about we have a block here that's created take the soap acity down and then also we have a block here that's created in terms of basically these columns and these rows that are created when you create a block so you don't see these right you don't see these explicitly unless you integrate them to the actual design but really what you end up seeing I'll pull down a guide here is at the bottom of this type we see this if I move this down we see a clear sort of path that's created and that helps out your alignment I big time when you're trying to add other elements or in relation to this particular block so if I want to have like a sub-headline for instance I I'll just put do choosing a color screen yeah it's not very difficult like you may think or something and we'll put this down a lot and maybe we'll make it regular all right and we want to align this on the same exact path if we were to put it to the right for instance as that would help us a lot so if I remove that now maybe we'll make this a little bit larger we can suddenly seen that this just seems to flow a lot better than say something like this it's off slightly you could perhaps Center it within that invisible block or you could perhaps put it up here but I think personally it might look best here so that's just one example of what I'm talking about when I say blocks for instance so for this choosing a color scheme I'm going to have an actual kind of like a paragraph I think we'll just put it right here and we're gonna put it right on this invisible line where you can see at the very left of the C I in the OFC from choosing and color it's gonna start right there on that vertical path now for now I'm just gonna do this I'm going to go to my plugins I'm gonna go to the C lorem ipsum fill with placeholder that's a lor nipson is a plug-in you can get and let me bring this up let's make this eye light I think put it right around there so rat right there it's pretty solid in my opinion it works now let's try to add in just a random element of some sort like a random block so I'm just gonna draw out I'm gonna hold shift and create a I don't know a square and this square I'll just put maybe right here and then I'll put well give it some color perhaps so it's like a kind of a Cappy Koosh color there we go and then let's just duplicate this we will put it right here right next to it perhaps I want them to be the same size so I'm gonna take them both and scale them up let's choose like a different color for this one maybe like a tan or something right there okay so right here we've created two blocks essentially and because they're high contrast we can see that I if we add those different overlays you would see that actually I can just drag down hey guide I'll drag down multiple right here is a block that's been created in this section right here you could also see where it says choosing a color scheme it's kind of interceded this block right here in this vertical line so we have some options so first of all we'll forget about this one for a second I if we really want to line this as much as possible and try to really create good alignment in proximity I we can try to align this this particular piece of I type this lorem ipsum type so that there's equal amount of white space or negative space it's the empty space around your elements and inside your blocks and outside of them I on the top like above it and also below it all right so that's very important and it will really help just kind of I make your layout look a lot more professional and just flow better so we have this one like a lined up here so we're going to do with this one well we have let's say this is where we want our types to to be we can pull out another I call guide we can see it starts here so it probably a good idea to make this one start there as well so now should this go maybe in the middle of this block well I kind of want to have a logo at the top so that's going to create another block section at the top but what we can really do is we could probably just put this right on the base line and that's okay because this block and this block have the same background color and so this is still gonna have white space beneath it if that makes sense so if we get rid of our guides here we could see now this actually seems like a cohesive layout we could perhaps make this a little bit longer so that it fills out this particular block a little bit more because we've created this just random design element over here this could be by the way a photograph it could be any number of things it could contain its own content inside of it it all depends on your individual needs let me go ahead if you really want to by the way this isn't really about layouts and with the purpose of this tutorial but if you really want to emphasize I one type element over another like this we've already done it through scale right so your eyes immediately going to see this headline instead of this one right because it's a lot smaller but you can even further reinforce that through contrast so we could take this and we could take their fill we can maybe take the background color and then just oh it's already gray so we can just go up a bit and you want to make sure that you do at least adhere to the wcag 2.0 color contrast guidelines there is a plug-in called Stark which let's see here check contrast we can do rapid contrast checker alright so we can see this already passes the test it's a seven point seven seven I did a video on this by the way if you want to search my channel for that so so we've created a layout that works I wanted to get a logo so let's just put a logo I've called this I 20:20 it's just a fake logo and we could probably stand to move things over a bit just because there was a lot of space on this side and it still works I the changes we made because we weren't moving them up or down and let's also maybe put a let's put a like a quick navigation maybe just like about there we go so sometimes you know playing around with the alignment you want to get them correct as possible I and now our blocks have been a little bit rearranged so we could take this push this back down on that baseline right there and then this can come here and let me push this up just a bit there we go so a little bit more filled out or we could do the opposite and bring this down and there we go we have an interesting unique layout that kind of goes beyond you know the boring typical layouts that you're used to now remember what I said about contrast if there's an element that contrasts enough then it creates a block but if it doesn't contrast a lot you really have a lot of freedom because then it essentially becomes a watermark so to give you an illustration of that let's just say I have a big type later as says color and we make this really large I don't know like that or something and let's say I we really take down the opacity down to like three percent if it's pure white which is what it was we can now kind of just put this anywhere and it doesn't distract it doesn't screw up any of the other elements as soon as we take this and push it up a lot then it becomes way too much and that's what I always see beginning UI designers getting wrong that is just having too much contrast in elements that should be more like watermarks in the background so really in this case you have a lot of freedom in terms of where you might want to put some an element like this so let's say let's let's take a look at another example I think we'll stick with the same color scheme with this time we'll do a little bit more unique perhaps risky things I and I'll show you exactly what I mean here in a second so I think we'll keep we'll keep this the headline are now that they headlined the logo in the navigation this time let's just put you know sometimes it's all a matter of just experimenting random stuff like just okay I'm gonna slap a a big block right here a container and and how can I make this work so let's get our fill we'll use the same color scheme as I said so will you just put like this big random block there how could we ever make something like this work so I think we'll use the same headline here and let me duplicate that bring it over alright so again we've already created several blocks here so we have this vertical column that's created from right where the logo started so it makes sense to put this right here as well now I'm also doing something a little bit different though because I'm I've created this high contrast element with a block but this is also a high contrast element but I'm choosing to and this is something that you've seen in recent design trends I do to intersect the type and overlap it on top of another block of a high contrast block as this will work with large type as long as the type that you know the different backgrounds that is sitting on we can see it's this dark black on here in an Ursus also this pinkish sort of background as long as the type itself will contrast with both of them and the type has to be large for instance like if we made this rules like real small like a paragraph it's going to be a little bit more difficult to read like if I brought this over let's move that for a second oops there we go bring this over here it's like that is hard to read you know so you generally you want to avoid doing that as much as possible so we've created a block I with this type and again this blitz block is right here right here it's also right here and here all right so let's say for instance you know in this one we took this this head this head line or this the sub-headline right here and we put it underneath it like on this line well let's go ahead and put it over here because there's a block that's that's essentially created from this high contrast type layer so we could put this down now perhaps we'll fill this all the way out and we'll put around 27 or so and let's get the line height correct for this and that'll probably be pretty good so I'm gonna drag it all the way down and then I'm going to go ahead and put our lorem ipsum text fill with placeholder all right I might want to make this it's just like three all right so let's I get rid of those and see what this looks like now all right so we can see again there's so many blocks that are happening here so I'm looking at the amount of white space or negative space from the very right to the very left I think maybe we could bring this in and I think that looks actually pretty solid I and again it works well because there is this block that's created by this this harsh eye you know the horizontal line of sorts that's created from the bottom of the type and it just continues all the way through so if we did something off-center like that it wouldn't look as good in my opinion all right so now let's do something else let's for instance take another block and just like overlay it right there how are we gonna work with that well again there's a block that's created right here I'll drag this out and we want to make sure that at least there's an equal amount of white space that's defined right here from this section we want to make sure that you have an equal amount of white space that same amount of white space that's from the bottom of that type to the top of this container that I just added so we'll scale down slightly and that's a little bit better all right so here let's put like a photograph so we'll select it there's a plugin called photo splash that you can get and we can just put like the output guitar maybe we'll choose that one nice okay so the guitar actually it's not nice because the top right of that image doesn't contrast well with the background so choosing your photographs also is another important topic I guitar so remember we just try to remember what type of background and colors you're currently working with something that would perhaps complement it well or contrast it well if you want it to contrast I think I will personally I'll choose I'll choose that one okay so now we have this this this graphic here and we've have another block that's created from it so for instance I'll just stare like this one it's at the top I'm and this right here this whole container is its now as its own container that you can put content in so I could take this type and really when you're dealing with I type like this where you have a headline it's like the most important element you want you don't want to have like the same sized element because then that that makes the visual hierarchy suffer this one I'm just gonna say play that guitar I don't know this is completely random so we're gonna make that a little bit smaller all right so I think that'll work maybe we'll take this block over here I'm going to get rid of a lot of it just so we have a single line alright alright that works and then perhaps we will put in a call to action button let's say something like watch lesson make this quite a bit smaller and maybe we'll do something like I don't know I have an idea as well an additional idea to really reinforce that that this block that's created from this type we can do this this is just a random design element it's not required but it can help reinforce the layout just a little you know cuz really the block like I said goes around all along this way I'm just choosing to add this little side element here and you don't have to make it that color it could be something less contrast like I like that and I'm just gonna create a real quick button just for the fun of it because I like designing so we'll put again this is a block that's kind of created from these two elements notice that they're right on the same line this is going to be on the same column as well and I think maybe we'll use this color let's move this out of the way and now this this seems like a pretty good layout but it seems like it's a couple things to maybe a little bit off weird my little thing go over here go let me duplicate that let me get that back where you go okay okay I think we could take these two elements or those three elements and probably push them up a little bit which then means we can take this element probably scale it up and then realign these in the center of that block right there so hopefully you understand what I'm talking about now just think about blocks think about experimenting by adding different shapes and containers but making sure you're adhering to proximity which is your inner white space or in CSS terms it would be your padding because it's inside of your containing elements and also outside of your elements you know I'm always if you're looking at like the type that's inside of it you know how much space or weight space is on outside on the outside of it all right so let's do another one and this time it'll be quite a bit different and we'll do a light color scheme just to change things up now before we do that I can't say that objectively this design is better than this design because they both adhere to solid design fundamentals and that's the most important part so then at a certain point it then becomes well we have to test this which is a UX thing usability testing to see you know this one doesn't have the watch like a call to action button like over here this doesn't have it but you would want to compare them to test and see which layout ultimately works all right so let's say let's do one other one so I can really hit this home so that everybody understands what I'm talking about maybe would do like a really light eye pale blue background all right so what we're gonna do for this one we're gonna change up how we're specifying choosing a color scheme I'm gonna duplicate that I will choose like I don't I think we'll go almost you know kind of like a dark desaturate of blue I'm gonna put in for this one just choosing maybe we'll do all lowercase choosing we will write align it cuz just to show you a vastly different example than the other ones choosing a color scheme alright so I chose to put those on separate layers just because I want to put them on two different lines and I'm gonna de-emphasize choosing by making a color scheme larger so there's a million different ways that you can feature a headline so we'll just put it like just randomly right there for now so remember you've created a block here so we have this we have this we have this one over here I'll just have to grab it from here there we go and then we also have one right there alright so let's put in like a photograph so first I'll get out of container and we'll start it here on that block and let's just put it randomly I don't know that size and we may change it up but I'm just thinking of having a photo underneath the headline so let's go to our photos and our photo plug-in photo splash and I think we'll use building alright that works that I'm fine with that okay so now we've created yet another block so if we keep on adding these everywhere which I don't think I'm going to do I'll just pull this one down here we've created a block here alright so now we have a block that's right here so inside of here we could probably put some text maybe some accompanying text along with it so what we'll do is I think we'll just have like a headline and again we don't want to compete with these elements so we're going to de-emphasize it a bit I'm gonna put just become a great designer agree at okay designer there we go let me put it maybe like right there next up we'll put another one I just like a lorem ipsum box actually I'll just grab one of these alright again we'll just use I'm just gonna put block for now and then let's bring this in a bit and again we want to keep that even amount of white space inside of here and let's write a line as well so I'm still just kind of looking at the spacing of things there we go that looks actually pretty pretty decent right there okay so now let's there's kind of it's kind of empty here so let's just take I don't know like a column right here and let's get the background and let's just make it slightly darker perhaps just to fill it out a little bit like that alright so let's get rid of these because again those are just for demonstration purposes and we have a kind of nice little layout that's occurring here but again it's a little bit boring I think we could probably make this large a lot quite a bit larger maybe this element a lot larger and we'll take this right click arrange send it back and this is okay if these two intersect because this is very like like a watermark element a watermark container of sorts so that works so now we've filled this out a lot more by making this portion larger let's let's do like a longer form layout just to demonstrate that you can keep on adding you can keep your your your design going in this manner so I want to do something a little bit more neat unique we've just been dealing with rectangles essentially what we're gonna try to do is just integrate maybe like over like a 45-degree angle line that just comes in all the way all the way down kind of like that maybe we'll stop it there I'm just holding shift to make sure that all the lines are up 45 degrees and then let's just I make this the same color as our text all right which is quite dark I have to admit I think I'm going to take all them and then we're going to increase it slightly okay so now I we have this high contrast element and inside of it it's kind of hard to define your different blocks but really this section right here is a block inside of it it has blocks and then once we start adding actual content here you'll see that they create additional blocks as well so let me just show you what I'm talking about right here I'm looking at the amount of distance between or the amount of white space between the end of this element which really is just like this and this sort of sweeping angle there's quite a bit of space between it so I could either choose to you know pull that out or take this up a bit which means we need to take this out all right so that's looking good now let's put in oh and remember we still have all these other lines that are that are created like here's a block we can see it goes straight down so if we put some content in here we want to right align it to this column right here let's put in maybe like a headline just somewhere right around here let's make it white make sure contrasts well I'm just gonna put I don't know just a random word here fantastic okay all right so now I we can put let's try adding some text right here we'll say this is kind of like a magazine style layout right click arrange bring to front and again we want this to contrast well and also left align it because we're lefting align it along this element or that this column rather we can make this white or we can grab the background and it's on simply push up the value so it gives it a little bit of color in the same hue as the background which works so all right now this is a block that's created by this a and I don't believe we are aligned to that so we can do that all right let's move remove that all right so it looks like we have quite a bit of eye space down here so we could probably add more type to correct that instead I think I want to move both these down I can make my type larger here pull this out a little bit right there all right and then let's do another piece of type maybe right around there and we've created kind of a container from the top of this element there's also we can drag another one beneath this and we also have one the one to pay attention to is right here and right here now this doesn't mean that we have to remain inside of this particular box because there's a lot of white space above it but the ones to probably that are most important to pay attention to is probably going to be let's get rid of this one are these lines right here so if we add type let's say for instance we take this and we put it maybe right around there maybe this will just be like a quote so the quote would be like I thought I was going to die okay something like that let's end that quote all right let's bring this up right align it maybe we'll put it like right there maybe make it larger all right so let's get rid of these eye right there and now we have kind of an issue because there's quite a bit of white space in the middle section and I don't really like that we could push this up but then it really seems to be scattered all over if we keep these on the same row it brings a lot more order to the layout so we have to ask ourselves you know how could we fix this well we could we could bring this down and that seems to kind of help fill things out a little bit more we can increase our line height or bring that down more I think we can just do the line height option all right we can bring this in a little bit further away from this container and perhaps even have a little bit more content here this could be a button depending on your needs or something else all right but now we've kind of filled it out a little bit more so let's also let's put in another like Jane Doe that's who said that I guess there we go probably make this a little bit smaller and now I'm just kind of I trying to determine they'll can I take this why is it selecting that oh there we go we could probably possibly just put it right here because this aligns to this container that's created just from this text here and that way we have an equal amount of white space from the top down to the bottom so as you can see it's a lot of experimenting we could even I kind of want to move this stuff down or perhaps just move these elements down there we go we could pull this out and now for the fun of it we let's try adding one final element here I'm gonna put in a photograph person let's put her and just increase this quite a bit and notice how I'm kind of positioning it so that in cases there's an equal amount of white space on the top of the fantastic text and then also the bottom of our last text or paragraph text as well now looking at this one thing that I realized I kind of don't like just if especially if we take it's always good to take a step away from the computer and also take a look at the whole design as itself like really zoomed out so that you can identify anything that might stand out and you don't just not seem to work right for me we have the headline which is this large type which you know it reserves for itself there's no other type like it then we have a sub headline of this size this type right here is like 230 this is 42 but then we have this sub headline over here let me lock this layer so that I can select the one beneath it or just do that this one is 106 so really if we want to maintain consistency visually we'll make this one the same size as that one as well I think both of those are tad bit small so we can probably stand to increase the size of those just a bit so now bring that back up so now the the layout is a little bit more it flows together a little bit more and it seems more in balance so to speak I'll move this over here there we go all right so awesome awesome awesome stuff here's the three designs here's the first one again just creating sort of an unique layout it's pretty simple though this one where you have several overlapping elements and you can really see all the blocks that are that are encasing our important elements whether they be the photographs or the type and then that one alright so hopefully you guys enjoyed that now if you're a brand new UI designer you know don't get discouraged if you try to make your own UI design after watching this video you ttle izing this technique and it just still doesn't look good all this stuff takes time and practice I mean that's essentially it and developing that muscle memory to see all those and witness and be able to apply all those various UI design fundamentals alright so don't get discouraged definitely check out for my new UI design course it's gonna be releasing early this year I with twenty twenty once that releases and it's gonna be on screen be calm so definitely check that out alright make sure to subscribe up and I'll see you guys later bye