How do you find the RIGHT layout? Hint: It's not one and done! (Tutorial)

today you're gonna follow along with me as I design and iterate over my new landing page for my upcoming UI design course before we begin this video sponsor Isla node and they make it easy and affordable to host your site app or service on whatever technology stack you use unlike entry-level hosting services lonoa is a step up to powerful fast fully configurable cloud computing with server plans starting at just five dollars plus no hidden fees or surprise outages Linode offers a no-nonsense hosting at a price you can afford so sign up now using the link below to get a $20 credit on your new Linode account hey everyone what's up Gary Simon of course satchel com so today I decided to include you along with my personal process of creating a very simple UI design or layout for an email capture form for an upcoming UI design course that I plan to release sometime before the end of this year going into 2020 alright so the whole purpose of something like this is to get people to enter the email so that I can notify them when the course actually actually launches and so what I wanted to do is to show you my process of how I tackle that UI design layout and also how I create a bunch of iterations for the layout and then ultimately this will give me a bunch of ideas that I wouldn't have otherwise chosen so this is something that's very important that you do when you're designing your user interfaces to experiment with the layout alright so make sure to subscribe if you haven't yet and let's get started alright so here I am in Adobe XD you can also use figma or whatever else you want I'm not doing anything too advanced or complex everything should work from app to app and so I'm have just basically a desktop canvas out here at web 1920 by 1080 that's what we're gonna use just to start off with and I already have the content the actual type based content right here so the title of course which would be like an h1 element in HTML it's complete UI design course that's probably a crappy ad copy right there but we're just going to use that for now for placeholder text and then just kind of like a paragraph here and then some supporting text next to what will be like a text field for entering your email all right and then get notified when I release a course so this is just the the few bits of information that I have to work with in order to get started with the UI layout alright so as you fine as I mentioned before the first layout that you come up with may not be the best but the most important thing to do is to iterate through multiple of them it's just experiments so that something comes out it's the same process I really when you're working with logo design for instance and you're trying to come up with symbolism and such you just you just let it all come out and structure it so here we go enough talking so for the background for the initial one I'm just gonna go a dark background that's kind of what I had from my gut usually you'd never want to go absolute black with your six zeros I usually like to come up a little bit I think I'm gonna use one nine one nine one nine which is just up here alright so now what I want to do is I do have a logo already made for this and so for the logo I'm gonna open up Adobe Illustrator and what's great is in Adobe Illustrator if you're using Adobe experience design it's loading right now I and you have your design open in Adobe Illustrator instead of having to you know import to go to like file import or something like this you don't have to do that all you have to do and I'm loading up the document on my other monitor right now all you have to do is just select you know the layers or the group that composes of your illustration or your logo and just hit copy ctrl C so for instance this is the one I'm gonna use ctrl C to copy and we're going to paste in momentarily there it goes alright oh I forgot the little eye here there was a I I'll make this file available by the way as well the dot in the eye I didn't include okay so now it's there alright so here is our logo now because this is such a simple page just an email or a lead capture page I'm not gonna have a navigation in fact when it comes to these these types of pages where you have a single goal that you want people you know to take or it's a single call to action of sorts you want to minimize the layout as much as possible really you don't want to give them a lot of exit points or external links from which they can just leave and not come back you want them to take that one element so we still do want to have some of our branding in here so I'm gonna choose to keep the logo all right and I'm gonna scale it down holding shift and alt and just get it up here right around there and I'm happy with that all right so next up we're going to let's see here I'm gonna choose to put my picture just to let people know who may be familiar with Who I am that this is a product or a course upcoming course that is from me all right so I let me get that real quick I put that on the desktop somewhere all right and I found it I'm just gonna drag it from the desktop on to this shape right here and there I am there we go I actually I took a picture of myself laughing at a wall by the way that's how I got that picture can you imagine that all right so now let's continue on with the the headline I kind of the most one of the most important elements is the headline and again I'm going to be using this one over here complete UI design course and because I want it centered what I will do instead of just left clicking once I'm going to go from the very left left click and drag out to the very right center this and paste in our complete UI design course copy and I will also increase the size we're gonna do montserrat for this as cool of course which is my very one of my favorite fonts people know that already though about me if you watch me at all alright and and I we're gonna get that up here pretty pretty pretty big like that I think we may even go to medium alright this may be a little bit much but again I'm not gonna overthink it at this stage you don't want to overthink all of your design decisions I just want to get the content on there and then really start trying to refine it through iterations and all that good stuff so what we'll do we're gonna take this we'll just duplicate this ctrl D drag it down we're gonna go smaller just put like 23 for now and then I'm going to copy that bit of text if I can remember I will just paste all this text in the description of YouTube and you can follow along easily I'm gonna hold alt and drag that in because we don't want it to go all the way out to the you know to the edges of the browser that would be bad all right it so now let's go ahead and we'll just choose regular maybe bump this up a bit and extend this down I'm going to hit enter right here and make this bold just to make this part of the ad copy I stick out decently so just do bold here all right so notice all so far we have the logo which sits by itself and we have myself we have an equal amount of white space so far between at the top and bottom of this avatar element we have complete UI design course which is large it's its headlines the first thing is really supposed to stick out and so people can immediately look to that first in terms of visual hierarchy it's the first thing you want them to read so that they understand where they're what they're dealing with next up we have I some more type and of course I'm separating these two type elements based on scale I primarily based on scale as you can see there are two very different sizes I see a lot of people getting either getting too far away like in tiny text or going too close and then in terms of size and then it just it throws off the flow of the design so it's all about finding a good medium making sure that all the type is readable but still your different areas are separated through scale I'll color and contrast i font weights and such all right so let's continue on after that I'm going to put complete UI is releasing before 2020 on udemy and other networks so we're just gonna duplicate that as you can see this is a dead simple layout it's pretty much a I forgot to get the C in there a mobile-first sort of approach and this time I'm choosing to separate these two elements through contrast by adjusting the opacity now you still don't want it to go too low because then P certain people with I you know I issues won't be able to see it or if their device I contrast is different than yours they won't be able to see it either so you want what you want it to be different enough to where these are clearly separated visually in terms of contrast but also so that you could still read it and also you don't have to necessarily make this gray you could have separated them through color you know this could be like one of the colors up here in this purplish range and this could work as well if that's something that you want people really to see and standout I think for this type of ad copy when it's releasing and where it's releasing isn't as important as this information here so that's why I'm making it just kind of more greyed out to where it's just a secondary piece of li content so now well design the actual the most important element which is the email capture form so I'm gonna choose to get rid of the fill and just go with the default gray border that I Adobe XD gives us which is 700 700 700 alright and then we're gonna have a button right next to it so ctrl D move it over holding shift and but probably be around this large get rid of the border and we're going to give it a fill and we really want this thing to stick out a lot so if you know anything about call to actions you'll know that the buttons that are with this call to actions should be something that really sticks out big time so we're gonna give a color we're already working with some colors up here that the eye is already seen so to keep consistency visual consistency which is important to you I design I will grab one of these colors right around here so now let's I get this centered up right around there and I'm gonna move this one pixel left just so it covers this area right here so we don't see that it kind of gives us a bad little contrast if you will so now let's give it a placeholder text inside of here so this is just going to be your email let's get that down we'll go back to its thunderstorm outside I'm not sure if you could hear that probably not and again usually placeholders or you know they're dimmed down probably you should use the same as that one what is that that's 39 and that's 45 slightly off alright and then we will have over here left click drag from the right and left of the button notify me will bold that sucker up - there we go all right so that looks pretty good at this point I now it's a matter of trying to get this framed up correctly so what I'm doing is looking at the bottom like how much white space I want to be at the bottom then we could take everything else now one thing I'm wondering is do we we don't want it to have to be sitting too low on the page because it is a very important element all right so that looks pretty good right there very simple design obviously but it's just giving us one potential look there we go centering that between these two elements looks a lot better so I yeah this is pretty good here and so one of the one idea I thought you know just because it is so bland and simple at this point is perhaps because UI design is all about working with shapes I to some extent having some primitives like a square or a circle or a train and a triangle maybe floating in the background of sorts so what we could just do is I'll take this and we'll create just a square holding shift and then we'll get rid of the fill and then we will take that down and I'm kind of nervous right now because my computer I think it's the video graphics card is making a huge loud grinding noise I'm gonna kill somebody all right so there's maybe one shape maybe that's a little bit too big we'll leave it there for now and so these could be with with JavaScript we could be moving these around I perhaps so we'll do a circle real quick in the same sort of ascetic what is that it's 11 for the size all right so we'll take 11 all right and then well it's time for a new video card I guess I just bought this literally three or four months ago all right what is the color there we go I'm gonna have to pause this video because that's very very loud you like right there so just you can see these supporting elements right here kind of I just add something extra to what's otherwise very you know kind of plain and boring design again this is lemon and then we'll go ahead and get this the same color and we'll scale it up oh my god that is loud I'm not sure if you guys are gonna be able to hear that or not maybe put this one like in the center also move things around in our layers maybe tilt this a bit there we go I'm gonna save this complete UI toot save that time for me to pause alright I'm back I literally like just hit my computer tower and that made it stop that is so ridiculous okay so now let's continue on so we'll say you know this is the very first iteration that we have we're happy with it how can we use the same exact content in terms of the type based elements and the logo and this avatar and the call to action and create different layouts essentially so this is just a single column layout where nothing's floating to the left or right of each other with exception to these elements which really just a background element so they don't count so what we'll do is I to do this let's duplicate it and one of the things you can do if you also at the same time gonna tackle whether or not you want to go for a light design versus a dark design you could change up the background color and then just readjust I the type based elements and everything that needs to be inverted so we'll take these things make those black and these of course have a pasady so that's why they maintain their alpha channels in a bit in a sense these wines you know because we want these to be background elements of course we're going to change this to more on the lighter side there we go and then complete you I'm going to go in there and change that to black and this is probably I not enough contrast that will boost those up there we go so there we go now we have I a white and black version of our UI let's take it a step further though and let's see about actually using columns a two column approach to the same content here alright so for that let's go ahead and we'll take our complete UI design course copy right here we're going to left align it pull it down and I think maybe I just want to have complete on its own line so complete and then UI design course and we'll give it some space some margin or padding from the edge here we'll take this put this down left align it let's get this moved over here somewhere temporarily and we're going to take this or myself and just move it over there let's right-click on this and go to arrange and bring to front there we go now we're gonna have two columns here so I probably like the halfway point somewhere around there would be pretty good alright and then using our existing content complete UI is releasing maybe we could put this in the right one over here will red align this this copy right here it is storming outside like crazy alright bring this down so right now in terms of placement I'm looking at where you know the amount of white space here is in trying to make that eat you know to be even or equal rather maybe align this with the baseline of that text over there this right here you need to bring that up a bit especially if there's a background element behind it which these are going to be moving anyway so that's okay I had a different idea for this for my eye my eye my avatar right here maybe it'll be like a what do you call a arrow I'll hit alt and by the way to get rid of that angle hang did I say angle oh my god ridiculous angle I meant and then just draw an arrow like this all right so now maybe I can put something else here something like and by the way we need to get this situated in terms of vertically aligning because everything sitting up at the top too much if you're looking at the base line here but we'll do that in a second so what I can do is maybe add an extra type based element here actually where was I yeah get notified when I released the course so get notified when I release the course somewhere right around there I think these are sticking out a little bit too much so I want to bring the opacity down there we go that's better so now I'll take these elements I don't want these I don't want to move those I just want the main content here we're gonna Center it vertically so I'm just kind of looking at everything up from the top in the bottom so this looks pretty pretty good right there so there we go we have I so far three iterations one's just a color change a light and dark mode and then this one is a much more different approach in terms of the layout where we have two columns here and then a single column that's centered in the bottom all right so we don't have to end there though we could take this duplicate it there's still so much more that you can do with this so what would look this look like for instance as a dark mode well same thing again we use one nine one nine one nine I should probably be adding these just so I don't have to do that all right and then again all this stuff make white and this stuff right here and then finally this element right here as well this sort of gets lost so we could probably make that on the lighter side and there we go so now we have a black version of this we could probably put this over here actually it would make sense at this point to put this one underneath and then we'll just take these two hold shift and then just move them over all right there we go so now we could still experiment in work with this a little bit more mainly this one over here we can see it's it's a very open air that kind of like it we can't confine maybe one of these elements or one of these copies I what do you call columns into its own different colored section so I what we'll do is I think we'll go ahead and take our rectangle tool here and we're gonna make it our primary color like that so then we'll go to our layers and we'll make this thing put this weight in the bottom and then we have some work to do of course so we'll take our logo we can left align it that works completely fine for this being that I have a lot of other elements already in here or this mean big element I'm just going to delete these will say well omit these at least for this example this iteration we want maximum contrast here black would not be it white would work much better so we'll just take white there's no contrast practically on that border so we'll make that white and then of course our button gets lost we want maximum contrast there so people see it and we'll make that white but our text our primary color alright this kind of doesn't work anymore so we can change that up as well so maybe we'll take these three elements put them here we'll take this make it white maybe build it up a little bit now there's a contrast issues here with this side of the avatar in the background so to combat that we can give it a stroke or a border on the outside make it white so that'll work and then of course we can make this white as well maybe build this up all right and then we could take all this content here kind of move it more up here Center it just a little bit more actually we could take this I think it would be better to take this as you can see I'm doing a lot of this you know I'm not being too scientific about it I'm just kind of seeing what works moving things over there we go see if you put it like this it seems like it's to run on like a lot of text in one area we have the space so we can separate things out a little bit more alright and Jesus Gary what are you doing to select everything there we go and then I can think about where exactly I want to put this maybe just Center it this element there and that will work all right oh and one thing that's throwing me off here there is an alignment issue here if you look at this column right here you can see that there's not a lot of white space here and there's a massive amount over here so I again I don't want to get too caught up in those specifics when you're kind of at this rough you know stage where you're working with things and then when you adjust the white space over here this needs to be a justice it's adjusted as well so you know we could just take everything like this kind of move things over get this moved over as well I'm not too happy with this bottom part I think that looks kind of silly so we'll probably just that as well so yeah going good so far pretty good point to save let's go ahead and I think I'm going to experiment another thing that would be worth experimenting with would be flipping these so what if we put this over here all right so let's make these white and then of course we have to go back I'm not going to readjust this because a little bit of a pain will find this one make sure you select all the layers that are composed of that we will duplicate them bring them over here all right and then this doesn't need the stroke this go black make that one make this black as well all right this suddenly doesn't work so we could either take the time to adjust this gradient which was creating an illustrator I don't think we can update it here or just move it over here just just to be quick about it and that that works as well in my opinion okay one thing that makes more sense though perhaps to re you know to restructure this area we could put this kind of like as a label so get notified when I release this course have my little arrow directing people towards that button I guess we can move things down now right around there and I think that works pretty well at that point all right awesome awesome stuff so you know this is the process as you can see I doing a lot of thinking out loud here I'm not spending too much time on any one particular thing and ideas start to form when you start to you know replicate these artboards and start moving things around and changing them up for instance like this one one final one maybe I'll do real quickly it's like nothing's really standing out too too much here I want more attention placed on complete UI design so we with CSS we could change a text properties or a text elements background so we can perhaps do something like this to make it look like it's highlighted you know in some way so I could take this and make it maybe we could try black you could try different colors and all that on your own let's just move this near the bottom except this should be at the absolute bottom there we go we'll take the type we're gonna make it white but before I do that though I think we'll just duplicate this push I hold shift and get it down there pull it out alright so now we take our type and make it white all right so it kind of gives it sort of like a highlighted a highlight effect as if somebody is on the page and they select the text or whatever technically it's not black I think what this highlighted text even look like I forget completely isn't it like a bluish color or something yeah something like that so I yeah and then this is a completely different look almost I than this I could so you can really make fine iterations not iterations to the entire layout as I did in some of these and then I ultimately you may be wondering to yourself how then do you know which one you should use and that's a tricky one because it requires work so you can do focus testing which is just a process of gathering people's opinions or you could do split testing and there's a bunch of different split testing tools that you can utilize but what that basic basically means is when you start you know you you get it up into HTML and CSS you start with two or perhaps three different variations and you're split testing Script will serve randomly one of those iterations it'll do them like an equal amount so if like visitor one will get variation a which could be this one visitor two could get variation B which could be this one and the visitor three so on so far it could get a different variation and then you define a goal the goal of course would be to get people to click notify me and your email and you will find that the one that you thought would be the best because the your design has a goal and that's to get people to fill out this email that's it it's not to look the best it's to perform the best you'll find that the one that you thought you know maybe perform the worst and it'll let you know I based on the the metric of the goal which is most successful all right so I think you're that's it you've come up with so many more designs here but I think you got the idea at this point right so hopefully you found that useful if you did make sure to subscribe I we'll be covering the HTML and CSS process at least one of these so the front-end development process and also you know how do you go about even capturing the email there's a lot of different ways there's a lot of different service providers you could just save it in your own database there's a lot of different things I'm not sure what I'm gonna do yet but once I get to that process very shortly I will probably cover that as well all right I'll see you guys soon goodbye [Music] [Music]

Channel: DesignCourse

Views: 34,474

Rating: 4.9821429 out of 5

Keywords: ui, ui design, ui design tutorial, adobe xd tutorial, adobe xd, website design, web design, layout design, web design tutorial, adobe xd ui design, adobe xd ui design tutorial, adobe xd uiux, adobe xd ux, adobe xd ux tutorial, ui design fundamentals

Id: acdN4mxjoaE

Length: 32min 39sec (1959 seconds)

Published: Mon Sep 02 2019