Master Spacing in UI Design 💪

when you're designing a mobile app spacing is one of the hardest things to get right and it's one of the biggest differences between junior designers and Senior designers who have mastered the art of spacing so in this video I'm going to show you a couple tips and tricks to help you become a master of spacing in Mobile UI design step one to mastering spacing as a UI designer is very simple you need to choose adopt and adhere to some sort of spacing system of your choice I prefer an pixel grid system because it gives me a small Base number I can multiply off of that divide things by it and I use that base number for everything for spacing for rounding my corners for sizing my typography I just use it for everything you don't have to use the one I use but you do have to use something that at least allows you to make decisions quickly and ask less questions for instance we jump over to this design in figma you can see that I turn on my grids and I have a six column grid now this is super helpful if I want to space things and size things you know on screen but it's not dictating or giving me a lot of understanding of what to do and how to space things how to round things when I adopt something like an 8 pixel grid you can see here I've just come over to my artboard I've turned off that six column and I've created a new 8 pixel grid this allows me to place things exactly where I want to place them just on those grid lines and when I'm thinking about spacing I'm asking asking myself ooh how far away should I space this card from the next card it's really easy I'm just going to come down here and I'm obviously going to use something that's divisible by eight so it's either 8 16 maybe if I want to go really small I could do four but it's always going to be adhering to and embracing a spacing system of some kind another thing you need to do to master UI design is to get on board with a couple of hard and fast rules that us UI designers have come to know over time just work one of those is that there should probably be at least six pixels of spacing between elements in your design you can see we have a little badge here or a logo with a text lock up and that text lockup is about one pixel away from that badge and you can compare that to down here we have at least six pixels of spacing and doesn't look like a very big difference right here but as we start to scale out you can see how cluttered how illegible that is it's just a bad experience it's hard to read it's just not a good vibe so spacing things away about six pixels is is going to help you in your design there are some exceptions but try to honor that rule as much as possible there's some other rules like making sure that your buttons that are taable are spaced anywhere between 12 and 42 pixels apart that depends on the size of the buttons but one of the bigger ones is to really contrast and compare this idea of Whit space is to embrace whites space and make sure that you're not afraid of whites space but number two don't disconnect things so much that they no longer hold any grouping or relationship these are some hard fast rules some mental models and some numbers for you to adopt into your design and if you do that it's going to help you master spacing I want to take a quick moment to thank mobin for sponsoring this video mobin is The Internet's number one largest and freshest place for UI ux and digital product designers to find inspiration it has over a thousand different applications on there 300,000 plus screens and 60,000 individual flows that I go to pretty much daily to level up my skills to get inspiration to learn how to solve problems that other people that are way smarter than me have already solved why would I want to reinvent the wheel when I can actually go and experience all the wheels that have already been created over at mobin domcom I'm especially in love with the fact that when I go to mobin I can search and filter and find exactly what I'm looking for specific applications specific platforms specific flows if I'm looking for a login somebody's already done it if I'm looking for an onboarding and how that should work I can find it downloaded use the figma plugin get it into my project and start to use it for my stakeholder meetings and my client meetings mobin is the number one place that I go pretty much every day and you should too if you want to level up your skills and FastTrack the amount of time it takes you to solve any one particular problem head over to mob.com there's a link down in the description become a fan sign up create a free account and love your life the last thing you need to do to master spacing is to really understand scaling of space as we move through our screen why do we space some elements this way but the other elements around them another way how much should these things be apart should they all be the same can I just use eight throughout the answer to that is no and for this I've created a way of thinking about spacing called the outside in method that talks about five different groups let me introduce you to those groups right now the first one you should understand is the wrapper or the outer wrapper this is an element that's probably containing all of the different content in your design and for this outer wrapper you should be somewhere between 24 30 pixels of space you can see this is very very tight it feels like everything's pushed out to the edge so we're going to first space everything inside of an outer wrapper number two then you have containers those containers should actually encapsulate different sections of your application so here you can see we have a grouping of full-time jobs we have another grouping of freelance jobs and each of these groupings contain cards and rows titles and iconography because of that we can start to put them in their own sections and start to figure out how far should this title be from these individual cards and that is how we can start to contain elements into these larger groupings next you have your actual groups these are groupings of like items reused components here we have a series of cards these should live in their own grouping so we can determine what the spacing is between each one of them it should be consistent spacing and this spacing should probably be a little bit less than the spacing between the heading inside of of that other container The Heading and the group itself next you have your cards or rows these are very very popular components or way of Designing in mobile applications each of the cards or rows should probably have some internal padding so how far away is this row of content from the the copy in the middle and the copy itself from all the controls at the bottom we probably need to establish some sort of Rhyme or Reason and it's probably less than the spacing in between the Cards if we have eight here this should probably be either eight or six potentially maybe even a little bit less and then lastly you have the individual elements themselves we have all of those elements and they should have their own types of spacing and again we're going to adhere to that principle of spacing things in a way where we Embrace white space but not so much where we lose proximity and this is a give and take a playful experience where you can start adhering to the rules set but experimenting slightly to get different effects but if we have that rule set we have that understanding in and what I'm about to show you becomes incredibly easy you can see we have a before and after of the same design here's what we did we applied a wrapper to our design that was that first outer wrapper container and inside of that wrapper we've given it 24 pixels of padding a lot of times people will use 30 that's fine too that's nice and spacious and Airy I like 24 because it aderes to this 8 pixel grid that I'm such a fan of everything is flush to the edges of this wrapper and it's 24 pixels away then I established 32 pixels of spacing in between my sections you can see this is a section and it's about 32 pixels away and you have another section of content and it's also 32 pixels away we've jumped up a little bit 4 to 32 but that's okay our next step down is going to be 24 pixels between the titles and the content so now instead of having 32 pixels of spacing here we now have 24 pixels what we're saying is that these are more closely related these are more grouped and have a connection to one another than maybe this line or these elements are to this so my title directly relates here it needs to be closer to the cards than this career tag is to the title itself so we're going from the outside in next we're going to do 16 pixels of spacing inside of the cards so we have our actual cards here and this section is about 16 pixels away you can see how we move from 24 16 we're just decreasing the spacing as we tighten things up which is really really nice and then we have eight pixels of horizontal spacing for buttons and tags we have those inside here you can see are seven or eight pixels of spacing I got to fix these up a little bit I'm just going to grab my auto layout and increase that sizing just a tad bit now they're eight pixels away and lastly we have six pixels of space in between our regular elements that we've already talked about that feels really good now again we do have some elements pushed over to the right hand side and that's a stylistic choice to disperse information but so much of this design that I've recreated is now adhering to these spacing rules that we've talked about and it's just much cleaner you can tell that this fulltime tag relates to or label excuse me relates to these cards but it doesn't necessarily relate to the next section everything is really laid out spacious I'm embracing white space but there's still connection between the elements now now this is why Auto layout is so huge in figma why you should adhere to a system of some kind but that's it if you can adhere to those rules you can really start to master your spacing and you can design much quicker much more efficiently and much more beautifully thanks for watching this video If you enjoyed it make sure you leave a thumbs up subscribe to the channel and ring the bell so you know when more UI design content comes out if you have any questions leave those down in the comments and check the description for some awesome links like a link to mobin where you can find tons of design inspiration examples of good spacing as well as a link to my 30-day UI design program where you can learn about spacing as well as 40 hours plus of other UI design content it is the best UI design program on the market right now highly encourage you to check those links out down in the description and if you're looking for more content definitely check out the videos that are posted somewhere around here and we'll see you in the next one

Channel: Jesse Showalter

Views: 32,808

Keywords: jesse showalter, jesse showalter design, learn ui design, learn ux design, figma, webflow, notion, freelance design, UI Spacing, UI Design, Tutorial, Design Tutorial

Id: cf95Z7Ngg8k

Length: 10min 22sec (622 seconds)

Published: Wed Apr 10 2024