The SECRET Spacing Framework You Need ( Master Web Designing )

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

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

50% 1

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...
-------------
🚀 Subscribe for more weekly design content
bit.ly/2FQLrO5
🎥 What I use in my videos!
kit.co/arnauro...
📄 Bonsai Referral (try for free)
www.hellobonsa...
👨‍💻 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!

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

1 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ArnauRos Год назад

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.

@drewstain Год назад

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.

@ArnauRos Год назад

Thanks for the comment! And yes! This is a great idea to do a video on. 😁

@christopherfeeneywonderflo2493 Год назад

Master of his trade... He flows LIKE HE KNOWS WHAT HE'S TALKING ABOUT!!!

@ArnauRos Год назад

Thank you!! Lots of years have gone into this 😁

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

There is nothing secret about this. You can find this content literally everywhere.

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

lots of people still dont know about it! :)

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

@@ArnauRosLike me. Lol Thanks for this video. It was super helpful!

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

I finnaly understand this, thank you😭❤

@Mumont Год назад

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.

@rigidhammer7376 7 месяцев назад

mind your own life. that's it!

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

So quit RU-vid and go read a book. People can search for reference or guidance wherever they want to.

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

@Mumont Any recommendations on a really good book?

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

Its impossible to implement this using elementor :/

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

well, framer and webflow are the way!

@kwcreative Год назад

As always super great bite size learning experience. Great work!

@ArnauRos Год назад

Glad you enjoy it!

@kwcreative Год назад

@@ArnauRos as i said "Always" :)

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

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?

@Michael.design Год назад

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.

@christianmagill3829 Год назад

Did you use a shortcut to set the spacing to auto?

@ArnauRos Год назад

Hey, no this is a feature with figma's new update

@FarsidAraf-o7b 6 месяцев назад

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?

@ulysse-2029 3 месяца назад

Depand of a choice of the uidesigner -) But for a fluid way this is thé tricks : Padding-inline : clamp(1rem , calc( 15vw - 10rem), 15rem) Magic -)

@dilankamadushan9736 Год назад

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?

@ArnauRos Год назад

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

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

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?

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

yes! the tilebit components are spaced out like in the video

@EddrickOwenSusanteo Год назад

Why they using padding top 16 in their button even after they already have a spacing 32px between each container?

@ArnauRos Год назад

To give the buttons extra emphasis!

@JustCcRachel Год назад

Great video! Do you use a column grid too? If so, what are your margin and gutter settings?

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

nice inofs!!

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

wait... how do you get to show the spacing

@ArnauRos 9 месяцев назад

using the option key on mac

@moodcatching Год назад

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?

@ArnauRos Год назад

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!

@moodcatching Год назад

@@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

@ArnauRos Год назад

Yes, so its basically to give the button group more of an emphasis basically!

@ch9845 Год назад

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.

@moodcatching Год назад

@@ch9845 Ahhh that's why! Thanks for pointing that out with the line-height!