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.
@JohnDrach9 ай бұрын
Great vid. Master tip: "It's ok to break the rules sometimes" We all struggle with when it's ok to do that!
@wing23512 ай бұрын
This is a really great tutorial. Clearly explained the reasons behind the design decisions. Thank you! Subscribed and please keep it up!
@kennyslg89145 ай бұрын
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.
@dollaya889325 күн бұрын
This is a very useful video. Thank you. And your design looks pretty cool too!
@wearestudiotonic25 күн бұрын
Haha thank you! 🙏
@nicoringa69172 ай бұрын
What a video my man, so calm and explanatory, thanks for that (and a big hug from Brazil!!)
@robertmaxquintas593Ай бұрын
Would be cool to see a similar spacing guide for mobile and tablet screens!
@mozumo7u6 ай бұрын
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!
@Michael.design Жыл бұрын
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💪🏻
@wearestudiotonic11 ай бұрын
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.design11 ай бұрын
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
@sh1n00b15 ай бұрын
Using figma for a year and only just realized the shortcut to bump spacing up in 8's. Thanks! very helpful :)
@wearestudiotonic5 ай бұрын
Game changer isn’t it!
@Fábio-u8u7 ай бұрын
Really impressed, great work!
@Aj-0005 ай бұрын
This is exactly the type of content I was searching for. Thank you for sharing!
@sayekatchakraborty2552 Жыл бұрын
Wow! Great tutorial. Thank you ❤. Looking forward more tutorials 😊
@eba-rave75095 ай бұрын
Very well explained, thank you!
@jelilabudu3 ай бұрын
Hey, @Tonic, this is your first video I watched on your channel. But guess what, I was lost in your contents when I decided to skim through the playlist. I don't even know where to start 😊. I subscribed to learn more from you.❤❤
@Deryeniche4 ай бұрын
Finally, that's what I needed 🎉 Thanks
@wearestudiotonic4 ай бұрын
Awesome. You’re welcome!
@briannaknight3699 Жыл бұрын
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☺💛!
@wearestudiotonic11 ай бұрын
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.
@ahmedyahya3593 Жыл бұрын
I really love your videos, keep up the good work
@wearestudiotonic Жыл бұрын
Thanks so much!
@rish81846 ай бұрын
so fookin underrated
@wheatleydigitaldesign29 күн бұрын
Great video, lots of free value here I only found from paid courses. Nice work.
@bgmlovestatus79598 ай бұрын
I can get this figma link
@KuoChenJung4 ай бұрын
This is amazing! Thanks~
@modelhive4 ай бұрын
Great video.
@wearestudiotonic4 ай бұрын
Thank you!
@pratheekshetty.m57843 ай бұрын
Can you share that spacing guide
@lilyshevchenko70484 ай бұрын
Is your cheat sheet available for download somewhere? Thanks for this video, wonderfully explained!
@wearestudiotonic4 ай бұрын
Sorry it’s not no, but you could screenshot it and design your own for a ‘fun’ task? 😃
@chibuezeughanze11212 ай бұрын
Dope
@MarketingAracarrental2 ай бұрын
Thanks a lot for the sharing @Tonic! I have 1 question @5:59 : How can i fit the 12 columns with 32px apart into a 1200px width? The column width should be 70.666px in order to fit to that setting. How would you overcome that? Thanks.
@WalkieJVCАй бұрын
40px padding on left and right, 32 px gutter, 12 columns. Content width should be 1120px at that breakpoint assuming you have static and not dynamic resizing.
@dipeshparmar81584 ай бұрын
I like color fresh good UI
@delsananthony.official6 ай бұрын
Great content!!! Can I ask for the margin size you use for the column lines?
@wearestudiotonic6 ай бұрын
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.
@ben-lopez6 ай бұрын
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 😊
@kadosh99933 ай бұрын
what a great video
@fridayfryguy2 ай бұрын
Space is the final fontier
@wearestudiotonic2 ай бұрын
It really is.
@donbao3 ай бұрын
thank you
@ashrafjamal93316 ай бұрын
We need space
@endall13337 ай бұрын
Great video. What about the mobile spacing of the same example? Is there a connection someone should follow for the spacing across breakpoints?
@wearestudiotonic7 ай бұрын
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!
@lodeluyckx6 ай бұрын
Thanks!
@salemmohammad27016 ай бұрын
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?
@geanmdesouza53956 ай бұрын
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
@aadras3 ай бұрын
Can you just tell me where you bought your Tshirt? Please share the link if you have bought online.
@wearestudiotonic3 ай бұрын
lol this is a Cos “classic tee” but I can recommend True Classic brand for a better fit 👌
@ramplexpeace5 ай бұрын
cool
@DivulgaçãoDinâmica8 ай бұрын
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.
@wearestudiotonic8 ай бұрын
Thanks man. Well aware. I can’t put pads up in here but building a garden office so will be upgrading soon.
@DivulgaçãoDinâmica8 ай бұрын
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.
@anthonyrude6 ай бұрын
@@wearestudiotonicthen it's your mic settings or recording settings. Or you are not fixing in post.
@bot5am4 ай бұрын
95% of this problem will be solved by moving the mic close to the mouth.
@wearestudiotonic4 ай бұрын
Thanks, we tried that. Tried lots and lots of things. The latest video from Tom is a lot better with a different kind of mic 👍
@allykamila34457 ай бұрын
What font is that?
@wearestudiotonic7 ай бұрын
Hey man, it’s called Tenon.
@allykamila34457 ай бұрын
@@wearestudiotonic Thanks very much!
@xxxxdddddss Жыл бұрын
video idea: transition this website design to mobile view
@wearestudiotonic Жыл бұрын
Nice, adding it to the content list now!
@DesignDen673 Жыл бұрын
Could you please build this in webflow and make a tutorial?
@wearestudiotonic Жыл бұрын
For sure! Good idea. Going to film all the hero design challenges first and then I’ll get onto this one for you.
@tuahabadarАй бұрын
You completely disregarded the optical correction that we require when you're using the rounded corner. Paddings can't always be the same both top and bottom.
@exodusdesign50474 ай бұрын
heavens sake, Get a good mic
@wearestudiotonic4 ай бұрын
lol, well this was a year ago! And we have new mics now 👌 Although the issue isn’t the mic, it’s the room sadly. Working on a new garden office plan.
@anthonyrude6 ай бұрын
You've got design down. Next let's work on your audio. Very hard to understand you with headphones on.
@wearestudiotonic6 ай бұрын
Currently working on it, that’s why we’ve had a break
@ignatiusaswin89298 ай бұрын
Thank you for the content. It helps a lot
@wearestudiotonic8 ай бұрын
You’re welcome, I’m glad it helps!
@nativoluisАй бұрын
Some grids layout tutorial in the future? I have problems with lateral sidebar in dashboard webapps, i dont know if apply 12 columns in total frame or 12 in the space after sidebar.
@missatlas19338 ай бұрын
thank you
@micahf168111 күн бұрын
The reason why multiples of 4 are used is because the number 4 means 'structure' which is evident when you think of geometry the most stable and structurally strong shape is a square with all 4 sides supporting each other, and when you're trying to structure a website or literally anything else, multiples of units of 4 are always going to be the quickest way to layout a website. 3 is unbalanced and means catalyst, 2 means duality which is like a 2-Dimensional design if you use steps of 2, and 5 is also unbalanced meaning change like you can't have a symmetrical 5 sided geometric shape. So you see 4 really is the only choice. I think it's really cool that the synchronicity of 4 being the step of units for structuring websites just so happens to mean 'structure' which is exactly what it's used for in this context.
@mahdiandalib186 Жыл бұрын
nice
@studiosilisium10 ай бұрын
Thank you!
@mariamizedginidze4 ай бұрын
Finally! The video about spacing makes sense!!! Thank you!!!
@matthiasschneidewind36699 ай бұрын
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_Lufffy8 ай бұрын
I think it's 73px
@geanmdesouza53956 ай бұрын
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.
@mdabuzar44765 ай бұрын
Figma file
@mahsajj224420 күн бұрын
Hi Thanks for your videos, I would like to ask you have you ever used a website as your reference for Typography sizes or spacing? I need to have a website to use it as my guide. Thanks alot
@wearestudiotonic20 күн бұрын
What do you mean by using a website as a reference? When I see a website I like, I inspect the type sizes, measure the gaps and generally try and direct it to see how it was built. I must admit that I do this less now than I used to when I was first learning the skill.
@mahsajj224418 күн бұрын
@@wearestudiotonic Ok thanks for your response So, you don't have a fixed reference, and it can vary from one project to another.