Using Tools & Resources to Design a Layout -- Randomly!

Key Takeaways

what is up everybody gary simon here so yes you don't see me behind the camera as normal or as usual rather because i'm revamping my room and stuff is just a mess anyhow so today's video i thought it'd be interesting i've done a few of these in the past already uh where we basically just take as many and use as many tools and resources as possible to help us design a ui so the first tool is going to be basically coming up with a random app idea generator of sorts um and then the next one's going to be using a random font pairing from a nice resource i'll link i'll try to remember to link these in the youtube description i also use ai to generate an image that might be relevant and so yeah this is the actual uh project that we're gonna come up and if you're interested in seeing how i kind of come up with this sort of design definitely keep watching make sure to subscribe and let's get started [Music] now chances are if you're watching this video you probably want to be a better designer and if that's the case how much do you really want it because at designcourse.com i've created a ui ux course that will help you go from designing layouts that i might rate a four or five up to eight and beyond but more important than that as a better designer this means that you can land higher paying clients in jobs this course includes over 16 hours of video 40 interactive ui design tests and even mentorship where i personally take a look at your work that you submit i review it and many times i also revise it providing you with great feedback to help you become a better designer now for this video i want you to use the coupon code ui ui2022 and that will give you 22 off at checkout all right so let's get started here with the actual app idea itself so the app idea um as mentioned uh 60 random app ideas i'm just going to choose a random one so i don't have any biases so to speak so minimum 1 maximum is going to be 61. i think there's 61. let's hit generate is going to be number 56. let's control f to 56. and it's apps that scan a terms and conditions not many software i don't think it was an english name uh speaking person who wrote this um let's get back here not many software apps and products require user to read a long document detailing terms and conditions many users simply skip this part and go ahead to sign the agreement sometimes there are suspicious or unfair terms added blah blah blah an app that can scan terms and conditions will alert and protect the user of any dubious terms and conditions that's actually a pretty cool idea that's what we're gonna do awesome all right so what we're gonna do now is now that we have the app idea um we are going to use the layout generator all right so i've covered this probably three or four times on the channel already but it's basically at a codepen url i'll try to remember to link it in the youtube description here and what it allows you to do uh you can see there's a ton of different just blocks here is to just generate kind of like a a like a scaffolding of so to speak of a ui layout so um i think what we'll do thinking about this let's have a kind of a typical sort of uh section where we have like a hero section let me uh mute this phone and we'll also have uh i'm not sure if we'll deal with the navigation but uh we just kind of want to showcase i like a feature maybe with three other features or two other features or something like that so um we can make it more interesting by choosing number columns like really boosting that up and boosting a lot of cards as well and we can kind of just come out here and randomly choose i a section here that will serve as like scaffolding so to speak of our layout so um i don't want to spend too much time here uh so i think what i'll do is probably just choose a section here and then just work with it and go back up let's choose like right here so what i'm going to do is i just copy all this all right so that's my screenshot tool and then we're going to come down here we're going to go to figma you can use whatever you want i'm going to use a desktop of this right here and i'm going to paste this in and scale it down we'll probably scale it down roughly yeah right around here for now i think would be good okay and then what i'll do is i we can choose to make this maybe like 10 opacity oh that's kind of ugly maybe 30 and this will give us uh just just a general idea of uh what we should do actually what we could do is just kind of outline it with our own real quickly so um these aren't necessarily going to be i'm not necessarily going to use all these um but i'll try to just recreate real quickly this side scaffolding as i mentioned like i said we may or may not use some of these um entirely up to us so um it's an app i that scans terms and conditions so let's come up with a a quick let's come up well you know we don't necessarily have to have a navigation up top this doesn't even necessarily have to be a hero section it just could be a random section in the middle of like a design or layout or something like that or landing page so um with that said um let's get a title up or something so let's just get a we're going to say read um let's do read t and c of course i'm going to make this much larger read t and c no read the terms in cliff note fashion something like that all right so um for the font now for now let's just boost this up to like 45 or 46 or something and let's let's get a font going here um i'm also like i mentioned uh going to use a tool for that so let's go back here i we have a font pair dot co so what do we want to use i you know what let's let's gamify this as well so we have one two three four five six different choices for font categories let's use a random generator one through six we're going to use five so that means display okay so we'll do that and let's see here let's take a look at which one we might want to use um i kind of like antone anton let's open that up play fair display of course that's always a a good choice to go with for a serif all right so i'm at font pair dot co forward slash all uh there's a ton of font pairs so let's gamify this as well um i'll just go like 1 through 40 i think for a random generator and we're just going to let it choose for us and we're stuck with whatever we get stuck with so number 19. so that means i'm going to go here i will just kind of count it like one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen sixteen seventeen eighteen nineteen right there so cor cormor something garamond and pros of libra all right so um let's see what this what this is all right let's see if we have this inside of figma let's see here here's garamond itself what was it called let me go back core c-o-r-m yeah there it is they have okay good they have a bunch of different uh font weights i i'll be honest i don't really like it that much but you know what we're gonna stick with it anyhow um let's see uh the next one so if we have a sub headline the other one was going back here proza all right so let's bring this back there it is all right so regular and make it a lot smaller so you know something like 24 all right can't go any bolder than that really want to increase what's called a visual hierarchy between these two you don't want something like uh this type of situation there's not a ton of difference between this type and this type even though it is smaller and there are different fonts uh you really want to boost that up much more so if we do like 60 i you know we can do let's not do that um yeah something like that should work just fine all right and then we'll have no one reads lengthy terms and conditions but sometimes they include dubious is that what they said dubious uh dubious stipulations that you should know about all right something like that i'm going to go even smaller we're going to increase that leading or the line height all right all right we're going to stick with this for now by the way we want to take all this stuff we're going to group it and make sure it's centered all right there we go of course this isn't going to be visible we're just kind of using it as a general uh template okay we should also consider let's start considering uh imagery of some sort so um terms and conditions you know what would be appropriate imagery for something like that it's very legal that doesn't really give us much to work with um you know i think maybe at this point i'm gonna use um mid journey ai because i think that's one of the things i wanted to integrate here some sort of uh artwork that's generated that has something to do with cliff notes and and terms and conditions i know very strange let's let's see what we can come up with though all right so here we are i'm going to say um imagine uh let's do monster reading a document um cartoon 4k let's give it a shot zero clue how this is going to turn out all right i actually like this one over here the lower left corner so let's get the upscale version of number three and there it is i actually kind of like this awesome okay so now what i'll do is i copy the image actually no i'll just kind of drag it off to my monitor it's in png format which works well um now we have to think about how we want to integrate this um we have options i okay we have to make sure that our text contrasts well now i'm going to hide this here um this this whole group so let's uh hide that and let's get in a column here and we will give it a fill of image and i'll drag that in all right that's supposed to work what am i doing here drag that sucker in right there okay look at that that is so freaking cool we could just you have a real simple layout and just have this this and maybe like a call to action button of some sort and just have this on the right but we do want to make something that's a little bit more interesting and kind of at least we'll follow that scaffolding at least to to a certain degree if we bring it back uh and we bring this back we can try to formulate something that will make sense with this image here and again we don't have to put it here we could i let's see we could you know kind of make it this square all right so let's hide this fill yep and then we could change it to crop let's see here yeah we don't want to do that we kind of want the whole monster there so i think i like my other idea better just to include this maybe on the right side now we can possibly overlap things so let's uh let's bring this back um no not that this group there we go all right we'll bring this to the top all right how do i want to handle this let's uh get in here and copy that and then we'll hide this just hide the layer there we go all right so maybe we could do something like this but we're gonna make oh i like this idea let's see we're gonna take this this color right here but we're gonna kind of make it just uh almost all gray but a little bit of that color there that way we can make this white and it'll make it stick out a lot more all right all right let's use the uh the at this point let's use the blob generator thing that we have let's see where is that at okay um this will give us some random shape i like that one right there all right so how do i download this just click download it's an svg okay all right showing up on the other monitor let's um let's do this let's duplicate that and then we'll take this from solid to image and then can i do svg in there no i can't no well that sucks well let's do this then we'll just drag it on and then i will make this let's here let's uh take that vector let's ungroup that now let's take this right here maybe we'll put it like right there and then do that okay so now we can obviously position this you know if we need to in some other c regard now as far as the color scheme goes the because we're using a photograph the photograph really helps set it can help set the uh the color scheme already so i have white we have browns we have this eyeball color like this is this is a pretty good already now i think i might want to make this more like a watermark um and maybe something more like this where it's slightly darker [Music] or we could perhaps rotate it around and kind of push it over here yeah there's all sorts of things we could do okay um now let's get some content for the inside portion like what would this even be um no because we're talking about cliff notes and like like kind of like i'm thinking of a magnifying glass or something we can make a magnifying glass real quickly actually let's not do that let's just let's rely on tools we're supposed to a codify well let's type in magnify in a second here oh it's already up um okay do something like that maybe move this up a bit maybe this would be like a a lead collection form so we can say right here we'll say i [Music] beta test our app no how about become a beta tester now let's scale that down we'll try like 30. okay so now we'll put in um we'll take this type we'll use that font for an email a name and email address i guess so we'll do name here and we will do that all right um let's make this white i give it slightly rounded corners and then give it a stroke we can use a black stroke that's fine no problem with that actually i might just want to do email address we don't need your name all right i'm still not happy with this i i think that's a little bit better oh and by the way this i don't like this um where's that magnifying glass let's uh what happened there oh there it is okay let's do this instead and make it kind of like a watermark something like that put it to the very bottom and then this is a part of the here let's get that out of there there we go now we can go ahead and take the selection color and [Music] yeah just do something like that you know we could experiment with positioning i kind of want it off to the side i like that yeah yeah something like that okay cool now going back to the this section now we can move this stuff over all right and then we'll have let's see um trying to determine how i want to make and structure this eye section here let's take like a subheading here we'll make this extra small like 14. um i agree to the terms and conditions isn't that funny terms and privacy policy all right we'll just take both of those real quick oops i keep on pressing my zoom up thing let's i don't have it running though let's uh let's underline that type right there and this type now let's take this let's make it high contrast we can make it black i kind of like that let's take both of these all right now for the type um let's bring this here bring it to the front that's not the front gary it's a wrong bracket key damn it there we go sign me up take both those auto layout them center all right now i don't like this empty space here so you know we could do this but that's silly um i think i'm gonna keep it over here we could have a two-column approach over here or we could also let's take a i do like how it kind of overlaps a little bit but maybe not quite as much now this blob thingy right here um there you go this should be a square by the way so 24 by maybe 21 by 21 okay so in and of itself this layout we could consider to be just complete um can also maybe replicate this to come up with a a slightly different idea so if this this these are let's just rounded corners here for this it's 12. all right so let's make this 12. and we could do something interesting maybe bringing back that original idea or is that all right so let's see here there's a lot of columns we don't have to use them all you know we could do something like maybe these four right here and then we had a few things down here so let's hide that now i don't like how these barely match up and and don't really meet up well so we can ignore that portion all right and we could have this underneath it although you don't want to just try to create columns and stick to exactly what that template was just for the sake of doing so i you don't want an unnecessarily complex layout i don't like this empty space i'm trying to think about what might be relevant to put here because otherwise if not you know we can just take it in kind of like that and then maybe one way we could bring those back is if we bring this here just copy those hide them bring them back could use these as like some sort of like just interesting aesthetic um with like just color and or photographs that are inside of it so let's let's give it a shot with unsplash and we don't have to use them all we can also change up the shapes so terms of service yeah we could do that um let's put that one right there and you know we can delete this one getting a little bit busy so you know we could maybe push that off and maybe we can use some um let's see here let's make these white this is actually pretty solid i know we didn't really stick with that template too much at any degree but um you don't have to i found something that works for the intended app idea we used an ai art to generate something that i think is really cool has style we didn't really need to use any type of um actual color color scheme generator because the the photograph set the tone for that and this is a really good color scheme we could of course play around with different ideas but i think how it looks right now is is great um yeah yeah so another exciting adventure into just random ui design if you guys do this i can become a really you know good way to just gain practice and push you out of your comfort zone