4 Foundational UI Design Principles | C.R.A.P.

these are the four most important foundational design principles that you must know how to use if you want to be a good ui designer if you can master these four foundational design principles your designs will go from meh to wow all right what are these four foundational principles that you need to know well i tell you they're a giant load of crap that's right the acronym of the day is c-r-a-p and that stands for contrast repetition alignment and proximity some of you out there thought i was just saying something inappropriate but no it has purpose all right contrast repetition alignment proximity what do they mean what do they do let's jump over and take a look right now at our very first one and that's contrast it's all about organizing your design establishing hierarchy emphasizing a focal point and adding visual interest you can do this a lot of different ways you can add contrast with color with weight with size in typography with imagery there's so many different ways that you can do this but let's look at just a few ways in our demonstration today so we're going to jump over to our starting file and we have the start of a website or layout doesn't really matter but we just don't have a whole lot of contrast we have the start to some contrast with a button down here that has a color it kind of stands out but we also have a headline we have no visual interest here so we want to start adding a little bit of contrast in all of these areas to kind of bring this layout to life the first thing we can do just right here in our typography is we can change this piece of typography into a headline and add a little bit of size a little bit of weight and maybe we'll even add a little bit of color so it's at 24 right now let's just bump it up and make it a little bit bigger 54 pixels for this one it's not an exact formula it's just bigger and when we do that let's also take this and move this two weights from medium to semi-bold now we actually have some contrast between this text and this text we're going to bring them together a little bit so they kind of go together and now we need uh that says go out sewed so let's make sure it says go outside but what's the focal point here of this layout or website what's the whole purpose of the content it's most likely about bikes so why don't we add a little bit more interest here why don't we fill this with a nice bright color and we can experiment with putting it you know a little bit closer to our text now we have some contrast between our body copy and our headline all right now we can do our next thing which is add a little bit of visual interest or more of a focal point with our bike let's just make that a little bit bigger kind of offset it off the canvas here and maybe we're not really focusing on alignment right now but let's grab our nav items and line them up and we'll just bring our button up into kind of our layout for our text and everything put this here and this layout just looks about 100 times better and there's just a little bit of contrast added you could add way more you could do a lot more in this layout but this is just the start of creating some visual interest some hierarchy organizing the information using our first letter in our acronym c for contrast all right let's talk next about repetition repetition is all about increasing consistency and user's ability to learn your interface or your layout it reduces confusion when we add repetition to our layouts i'll jump back into my training file and you can see we have maybe another sub page of our website or a different layout but we have the same information it's just thrown around it looks like a yard sale it looks really messy so we want to add some repetition and the more repetition that we can add the easier it is for our user to learn our interface let's just go with one let's pick one and let's make everything else match up a little bit right so in this use case here or in this case we we have a bike on the left let's bring it all the way to the top let's shift it around so all our bikes are facing the same way let's bring this bike up to the top we can try as much as we possibly can to add some alignment let's grab all of our kind of our cards and we'll line them all to the bottom and we will distribute these evenly and we might need to grab all the images of our bikes and line those up as well so they have some even spacing and now we have just a little bit of repetition now it doesn't matter which way you repeat you can repeat things horizontally or vertically diagonally it doesn't matter repetition is adding some rhyme or reason some meeting some order some structure to your layouts i'll tell you it's going to be way better than the yard sale that it was before all right let's jump back over and talk about our next design principle which is alignment alignment organizes and groups elements together it creates rhythm it brings order to chaos we did that a little bit with repetition but we needed to make sure that things were aligned notice in our practice file we went about aligning things to the bottom of our typography but now we have another issue here about creating some rhyme or reason some sense of structure with our alignment now what's really cool is we can grab all of our cards or all of our content just like we did last time distribute them and line them up these are really really messy so we're going to grab all of our text here and make sure they're aligned on the left hand edge look how much better that looks and then we'll grab each of our pieces of text and we will align those to the center with our image of the bike this one is really mixed up and now we can grab all three of those and we can distribute them now what's great is once we group these things together we can see that we've actually created a series of invisible accesses right these are invisible lines that are running horizontally and vertical in our layout we can see that by drawing a rectangle here we have an invisible access that's taking place there right we have another one we have a bunch of them actually that are running horizontally on the tops and bottoms of each of these sections now from here it doesn't matter which way we actually move or rotate or annotate all the elements that we've aligned because as long as they are aligned on one invisible axis there's still order and reason we can grab all of these things we can rotate them to the side and we can scale all of this up and then we can hide our overlay here now this may not be your cup of tea as far as your layout goes but it still makes sense even though it's diagonal off canvas you can't read it you can definitely improve this layout that there is some structure and rhyme and reason because now our invisible accesses are still there they're just rotated a different way and so creating a sense of alignment will organize even the messiest or experimental layout that you're working on let's talk about our last principle of the day and that is proximity proximity makes elements seem related like they belong together it brings understanding and meaning to multiple elements by grouping them together everybody loves to have a friend and so all the elements in your design they'd probably like to have a friend too let's jump into our design file we'll head over to our proximity the question becomes does this headline belong to this text do these buttons belong together and where the heck does this black friday 50 off deal where does where does that live we just don't know all right let's start from the top to bottom and we'll start adding a little bit of proximity first off we don't know if these navigation elements belong together so we're gonna push them over just like so actually let's just grab all three of them and we will tidy them up and we'll make sure that they are distributed evenly and we can space them however we want but because they have even spacing and they're next to each other and we group them together now they all seem like they belong together how about this typography or this body copy does it belong to this headline it does but it doesn't look like it right now it looks like a distant relative let's make it part of the family by bringing it a little bit closer how about this button we'll bring that closer to the other button and maybe we'll add our black friday deal text right underneath it and we'll grab these items group those together and that's part of this layout as well let's bring it up and group the whole thing together we'll bring it out to the side so we add some alignment to our layout and let's add some visual interest creating some white space but some contrast and a little bit of visual interest with our image and we could do that a little bit more by again highlighting our word bikes and changing that some sort of fun contrasting color this layout is about a hundred times better than it was previously because we've applied contrast repetition alignment and now proximity all right those are the four most important design principles if you want to be a good ui designer i hope you enjoyed the video if you did make sure you leave a thumbs up subscribe the channel hit the little bell icon so you know when more videos like this one come out if you have any questions make sure you leave those down in the comments check the description for some helpful links let me know what other design principles you think are super important i would love to hear from you i hope you're having an amazing week hope you're designing amazing things making amazing things and i hope you are nailing these foundations to make your designs absolutely fantastic i'll see you in the next

Channel: Jesse Showalter

Views: 159,387

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, ui design, design principles, web designer career, graphic design trends 2022, graphic design principles, ui design tutorial for beginners, ui design basics, how to become a ui designer with no experience, how to become a ui designer reddit, how to become a better ui designer, how to become a professional ui designer

Id: uwNClNmekGU

Length: 9min 15sec (555 seconds)

Published: Wed Apr 13 2022