How to space elements in web design? We got you covered. You can use a simple 4/8 pixel system to achieve consistency in your designs. We show you how we set up container sizes, spacing between sections and how to group content together using the UX Law of Proximity.
Timestamps:
00:20 – Benefits
00:38 – UX Law of Proximity
02:42 – Overview of spacing sizes, containers and section padding
05:48 – Walkthrough of example layout
UX Law of Proximity:
https://lawsofux.com/law-of-proximity
Try Webflow with our affiliate link – https://webflow.grsm.io/4838125
Intro music:
Lofi Study by FASSounds on Pixabay
Outro music:
Relaxed Vlog by Ashot-Danielyan-Composer on Pixabay
Connect with us:
Thank you so much for this tutorial! I've gotten better and understanding spacing over time, but this tutorial truly helps me understand the full science of it.
Using figma for a year and only just realized the shortcut to bump spacing up in 8's. Thanks! very helpful 🙂
Very well explained, thank you!
cool
This is exactly the type of content I was searching for. Thank you for sharing!
We need space
so fookin underrated
This is very helpful. I love how you always explain why you do this and why you do that, and also I appreciate you give the example of the padding used in the design. I'd love to see more of those real-life example more in-depth in the future, e.g where and when to use 4px padding, visualized in the design. Thanks again!
Is that section really "breaking" the column layout tho? I think the whole point is staying true to the 8pt rule. Which is why the space to the left of that text works—it's now relative to its parent container width and not the width of the page (the 12 columns).
Pretty good advice overall 😊
You've got design down.
Next let's work on your audio.
Very hard to understand you with headphones on.
Hey! Thank you so much, That helps a lot!! <<3
thanks!
Thanks!
Great content!!! Can I ask for the margin size you use for the column lines?
This is a very good video. Are there some guides that provide recommended amounts of spacing between sections or between elements inside sections? or maybe some websites that can be used as references?
Okay, this really broke a barrier for me where I was making life hard trying to make EVERY horizontal vector start or end at a column edge. Thank you.
What font is that?
Great video. What about the mobile spacing of the same example? Is there a connection someone should follow for the spacing across breakpoints?
Really impressed, great work!
wow incredibly useful
I can get this figma link
Amazing video but your sound is terrible to the point its painful to listen to. I think its the room, too much eco, you need som sound pads to absorb the sound, are you on a really small room with a lot of windows? Im no expert, at all, my office seems like about the same as yours and its also a problem for me, sony earbuds mic seems to cancel out some of the eco and I think now Adobe as an ai to clean the audio up, might help fix this without the sound proofing of the room.
thank you
Thank you for the content. It helps a lot
Where can I get the cheat sheet? :O
I`m struggling to reconstruct your grid. 12 columns with a gutter width of 32 px and padding of 120 px left and right I don`t get 1440 px for the page width. This adds up to 1432. Am I missing something? What`s the width of each of your columns?
Great vid. Master tip: "It's ok to break the rules sometimes" We all struggle with when it's ok to do that!
Thank you!