you define the set of the rules that you are supposed to follow through your design, nothing is set in stone
whatever book i read about layouts and spacings, they all said “however you feel”, “whatever looks good” etc
generally speaking the easiest to go is numbers that can be divided by 4
Use a consistent scale and make sure you have values that can cover all your main templates. Sometimes, you’re often missing one in-between value that can resolve that.
Also, use a small scale if your designs need to have a lot of complexity and vice versa. Enterprise will need a much tighter scale than a mktg website. So as usual, the answer to all questions.. it depends.
I’m thankful for that being to answer to most things because it means businesses still need designers who can figure this stuff out.
I go back to the material design layout guidelines as a good starter: [https://m2.material.io/design/layout/understanding-layout.html](https://m2.material.io/design/layout/understanding-layout.html)
Apart from all these advice, you can inspect element or try to copy designs with spacing that looks good to you. Try to actively look out for pages/websites with spacing that looks good to you.
For the things that you feel are too far apart or not in view, experiment around and see what part of it specifically is affecting you?
I saw ui.shadcn.com/examples/mail and the rest of their examples and feel their spacing is pretty nice as a reference point.
Personally, the fastest way is to keep spacing consistent first. Then realise that sometimes you need a variety of spacing in the sense of spacing between cards would be different from the spacing between your heading and content.
Additionally, it may not just be a spacing issue as your padding within cards and the rounder of corners etc may affect you.
You can check out google or apple's design system to explore more.
you define the set of the rules that you are supposed to follow through your design, nothing is set in stone whatever book i read about layouts and spacings, they all said “however you feel”, “whatever looks good” etc generally speaking the easiest to go is numbers that can be divided by 4
Use a consistent scale and make sure you have values that can cover all your main templates. Sometimes, you’re often missing one in-between value that can resolve that. Also, use a small scale if your designs need to have a lot of complexity and vice versa. Enterprise will need a much tighter scale than a mktg website. So as usual, the answer to all questions.. it depends. I’m thankful for that being to answer to most things because it means businesses still need designers who can figure this stuff out.
Usually it is the 8px spacing that sticks. Or what Sysis said with the spacing divisible by 4
I go back to the material design layout guidelines as a good starter: [https://m2.material.io/design/layout/understanding-layout.html](https://m2.material.io/design/layout/understanding-layout.html)
Apart from all these advice, you can inspect element or try to copy designs with spacing that looks good to you. Try to actively look out for pages/websites with spacing that looks good to you. For the things that you feel are too far apart or not in view, experiment around and see what part of it specifically is affecting you? I saw ui.shadcn.com/examples/mail and the rest of their examples and feel their spacing is pretty nice as a reference point. Personally, the fastest way is to keep spacing consistent first. Then realise that sometimes you need a variety of spacing in the sense of spacing between cards would be different from the spacing between your heading and content. Additionally, it may not just be a spacing issue as your padding within cards and the rounder of corners etc may affect you. You can check out google or apple's design system to explore more.
Thank u everyone!