Do THIS to Improve you UI/UX Skills!

hey everybody what's up Gary Simon here so today I have a fun one for you and it's a challenge so basically when you're a new UI designer or an aspiring UI designer when you're starting out it's nice to design without any constraints it makes it easier to produce good designs but the truth of the matter is is when you're working with clients or you're working with an employer you have constraints you know you have requirements that you have to operate within and so what this little challenge aims to do is to simulate that and I'm calling it random UI I'm gonna tell you exactly what it is in a second but I want you to participate in this challenge I'm gonna show you what my result is and you know working through the process and then you can emulate it to come up with your own and we can say there's this cool eyesight called colors and fonts calm I stumbled across it today but there's just basically a bunch of tools that they host here for designers and what I'm doing is using the colors I what's weird is that right here gradients right here so I'm using gradients and that is not gradients this is gradients and what I'm going to do is choose with a random number picker I one of these random gradients and that's going to be the background color that I have to use for my UI design the second thing I have to do is use the font pairings tool and there's about 20 different font pairings and that as well would be picked with the random number picker and then also I'm going to use 112 app ideas it's just an article about app ideas and so I will also choose one of those random things so what this will allow us to do is to create some requirements or constraints that we have to operate within and so we'll have to come up I will have to use the app idea that is chosen at random we have to use the background color that's chosen at random and we'll also have to use a font pairing that's chosen at random as well I'm also going to write here I use this which is basically I'm going to put all these links in the description it's basically just a link to links to a bunch of illustrations that you can use for free for most of them at least and this will help you know quickly I give you illustrations that you can use your UI designs alright so that's basically it I feel free to keep watching to see my take on it what I ended up with and then once again make sure you participate as always subscribe and let's get started before we begin this video sponsored by little note now as a front-end developer or a designer you know that you need a personal portfolio and if you use a website builder like wicks or Squarespace they lack total customization and they lock you into using their platform but to be a pro you need to use the tools that the pros actually use so level up start building your own projects and your own portfolio on an enterprise level content management system like WordPress there's Drupal now real web development sometimes requires knowledge of spinning up servers managing domain names and setting up an occasional staging environment and there's no better or simpler way to learn the ins and outs of hosting your website then with Lenovo out hosting the node cloud hosting makes it as easy as possible for you to deploy a WordPress or Drupal website in seconds with a Freeland ode one-click app marketplace so click on the very top link here in the YouTube description to get your free node account along with $20 of free hosting and all the tools that you need to build enterprise class websites all right so I here have a blank document and Adobe XD you can use whatever else you want sketch figma etc and here is or are my windows right here so I have a few different tabs open the very first one are the gradients and they're 17 rows by 4 columns I'm mentioning that for a specific purpose you'll see in a second and also here are the font pairings there's 20 different font pairings here so I have no clue which one I'm gonna get I also have 112 mobile app ideas here and then also UI goodies for illustrations that'll help us perhaps pick out something relevant based on the type of project that we have to create create type of UI design rather so I have my random number picker here there's one built into Google I didn't know that and so we can put a min in max so for this for the gradient that we're gonna have to use we're going to choose first the row so I'm gonna hit generate so Road number seven and I'm gonna put this between one and four because we have four columns so ro7 column 4 alright so row 7 so 1 2 3 4 5 6 7 this is it alright that's exciting right there so I what I will probably they only give you access to the CSS let me see what that looks like in notepad real quickly wait I thought I said it was copied to the clipboard and it's doesn't appear to be ok well what I'll have to do is just get in here and get the pause and I'll get the color value all right here to here cuz it looks like there's just two color values right there all right that's kind of frustrating right here is the font pairings and we have 20 of them so let's choose one 228 all right so that happens to be 1 2 3 4 5 wait our last nice place I suck 1 2 3 4 5 6 7 8 ok alright so we have Payton won and cute of mono I don't even think I have either of those installed but as you can see there's a great discrepancy or disparity between the two in terms of font weight this actually right here this one appears to be a serif font and this is sans serif right here alright very cool so that'll be the one I'm gonna go ahead and install those both before I proceed and then here's the app ideas all right so I there's a hundred twelve of them like to put 112 generate 104 all right so we're at the bottom of the list let's control f-104 a decentralized here let me I increase this a decentralized skill assessment in freelancing app that will let people assess assess their particular skills through a series of automated tests or problems based on the skill assessment the app will also connect job seekers with employers for freelance work around the world that's a mouthful a decentralized skill assessment and freelancing app that will let people assess their particular skill through a series of automated tests or problems okay so basically through tests annoying surveys and tests about like maybe your code knowledge or your you know ui/ux skills whatever this will basically give you your skills and probably give you a rating and connect you with would be job seekers so that's going to be the app idea all right I'm not sure how this the decentralisation plays into it but whatever that's what we'll go ahead and focus on so I'm going to go ahead and get the color values also get those two fonts installed and then we will start the UI design and see we can make this all work all right so I have the colors right here which will turn into a gradient we have our two fonts and we have just a brief description of about you know what type of landing page we need to create in order to make this all work all right so just to preface this I did not design anything beforehand it's literally been like 90 seconds since I paused and I have no clue what I'm gonna be doing about this in terms of relevant illustrations and design and all that stuff so we're just gonna take it as we go and then hopefully I'll show you with with minimal stress and problems that you know if you understand UI design fundamentals you can make something look good hopefully we'll get the UX you know correct as well we'll make it relevant and all just nice and good working so let's go ahead take a background we're gonna do a gradient here linear it's going to be a the angle that they had it's kind of like this so this color value right here let me copy this hex code and we'll get back here so this one is going to be this and then we'll copy this one we should just add this to the swatches by the way let me do that real quick make my life a little bit easier I always do things difficult at times and then we'll go ahead change this light area to this purple here we go all right so it's very pastel right so there's not a lot of contrast it's on the lighter side so we know anything that sits on top of it it needs to be darker right so we can't use white because that would definitely fail the color contrast now just to give you a tip in case you don't know already I there's there's a variety of different color contrast checkers there's one called stark which I've covered before in a video you can do a YouTube channel search but basically you can install for XD or figma I think for other apps as well probably sketch and you just go to plugins and Starke right here so what's cool is rapid contrast checker you get that out and we we type in some text like hello alright so right now it's not working correctly because we think we have a background behind it but if I do this and select both of these we'll see that this actually right here with the black text that says hello in this background this has a good 14 point 4 3 2 1 contrast you definitely want for smaller text to be at least 4.1 or at 4.5 to 1 ratio so this for instance if we go white that fails because it's only one point four five you need to get to that four point five to one ratio which is the double a the web content accessibility guidelines recommendations for having readable text all right some people have bad vision and stuff so we're definitely want to go I and you should always use this type of tool if you're in doubt you know if you have a white background and black text you know you're gonna be good if you have a black background and white text you know you're gonna be good otherwise make sure you check it just so you're safe all right so okay a skill assessment app that lets people assess their particular skills through a series of automated tests and problems so we're gonna stick to basics we're going to stick to standard conventions for the UI design which means we're gonna have a logo and a nav bar and we're not gonna go crazy putting like a vertical dap bar for this we're gonna keep it simple and familiar so what do I want for the logo obviously I don't have a logo for this so we're just gonna stick with a very simple word mark and what are we gonna call it a skill assess skill Assessor I don't know it probably already exists as a name hopefully I'm not going to get any trouble because I don't know if this name no you know what I'll just put I don't want to put numbers in it but I just want to be safe because you never know about copyright stuff Gary's skill Gary's us know the Gary Assessor I can pretty much guarantee you that doesn't exist I think that's how you spell Assessor but I'm not sure we could probably go with this font possibly we'll do give it a shot um and again that's Payton all right I kind of don't like it for the logo so you know what I'm just gonna stick to standard montserrat okay we'll make it bold no not medium there's a lot of weights here all right skill assess oh okay so next up we're gonna have a navigation you know just typical home by the way you should always have a home button that's something that people expect they've studied this usability experts and such so make sure you just have a home button people expect to see that all right we'll duplicate this we're gonna do about I take the test I don't know something like that and then contact all right simple enough want to make sure we have I'm just gonna eyeball it but like roughly equal amount of white space from the end of contact to also over here from side to the G all right so for now that looks good I'm fine with it I may change things up just a bit we want to make sure things are even up here there we go all right so that's our header that's that's it's very simple obviously I might want to scale this down just a tad bit there we go keep them more in line with each other I guess all right so now we want a headline I want a headline I talked about this recently I think in my latest video about the importance of understanding marketing and ad copy and when we're talking about landing pages you really want to make sure you're utilizing that very important text the very first thing they're gonna read which is the headline because it's bigger you make it you know you make it thicker and such I mean we can really stand out you want to make sure you really speak to the audience well so a skill assessment app that lets people assess their particular skills through a series of automated tests and problems all right so just thinking off the top of my head trying to clear my mind by the fact that you guys are watching me right now what type of headline would work here so I'm just gonna drag out here and a skill assessment app all right so if you're taking this you want to find a job right I think that's where the target audio is even though they said that this app will also connect you with employers so employers could be come to this page but you might have a different landing page for the employers in order for them to post jobs so we're just gonna say this is directed at this particular landing page is directed at individuals who are trying to find a job and this will give you a skill assessment rating as well or something so I'm just gonna type something here and it may or may not be what I choose but I want to get the aesthetics right all right so all right easily assess your skills in minus-- now just from a purely UI design standpoint what's wrong with this if I left it like this this is this is not a headline cuz it's the same weight as this right same weight and in spawn size as the logo we want this to be big right so we established that visual hierarchy which places an emphasis on priority and what people should be seeing first by making it larger and you can also do it the contrast and color and all these other things which use our page home because that's one of the requirements so pay tone and let's beef that up so this is a type of like this is like a funner type of font you know it has character to it alright easily assess your skills in minutes and it's up to us you know we could really squish this in a little bit if we want to make room for like an illustration here we could extend it out we can extend it all the way and center it have an illustration so there's a lot of subjective decisions that we can make with a landing page for me we're just gonna do this for now maybe I'll come in easily assess your skills in minutes okay now we could bring this in a little bit more there's also other some subjective design decisions I could make like in relation to this area we can encase it in its own container and as long as we're here to all the other good UI design fundamentals based on the content that's sitting on top of it like the logo in the navigation we're fine yeah we could we could even you know maybe take this down a notch down a lot to really frame it these are largely subjective decisions that you can make you don't have to if you want to go ultra simple you can do this too for me and by the way we could also make this black and make the the text or almost black and make the text on top of white there's a lot of decisions so this is the fun part of design because a lot of it is subjective we're just going to hide for now so easily assess your skills in minutes we can have a set sub-headline - so where we can further elaborate on what exactly this is doing or what what the purpose of this app to app is so I'm going to bring that out here maybe we can use - cute cute of it's that how you cute of mono cute if I don't know YouTube mono bring that down quite a bit and you want to have a lot you want a big disparity between your headline in your sub headline because it will really help in establish that visual hierarchy so now we need to elaborate a little bit more I I know you don't want to say the same thing but at the same time I'm kind of pressed here people are watching me I all know at this point I'm just gonna put in a lorem ipsum so we're gonna go to where we at lorem ipsum quick lorem ipsum oh that's so frustrating it's because we have a I'm gonna set this to zero we're gonna do that again plugins lorem ipsum there we go so I don't want you you definitely don't want this amount of type on landing page for a sub-headline nobody's gonna sit there reading all this maximum would be this amount of text really and like right around there right around that size you know give or take eight points or so you would be pretty good so we'll leave this here for now and I think that's probably pretty decent okay right there's okay in my opinion you would have probably wouldn't want that much more verbiage in this so now what else are we gonna have let's get rid of that so if you you want people to take a test that's probably the action every page every landing page should have a goal right an intended action an Intendant flow that you want the user to take so for our app we want people right away as fast as possible to start the process of taking some sort of skill assessment now you could just put a button in this case you could put you know a button that says take take the test now or start your assessment something like that but even better in my opinion would be to try to introduce them to just maybe a form element first and that would be AI UI designer like maybe have them choose their role what they you know will choose their profession and I think that would possibly do a little bit better so what we'll do is I think I'm going to scale this down just a bit take that line ID down that way it's gonna free up a little bit more space for this element that I want that's front and center so we're gonna have a container right here alright and this is going to be a container for like a form element and I may change you know how this is all structured I'm just going to duplicate this all right this will be let's see here see I could change this maybe I'll do that get rid of the border maybe extend this down now remember you never want to rely on place order values because you want accessible form so we're gonna put in something like I choose your profession okay something like that I'm not sure if I want to use that pay tone one does this have a no unfortunately this does not have a bold font weight and that that that's fine and what we'll do in here right-click arrange bring to front well put in like an example so like we'll put like a UI UX designer no something like that and then what we'll do is we'll put in a triangle here sorry not talking much just focusing on getting this knocked out all right now again all this stuff may change I'm just getting it on there and that's the biggest thing that's the most important part is just getting you're getting your fields on there as much as possible so we're gonna duplicate this for the actual submit call to action button and we want this to really stand out because it's a button right so we'll take this color but this doesn't really contrast a lot because this is just past le you know so we can come up here maybe slightly shift this I kind of like this purplish it yeah I like that right there that's very nice so these work well with these colors right here and then what we'll do is we will copy this or not copy this but we'll put in a text element and we'll just put in start assess know assess my skills there we go white why because we want maximum contrast on such an important button right so assess my skills alright I maybe will make it fun and put an exclamation point there alright and this is actually looking pretty decent um now I'm not done because I do want to have some sort of relevant illustration perhaps in this area right here I'm gonna again we can move this stuff over if we really want something here there's a lot of different types of ways to tackle illustration and graphic design in relation to your UI designs like we do we could take all this stuff and like put it in the middle and then have kind of more of like a watermark approach so it just all depends on what we come up with so I'm gonna look through our UI goodies and just kind of think you know what would make sense what would be relevant and what would speak to the audience to the visitor based on this type of project where it has to do with you know coming up with skills assessing your skills finding a job something like that there's multiple routes you could take you could take the I mean it's a skill assessment is something like an automated process this is obviously an automated process so you can use some sort of automation imagery you could have two people sitting down like an interview setting so you could just you know anything like that obviously you I'm doing this on the Flies but you really want to take you know great care in deciding what type of illustration you want to use so I'm just going to look around I'm not going to show this whole process I probably speed it up and I'll choose and I'll stop into regular speed once I come up with something I think might work [Music] all right so I really like this one possibly and also possibly this one this illustration here this one I was thinking maybe I could change the headline to something like climb the ladder to success because ultimately that's what people want you want to emphasize benefits over features I was I to always say when it comes to your ad copy the benefit here it's not you're not just taking a skill assessment because you want a skill assessment you wanna you're taking a skill assessment because you want you want to you want to have a job you want to have a client you know you want to make money and so climbing a ladder you know that's a nice abstract way of demonstrating visually what their ultimate goal is this one right here this kind of has more to do with the fact that you're taking a test I think I might just choose this one I'm not sure how these work I never use them before let's go ahead and download that and see how this works exactly I want the SVG download includes at SVG okay you know what I'll go ahead and I'll give them their three dollars screw it I'll give them five dollars so I'll go ahead and do this and probably hide all my check out information and then we'll get it all right so here we go I got it let's view the content and we want the SVG specifically so we'll download that I'm gonna show that here in folder that's off to the side let's hopefully I hope that this is structured in such a way that I can easily modify it trying to drag it over not sure what's happening there it goes it took a little time my computer is just uh getting a little bit slow so we're gonna have to do a little bit of work with this in order to get this to work how we want it to so we're definitely gonna have to change this see this um this graphic right here is pretty meant to work on a white background so like if I change this to white yeah well it's still messed up because it had the gradient option let me change this back to solid to make it white now so you know it looks better if it's on white it was meant to work on white but you know we want to go ahead and make sure we're sticking with the requirements of our of our design of this whole purpose so we're gonna change this color and we'll figure out how to situate this in such a way that it works well and seamlessly with this area so what I will do again is probably just fast-forward this part and you can see what I'm doing and in a time-lapse format [Music] all right so I kind of like how this has turned out I do want to adjust this because I don't want to use lorem ipsum I want this to be a polished landing page but in terms of the design I'm actually pretty happy with it we identify no no no let's change this by the way to reflect the actual illustration I don't quickly something like that I don't like that climb but climb that ladder I meant the alright climb the ladder to success and then this is where we can put a we provide you and employers with the tools to now take our lightning-fast skill assess assess assessment to get I meant I misspelled that to get matched up with with employers today ok here we go all right so I'm just adjusting things slightly here to my liking some of it is subject most of it is subjective I'm because by and large people can read this but getting the type right and getting the line height and all that stuff is I I deal as much as possible yeah overall I pretty much I do like this as it stands I now of course this is just a small portion of a potential landing page I'm sure some of you are wondering you know how exactly would you go about maybe adding more content to this so what I would do is probably split this section up either with a hard just straight container like this or you can take the more Trudeau route and do you know something that's more curvy you'll see you know different types of eye designs like that and you know do you make the white this section you know do you would you would it be worth making it eye dark or a white a lot of that's up to you a lot of that is subjective we could even take this color we could take this color although that doesn't clash that that really doesn't contrast well so that looks kind of ugly but this actually works pretty well we could take it even darker so there's a lot of subjective ways to approach this and then you know what makes sense below this so and maybe a person doesn't want to fill this out and start taking maybe they want to learn a little bit more about what exactly exactly your product is so what would make sense in this area is to have further information explaining you know what this service is and you can do that in multiple formats you can do that maybe like three column feature blip right here where you have maybe an icon with the heading and then maybe a little brief descriptor they have one sentence that elaborates further on what this product is or the service so yeah there's a lot of ways to take it but hopefully this will give you an idea of what you know the core purpose of what this whole exercise is about its thinking in terms of UI you know making sure everything works well you have your color and contrast your visual hierarchy or typography you have your alignment in white spaces all working well and I think it's I've done a pretty good job here and also in terms of UX as well you know thinking in terms of your ad copy relevant imagery associated with it so yeah hopefully you guys found that helpful all right so hopefully you enjoyed that you took something away from it and hopefully you also participate all right so again just do the same process that I did the same exact process of you know choosing the random constraints and then come up with UI design and then use the Tash tag random UI and that way I'll be able to check it out maybe for Friday's livestream which I will be doing a live stream up this coming Friday if you're watching you know in time and not in the future I will show a few of the great examples all right so as always make sure to subscribe and I'll see you soon good bye [Music]

Channel: DesignCourse

Views: 51,121

Rating: 4.9472141 out of 5

Keywords: randomui, ui ux, ui/ux, uiux tutorial, ui/ux tutorial, web design, web design tutorial, ui design, ui design tutorial, gary simon, designcourse, randomui challenge, design challenge

Id: LQw2ljPHJU0

Length: 33min 48sec (2028 seconds)

Published: Tue Jun 02 2020