Master Spacing in UI Design 💪

35,836

1,697 0

Published 2024-04-10

Join us in this video as we delve into the art of mastering spacing in UI design. We'll share key tips and strategies, such as embracing the 8pt grid for consistent and precise spacing, understanding the basics of spacing, and how to effectively use white space. This video will provide you with the knowledge you need to create a harmonious and visually appealing user interface. Don't miss out on these vital design insights!... Remember to Subscribe goo.gl/6vCw64

Try out Mobbin: mobbin.com/?via=jesse
------------------------------------------------------------------------------------
🤝 //////////// Become a UI Designer in 30 Days:
30dayui.com/

🏆 //////////// Join my free member's community to get access to perks:
designchamps.io/
------------------------------------------------------------------------------------
🎨 ////////// I Design in Figma
psxid.figma.com/ixbomhqzoiy0

🖥️ ////////// I Build websites in Framer
framer.link/jesse

🖥️ ////////// I Prototype Magic in ProtoPie
www.protopie.io/plans?ref=jesse

📅 ////////// I run my life with Notion
affiliate.notion.so/tokendsfahjf

🎵 ////////// Take your films to the next level with music from Musicbed. Sign up for a free account to listen for yourself: fm.pxf.io/c/1372011/1347628/16252

All Comments (21)

@MyOddTv 3 months ago

Been looking for something like this to have a better understand on how to make a system working within UI. THANK YOU!!!
@veryslowtravel 2 months ago

Thanks Jesse! I really enjoy these more specific, detailed videos!
@SzabatDesign 3 months ago

Spacing is king! For me the most important thing in UI . Nice video Jesse, Cheers 😁✏
@nickshmaaks 3 months ago

Nice vid! Definitely the one of the most underrated skills that juniors should develop asap!
@radiansinus8126 3 months ago

Great explanation Jesse, it really helped me. Thanks for making this.
@Anesu_K. 3 months ago

Thank you so much. I was looking for a video like this
@billgalloway1799 3 months ago

A grid defines the amount of variable width columns across the page. E.g. 12,8,6,4 the gutters and padding are based on the base REM usually 16px which is decidable by eight. This allows your horizontal grid to fit any screen width as you change column count between break points and columns scale horizontally between each break point.
@saliuarts 3 months ago

Thanks so much. This video made alot of things clearer to me
@shashankdogra 3 months ago

Spacing is so important! I can’t stress it enough
@prmcabrita 3 months ago

Great video!
@mouse6818 3 months ago

thank you so much!
@nilanjanaajayant8189 21 days ago

hi thank you so much for these tutorials! they've been immensely helpful as a junior designer. I was hoping you could make more videos like portfolio or case study reviews where you point out common mistakes and things you would improve in them :) thanks!
@billgalloway1799 3 months ago

Can’t believe that you didn’t mention your 8px grid is driven by the base em being 16px. Im assuming that’s why you do it. Everything in typography is driven from the base M of set and the equivalent in digital is the base REM which is invariable 16px. This is exactly how I work and now with tokens it’s so easy. Thanks for reassuring me about my design practices and for helping to keeping me relevant.
@2405krishna 3 months ago

Nice one Jesse, tq
@telagathotiveeraiah8805 2 months ago

nice video jesse
@yamitmatmon5981 2 months ago

Thank you
@SamiraSattarSimin 2 months ago

thank you so much..this was really helpful. All this time my spacing was messed up
@arthurbrasil3716 3 months ago

love when brandon urie drops new UI tutorials
@prmcabrita 3 months ago

How do you adjust your 8px grid (Figma) if the width is different on different devices (to have equal divisions accross the width)? Thanks :)
@PrasunOnYoutube 2 months ago

Can you do a similar video of choosing ui colours for light and dark mode