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

@8rbit

Ай бұрын

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

@stepanyaresko

Ай бұрын

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

@feelcollins4358

Ай бұрын

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

8 күн бұрын

fr fr

kde devs needs to watch this

@carlynghrafnsson4221

Ай бұрын

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 😀

@kishirisu1268

Ай бұрын

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

Ай бұрын

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

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"

@chainlift.official

Ай бұрын

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

@chainlift.official

Ай бұрын

floating in tanks of vape clouds

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

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

Ай бұрын

Stay tuned, it's on the way!

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

Ай бұрын

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

@haveyouseenitthough

28 күн бұрын

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

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

@chainlift.official

Ай бұрын

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 KZreadr ;)

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

@YainVieyra

Ай бұрын

That's called Design.

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

@chainlift.official

Ай бұрын

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

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.

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

Ай бұрын

Glad it helped!

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

@chainlift.official

Ай бұрын

Thank you very much!

@bruce-le-smith

Ай бұрын

haha i appreciated that too, then lorem ipsum

@MRX-ff4vy

Ай бұрын

bodytext go

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

Ай бұрын

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.

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

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!

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

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!

Love the story and the smooth animation! Thanks!

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

7 күн бұрын

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

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

The editing is so satisfying, great video !!!

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

simple. elegant. memorable. brilliant. thank you

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.

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

Excellent quality and depth of research. Instant sub.

One of the best videos on web design I have watched

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.

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!

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

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.

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

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

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

@chainlift.official

Ай бұрын

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

Best sales pitch ever! Fantastic video Thank you!

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.

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

@chainlift.official

Ай бұрын

senpai noticed me 👉👈

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

This is absolute amazing explanation.

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

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.

this video and explanation are golden! thanky you :)

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.

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

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

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

excellent video on spacing , really good material and explanations

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

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

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.

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

Ай бұрын

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

Such a high quality video! good work

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

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

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

I learnt so much from this! Great video

The quality of this video is just ✨

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

Ай бұрын

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

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

such incredible value... subbed

this was so helpful, nice vid!

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

such a good quality video!!! keep it up

This is amazing 😮

Appreciate this video so much

I was a graphic designer and finished artist in the 70s + 80s. My colleagues and myself instinctively understood spacing relationships and appreciated typography. We marked up hard copy and with a surgeon’s knife cut and pasted galleys into precise positions. It’s been the most frustrating time in the transition from print to digital web editing because nurds controlled development without the slightest acknowledgement of design and designers. It’s only today seeing this video tutorial that I feel the nitty gritty aspect of design is being recognized to the point where print has been for centuries or at least since off-set printing. Now design is being thrust upon developers to code. But the system is a mess. We’re coming up to half a century of developers’ arrogance and oppression of design and designers. It’s a travesty that designers were not partnered from the get go. I dare say that the international web code is fundamentally flawed and at odds with the visual aspirations of good and efficient screen communications: design.

@chainlift.official

22 күн бұрын

Hopefully we'll come up with a system they can both understand!

My course and field has very little to do with this random video but I’m gonna implement some of the stuff I’ve learned here on our project. Thanks 😁

this video is brilliantly animated and informative . I learnt a lot and subbed, thank you. also, what software did you use to make these animations.

@chainlift.official

Ай бұрын

It's a Figma prototype that I just screen recorded with OBS 😅

I love this!

This content is incredible!

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

@chainlift.official

Ай бұрын

It's on the way :)

this is pure gold 🏆

Love the content ❤

very high quality presentation

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

@chainlift.official

Ай бұрын

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

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?

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

Ай бұрын

Context-dependent, as always!

Backend devs are probably really confused right now

Damn we need more content like this

Pure Gold!!!

Found your channel very helpful. Can I/we get something similar for font sizes line heights and web layouts?

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

@chainlift.official

Ай бұрын

It's why I only post every 3 months haha

As an engineer who often does frontend this is gold

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.

Amazing ❤

I would appreciate a longer version of thisb

@chainlift.official

Ай бұрын

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

just subscribed, keep it up please, many thanks to you

@chainlift.official

2 ай бұрын

Absolutely! Thanks for your support!

Yoo this is gold.

@AnisD756

Ай бұрын

golden ratio actually

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

@chainlift.official

Ай бұрын

Nah it's just preference

This is amazing

Lovely!!!!!!!

Great video! Which software are you using for the slides?

Great video! Would you mind to tell what app do you use to create these videos? Thank you.

great valuable content

hell yeah this is soo good

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

I wish I found you sooner. Much love

thanks👏🏻

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!

@chainlift.official

Ай бұрын

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

❤ Great video