Master Spacing in UI Design 💪

Подписаться 386 тыс.

Просмотров 28 тыс.

50% 1

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/1...

Опубликовано:

11 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 35

@billgalloway1799 2 месяца назад

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.

@SzabatDesign 2 месяца назад

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

@MyOddTv 2 месяца назад

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

@veryslowtravel Месяц назад

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

@billgalloway1799 2 месяца назад

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.

@nickshmaaks 2 месяца назад

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

@radiansinus8126 Месяц назад

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

@Anesu_K. 2 месяца назад

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

@saliuarts Месяц назад

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

@shashankdogra Месяц назад

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

@mouse6818 2 месяца назад

thank you so much!

@prmcabrita 2 месяца назад

Great video!

@2405krishna Месяц назад

Nice one Jesse, tq

@yamitmatmon5981 Месяц назад

Thank you

@telagathotiveeraiah8805 23 дня назад

nice video jesse

@SamiraSattarSimin 17 дней назад

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

@arthurbrasil3716 2 месяца назад

love when brandon urie drops new UI tutorials

@jeremyfultineer7 2 месяца назад

I chimed in, but haven’t you designers ever heard of… Using an eight point grid? No it’s much better to space these kinds of things with a rule of proximity

@arthurbrasil3716 2 месяца назад

@@jeremyfultineer7 HAHAHAHAHAHA good one why i was reading and singing it 😂😂

@PrasunOnYoutube 19 дней назад

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

@prmcabrita 2 месяца назад

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

@spreadItWide 2 месяца назад

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).

@amanrao9702 Месяц назад

40px is sweet spot for smaller button size. Try it once ! 😊

@spreadItWide Месяц назад

@@amanrao9702 Appreciate that! I'll check it out!

@ItsLenny24 Месяц назад

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?

@AndresLopez-zj2ki 2 месяца назад

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

@DesignDen673 2 месяца назад

What is the font used for titles?

@MitchelWangui Месяц назад

I would give this 100 likes❤

@personalquests 2 месяца назад

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

@madhawapriyashantha3722 Месяц назад

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

@AJ-vy4yu 15 дней назад

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

@JesseShowalter 11 дней назад

Ok thanks!

@BGdev305 2 месяца назад

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?

@alikhan6259 Месяц назад

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.