The Secret Science of Perfect Spacing

[@kubos5500]

FINALLY SOMEONE THAT DOESN'T THINK I'M CRAZY WHEN I TALK ABOUT THIS STUFF

[@pul-sor]

yeah that's because you're watching a graphic designer who thinks about this frequently

[@okseresko]

but even after watching the video I still have so many questions and uncertainty about margins 😭😭

[@feelcollins4358]

@@okseresko What sort of questions have you got? I think it was perfectly explained, as a general rule of thumb you don't aim for mathematical symmetry for margin spacing but optical ones. that said "optical" view can change drastically depending on the composition of the content, I suggest looking through great UI designs like those made by Google team "Material Design" or Apple's design resource etc to train your eyes

[@faizbyp]

fr fr

[@EarendilTheBlessed]

You have a thing for graphic design. Far from everybody has a eye for it. gl hf

[@etsequentia6765]

I'm impressed. The Spacing Guild is a lot more friendly and approachable than I expected.

[@refchannel1167]

top tier comment 👏🏻

[@artxiom]

Let the Sp(a)ice flow...

[@HokoraYinphine]

​@@artxiom"Let the spaice flow"

[@chainliftwebdesign]

can you just imagine a bunch of designerbros in airpod maxes and snapbacks going "yeah bro ill take you right to awwwards"

[@chainliftwebdesign]

floating in tanks of vape clouds

[@nomadshiba]

kde devs needs to watch this

[@零云-u7e]

They can't get theming right just yet. They probably need to hire a straight graphic designer versus programmers doing UX. Well, I got custom colors though. I'm easy.

[@vemuyaswanth803]

true 🤣😭

[@DasIllu]

Well i am on Gnome and i too have to hammer it in shape with addons 😀

[@erlgr]

I laughed so hard at this comment, because it's absolutely true

[@零云-u7e]

@@kishirisu1268 True. Since I've programmed UI, the modus operandi for creating controls and components is relative math based on origin. It's very programmatic. The layout grids are very basic, only left/middle/center/right single anchor attributes with certain frameworks. I think with 4k and 8k, things will evolve... I hope. I look for svg inclusion, mostly for custom graphing, but offloading the manual coding for custom controls that look great is important enough. The boilerplate code for oop inheritance gets ridiculous. It shouldn't be all that for event response. svg is like xml script, you can inline that and modulate the math. The built-in drawing methods are trash.

[@imohitmayank]

A video nobody asked for, but everyone is grateful for👏

[@tommalycha3180]

This may be the most clear and consistent video tutorials for graphic design I have seen. Please create a video about using text sizing and colour value in hierarchy. Thank you for putting out great content! 😀

[@chainliftwebdesign]

Stay tuned, it's on the way!

[@SharifulIslam-ws6cb]

Following...Though Im not a graphics designer...but I love it and sometime apply them to my photos.

[@godblessdaggah921]

You talked loudly clear.

[@m5dznr]

What about using the same mathematical Scale for spacing as you use for scale and even color values? That way, everything within your design is tied together by a single measuring system PS: complete graphic design beginner, but my chemical engineering background is helping me figure this out along the way

[@ralkey]

I am actually surprised at how much I learned from this random video on my home page.

[@NoVIcE_Source]

even considering this is kind of an ad, i didnt even mind that lol

[@chainliftwebdesign]

Genuinely appreciate that, my next one will be less in your face about that haha

[@martink5453]

I'd keep it up You're running a business, not being a KZbinr ;)

[@godblessdaggah921]

So useful, it's like being trained for the purpose of attacking extremely expensive project.

[@krishc.8980]

i was surprised by the level of excellence and quality. definitely underrated

[@chainliftwebdesign]

"surprisingly good" that should be my new slogan! Haha

[@Alias-49013]

6:11 I strongly disagree on the spacings here. Imho it should be A > C > B. The heading is for the whole page, the subheading however is giving context to the paragraph below, so it has to be closer to the paragraph. Putting the subheading closer to the heading makes no sense, since it's losing its context (the paragraph). Imagine that you have one H1 (since every page should only have one semantic H1) and several H2s. All H2s give context to the paragraphs below so they would have to be closer to the paragraph below, whereas the H1 gives context to the complete page and has to stand exposed. This is also like Notion does it, check it, it makes total sense. Other than that, great video!

[@AlexMittsVOID]

"Body text go brrrrr" got me good. Fantastic watch, btw.

[@chainliftwebdesign]

Thank you very much!

[@bruce-le-smith]

haha i appreciated that too, then lorem ipsum

[@MRX-ff4vy]

bodytext go

[@BaldrianSector]

Studying Coded Design. Always struggled to understand why things worked. This was such a great simple explanation and makes so much sense to me. No more eyeballing. 🙌🏻

[@chainliftwebdesign]

Glad it helped!

[@rogerlouie1]

These are all things I have been doing for years, intuitively. My secret? A certain kind of spatio-visual OCD. NOT self-diagnosed. But to see you so thoroughly break down what I'm doing without thinking...man...I can't believe how brilliant your mind is. It's one thing to just quickly get your work done and doing it well. But it is a whole other thing to be able to explain the deep logic, WITH visuals and animation, behind those decisions.

[@chainliftwebdesign]

Brilliant? Nah. Vyvanse and free time. But you're very kind!

[@haveyouseenitthough]

I’m the same (not on the OCD I don’t think but with doing this intuitively) except I’m a dev so I often get frustrated when design give me Figma designs that don’t follow the same rules every time

[@Pixelarter]

This is graphic design 101. Just one principle of Gestalt theory applied (proximity). The video is good in presenting the concept, but the brilliant minds credit should go to the ones that developed Gestalt theory a century ago, like Max Wertheimer.

[@rogerlouie1]

@@Pixelarter Thank you for telling me that I have a naturally brilliant mind that's so good and amazing that I could intuitively skip all that studying of other "brilliant minds" to arrive on good UI and design practices. But I don't think you intended to imply that. Hint: I don't think I have a brilliant mind like you implied.

[@Pixelarter]

@@rogerlouie1 I'm not implying you are brilliant, nor the channel's owner. Although I do recognize the channel's owner good presentation and teaching skills from the video. The way he explained and presented was great. I'm implying you should all study Gestalt applied to design (the studies/discoveries about human perception), that is a foundational knowledge common in the graphic design field, discovered more than a century ago by trully brilliant minds. If you haven't already, you are wasting time rediscovering things that you probably was glimpsed indirectly from other sources (some fragments have become common knowledge), but haven't properly been exposed to.

[@ConorDrew]

This video came up, I had a spare 10 minutes and loved it by the 3rd minute, can’t wait to see more and more of these and going into depth around certain areas. I have a refactoring UI book, and it’s really good, but the way yours animates and really dives in, shows a different perspective, the live demo was amazing too.

[@raxkhmanLite]

ONLY FIFTH VIDEO IN THE CHANNELL!!?? The quality felt like you’ve produced at least hundred of them!

[@YainVieyra]

That's called Design.

[@harane]

im a highschool student who's been considering taking up ui design when im older. all of the things he said in the video clicked with me and i absolutely love the subject matter at hand here. im excited to learn more stuff if i do eventually decide on making this my final career path!

[@rezzieggg]

Awww, that’s great! Keep it up! 🙌🏽

[@Eutrofication]

idk if the channel is gone stay too small forever if you keep putting out bangers like this one

[@wildmonkeymind]

As someone trying to get a better feel for design I really appreciate this, and the visualization and animations for the different spacing were beautifully executed. Beautiful video!

[@gcbpux]

I'm a UX designer, but still loves watching this reviewing and relearning basic stuff. +1

[@ezrahong7343]

My first time watching your content, I'm not sure what kind of channel you are leaning toward but hopefully, it will be purely educational. I don't comment much, but the way you explain and teach is obvious and to the point. Not to mention how well the video was designed!!! Totally subscribe!!!

[@lanceflores9832]

you deserve a lot of subs. such a comprehensive video. thank you!

[@robpt7779]

I am not even remotely in your industry or in need of your services or solutions. But MAN! Was that an satisfying video to watch. Loved it!❤

[@Taha-d2f]

best video I've watched about spacing and thats surprising how much people don't talk about it

[@chainliftwebdesign]

To be honest im genuinely shocked this video is gaining traction I thought there was literally zero interest in this kinda thing haha

[@EvilTim1911]

I'm a developer and I just use the values provided by our designers without much thought, but this video puts into perspective how much thinking has to be done on the design side as well, great stuff

[@patricknelson]

Sometimes, even if you do follow the values from the designers, it might not match the comp because they may not be accounting for things like box height, and line height, and that sort of thing. You might be back to eyeballing it again. 😬

[@mateuszpaszko9542]

The editing is so satisfying, great video !!!

[@noisecrack]

i love this video. it’s so nice to get input from other designers.

[@abdullahiafolabi6905]

Interesting. FINALLY someone here explains what I've been struggling with for a long time . Thanks alot

[@balajprasanna]

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!

[@ErnoSallinen]

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.

[@T.M.W.I.W.F.S.T.C.A.F.A.M]

For a person who has been learning design and has been eyeballing spacing, you justtt...... you just fixed me.... yeah, completely

[@JuanManuelTastzian]

I don't know why I was recommended this, but I'm glad I did. This was super interesting and clear. I am currently designing a very small mockup of a box with a title, an image, etc. to present a digital product, and this comes in very handy. Thanks for sharing!

[@programmers_sanctuary]

Can't believe you have a few subscribers. This video has a great vibe! I knew spacing was essential, but I've only bothered with typescale. I will now bother with spacing as well for aesthetics✨😂.

[@kipchickensout]

This seems to be your first video that's animated and explained this way, I really like it! Needs more subs

Underrated channel, just thinking of improving my design lately and this video got recommended to me, nice.

[@fever4174]

I don’t do anything on the web yet, but this video was pretty useful for my work with printed text documents. Got too sucked into the leading and the sequences, and was wondering why it felt off. Your insights on the semantic relationships was super helpful. Thank you.

[@user-td5gy2fh3p]

Please please please make a full, straight to the point, no fluff course on all this. This is incredibly interesting. As a software engineer, I would love to have this knowledge for when working on my side projects and side hustles. Thanks.

[@rajendra-2023]

super helpful for text arrangement and chunks for working in both digital and print medium. Thank you for the upload.

[@chuck_stones]

This was such a great video! Thanks guys and thank you Duff for being the first bassists playing I really fell in love with!

[@Tiamarruca]

I don´t know why this video appear on my feed, but I´m so greatful for it. Spacing is the hardest thing to do when it comes to do any in design related. I´m just talking as an amateur gal who has to do ton of presentations and infographs. Very helpful!!!

[@tacticsplus]

I had to watch some complementary videos first like about EM, REM, and why use them instead of pixels, what is the golden ratio, etc to understand this video. But it was worth it, simplified so much and gave me a permanent guideline to work with. Thanks.

[@samuelbreuer]

Best sales pitch ever! Fantastic video Thank you!

[@o_sch]

Wow, great video, I thought you would have had way more subs. You definitely deserve more.

[@zakyzigzag]

I work often as book/article formatter, and this video just hits the spot....

[@Umar-fm3vs]

One of the best videos on web design I have watched

[@equip2survive]

Great video!! Super informative!! I have been obsessed with proper spacing for decades now and this was such a great explanation that I NEED to share with my colleagues who just don't get it at all!! LOL!!! Liftkit looks like a great tool! Eager to try it out!

[@RavenMobile]

As a self-taught graphic and web designer, I got annoyed pretty early on with how fonts have a random bounding box, sometimes _WAY_ bigger than the largest letters (they seem to be spaced based on the largest symbol present in the font). So I got in the habit of adding fixed padding to left/right/bottom and then eyeball the top padding. Really annoying that there's not most consistency in this.

[@chainliftwebdesign]

If your text elements line height is set to 1.272 unitless and the font size is derived from golden ratio coefficients measured in rem (e.g. 1.618rem, 1.272rem, 1.128rem, 1.06rem, or 0.618, 0.272, and so on) then you can always get guaranteed perfect top padding by simply making it 1em/1.272.

[@tiruialon]

Bounding boxes exist for a reason. Assuming all letters going into an input tag will always be ascii exclusive is pretty narrow minded. Imagine the world wide chaos that would ensue if browsers decided to pander to that kinda mindset. Hardest clap back of a lifetime. The amount of developers running this kind of 'Works on my machine' mentality is disgusting.

[@livinagoodlife]

@@tiruialontouch grass bro

[@tiruialon]

@@livinagoodlife Craftsmanship has died, and arguably never existed in programming. This is why. Not caring.

[@livinagoodlife]

@@tiruialon craftsmanship has never existed in programming? Man you’re something else.

[@Aj-000]

Awesome video, I've been going through the motions of learning a design system and each category (Color, spacing, typography, etc). feels like a rabbit hole that has no end lol. Your explanations were clear and the animations helped further my understanding a lot, thank you!

[@chainliftwebdesign]

Embrace the rabbit hole! There is a bottom, I promise.

[@webbae]

Garret you absolutely smashed it with this video. I can't wait to learn LiftKit!

[@chainliftwebdesign]

senpai noticed me 👉👈

[@stijns96]

Great video! The main problem is actually the line-height of textual elements together with dynamic content. Imagine I'm creating a simple reusable sections with a heading, subheading and text. The user can type whatever they want. Even capitalize everything. That will make it impossible to set a fixed margin or padding. You probably end up with an extra settings, which you don't want, because the user often doesn't understand this type of spacing principle...

[@yakine13]

That's unbelievable well explained. Thank you so much!

[@batchrocketproject4720]

Nice explanation, thanks. I'd never realised how useful treating the bottom margin as the spacer is. I considerably improved the appearance of some basic text markup with some css rules applying the ideas I learned here very quickly. I think I'll delve a little deeper too as the gains will be worth the effort.

[@chainliftwebdesign]

Woohoo! This is so nice to hear, I'm so glad it's helpful!

[@dingchiyue7734]

Love the story and the smooth animation! Thanks!

[@JaylenFast]

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.

[@aitroca06]

I'm obsessed with these free design tools I'm finding. The internet is beautiful.

[@epj-m8s]

Awesome vid. I didn't realize I was watching a video for webflow, and this cemented some of the learnings I've made over the years. Cloneable looks great, will try it.

[@rohanayush]

Just beautiful! Just wanted to say hi! I hope and wish that you make more such great videos and get all appreciation you deserve.

[@TeenPopStarz]

Never liked a video so fast 😩this is just what I needed

[@mihilista]

Awesome, as a web developer I love watching these videos

[@chainliftwebdesign]

Glad you like them!

[@babyboie20]

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

[@flwi]

Wow, what an awesome video! Well done! Must have been a lot of work to animate all that so nicely.

[@mattshu]

Wow the production quality for the size of your channel is insane.

[@chainliftwebdesign]

It's why I only post every 3 months haha

[@KamaKase]

Great video. But I preferred the left box. The heading is too close to the top on the right one when you do the comparison.

[@jonnyhifi]

I’m glad it’s not just me - albeit the video is excellently made - the first example I really disliked it. The narrator said “the right one feels better spaced”, to me the exact opposite. The right one felt really scrunched up awkwardly to the top left … to the extent I’d have commented how badly layed out it was to others. It shows how matters of taste are personal.

[@metapills]

Great stuff. One nitpick, on your Sunny Detroit example, the border radius of the image is too big compared to the border radius of the card that it's nested inside of. Calculation should be: Outer square border radius (Re) - spacing between squares (E) = inner square border radius Ri.

[@nicholashartmann4525]

Wow, this channel is small! I must say I'm impressed by a lot of modern apps, eben 1-man (or woman) projects often have a REALLY clean design and I in general have noticed how much an apps design contributes to me feeling like it's running well an not giving me annoying issues, even thougj they may still be there.

[@mdhcclothing4197]

I’ve been looking for this video for yearsssssss

[@bartekcieslik]

This is a great video! I have zero experience in UI/UX design but I can admire a good web or app design, sometimes I just open different websites or apps and just scrol through them to see how they're designed. This kind of videos are really a great look into how much thoyght there should be behind each design decision. I just had a look at your website out of curosity, and I have to ask: on your 'Who works here?' tab, should not there be more spacing between the first paragraph and the 'What do I do' heading? I am not trying to be fussy, I just watched your video and then saw it immediately after I visited your site :) Thanks again for this stuff, I'll checkout some more! Thumb up!

[@chainliftwebdesign]

Probably should be 😅 been swamped lately so I kinda just threw that one together

[@aissa9225]

The quality of this video is just ✨

[@ryangjijnebds]

smoothest promotional material I've seen.

[@nandhagopal2074]

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

[@Loumo]

I very nearly avoided this video just because of the unnecessary 2nd part of your title (“I Promise This Is Interesting”). Just some feedback! Otherwise very interesting video ;)

[@ArThur_hara]

So he changed the title?

[@madhavraghu]

yes it implies that the video is actually not interesting and we would need some convincing to watch it

[@ShaneCranor]

It would be great if you could condense all this information into a single page cheat sheet to cross reference while designing! Thanks for the video :)

[@chainliftwebdesign]

It's on the way :)

[@ItsWesSmithYo]

lol, the one on the left felt better from the get go 😂 thanks for the spacing fun

[@RobBrogan]

I really liked the friendship model of spacing increments. Instead of xs, sm, md… increments, I’ve heard them called “BFF4L” “BBF” “Friends” “acquaintance” etc. Kinda fun to think of all the elements knowing each other. Anyway, I started a new job and had to wing it on my own. So glad I found this! Might just copy and rename things with the buddy system ;)

[@chainliftwebdesign]

Omg that is cute but I can only imagine how confused I'd be if Id learned English as a second language

[@neelg7057]

Love the aesthetics of the video. Just one suggestion - upload in 4k. It'd make a whole lot of difference 😉

[@thevoicesinmyhead1976]

Awesome content, and I'm just 3 minutes in. Keep it up with the good work. Thank you very much!

[@Bodzilla001]

I think the space between heading and sub-heading needs to be greater than the space between sub-heading and paragraph simply because sub-heading and paragrath have a stronger relationship than heading and sub-heading - other than that, brilliant vid!

[@chainliftwebdesign]

Context-dependent, as always!

[@jaylinbooker]

Love this!! It's so intuitive and informative. I want to learn more!

[@jorgejorge8878]

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

[@abhishekparmar4983]

As an engineer who often does frontend this is gold

[@mcd1814]

Amazing video, as a UX designer I’ve rarely seen such a good explanation for spacing! The thing I’m always confused with is the different spacing settings in Adobe Xd / Figma around text boxes. Does anyone know if the spacing around these is equal to paragraphs (css) with 0 padding?

[@MarioDuch]

This is such a well made video! Calling it now, this will eventually go to the moon. By the way, what are you using for the sick animations? Are you just doing to in your editing software?

[@chainliftwebdesign]

Honestly it's a Figma prototype that I'm just screen recording 😅

[@MarioDuch]

That’s a great way of doing it! Will copy that for myself 😅 Thanks mate!

[@lukeyd13]

I would appreciate a longer version of thisb

[@chainliftwebdesign]

I finished recording it today, I'm so tired 😩

[@davidh.5139]

I live for this kind of stuff. Make a discord for other designers to talk about niche stuff.

[@yassinedghoughi9500]

Thanks for the crystal-clear content! I'm so over those wishy-washy design courses that never get to the point. By the way, do graphic designers get a cheat sheet on how to follow actual rules, or is it all just doodles and chaos?

[@chainliftwebdesign]

Cheat sheet otw! But yes there's existing ones. They're just usually bound to a specific platform or medium. Like Tailwind, for example. It's a great design system but it's rules are tough to apply outside of product development.

[@nobody-bt7mu]

So glad this channel appeared on my recommended.

[@smallant.]

Am I the only one that thinks the card on the left in the intro looks better than the one on the right?

[@minecraftingmom]

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!

[@AkanshaMandal-z2l]

i always struggled with spacing, this video really helped me

[@hruzen]

Loved your video, got the best explanation and examples! You earned a sub

[@CristiánVaras-s3l]

Which one is your Patreon Channel? It definitely something worth to pay !

[@SuperWolfkin]

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.

[@mhdm]

Summary: 1) The more related the elements the closer they should be. 2) All spacing values used should be from a small set of exponentially increasing values. 3) For an even-looking spacing put the top left corner of an element on a 45 deg line meeting the top left corner of its container.

[@dzsuvi]

Swear to God man, this is the 7th time I play this video and I fell asleep 7 times. Not a joke, I always try to watch this when I go to bed... and it helps me with sleeping. So.. thanks

[@cdgonepotatoes4219]

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.

[@tofuComputer]

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

[@ce9916]

Please create a UI design course. Your quality of output is insane.

[@ce9916]

I’m talking about the full multi hour course that you can charge $397 that I’ll be happy to pay

[@ce9916]

And by the way, since I just discovered your channel and I’ve been watching your other videos, I’m talking about a technology agnostic UI design course, specifically Webflow agnostic. I just a dev with shitty UI tastes who needs your help

[@NghiaHoang-nt4ib]

I lost it at "Body text go brrrr and then lorem ipsum..."

[@parkerhemming]

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

[@xn--b81a]

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

[@LW-zb8bf]

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

[@Touchgrassplz]

Yo this was helpful af and i love your rapndom ramblings

[@rdmercer]

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.