How To Get The Perfect Spacing In Web Design

Подписаться 7 тыс.

Просмотров 27 тыс.

50% 1

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:
lawsofux.com/law-of-proximity
Try Webflow with our affiliate link - 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:
www.wearetonic.uk
/ wearestudiotonic
/ admin

Опубликовано:

12 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 78

@doc4153 3 месяца назад

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.

@JohnDrach 5 месяцев назад

Great vid. Master tip: "It's ok to break the rules sometimes" We all struggle with when it's ok to do that!

@mariamizedginidze Месяц назад

Finally! The video about spacing makes sense!!! Thank you!!!

@sayekatchakraborty2552 11 месяцев назад

Wow! Great tutorial. Thank you ❤. Looking forward more tutorials 😊

@farhan-app 8 месяцев назад

Randomly came across this… a great no-bs video. Liked and subscribed :) please keep it up!

@Aj-000 2 месяца назад

This is exactly the type of content I was searching for. Thank you for sharing!

@user-vw7yq5qu8q 4 месяца назад

Really impressed, great work!

@kennyslg8914 2 месяца назад

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.

@mozumo7u 2 месяца назад

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!

@eba-rave7509 2 месяца назад

Very well explained, thank you!

@sh1n00b1 2 месяца назад

Using figma for a year and only just realized the shortcut to bump spacing up in 8's. Thanks! very helpful :)

@wearestudiotonic 2 месяца назад

Game changer isn’t it!

@Deryeniche Месяц назад

Finally, that's what I needed 🎉 Thanks

@wearestudiotonic Месяц назад

Awesome. You’re welcome!

@ahmedyahya3593 8 месяцев назад

I really love your videos, keep up the good work

@wearestudiotonic 8 месяцев назад

Thanks so much!

@KuoChenJung 28 дней назад

This is amazing! Thanks~

@rish8184 2 месяца назад

so fookin underrated

@studiosilisium 6 месяцев назад

Thank you!

@kadosh9993 12 дней назад

what a great video

@Michael.design 8 месяцев назад

You’re an example mate! One of the better design channels out there: clean, minimal and very clear instruction videos🔥 Please never stop. On topic: how would you space text blocks? I’m struggling with spacing text elements on a 4pt baseline grid. Don’t know whether to space them from baseline to baseline or do I space them from container border to containerborder? And if I space them from border to border is it better practice to apply leading trim or not? Developers probably have a specific preference in this as well. Thanks a lot in advance mate! Great work💪🏻

@wearestudiotonic 8 месяцев назад

Sorry for the late response here! I think this is a case by case basis. I personally don’t bother with leading trim and I always space from container to container. But, every dev is different. For me and my dev framework that would be a pain in the arse. When I’m designing for another dev I always check in with them first if there are any specific things they need me to do. Good practice to get into, makes you look really professional and willing.

@Michael.design 8 месяцев назад

Thanks for elaborating on this man! Appreciate it! I think with leading trim you can be precise with the spacing in Figma but like you say you can run into problems in other areas like development. Framer also doesn't seem to have an option for it. So I guess I'll just stick to the old ways of doing as well:) Love your videos man, learning a ton of it! Cheers.@@wearestudiotonic

@modelhive 16 дней назад

Great video.

@wearestudiotonic 16 дней назад

Thank you!

@user-mr8ng9er1k Месяц назад

Thanks man

@wearestudiotonic Месяц назад

You’re welcome!

@VRSKapitanaOfficial 4 месяца назад

wow incredibly useful

@lodeluyckx 3 месяца назад

Thanks!

@dipeshparmar8158 Месяц назад

I like color fresh good UI

@n_stroz 2 месяца назад

thanks!

@wearestudiotonic 2 месяца назад

Pleasure!

@briannaknight3699 10 месяцев назад

In future videos are you able to share the Figma file? Your tutorials are extremely helpful to me. I've struggled with the logic behind perfect spacing for web design and this video was a great resource. You do a really good job explaining ideas and topics. Thank you☺💛!

@wearestudiotonic 8 месяцев назад

Hey sorry I didn’t actually reply to this. Will have a think about this. Currently working on a web design paid course which will have our Figma file set up in with all the style pages etc.

@mahdiandalib186 8 месяцев назад

nice

@rifatsadid5911 2 месяца назад

Hey! Thank you so much, That helps a lot!!

@wearestudiotonic 2 месяца назад

Pleasure! Glad it helped!

@ramplexpeace 2 месяца назад

cool

@endall1333 4 месяца назад

Great video. What about the mobile spacing of the same example? Is there a connection someone should follow for the spacing across breakpoints?

@wearestudiotonic 4 месяца назад

Hey, I’m glad you liked it. This is actually the next video I’m going to record. My new mic arrived today so will get to work on it soon!

@salemmohammad2701 3 месяца назад

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?

@geanmdesouza5395 3 месяца назад

I believe you should follow the 32px gutter whenever possible, as he did in the video. But if the UX isn't working well, try something organic as he did with that "50% + 80px spacing" container

@delsananthony.official 3 месяца назад

Great content!!! Can I ask for the margin size you use for the column lines?

@wearestudiotonic 3 месяца назад

Sure, this one in particular had 32px gutters. We tend to go for that, 20 or 40 most of the time but I think it really depends on the brand and the look you’re trying to create.

@lilyshevchenko7048 Месяц назад

Is your cheat sheet available for download somewhere? Thanks for this video, wonderfully explained!

@wearestudiotonic Месяц назад

Sorry it’s not no, but you could screenshot it and design your own for a ‘fun’ task? 😃

@ashrafjamal9331 2 месяца назад

We need space

@pratheekshetty.m5784 4 дня назад

Can you share that spacing guide

@ben-lopez 2 месяца назад

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 😊

@bgmlovestatus7959 4 месяца назад

I can get this figma link

@anikaby6496 5 месяцев назад

Where can I get the cheat sheet? :O

@matthiasschneidewind3669 5 месяцев назад

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?

@Monkey_D_Lufffy 5 месяцев назад

I think it's 73px

@geanmdesouza5395 3 месяца назад

It shouldn't matter. If you fit everything inside that 1200px container, anything that comes out (as the header) should work out for bigger monitors.

@DesignDen673 11 месяцев назад

Could you please build this in webflow and make a tutorial?

@wearestudiotonic 11 месяцев назад

For sure! Good idea. Going to film all the hero design challenges first and then I’ll get onto this one for you.

@allykamila3445 4 месяца назад

What font is that?

@wearestudiotonic 4 месяца назад

Hey man, it’s called Tenon.

@allykamila3445 4 месяца назад

@@wearestudiotonic Thanks very much!

@xxxxdddddss 11 месяцев назад

video idea: transition this website design to mobile view

@wearestudiotonic 11 месяцев назад

Nice, adding it to the content list now!

@user-mq9mx5yb1e 4 месяца назад

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.

@wearestudiotonic 4 месяца назад

Thanks man. Well aware. I can’t put pads up in here but building a garden office so will be upgrading soon.

@user-mq9mx5yb1e 4 месяца назад

you're welcome@@wearestudiotonic - the content is great, thank you! Try a lapel mic, or put some towels over the windows while you record, plus the adobe ai software, might fix it while you work on this. Some pads can be put up with that blue tack that does not ruin the walls.