The SECRET Spacing Framework You Need ( Master Web Designing )
Вставка
- Опубліковано 5 лип 2023
- Spacing frameworks help us create beautiful, yet legible sites. With a very simple 8 point system, or 4 point system we can keep our designs consistent and clear for the user. In Figma we can easily do this by holding down the shift button, which will snap the next spacing to +8 or -8 pixels. This can be changed in the settings page as well in Figma. Using this spacing framework allows us to also create simple rem conversions, 1rem is 16 pixels, and so on.
🛠 Try Tilebit 👇
www.tilebit.io
🚀 Explore Hero Headers 👇
www.tilebit.io/inspiration/he...
-------------
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauros/filming-setup
📄 Bonsai Referral (try for free)
www.hellobonsai.com/invite?fp...
👨💻 Connect with me
arnau.design
🌎 Socials
/ arnau_design
/ arnau_design
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you!
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.
Master of his trade... He flows LIKE HE KNOWS WHAT HE'S TALKING ABOUT!!!
Thank you!! Lots of years have gone into this 😁
Great video! Do you use a column grid too? If so, what are your margin and gutter settings?
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?
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.
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.
Thanks for the comment! And yes! This is a great idea to do a video on. 😁
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?
As always super great bite size learning experience. Great work!
Glad you enjoy it!
@@ArnauRos as i said "Always" :)
nice inofs!!
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.
mind your own life. that's it!
So quit UA-cam and go read a book. People can search for reference or guidance wherever they want to.
@Mumont Any recommendations on a really good book?
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?
yes! the tilebit components are spaced out like in the video
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?
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
Did you use a shortcut to set the spacing to auto?
Hey, no this is a feature with figma's new update
Why they using padding top 16 in their button even after they already have a spacing 32px between each container?
To give the buttons extra emphasis!
wait... how do you get to show the spacing
using the option key on mac
There is nothing secret about this. You can find this content literally everywhere.
lots of people still dont know about it! :)
@@ArnauRosLike me. Lol
Thanks for this video. It was super helpful!
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?
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!
@@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
Yes, so its basically to give the button group more of an emphasis basically!
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.
@@ch9845 Ahhh that's why! Thanks for pointing that out with the line-height!