The SECRET Spacing Framework You Need ( Master Web Designing )

[@ArnauRos]

Do you use a spacing framework like this? In this video I use the 8 point and 4 point spacing framework, which makes it easy to convert to rems later on.

[@christopherfeeneywonderflo2493]

Master of his trade... He flows LIKE HE KNOWS WHAT HE'S TALKING ABOUT!!!

[@ArnauRos]

Thank you!! Lots of years have gone into this 😁

[@drewstain]

Great video, when I started using the 8pt grid my designs improved so much and just looked more professional. It's hard to do spacing by eye so having a rule to follow helps massively. I'd recommend your viewers look into the gestalt grouping principles, you touched on it with the idea of spacing between the tag line, heading and sub heading, but it helps massively with deciding what multiple of 4 or 8 should be used where. Getting it right helps the user scan sites quicker and quickly interpret what information is related and the hierarchical relationship between different elements. Maybe you could do a video about the gestalt grouping principles too, apologies if you have already done one.

[@ArnauRos]

Thanks for the comment! And yes! This is a great idea to do a video on. 😁

[@danielmaina4942]

Pure value dispensed!

[@kwcreative]

As always super great bite size learning experience. Great work!

[@ArnauRos]

Glad you enjoy it!

[@kwcreative]

@@ArnauRos as i said "Always" :)

[@shikharchawla1605]

thanks learnt so much things...Please make a video on image dimensions we can use as per the design and spacing between sections. I always messed up with these.

[@ArnauRos]

what do you mean?

[@kielsan]

I finnaly understand this, thank you😭❤

[@Mumont]

I don't understand why some people are surprised when in a basic web design book that should be clear from the first class! The truth is that many people who watch youtube don't pick up a design book. If you ask a designer who has worked in a newspaper or magazine this is essential!!! why the surprise with web design? I'm sorry but I think I'm old school and I'll continue to be the one who carries the books to show everyone where everything they see on youtube comes from.

[@rigidhammer7376]

mind your own life. that's it!

[@geanmdesouza5395]

So quit KZbin and go read a book. People can search for reference or guidance wherever they want to.

[@TheItamarp]

@Mumont Any recommendations on a really good book?

[@FarsidAraf-o7b]

how much padding should we use on both side of a webpage? To be more precise, where is it safe to put the left alignment you followed for all the elements?

[@ulysse-2029]

Depand of a choice of the uidesigner -) But for a fluid way this is thé tricks : Padding-inline : clamp(1rem , calc( 15vw - 10rem), 15rem) Magic -)

[@cherryayu2881]

nice inofs!!

[@christianmagill3829]

Did you use a shortcut to set the spacing to auto?

[@ArnauRos]

Hey, no this is a feature with figma's new update

[@salemmohammad2701]

Wonderful! Are there any guides that provide recommendations for spacing within the various section in the page? or maybe websites that can be used as a references for this?

[@ArnauRos]

yes! the tilebit components are spaced out like in the video

[@JustCcRachel]

Great video! Do you use a column grid too? If so, what are your margin and gutter settings?

[@hushmoneyramen]

Hey Arnau! When working with text do you usually space things out from the text bounding box or more precisely from the baseline of the text?

[@EddrickOwenSusanteo]

Why they using padding top 16 in their button even after they already have a spacing 32px between each container?

[@ArnauRos]

To give the buttons extra emphasis!

[@Michael.design]

Do you apply leading trim on your text boxes or not? I'm trying to figure out whether to use it or not. I'm reading articles that state it makes the spacing better as then it's actually 32px for example because the differences in line height are ignored.

[@dilankamadushan9736]

Is there a way to adjust bounding box alignment? The spacing between text and elements seems incorrect. While we have vertical trim in Figma, how can we address this during the development phase?

[@ArnauRos]

Of course! All components are changeable, I’m not sure what you mean by bounding box alignment, but you can make adjustments as much as needed

[@teenylupini]

wait... how do you get to show the spacing

[@ArnauRos]

using the option key on mac

[@donniedamato]

There is nothing secret about this. You can find this content literally everywhere.

[@ArnauRos]

lots of people still dont know about it! :)

[@miracledike8005]

​@@ArnauRosLike me. Lol Thanks for this video. It was super helpful!

[@EvandroPastor]

Its impossible to implement this using elementor :/

[@ArnauRos]

well, framer and webflow are the way!

[@moodcatching]

I don't really get the spacing between the buttons and text. You show and say that they are 16px from the text above, but then in their own "box" there still is more spacing before the buttons. What is the thought behind that?

[@ArnauRos]

Sure thing! Separating buttons from text in web design emphasizes visual hierarchy and improves use of whitespace, essentially giving the buttons their 'own stage'. This design practice amplifies their importance and impact. Though buttons can exist with text in the same group as the text blocks, they might lose some prominence. This strategy enhances clarity and user interaction. Let me know if that clears it up!

[@moodcatching]

@@ArnauRos Okay, I get that! I think I was more confused to you saying they are 16px apart when there clearly was another 24-32px gap added to the 16px. I hope you know what I mean :D

[@ArnauRos]

Yes, so its basically to give the button group more of an emphasis basically!

[@ch9845]

Using square boxes at 8, 16, 24, 32 etc, is the easiest way to ensure the spacing between elements is correct. You can then adjust the space between the elements accordingly. In coding people often do not account for things such as line-heights when spacing so their 32px is actually larger like you’ve pointed out here.

[@moodcatching]

@@ch9845 Ahhh that's why! Thanks for pointing that out with the line-height!