Master Spacing in UI Design 💪

Hey i loved your video, can you please help with typography sizes for mobile design

For vertical trimming of text – Do you keep it standard or do you go for the 'Cap height to baseline' option. If it's the former, do we just look at the bounding box of a the text for measurements? I'm confused because it feels like the padding changes depending on text size too, right?

Thanks

While using 8px gris system can we break rule in some cases as i can see you are using 6 pixels between icon and text .

While using 8px gris system can we break rule in some cases as i can see you are using 6 pixels between icon and text .

For mobile applications you are using 8px grid then for web application which you'll prefer

great explained

you're really good at this

Thank you ❤ you explain very good thanks

thanks and amazing tutorial men

Good stuff as always!!

Always love your stuff. Quick question, do developers prefer working with col grids vs pixel grids? I'd assume cols since it's relative and now you can develop based on cols but I'm wondering if there's a way to easily convert those pixel grid designs to be ready for development. Or perhaps the developers code it by hard-coding paddings/margins with pixels and fill up the containers to be full width? Wondering if anyone has experience/answer to this. Thanks.

want video about typography,header sizes plz

same space also desktop app?

Hey thank you so much. I started my first project and I was confused on how to do padding. So this video helps!

Thank you for sharing!! Save my life!

Pls I have a question
So you used 24px for the padding of the entire screen

Pls what padding did you use for each cards

Using 6px in an 8px system hurts my soul though, and sometimes 8px feels like too far for smaller elements

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!

Thanks for the suggestion of Mobbin man!! Great platform 🎉

Nitpick: the intro song is too loud or your voice is too low volume. My ears went boom. But other than that great video😀

thank you so much..this was really helpful. All this time my spacing was messed up

nice video jesse

Thanks Jesse! I really enjoy these more specific, detailed videos!

Great video! One question: In the video you are refering to a 8px grid, but in the video description it says 8pt grid. Are points and pixels the same?

why 6px?it is not 8 th multiply? If its decimal number then we can have any amount of pixels?

Thank you

I would give this 100 likes❤

I fucking hate your thumbnails

Great explanation Jesse, it really helped me. Thanks for making this.

Thanks so much. This video made alot of things clearer to me

Spacing is so important! I can’t stress it enough

Nice one Jesse, tq

Soo basic. When are you going to share some advance tips. I have been following you for a long time and it seems like you content is catered to beginners.
Sorry for harsh words but I kinda disappointed in you J.

Do you REALLY need to make the big idiotic faces video covers for EVERY video? I mean seriously, is it some youtube algorithm that you creators feel the need to do this for?

thank you so much!

What is the font used for titles?

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.

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.

Can you share the Figma file? Just curious how you set the frames!

Nice vid! Definitely the one of the most underrated skills that juniors should develop asap!

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

How do you adjust your 8px grid (Figma) if the width is different on different devices (to have equal divisions accross the width)? Thanks 🙂

This is truly incredible! Could you provide a review of my application? I've gained so much knowledge from it.

Good stuff! You mentioned the button spacing, do you have any advice for the size of the buttons, specifically the smallest I should make them for finger taps (like, share, report, save, etc. buttons).

Thank you so much. I was looking for a video like this

Great video!

love when brandon urie drops new UI tutorials

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