The Secret Science of Perfect Spacing

Рет қаралды 352,173

Күн бұрын

This week, we dive headfirst into something I think about way too much: spacing. Spacing is what gives UI's that "oddly satisfying" feel when done right, and that "something's off" feeling when it's done poorly. How do you design spacing correctly? Should you use a framework? Let's find out!
Learn LiftKit:
www.chainlift.io/liftkit
Get the LiftKit Cloneable Here:
webflow.com/made-in-webflow/w...
Download Chainlift Color from Webflow:
webflow.com/apps/detail/chain...
Questions, Collab Inquiries:
info@chainlift.io

Пікірлер: 516

@romeominecraft5500 2 ай бұрын

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

@8rbit 2 ай бұрын

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

@stepanyaresko 2 ай бұрын

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

@feelcollins4358 2 ай бұрын

@@stepanyaresko 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 23 күн бұрын

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

@etsequentia6765 2 ай бұрын

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

@refchannel1167 2 ай бұрын

top tier comment 👏🏻

@artxiom 2 ай бұрын

Let the Sp(a)ice flow...

@HokoraYinphine 2 ай бұрын

@@artxiom"Let the spaice flow"

@chainlift.official 2 ай бұрын

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

@chainlift.official 2 ай бұрын

floating in tanks of vape clouds

@nomadshiba 2 ай бұрын

kde devs needs to watch this

@greycell2442 2 ай бұрын

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 2 ай бұрын

true 🤣😭

@DasIllu 2 ай бұрын

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

@kishirisu1268 2 ай бұрын

Every linux UI not even using proper grids, they just slap text into window and hope for the best.. probable those people do not have time to watch such tutorials and get better skills.

@erlgr 2 ай бұрын

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

@imohitmayank 2 ай бұрын

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

@tommalycha3180 2 ай бұрын

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! 😀

@chainlift.official 2 ай бұрын

Stay tuned, it's on the way!

@SharifulIslam-ws6cb 22 күн бұрын

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

@godblessdaggah921 19 күн бұрын

You talked loudly clear.

@ralkey 2 ай бұрын

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

@NoVIcE_Source 2 ай бұрын

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

@chainlift.official 2 ай бұрын

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

@martink5453 2 ай бұрын

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

@godblessdaggah921 19 күн бұрын

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

@raxkhmanLite 2 ай бұрын

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

@YainVieyra 2 ай бұрын

That's called Design.

@Dominasty 2 ай бұрын

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.

@chainlift.official 2 ай бұрын

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

@haveyouseenitthough 2 ай бұрын

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

@krishc.8980 2 ай бұрын

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

@chainlift.official 2 ай бұрын

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

@BaldrianSector1996 2 ай бұрын

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. 🙌🏻

@chainlift.official 2 ай бұрын

Glad it helped!

@AlexMittsVOID 2 ай бұрын

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

@chainlift.official 2 ай бұрын

Thank you very much!

@bruce-le-smith 2 ай бұрын

haha i appreciated that too, then lorem ipsum

@MRX-ff4vy 2 ай бұрын

bodytext go

@ConorDrew 2 ай бұрын

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.

@lanceflores9832 3 ай бұрын

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

@dingchiyue7734 3 ай бұрын

Love the story and the smooth animation! Thanks!

@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!❤

@Eutrofication 2 ай бұрын

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

@chuck_stones 2 ай бұрын

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

@wildmonkeymind 2 ай бұрын

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!

@user-fp8lc4cv6p 2 ай бұрын

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

@chainlift.official 2 ай бұрын

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

@Umar-fm3vs 2 ай бұрын

One of the best videos on web design I have watched

@astridwilde 2 ай бұрын

simple. elegant. memorable. brilliant. thank you

@yakine13 2 ай бұрын

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

@mateuszpaszko9542 2 ай бұрын

The editing is so satisfying, great video !!!

@MisraPreetiman 2 ай бұрын

Excellent quality and depth of research. Instant sub.

@harane 2 ай бұрын

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!

@ErnoSallinen 7 күн бұрын

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.

@balajprasanna 25 күн бұрын

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!

@samuelbreuer 2 ай бұрын

Best sales pitch ever! Fantastic video Thank you!

@abdullahiafolabi6905 Ай бұрын

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

@thevoicesinmyhead1976 2 ай бұрын

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

@ibnuzzaki9859 2 ай бұрын

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

Ай бұрын

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

@webbae 2 ай бұрын

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

@chainlift.official 2 ай бұрын

senpai noticed me 👉👈

@Metruzanca 2 ай бұрын

This is absolute amazing explanation.

@fever4174 2 ай бұрын

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.

@smallant. 2 ай бұрын

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

@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!

@babyboie20 20 күн бұрын

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

@sergeyagronov9650 2 ай бұрын

excellent video on spacing , really good material and explanations

@evanjoyal9540 Ай бұрын

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.

@user-qk2vd9fd9x 25 күн бұрын

i always struggled with spacing, this video really helped me

@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!!!

@nandhagopal2074 24 күн бұрын

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

@alanrm 2 ай бұрын

What a great video. Hope to see more like this. Subscribed!

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

@jaylinbooker Ай бұрын

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

@Llamaful 2 ай бұрын

Such a high quality video! good work

@LP... 2 ай бұрын

As a frontend developer trying to learn a bit about web design to make sites that sucks less I appreciate your video, Thanks! I always have problems with the line height and the spacing from the border to the text first pixels.

@mhdm 2 ай бұрын

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.

@aissa9225 2 ай бұрын

The quality of this video is just ✨

@nobody-bt7mu 13 күн бұрын

So glad this channel appeared on my recommended.

@olillin 2 ай бұрын

I learnt so much from this! Great video

@jorgejorge8878 25 күн бұрын

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

@andreas-at 2 ай бұрын

this video and explanation are golden! thanky you :)

@RavenMobile 2 ай бұрын

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.

@chainlift.official 2 ай бұрын

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 2 ай бұрын

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 2 ай бұрын

@@tiruialontouch grass bro

@tiruialon 2 ай бұрын

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

@livinagoodlife 2 ай бұрын

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

@tedijevtic6756 Ай бұрын

such a good quality video!!! keep it up

@flwi Ай бұрын

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

@omeizasanni 2 ай бұрын

such incredible value... subbed

@hruzen 2 ай бұрын

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

@willpatersondesign Ай бұрын

Love this video 🎉

@glyakk 27 күн бұрын

I am really glad I found this

@EvilTim1911 2 ай бұрын

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 2 ай бұрын

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

@igrb 2 ай бұрын

this was so helpful, nice vid!

@two_horus7337 2 ай бұрын

Great video! Will be in touch in the coming months 👍

@rohanayush 2 ай бұрын

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

@tofuComputer 6 күн бұрын

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

@Touchgrassplz Ай бұрын

Yo this was helpful af and i love your rapndom ramblings

@JaylenFast 21 күн бұрын

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.

@o_sch 2 ай бұрын

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

@batchrocketproject4720 2 ай бұрын

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.

@chainlift.official 2 ай бұрын

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

@JuanPabloVasquez 2 ай бұрын

this is pure gold 🏆

@programmers_sanctuary 2 ай бұрын

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✨😂.

@illdieanyway7865 12 күн бұрын

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

@user-td5gy2fh3p 2 ай бұрын

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.

@rafaelojeda 2 ай бұрын

This content is incredible!

@kipchickensout 2 ай бұрын

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

@fedeh777 2 ай бұрын

That body text really did go brrrr

@giordanolugo 2 ай бұрын

This is amazing 😮

@lukeyd13 2 ай бұрын

I would appreciate a longer version of thisb

@chainlift.official 2 ай бұрын

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

@alexandercato7400 2 ай бұрын

Appreciate this video so much

@person81045 2 ай бұрын

This was absolutely a pleasure to watch.

@cmyk8964 2 ай бұрын

I liked the left one better than the right one; it felt more balanced. Is it just me being CSS-brained?

@chainlift.official 2 ай бұрын

Nah it's just preference

@_ish 14 сағат бұрын

Right is more balanced, but left looks less cluttered near the top.

@mohitrahaman 2 ай бұрын

very high quality presentation

@davidh.5139 Ай бұрын

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

@skyguy4164 2 ай бұрын

I wish I found you sooner. Much love

@Loumo 2 ай бұрын

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 2 ай бұрын

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

@mattshu 2 ай бұрын

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

@chainlift.official 2 ай бұрын

It's why I only post every 3 months haha

@stijnslats5850 2 ай бұрын

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

@KamaKase 2 ай бұрын

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 2 ай бұрын

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.

@rolandixor 2 ай бұрын

I love this!

@parkerhemming 15 күн бұрын

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

@PopperOfCorn 19 күн бұрын

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

@manashkashyap7780 2 ай бұрын

Damn we need more content like this

@dprophecyguy 2 ай бұрын

So youtube has decided to promote this. Job Well done.

@Aj-000 2 ай бұрын

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!

@chainlift.official 2 ай бұрын

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

@Bodzilla001 2 ай бұрын

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!

@chainlift.official 2 ай бұрын

Context-dependent, as always!