UI Design For Coders

[Music] hey what's going on guys so there's a lot of you know I'm taking a little break from YouTube at least from doing projects and stuff like that but I am having on guest creators and today we have our first guess it's going to be Gary Simon he runs the design course YouTube channel which is a really popular channel over 600,000 subs and I've been a big fan for a long time and I wanted to have Gary on because he does a lot with UI UX design stuff that I don't really get into that much so basically he's going to take a design that is really outdated kind of looks like crap and turning it into something that's more clean and modern and at the same time give you some really important UI principles to go by when you're creating layouts so I think you'll enjoy it you know he has over 20 years doing UI UX and front-end development so again check out his channel and I'll let Gary take it away Thank You Brad for the introduction so today I'm gonna give it to you straight to the point basically I know most of you are coders or in terms of being front-end developers back-end people and maybe you've found yourself in a situation where you've wanted to be able to take on your own project in terms of being a one-man show and that means having to do the UI design as well and not having to rely on somebody else so I'm gonna assume that for this video you are that person so this is going to be kind of like an introduction to UI design and I really want to try to phrase it um kind of like like you're approaching a like a JavaScript function or something something where you need to pass in a number of parameters in order for it to work and so when we're talking about UI design these parameters are going to be color and contrast whitespace scale visual hierarchy in typography so I'm not going to bore you with definitions of those right now I'm going to explain as we go and I'm gonna do so with this project yes it is horribly ugly as you can see and what we're going to do is we're going to use all of those I there's properties all those fundamentals such as white space scale the hierarchy topography etc as we make changes to this to ultimately turn it into something that's fantastic and not something like this that's you know really amateur and outdated looking so that's going to be my goal I as always make sure to subscribe to my channel if you enjoy this content I'm really excited to actually be on Brad Traverse ease YouTube channel so check out the links in the description and let's go ahead and get started alright so here is our design alright so there's a lot of things going wrong with this and you know if you're a new you know you're new to UI design you'll you can see clearly this doesn't look like a great design so we can always be great judges but maybe we're not so good at actually fixing so that's where the UI design fundamentals come into play so we're gonna run through five of these UI design fundamentals pretty much most of the time when we make a change alright so you have to think to yourself what are we passing in so color and contrast color and contrast we can go into an entire video series about color alone but really we don't have to do that we really did the one key takeaway is to make sure that you you're consistent with your usage of colors and as well as don't overuse too many colors alright that's the only takeaway that I want you know to really try to follow along as much as possible also contrast that's another thing we'll be talking about contrast is so important to get right and you'll see as we start to work through this there's some contrast issues and I'll show you some cool plugins that can really help you with your contrast as well which work for you know not just Adobe XD but also figma we'll also talk about white space alright so white space just doesn't mean white space right like this white area over here white space is basically the space between UI elements alright and it's not just specific to UI design this is a graphic design and art in general but it's really important to get your white space correct which we'll be talking about in depth as well scale you know the size of things aside of your type that's very important visual hierarchy all right so what visual hierarchy is is basically you're you're using these UI design fundamentals in order to structure the important elements and the lesser important elements on your UI design and you do that with color and contrast you do that with white space you do that with scale so you really want to know and you really want to direct the visitors or the users eye as much as possible to the important areas and you do that by establishing a solid visual hierarchy and we'll talk about that and then also typography you know what what typefaces are you using are using serif are using sans-serif are you using consistent fonts are you using a bunch of different fonts all right so all that's important and now let's us go ahead stop talking so much and actually get to doing so what I'm gonna do by the way I advise you to follow along I'm going to provide this before XD file right here and what I will do is ctrl D duplicate it and that way we can see a good before and after as we start to pick apart this design and start to revamp it so again just to go on that note a little bit more it's one thing to watch a tutorial but then it's another thing to also follow along and actually do so I believe that you should do both try to follow along and actually do the physical act of of replicating and using the shortcuts and and actually you know transforming this design you know through your own actions really will help solidify that muscle memory as opposed to just sitting there and watching me do it alright so let's start with top bottom left to right so that leads me to this area right here this logo so going through that list of five fundamentals we have color in contrast right so color I have to say this reddish color based on this mid gray or sort of darker gray background just it just looks really ugly right I mean it does not look good at all there's also an issue with contrast so there's a plugin called stark contrast all right so you can go ahead and install it by going to your plugins and just gonna discover plugins right here and you type in stark you'll find it and basically once you have it you can use the rapid contrast checker right here so you select one ama element you hold shift select the other and you'll see the four grounds here the backgrounds right here and we'll see it says all these are X and so the result says one point 5 9 to 1 contrast ratio you need to get to at least four point five two line for that contrast ratio for in order to for it to contrast enough so that most people can be able to read it easily so you'll see if we take this and we change the color over here by selecting it and we can start to bump this up this has five point eight one two toad five point sorry five point four eight two one it's still I can't really read that it does not look good so we could go black this is four point two five to one right here that still does not is not good enough what about white four point let's make sure we select both of these there we go so now we have four point nine four so it actually has I a checkmark here which is good if you want the Triple A rating and these ratings by the way come from the WCAG which is the web content accessibility guidelines and basically the done a bunch of research and they've determined that these values here are readable for a minimum level which is the double-a and then maximum level or near maximum or like really ideal would be triple-a seven to one alright so what I'm going to do well before we can actually make that make a change let's talk about these other issues so we add color and contrast white space is the white space good on this I would say no because if we pull down a guide will see we have at the very bottom of this type and if we pull down another guide to the very bottom this nav R will see that we have a of white space an empty space inside of this container I from the bottom of the type now if we pull it on another one to the top of the type and then we see there's also the very ending of this this container that's in we have a little bit here but not enough here that throws off the flow of the design especially when this one seems to be centered and these are not in line with each other on the same row this seems obvious but it's so important to get this stuff right and I see people do this all the time in my regular live Yuri shows I where people are just Miss aligning their elements so you really want to get your all these various I'm gonna back up here all these various I your your alignments correct so we're gonna move that down to the center of the container and it already looks better all right now I'm gonna back up though I want to leave this to be the original alright so while we make changes by the way we're going to definitely make sure that we're working on this one over here alright so we're gonna leave this is this the original so we're gonna like I said when make sure that we're gonna move this down here and we have guides here it shows us that it's in the center so that works out well and we're also going to go ahead and just make this black and I'm going to opt you generally when we use like a navbar or whatever you can completely have this bar up here but you don't also you don't have to have it so that's one of the subjective things there's objective and subjectivity so subjective is just a matter of personal taste and an objective is doing things that are right or wrong which is what we're concerning ourselves with the most you know making good objective decisions in terms of those 5 UI design fundamentals so I'm just gonna opt to remove that all right that's a personal preference it's all you know it's it's all I basically want to do oops I'm editing the wrong one already let's move this over here and the original right there and I will go ahead and opt just to remove that all right so what that means these are hidden now so we want to bring those things back and we'll just make these black as well for now all right so we also so we went over color and contrast rich right now it's great 20 one-two-one it's maximum contrast eyes because we have a white background here we also have the white scale now the scale this six looks pretty good I've seen some people take their logos and or other type and they may make it like really large which affects the visual hierarchy because now your eyes focus to here instead of over here because it's so large and I've also some scenes that people do the opposite where it's really tiny and it doesn't make sense so there's there's I there's certainly an objective right way to give scale but you have some leniency you know there's not much difference between 26 and like 31 all right so there is a subjective element there and then we also have visual hierarchy so like I said right now our eye is more drawn to some company this logo then say for instance the navigation alright and that's okay the visual hierarchy is something that you you don't judge on an element by itself but in relation to all the other elements on the page to see how they work together and then we have typography so typography when it comes to using a serif font like this I we could see that this is a Times New Roman it's a very standard font and for most projects you pretty much want to avoid it I it's been used so much to the point at which I it's just overused and I think it doesn't make sense to use it for a company for many companies so that's why I'm more often than not you'll see people use I sans-serif fonts which is you know I type that might look more like let's use new neato it's a free font you can download it and use this if you wish it's just a nice simple rounded font I also love Montserrat I use that often as well I so again there's there's a degree of subjectivity and then there's certain things that you probably shouldn't do in the realm of objectivity so I'm gonna go back and we're gonna use new neato now if we judge if we judge I the typography as a whole there's multiple issues here in this design that is we're mixing typefaces so we have the dreaded Comic Sans we have times new roman' I it just does not look good when you're mixing these type of tight this this type and generally I have to say 999 times out of a thousand probably stay away from Comic Sans as much as possible so what we want to do is we don't really want to mix typefaces too much there's certain instances in which it will work and it does look good I will even do it ourselves I hear later on the design but it's safe it's just too sick with a single typefaces typeface unless you know what you're doing otherwise so that means we're gonna take all its other stuff all the other pieces of type and for now we're going to change it to that new need oh okay now we can already see just by making that change like this this project looks so much better already compared to this to this alright I you could just maybe you didn't know why but now that I'm explaining it it's starting to come by a you know together a lot better and trust me we're gonna make massive adjustments already even from where it is now another thing it's perfectly fine to have underlined texts for links you can you can do that but really in my opinion it's kind of an outdated thing you don't necessarily need to do that especially for a common pattern where you have a navigation on the top right people are used to that you don't have to underline them alright so that's the next change I'm gonna make here and we'll go ahead and go ahead and stop that turn that off and let's talk about I we're looking specifically at these elements some of the UI design fundamentals so color contrast again we know that's gonna be good because it's a white background we have black text it's working perfect over here white space now there is an issue with white space these are very close together right eye it doesn't really look that good there's also an issue with alignment as well we could see if we look at the rest of the design we pretty much this container or this this column that's been established right here see we have we know ones right here if we drag this over all right and things are almost pretty much on this line except for this area and we'll fix that but we also have one that's been established like right around here or right here to where this edges now we have a container here we want there to be an equal amount of white space from this portion all the way to this area right so there's a too much here even still so we're gonna push this over right so right around here and that's about 229 this is I 190 I believe so right around there is good and we're gonna take all four of these and we're gonna just push them right there all right so now we've started to disturb lished the right side of this container now I didn't mention there's still an issue with white space there's not enough white space between these elements in my opinion so what we're gonna do is just space them out a little bit more so we'll take this push it over here and these give you guide so you can hold shift and you'll see us at 62 in the middle and 62 from there so now they all have an equal amount of white space between each other and this definitely looks a lot better from from what we're dealing with so now if we're just paying attention let's go ahead and hide this or get rid of them all right so now if we're just paying attention to the navigational own eye we could see clearly this navigation is not as nice in his eye refined as this one right here so far one thing that I also recommend if you have eye your navigation you should always denote you know which page a person's on and you can do that simply you can do that through color you can do that through giving it a little bit of like a background behind it or you can also just simply make that link bold and that will make it stick out a little bit more we can also use color as well so one thing that we kind of lack here is a uniform color scheme for this we have like green here and some red here really we needed to pick a primary color and so I'm just gonna choose something that's in a realm of between like this eye bluish purple right there and I'll add it to the color squad so watches so now there's no there's no um there's a very quick visual and indicator of which page we're on which is good for you for user experience alright so what we want to do now is we want to work on this section this is generally called the hero section has a headline sub-headline maybe an illustration and then like a call to action which is a button telling people you know where you want them to go the way this is designed it doesn't really make sense here does it because I we're on this particular desktop resolution this is designed almost like it's off or a phone where we're stacking things in the center a lot of white space on the right and left and it doesn't really fit with you know the container that we've established here when you have the room like on a desktop you should definitely use it I you can use multiple columns and that's one thing that we're not doing I we're looking at this right here this car very cheesy that's another important thing that I wanted to point out I your illustrations or your photographs they can either make or break your design when you're using something like this it makes it look cheap alright so you have to get good at picking out your assets as much as possible so with that in mind let's first tackle the issue where this is kind of looks like this is just made for mobile even though we're on a desktop design the first thing we're gonna do is we're gonna push this around over here alright now you could you could have left it in the center you could put like a big background photos by photograph like a watermark there you could do a number of things but let's just go ahead and stick to a standard convention which on desktop would we just take this in this I put you know aligned it to the left side of the container over here alright so we can see this is centered right now we're going to push that over here and then again I'm looking at the guides making sure everything is on the same column here let's go ahead and just maybe push this over here and this type if we're looking at the type here it seems a little bit too jumbled up right it's nice to adjust the line height so that it has a nice amount of space between let's take a look at a visual hierarchy by the way with this area so we could clearly see this is a little bit larger this is 41 and this is 23 so it is quite a bit larger and it's also bold but we can even establish that visual hierarchy even more so by making it larger so just by making this larger you could just see it really is placing an emphasis on this type this is the headline that we want you to read for sure now of course you could make this too large like if you we if we go out really large there is such a thing as just making it way too large but still there's a lot of room for subjectivity where it isn't necessarily right or wrong so you do have you know leeway one way or the other so I'm gonna leave mine probably for now again the process of design you're always changing things you don't always have to make that district decision right away it all depends on factoring in everything else you've done so right here I like the the separation we can see that the size of this type this is the logo so it's important but it's not as important right here as the headline you know just kind of the ad copy letting people know what's going on here and then we have this right here the the sub headline which is 23 it's pretty important but it's not as important as this so we've established a good visual hierarchy again always remember to go through all those mental notes for the eye the UI design fundamentals that I talked about you know color and contrast again we know these are black so that's all good sky white space white space is good we have a nice amount of space between the nav bar in this area if you went like this I've seen people do it that's not enough white space I you want to make sure you give it a good amount of white space away from various elements this right here would be bad white space you want to make sure it has enough room that makes sense good there's subjectivity we could go here or we could go here maybe at the very closest but right around here should be pretty good and our call to action if we look at the original like why is the call to action stuck over here really throws off the flow at a design we have this amount of white space but then we just have over here randomly stuck over here this call to action it just doesn't look good it's breaking the flow so a standard convention is to take your call-to-action and just align it on the Left column underneath your headline and sub-headline so we're gonna take this black and we really want our call-to-action to stand out well so this is where color and contrast comes into play we're gonna use our primary color to really reinforce that color scheme alright so this looks pretty good we have an issue with white space in alignment so we see we have this certain sized boxes to this button container and at the top of this text we have a little minute of white space and we have a ton down here doesn't work very well so we want to send to that make sure it's centered vertically and also horizontally all right so I also think it's a little bit too tall container so I'll hold alt and just drag down and you can leave it by the way with sharp edges or you could take these little corners the corner elements and just drag them in slightly I kind of like that look alright so already we've done a lot to improve the design but one thing that is still killing it is this element right here now we could make it a lot better just by positioning so we put this over here maybe but we can bring this in we don't always have to stay on the same column defined by the container and the logo but if we move this stuff around here this is a lot better now than what we have going on here but still it looks cheesy it looks cheap it looks like clipart right so what gonna do is we're going to completely remove that so again we're gonna push this over here for now we may position it later depending on the photograph that we use so if I come out here to unsplash.com which is a great place to get free photograph resources they're all very professional I am based on what we want this is some type of like I travel website or service I we want something that really works well I for a photograph or an illustration this works really well obviously with photographs so we're gonna choose the photograph route which is just a subjective you know a personal preference thing an illustration would work just as well as a photograph so we want to choose the right photograph though something that's going to work well and so I'm gonna type in Road white background because that's kind of what we're dealing with a road and I'm just gonna look through here to try to get an idea of something that will work this is kind of cool and what I want you to do is just to go through these and think of something that would work and that's what I'm going to do here and so I was able to find a photograph and you can go ahead and save and download it from that site and then just drag it in here and this is what I found I thought it would be really cool cuz it kind of has an area that's notched out and for the type and it just kind of flows real cool it's pretty much the same color as our background so what we want to do now is come to our layers and we're gonna drag it down alright so this looks pretty cool here so again there may be I a time where you need to really make adjustments to the scale on the size of whatever your is you're dealing with but really this looks pretty cool the way it is so one thing I want to do is take all this stuff move that down here so it's not overlapping it and this looks really cool it's relevant now it's I you know the road less traveled is a travel company we see a really professional interesting looking road and then we look at this thing now it's very clear to us which one looks so much better and that's just by changing out your assets and also minding you know there's very important UI design fundamentals so there's some other things that we can do and to make things interesting here so one thing I think I want to do is we're gonna take our background here and I like sometimes instead of going either like if it's a light background I don't like going all white if it's a if it's a darker maybe like a dark theme or dark mode I don't like going all black either I like sometimes to come up and just go very light gray you can see it's affecting like this area down here but this photographs over on top of it just a very light light gray like that all right so now what we can do is we can take this I can take the photograph and we could change the blend mode of it to like darken and it's going to adjust the like the light pork portions to match whatever the background is behind it so now what we can do is I think one thing that would be cool is I want the background to be maybe white down here and it'll kind of flow with this this road so let me show you what I'm talking about we're going to take the pen tool and we're just gonna go and just drag these Bezier curves around the road around this edge of the road and they may be kind of just follow up this hill and then we're gonna come I'm gonna hold alt and my scroll wheel and when I come all the way down and match it up and this is now going to be a white background except we're gonna take this path called path 49 and we will position it underneath the image so now we have this interesting sort of eye gray here which I think it might be a little bit too dark so we can always just come up and lighten it tiny bit and then this white down here so we kind of create this kind of just I wouldn't say monotone but a slightly different texture here and I kind of like it like that alright so again that's just playing around with photographs a lot of it's subjective leaving at white would have been completely fine all right so now just looking at this portion above like Bruce is what you would typically call the hero section you want to make sure to go over those five or six different UI design fundamentals I you know do we have good color and contrast throughout all of our elements again you should be doing it on an individual level when you're creating them but also when you look at a block of a UI just quickly go over everything to make sure that you have all those right is there good white space looks like there is definitely we don't have something like this occurring where we're it would affect our contrast you never want to do that I see a lot of people do it so you want to make sure all your type is readable make sure you're a typography in this area this block of content is all consistent and you're not mixing too many typefaces you want to make sure you have good scale I and all that so I think we pretty much passed the test and there's a lot of small things we can do here on a subjective level that would you know that could still stand to benefit for instance sometimes instead of having a nav bar maybe you you want to encase the logo or something so we'll take this push it down here now now we have an alignment issue right there's too much white space on the top of the type and I the bottom of this top of the design rather and then not enough at the bottom so move that in the middle and now that looks pretty cool again that's that was a subjective decision that I made it's not something that's like oh you have to do that all right so I'm going to consider this part pretty much finished of the design and look how much better it is if we just focus on this area right here and then look at this it is a thousand times better so now let's focus on this area down here alright so there's a lot of issues occurring here so first I guess you could call a one UI design fundamental that I have I've left out from our list of five consistency when it I talked about it with here that the topography using consistent topography right using your colors consistently you should also use if you're using something like icons you want them consistently designed for instance look how thick the border is around here and then look how thin the border around this icon is here this one's filled in this one's like a line I sort sort of icon it just looks not good it's because it's inconsistent so if you're going to use an icon try to use it from all your icons from the same icon set or at least in the same style and that way it's gonna look a lot lot better so a great place I've used for years upon years this icon finder com you guys can check it out based on what you need based on the blips or whatever I just search search search it you can filter them by um free icons you know so that you don't have to pay for them and so I'm gonna get rid of all these alright and I've already found an icon set and I'm just gonna paste the very first one in here alright so we could choose to Center these it's kind of like how they are and that's fine but I'm going to go ahead and left the line again this is just a personal preference that I'm going to I'm going to choose to use for this design and so now with alignment here this doesn't make sense to Center this when this is left line it just doesn't look good right you want a nice column that's established here by the typography alignment so we're gonna take this and left align it and then make sure it's on the same path right there alright so now let me just delete these and again we're running into an issue of inconsistency notice up here how we have this type with 37 for the line spacing and this one's it says at 29 so if we really want to make our design consistent when you need to get close or the same amount of line height so I'm just going to push this you know perhaps right around there the size of this type is 23 the size of this type here is 23 so they're exactly the same we could probably stand to make this a tad bit smaller it would still work all right and right there for now I would say it looks pretty good and what we could do now is perhaps bring us in just a tad bit and select both of them but we could choose repeat grid which is something we can do in Adobe XD and again notice how this has been established over here the right side of that container so if we bring over this guide we could take this and in between we can push things out and if you think there's too much white space in the middle which I don't think there is necessarily you could always do this instead you can take this double click and just drag it out a little bit and that's fine too so this would work but however when you do that you may have to decrease the white space in the middle I think there might be a little bit too little white space so I may just increase this double click here bring this down a notch and now we're pretty solid right there that looks pretty good so now what we can do is we can come in take this ungroup it and right-click and ungroup that and we can leave this one here this is what it comes down to using consistent icons so I'm just paste this patient pasting that in off the side of the screen and now we can delete that you want to make sure the same size as well and just put that one right there and then also we had a thumbs up icon before and now this is all from the same set so we know for sure that they're consistent and then now just take a look at this versus this so one thing I didn't talk about though is this right here this this container this container when it comes to mid Gray's like this kind of like in the middle of the road if you see it on here is any firm like here it's like here or whatever I'm not a fan of usually either stick to light usually or pretty dark in the middle it just kind of looks bland in my opinion another issue is those border borders used to be real popular in early days of web design odd but really they're unnecessary for the most part so one way to make modern your monitor modernize your design sorry is to to get rid of your borders as much as possible I chosen to not have this container at all really because we kind of have a container that's created by the bottom portion of this photograph and so I think it looks good without it it gives us a lot of weight space too if I were to take this container and paste it over here and then put it down here somewhere I could still make it probably look pretty decent we'll get rid of the border and make it really light like that but while this would work I still like it without one and that's kind of a subjective preference okay so now looking at this design as a whole well from what we've revamped so far from the very top to this section again go over this list of UI design fundamentals one of the most important when you're looking at a design like a bunch of elements like we are now is visual hierarchy when you look at it what's the most important element here is that I would say it's this it's a really bold the road less traveled you see this cool photograph I because your eyes in Italy going to look here you probably read the sub heading or and/or the the the call to action which really stands out which is important because it's a you in action you want the user to take which could be you could result in sales or leads or whatever and then down here we have more information if the person's interested you know they'll read these little blips right here so it's all looking really solid it's consistent we're using the same typeface really good white space around color and contrast all is working out for us and so that's why this right here is so much better than this okay let's continue on we have one more section and that is the testimonial section all right so the testimonials we still have an issue why because we I didn't change the type so just by changing the type to the same type right here it's gonna make things look so much better as already so again it's new needle here and then we take this will make that new nido as well we also have that little area right there let's change that to new neato and so it still doesn't look good but it looks a lot better than that in my opinion although it just doesn't look that great I even how its structured again we have these I horrible looking borders around each one and in its suffering from the whitespace so there's no whitespace virtually at the bottom where this side person's name is and then we have a little bit of white space here doesn't look good so what I would do is completely just take this container get rid of it that's looking better already because we got rid of all these unnecessary distractions all these lines from that border it still does not look that good so what we can do instead of listening them out and like this kind of boring up-and-down way let's go ahead and just get rid of that well focus on one so we're going to ungroup that so now I let must make sure we uncouth that as well and right now we have nothing centered in this design right so we want to be consistent so this right here is kind of like a subheading we could push the to the left to stick to really further define this you know this left column here the very beginning of the container and again the position of this that would be too close to this section because this is its own section of content so we want to push it down preferably to an equal amount of white space from the top of this content right here and this to the bottom of this description and then down here so that's looking pretty solid right there now we have a cool image here but it's it's like a little thumbnail let's move this over here and make it a lot larger so we're gonna take this guy or here and we're gonna hold shift and we're gonna choose to break outside of the container which you can do with photographs we even did it up here you can see we have this column let me drag this over here it's breaking outside and that's okay because it's a photograph if it was a important piece of type you wouldn't want to do that so photograph elements you can do that we could leave it here but this is just a subjective thing that I'm gonna do and I think that will look pretty cool so we have this guy over here and now we can put as maybe it's a testimonial quote right here I in this in this area so we could go like this and I think the visual hierarchy in terms of the topography and the size of this type in relation to the testimonials is too close so what I would say we could take this down and we could also make it regular instead of bold and making it red that's inconsistent with our color scheme and plus red is a kind of like a warning usually it's not it doesn't have licit good emotions for most of the time so we could just make this black all right and we could make it a little bit smaller like that all right so this looks pretty decent we could put wrapping around quotes let's see here and put one here so now what we can do is move this up take this guy down now does this really make sense though look how large this guy is we could go like this but then we have all the space we could bring this over and this would work I but really I think we can stick with this original idea and we can really be creative with the type to make it fill out this area more so here's what I thought about doing so move this down here we have like a line down there by accident and what we could do is just say let's see here I think I deleted okay what we can do is start off like maybe with like one sentence that's quite a bit larger I didn't know it could be this easy alright so we're gonna make this larger and you know what this is where we're going to break outside of this typical new neato font that we have and this is where we can use a different font that could be like a serif font because you can mix serif and sans-serif fonts so a nice hand serif font is source if pro all right and we can make it bold and we can make it larger now it's completely fine to mind your white space between your type and like a photograph over here but sometimes if you have like a large piece of type and it works with the image and such that you know it's kind of like a lighter area like this is light right here I so that you have good contrast you can actually make them overlap and create kind of like a modern sort of interesting look so we can make this large fix this a little bit now I would say there's party an issue now with visual hierarchy if we're looking between these two things because they're of almost similar size so testimonials is just a label it's not that important people will know that it's kind of a testimonial we see a person and then we'll see a quote here so we can make this a lot smaller all right and then what we can do is we can take this and we can style it differently we can make it all caps testimonials and then we can take the letter spacing maybe we'll make it less bold that way it doesn't compete for visual hierarchy here we want them to see this part rather than this part as much so we can make this smaller and this would be a good design or a good patter for our design for any type of section that has this type of I guess you could say a heading to also make it apparent that it's a section like a heading or a label we can do a kind of lining on the modern style little borders which can go on the top or bottom we can use our primary color to really emphasize that and bring in our color scheme you know in just another area and I'd say that looks pretty good now we have a good separation in terms of our size and again this establishes visual hierarchy so we could I let's get rid of this this is a part of the quote and so we have the end quote and then we could do this we can put it like a quote here this would work just fine let's bring this back up here John Doe 1998 I don't know why I put 19 1998 and we could just have like a little dash here that's what that dash was before and we'll make it black right there alright so this looks pretty solid what the other thing we can do i and again this is like playing around with our graphic design you can look at what other people are doing sometimes what's common is to use a different text layer for the quote and just make it really large and then also take down the opacity big time very lightly we could duplicate that and then just put this over here and that looks pretty cool in my opinion we can also take this down let's see oh no this is fine the way it is so now alignment this is up kind of high in relation to the size of this picture because really we have a row that's defined right here and here and this isn't centered vertically in it it's kind of up to the top quite high right so if we take everything and put it maybe right around the center which just seems to be right around here it's gonna flow much better because we have an equal amount of white space below the this last element inside of that container and then also the top of this one right here alright so you can still play around with this a lot more but ultimately this is the gist of it and then perhaps you could have more testimonials at the bottom and I really just ultimately start playing around with it more so this is the final result as we could see we could see that this design here is so much better than this one and that's simply by minding good fundamentals in terms of your color and contrast or white space scale visual hierarchy typography and making sure you're doing and applying all those things consistently alright so looking at this one final time I if we it would be a good idea just as one last time just to make a mental note you know of what things are failing in certain parts of this UI design some company here doesn't contrast well so the color and contrast is completely off we fixed that over here we made sure it contrasts very well we decided to make a kind of like a little container around it which is non you know non-essential but you can still do it just to give it texture alignment completely off in relation to this area and also relation to the container that it's within because it's up too high not an equal amount of white space having the typography be this like a standard Times New Roman very kind of outdated doesn't look very good at all so we switched to a serif or sans serif font noony noony toe alignment of this element right here all the alignment is completely off about this design for the most part there is a container that's established here a container that's established right here a container or column that's established here I it's all off and that in these tiny things is what ultimately makes a design just look so amateur and when you're not a UI designer it's it's easy to get those things wrong so as long as you can really remember those five to six different UI design fundamentals you'll do so much better and you'll produce work that is so much better all right so hopefully you enjoyed that and it just gave you a taste of you know what a UI designer goes through you will definitely improve if you mind the UI design fundamentals as much as possible check out my youtube channel if you like more of this because this is mainly what I talk about for the most part also some front-end development stuff as well and yeah hope to see you guys soon good bye

Channel: Traversy Media

Views: 227,274

Rating: 4.9573321 out of 5

Keywords: ui, ui design, user interface, ui/ux, adobe xd, designcourse, traversy media

Id: 0JCUH5daCCE

Length: 50min 21sec (3021 seconds)

Published: Tue Jul 14 2020