My struggle about the 8pts and 4pts griding system actually came to an abupt end after stumbling on your videos. thank you so much for this insigtful piece. so explanatory and straight to the point.
Thank you thank you thank you! This was so super helpful seeing how multiple of 8 can be applied in practice. I generally followed those guidelines, but now I can strategically plan my designs more around this principle to create more consistent and scalable user experiences.
Superb. Thank you. As a developer, trying to Wireframe; I tried Figma, and i gave up. I am not a designer of course, but I seriously appreciate good UX and since I am a fullstack developer there is often the need for wireframing a new window or adding something to an existing tab in our application, that I would like to do quickly to demo to the Product Owner for quick feedback. However, it takes YEARS to become a designer, and therefore looking for a _fast track_ way of understanding the principles, as you have so excellently done in this video (seriously, first time I've come across a bite-sized approach on the fundamentals without having to spend hours) is very much appreciated. Here are some use cases that might be of interest: 1. quickly import an existing vue.js template into Figma (at least the outline of the HTML) either manually or semi-manually or automated. 2. Understanding Figma in conjunction with say the grid system you have mentioned; alternatives to Figma that are user friendly enough to be able to get going as a non UX/Designer 3. Understanding colour 4. Understanding font. I know I have added a LOT in this post, but it might be food for thought.
Huge thank you!!!! Quick and clear explanation, I asked teacher at my courses and she couldn`t explain, I am soooo happy that I`ve found your video, you are amazing)))
I have a comment regarding column size, when using your suggested margin of 96px and gutter of 24px, one column width turns out to be 82px wide, if you divide 82px by 8 it’s 10.25px, if we go further and draw a rectangle over two columns(including gutter between those two columns) rectangle is 188px wide, divided by 8, it’s 23.5px. You have selected column type ‘Stretch’, which means that column size will adjust to the stretched frame size, BUT, here comes the question, shouldn’t we focus on columns and gutters(that they are divisible by 8) instead of margin, when setting up layout grid for 1440px frame, so that the elements drawn using columns and gutters are divisible by 8?
Could you do a video on Ui/web design layout on how to make really good and aesthetically pleasing layouts/compositions when building a website or just how to make good compositions that work it’s something that a challenge to me for the moment on figuring out where and how to put together the information and elements of the site in way that looks pleasing and clear to the user
@@GemmaHelyer I need columns to align with 4px modul grid. I tryed everything and it didn't work... 🙈 maybe sounds simple but I'm really stuck Thank you in advance!
I'll just copy and paste the comment of another viewer since I'm struggling with the same issue for months now and despite all my efforts I can't find a good explanation anywhere ^^. " when using your suggested margin of 96px and gutter of 24px, one column width turns out to be 82px wide, if you divide 82px by 8 it’s 10.25px, if we go further and draw a rectangle over two columns(including gutter between those two columns) rectangle is 188px wide, divided by 8, it’s 23.5px. You have selected column type ‘Stretch’, which means that column size will adjust to the stretched frame size, BUT, here comes the question, shouldn’t we focus on columns and gutters(that they are divisible by 8) instead of margin, when setting up layout grid for 1440px frame, so that the elements drawn using columns and gutters are divisible by 8? ".
Hiya, the issue you're seeing is that you're taking the system literally. It's a fluid system that is used as a guide. As we work with different screen sizes and fluid browsers we can't always be 100% pixel-perfect. So we use a guide to allow us to design and for developers to build. That's about it, it will never be perfect or completely accurate. It's enough to balance design and development and make it easier to communicate and round up. Everything else in between is fluid :)
Hello Gemma. Thanks for this video. Helpful. But I found that you are arranging elements which takes 6 columns space in width and the total width of such elements are not devisible by 8 (82x6 + 24x5=612). If you have a block using 6 columns it is 612px and 612 is not divisible by 8.
Hey, the number of columns don’t really matter. It’s 12 columns so that doesn’t go into 8 you can use 16 or you can use 4 it doesn’t really matter. What matters is the spacing between elements and that’s what I highlight in this video.
Hello Gemma. Thanks for your response. I don't really care about the number of columns (I agree that the number of columns varies), I was curious about the size of the column itself and the width of an element. In your case, the column size is 82px (not a multiple of 8), however, the gutter is 24px (a multiple of 8), and margins are also 96px (a multiple of 8). Now, I understand that you apply the rule of 8 only on spacing between elements, on margins, gutters and this rule is working for supporting the vertical rhythm, which establishes a sense of visual hierarchy. My previous questions was about the width of the containers. Now, I got it. It is not necessary that the width of the container was multiple by 8. It is all about spacing and the height of an element. Thanks to you! Sometimes while discussing, all the answers are coming naturally. ))
Hey Gemma! I noticed that when you were going through the grid to show the multiple of 8 in practice, the guttering was 98 (when 96 would be the multiple) could you explain this for me please?
Hey Gemma, thanks for this video! I got one doubt tho. This is fine for webdesigns but what about webapps? How to set up grids for a webapp which got a left nav and stuffs? which can be even drawn like an expand and collapse component? How would the grids change then? And also is it advisable to use 16 coloumn grid ?
Hi Karnesh, thanks for your comment. It still works for apps, grids are guides that help keep consistency across design and development. This is one example. If you give the 8pt grid a Google, you will find a number of articles on why this works across multiple devices. The grid never changes, the components however on the page will change, it's about learning how this applies and not something I can direct you on within a comment without seeing the component that you are referring to. Thanks, Gemma.
2 spacing won’t be enough for adequate white space between elements. It will also introduce a lot of rules developers Would need to set up. 8 is great for designers and developers but if you want smaller spacing then use a 4pt grid system. There’s also a video on my channel if you would like to check that out.
Interesting idea, thanks for sharing. I just have a quick question while watching the video. How could the margin of the middle be set to be multiple of 8, because the user could just drag the page bigger and smaller, so I would normally assume that margin is not fixed, isn't it?
@@windmaomao Responsiveness is important for accessibility, so I would hope more designers start paying attention to fluid layout the way developers do.
8 is just a nice easy number, it also 'looks good' you can use 10 if you want, but your spacing will become large very quickly. 10/20/30/40 making it difficult for smaller screen sizes. 7 is an odd number so your pixels or points will always be on odd numbers making it more difficult to keep to a ratio and developers will also have issues getting this to line up and scale. You also use a 4pt grid system, the same principles apply as the 8pt system but you just use increments of 4 as 4 again is an even number.
8-16-32 can divide all the way down to 1px. These small sizes are still useful for paddings and margins. 5 can't be divided any further without using decimals. Also if we're just trying to keep the math simple, notice 10-20-40-80 is starting to look like our 1-2-4-8 scale, so we're not really avoiding our multiples of 2 after all
Watch out! At minute 7.14 you say that there is space 32 with respect to the boxes. But that is not the REAL space. Inside each box there are extra pixels and this configuration looks very different from the one you intend to show. This is a line height error that comes with the typography for use on the internet. When used in real typography the actual designer will understand this problem. At the moment who is trying to fix this issue is one of Microsoft's designers. These issues of scaling for space is a very debatable topic.
✨ Little mistake in the video, the margins should be 96pt not 98pt. ✨
Thanks you cleared it. I was in doubt
And 58pt should be 56pt I assume 😅
@@nyslukas 💯 😅
You were correct tho
and you have used 58 instead of 56 this can be really confusing for those who are not familiar with it
My struggle about the 8pts and 4pts griding system actually came to an abupt end after stumbling on your videos. thank you so much for this insigtful piece. so explanatory and straight to the point.
I watched a couple of tutorials on the 8pt grid but it went over my head but this one went straight into it.
Thanks Emma
Thank you thank you thank you! This was so super helpful seeing how multiple of 8 can be applied in practice. I generally followed those guidelines, but now I can strategically plan my designs more around this principle to create more consistent and scalable user experiences.
This is the best video about the 8 point grid system. Thank Y💙U!
Superb. Thank you. As a developer, trying to Wireframe; I tried Figma, and i gave up. I am not a designer of course, but I seriously appreciate good UX and since I am a fullstack developer there is often the need for wireframing a new window or adding something to an existing tab in our application, that I would like to do quickly to demo to the Product Owner for quick feedback. However, it takes YEARS to become a designer, and therefore looking for a _fast track_ way of understanding the principles, as you have so excellently done in this video (seriously, first time I've come across a bite-sized approach on the fundamentals without having to spend hours) is very much appreciated. Here are some use cases that might be of interest: 1. quickly import an existing vue.js template into Figma (at least the outline of the HTML) either manually or semi-manually or automated. 2. Understanding Figma in conjunction with say the grid system you have mentioned; alternatives to Figma that are user friendly enough to be able to get going as a non UX/Designer 3. Understanding colour 4. Understanding font. I know I have added a LOT in this post, but it might be food for thought.
Thank you. Clearest explanation I’ve encountered after 4-5 videos. This focused on precisely what I needed to understand
Huge thank you!!!! Quick and clear explanation, I asked teacher at my courses and she couldn`t explain, I am soooo happy that I`ve found your video, you are amazing)))
Clean tutorial! Really liked the vibe of the video. Keep it up with tutorials like these :)
Love the way you explain, everything makes sense....it's been very hard for me to find a video that properly explains ui
This video is great for someone like me who is starting out so thank you so much for taking the time to do it.
my best teacher ever!!
I have a comment regarding column size, when using your suggested margin of 96px and gutter of 24px, one column width turns out to be 82px wide, if you divide 82px by 8 it’s 10.25px, if we go further and draw a rectangle over two columns(including gutter between those two columns) rectangle is 188px wide, divided by 8, it’s 23.5px. You have selected column type ‘Stretch’, which means that column size will adjust to the stretched frame size, BUT, here comes the question, shouldn’t we focus on columns and gutters(that they are divisible by 8) instead of margin, when setting up layout grid for 1440px frame, so that the elements drawn using columns and gutters are divisible by 8?
this is the best video with detailed explanations with points system thank you very much
You are great teacher :) Liked and Subscribed
Good job Gemma 👏👏 My first time to seeing your videos. Everything explained neat and very well 👍
Thanks very much, useful and enjoyable tutorial!
Should sizes for cards, button, search bars and icon be sizes of 8 aswell?
I’m a noob designer and this was incredibly helpful! I’ll surely be subscribing to ur content and watching more videos! 🤍
Thank you so much! Love your voice, so calming
Could you do a video on Ui/web design layout on how to make really good and aesthetically pleasing layouts/compositions when building a website or just how to make good compositions that work it’s something that a challenge to me for the moment on figuring out where and how to put together the information and elements of the site in way that looks pleasing and clear to the user
You're amazing, seriously thank you for making this very clear!
This was the best video I've seen on the 8pt grid system. Well done 💯✌🏼📱
Thank you so much. This is helpful. And I do like your voice.
Wao very easy and explained in a wonderful way❤
Thank you Gemma, really helped me out
Auto Layouts in Figma will help you a lot with grids in general
Very informative and useful video, Thanks a lot.
this is exactly what I need thank you !
It works like magic
Great sharing. How about on mobile design, the smallest size of typography should be 8px?
Wonderful job, Gemma! Give us more!
clear & concise. thank you
Very helpful Gemma, thank you!
If you have a block using 3 columns it is 294 and if 6 columns it is 612 neither is divisible by 8. Using 4 columns it is. 400.
Thank you for sharing with us. God bless you!
Thank you Gemma 😊love from 🇦🇺
Hi Gemma, just found your channel and I love your content! The topics you cover are very interesting ☺
Thank you so much now I understand clearly the 8pt grid system . can I use that same 8pt grid system on app design?
I prefer 12 grid coz as a developer bootstrap and other developer tools is divided to 12
I do this like it’s second nature now in Figma. All our systems use it and I code that way too
Wow! such a wonderful content thank you for sharing with us😊 when the video will come on naming figma layer?
Very helpful! Thank you!
Amazing and noted.
And this same 8pt grid system can still be used to design a web portfolio correct ?
thank you for best lesson
You're brilliant.
hey gemma, how you doing,thanks for this wonderful video. which company do you work for as a senior product designer. and
Is it possible to use font size 20 if 16 is too small and 24 is too big? Do I have to be bound to a system of multiples of 8 in the font at all times?
Hey, you don't have to be bound by multiples of 8. its just a guidelines to help with consistency.
Thank you Gemma!
does this also work on desktop 1920x1080?
Really liked it
Really enjoyed this video
Thank you Good Work
Thank you 🙏 ❤
Hey Gemma, thank you for this informative video! Question though, how does this relate to font sizes? Am I suppose to follow multiples of 8 also?
thank you, Gemma!
Thank you 😍
how to make the pixel grid converge with the columns? is there any formula? not always the pixel converges with the columns
Hello :) I’m not really understanding your question? Can you elaborate please and I’ll see if I can help.
@@GemmaHelyer I need columns to align with 4px modul grid. I tryed everything and it didn't work... 🙈 maybe sounds simple but I'm really stuck
Thank you in advance!
P.s I use 12 column system and 4 px module grid
@@Lisa-ex2ml I have a video on my channel for a 4pt grid system :) go check that out.
I'll just copy and paste the comment of another viewer since I'm struggling with the same issue for months now and despite all my efforts I can't find a good explanation anywhere ^^.
" when using your suggested margin of 96px and gutter of 24px, one column width turns out to be 82px wide, if you divide 82px by 8 it’s 10.25px, if we go further and draw a rectangle over two columns(including gutter between those two columns) rectangle is 188px wide, divided by 8, it’s 23.5px. You have selected column type ‘Stretch’, which means that column size will adjust to the stretched frame size, BUT, here comes the question, shouldn’t we focus on columns and gutters(that they are divisible by 8) instead of margin, when setting up layout grid for 1440px frame, so that the elements drawn using columns and gutters are divisible by 8? ".
Hiya, the issue you're seeing is that you're taking the system literally. It's a fluid system that is used as a guide. As we work with different screen sizes and fluid browsers we can't always be 100% pixel-perfect. So we use a guide to allow us to design and for developers to build. That's about it, it will never be perfect or completely accurate. It's enough to balance design and development and make it easier to communicate and round up. Everything else in between is fluid :)
@@GemmaHelyer Thank you very much for your (very quick I must add) answer 🙌. Yeah, I do take things literally ☺.
How do you divide 58 by 8?
thanks for sharing girl :) its the same for App Design layout??
Hello Gemma. Thanks for this video. Helpful. But I found that you are arranging elements which takes 6 columns space in width and the total width of such elements are not devisible by 8 (82x6 + 24x5=612). If you have a block using 6 columns it is 612px and 612 is not divisible by 8.
Hey, the number of columns don’t really matter. It’s 12 columns so that doesn’t go into 8 you can use 16 or you can use 4 it doesn’t really matter. What matters is the spacing between elements and that’s what I highlight in this video.
Hello Gemma. Thanks for your response. I don't really care about the number of columns (I agree that the number of columns varies), I was curious about the size of the column itself and the width of an element. In your case, the column size is 82px (not a multiple of 8), however, the gutter is 24px (a multiple of 8), and margins are also 96px (a multiple of 8).
Now, I understand that you apply the rule of 8 only on spacing between elements, on margins, gutters and this rule is working for supporting the vertical rhythm, which establishes a sense of visual hierarchy.
My previous questions was about the width of the containers. Now, I got it. It is not necessary that the width of the container was multiple by 8. It is all about spacing and the height of an element.
Thanks to you! Sometimes while discussing, all the answers are coming naturally. ))
Hey Gemma! I noticed that when you were going through the grid to show the multiple of 8 in practice, the guttering was 98 (when 96 would be the multiple) could you explain this for me please?
Hiya, it's a mistake in the video. I did outline it in the description :) but yes it should be 96 :)
Hi!! How do you work with the 8pt grid system and sidebar?
You can always take out the margin on the left hand side :) but the spacing between components will remain the same.
please can you come to my office to tell the designers to...NAME....YOUR...LAYERS...lol!
Well done 👏👏
Hey Gemma, thanks for this video! I got one doubt tho. This is fine for webdesigns but what about webapps? How to set up grids for a webapp which got a left nav and stuffs? which can be even drawn like an expand and collapse component? How would the grids change then? And also is it advisable to use 16 coloumn grid ?
Hi Karnesh, thanks for your comment. It still works for apps, grids are guides that help keep consistency across design and development. This is one example. If you give the 8pt grid a Google, you will find a number of articles on why this works across multiple devices. The grid never changes, the components however on the page will change, it's about learning how this applies and not something I can direct you on within a comment without seeing the component that you are referring to. Thanks, Gemma.
@@GemmaHelyer Alright Gemma. Thanks again! :)
please is that obligatory the 8 rule ? there will be not okay to create interface with a multiple of 2 ?
2 spacing won’t be enough for adequate white space between elements. It will also introduce a lot of rules developers Would need to set up. 8 is great for designers and developers but if you want smaller spacing then use a 4pt grid system.
There’s also a video on my channel if you would like to check that out.
@@GemmaHelyer thank you
does padding also have to be multiplier of 8?
Yep :)
I love Your accent!🥰
Thanks 🏴
Interesting idea, thanks for sharing. I just have a quick question while watching the video. How could the margin of the middle be set to be multiple of 8, because the user could just drag the page bigger and smaller, so I would normally assume that margin is not fixed, isn't it?
+1 this question. I find designers are still taught fixed pixel perfection and do not consider responsive layout or relative em/rem units
@@dripcaraybbx yes, you have to understand there's bunch of people consuming the design aren't designer at all. They are hard core developer ;)
@@windmaomao Responsiveness is important for accessibility, so I would hope more designers start paying attention to fluid layout the way developers do.
verry nice dear where are you from?????
What do you think about using a four-point grid
It’s great :) really useful for apps. Any grid system works. The more you use one the more consistent your designs will be.
Multiple of 8, and 98px margin from the start)
I was heavily pregnant making this video, we all makes mistakes. Also pinned a comment and put in the description that I made a mistake 😁
The page margins on the portfolio design is 98. Should'nt it be 96?
Yep you are correct! I made a mistake in the video :)
So why "8"? Why not "10" or "7" or some other increments?
8 is just a nice easy number, it also 'looks good' you can use 10 if you want, but your spacing will become large very quickly. 10/20/30/40 making it difficult for smaller screen sizes. 7 is an odd number so your pixels or points will always be on odd numbers making it more difficult to keep to a ratio and developers will also have issues getting this to line up and scale. You also use a 4pt grid system, the same principles apply as the 8pt system but you just use increments of 4 as 4 again is an even number.
Subscribing
why you not just show your layout grid settings? please, i'm trying to set this up i'm new at figma
There’s a link in the description that will take you to the template that will have it all set up for you :)
@@GemmaHelyer thanks Gemma, I will try those settings
wouldn't be simpler instead of 8-16-32.... use 5-10-20-40-80...? why it has to be 8 not 5?
8-16-32 can divide all the way down to 1px. These small sizes are still useful for paddings and margins. 5 can't be divided any further without using decimals. Also if we're just trying to keep the math simple, notice 10-20-40-80 is starting to look like our 1-2-4-8 scale, so we're not really avoiding our multiples of 2 after all
when you make video after 420
Watch out! At minute 7.14 you say that there is space 32 with respect to the boxes. But that is not the REAL space. Inside each box there are extra pixels and this configuration looks very different from the one you intend to show. This is a line height error that comes with the typography for use on the internet. When used in real typography the actual designer will understand this problem. At the moment who is trying to fix this issue is one of Microsoft's designers. These issues of scaling for space is a very debatable topic.
Sus
why u give us attitude?
I don't know why people call themselves product designer UX AND UI is really wrong. there is a limit between them OMG