Were the department names in the example under "by department" representing clickable tabs? The inactive text was too saturated and it could have helped to have something more than bold text to indicate which department was selected. The spacing was beautiful, and it was a lot easier to spot how weird that department labeling was with the wider spacing, so win!

data-onlogin is not working. Both the texts are shown even if the attributes are added inspite of login status. Can you help here?

Who the fuck waste their time on this 😂, as if there’s no better use of our time

Just signed up on your website to be notified when you implement this in Figma. Thanks and can't wait 🙂

Thank you so much. Fibonacci dream.

Great video

this is just an ad for his product, smh

A very nice video. Simple, informative and straight to the point. While all of this seems like common sense to me, it really isn't for many people. That's why this kind of content is needed, thank you.

Wow! This video is so well made. What program did you use to make this video?!

At 7:21, does X = pixel height of largest font size?? How does "Font Size" works? Can you explain it a little bit better? I think font size is a core concept should prob deserve a separate video.

I never thought I'd enjoy watching PowerPoint presentations this much

Play button was a nice highlight. Of course, just defining the center as halfway between the rightmost and leftmost point of the triangle is wrong, since there is “more” of the triangle to the left. So what we should be doing is using the centroid of the shape. This gives a better point to use to define the center, from which we could then define the spacing in a way that looks optically correct

So glad this channel appeared on my recommended.

The spacing looks nice (after all, that was the subject of the video), but I think your text color choices have too little contrast for readability, especially the body text.

interesting psychology

First half of the vid had me contemplating life, last half was actually good.

I study computer science but I have obsession in ui/ux. And I 100% sure I'll be front end dev after I graduate. It always felt great when I already know most of this stuff not by studying design but by feeling it (and building dozens of personal project) LOL

This looks and feels amazing! which software do you use for editing?

My inner nerd is suffering at your use of "symmetrical"

The imaginary shit that humans come up with to make their lives complicated. The upsetting reality is I need this bullshit for Front-End Dev work.

Even tho technically this was an ad. I like that it was informative and also allowed the user to choose their own path based on their exp etc. This is ads done right.

This feels like you're telling me which buttons to press without actually educating me on the underlying logic.

Apply it to your thumbnail SPACIN G😂

What about padding and margins from the borders? When to use padding vs margin and how much?

7:10 Is it just me or do the actual tables look waaay better with no spacing? Personally, I'm a huge fan of information density (where it makes sense). I feel like 95% of 'modern' designs have way too blown up spacing, unnecessarily :/

Visual art is based on visual principles. Trying to boil it down to an equation is admirable, but it fails. Optical adjustments bolster human judgement, which is always required in design thinking and implementation.

Secret science = subscription

Do you know if tailwind css uses these rules and if not have you thought of creating a plugin for it?

Thanks this helps a non designer like myself understand some of the concepts behind the science of UX. Def subscribing!

Great video. Impressive animations. I took so many typography classes and excelled in them. If you are a design student, I recommend doing the same. 95% of design uses typography, and port typography can easily ruin your work. Spacing will become second nature after time.

Excellent video I've often done mathematically equal spaces and I just know it looks wrong. Thanks for letting me know i'm not crazy.

Should you eyeball it? No. Proceed with SML units. Want to know the numbers? Hire us 👎

Cool ad

🎯 Key points for quick navigation: 00:02 *❓ Importance of spacing in UI design explained with questions about heading and paragraph spacing.* 00:29 *🔄 Introduction of subheading complicates spacing decisions.* 00:56 *🎨 Comparing properly spaced card designs to show balance and optical corrections.* 01:11 *🔍 Explanation of optical corrections in symmetrical padding.* 02:07 *🧩 Complexity of spacing relationships and introduction of three laws of spacing.* 02:34 *📊 Relationship strength determines element proximity in UI.* 03:29 *🔄 Adjusting UI elements based on content changes relationship dynamics.* 04:12 *🔢 Using preset spacing values from a scaling system for consistency.* 04:53 *📝 Example of spacing in an employee handbook design using Lift Kit system.* 06:04 *⚖️ Importance of varying spacing levels for clarity and readability.* 07:11 *🛠️ Different methods to implement the spacing system: Lift Kit, DIY, or hiring Chainlift.* 08:06 *🚀 Lift Kit’s benefits: free, lightweight, and easy to learn.* 08:20 *🧠 DIY method explained: involves formulas and practice, but offers customization.* 09:02 *🤝 Hiring Chainlift for setup and support, including QA and training.* 09:28 *📞 Encouragement to leave comments and contact for questions and support.* Made with HARPA AI

Dang! It was only halfway through that I realized this was a web channel. Was hoping for the actual math so I can apply it to print work. Medium articles aren’t clear. Always had issues with the math.

At 1:00 I honestly like the one on the left more.

Hi ! I really like the way you present everything, it’s so smooth ! What software do you use ? I mean even when you move your mouse that looks smooth.

this is just awesome, happy that I came across this, beautifully explained, definitely subscribing to see more videos👏

hi, I loved the video. Your content inspired me a lot to make properly spaced content for my college club's website... I wanted to know what the scaling factor should be for mobile devices, should it also be 1.618? That make the Display 1 and 2 fonts much more larger... So I thought about changing the scale factor to rt(1.618) or ^1/4 and so on... Is that how it is to be done? Also, I am eagerly waiting for the Figma plugin! Thank you!!!

i always struggled with spacing, this video really helped me

This is the most satisfying thing I've watched since ever.

Top quality video bro

The video is great. Sometimes we have the logic in our head but it becomes a little complex and technical when we lay it out to our team. Absolutely loved the way you have presented it and the pacing is spot on. Thank you so so much!

I am really glad I found this

Subjective design is subjective. Theres some decent nuggets here that help someone getting into UI/UX and wants a quick overview of whats possible as far as spacing but i wouldn't call this a science. I would also expand on how all of this system would react to outside overrides like zooming, accessibility and responsiveness where you start entering the world of rems and relative scaling. Interesting video but I think there's a lot more to this that needs to be taken into consideration. We try so hard as humans to build formulas for everything and while that helps streamline things a bit, i also feel like it makes art and design rather soulless and sterile. But again, thats just my opinion. Happy designing!

Thank you for both part 1 and 2 - these are great videos. Only guessing at audience here, but I don't mind the tech detail or math at all. Would love to see more. Sidenote - for iOS ListItem, in addition to your example top/bot margins, what do you think of shifting the active item text over left ( pulled tab look )?

Getting that satisfying spacing is the exact reason I use monospaced in documents, single heading and just use three character sizes which are multiples of 4.

What tool do you use to animate videos like this one?

The hardest thing about design in general is this. I keep ripping my hair when ever I open a new project.

Wait what?? I can just add a few main colors and it will create other states?? 🤯🤯🤯 Mind blowing!!!