Grid system in web design - UI design tutorial

Designing with a grid will make your website look 10 times cleaner, that's true. But how do you apply a grid to your design? Watch this video to find out.
—
Need UI/UX Mentorship? Book a session with me on Clascity
—
My startup - A Skill-Sharing Platform to teach and learn anything
—
Follow my work on Dribbble
—
Personal portfolio
—
My design agency
—
Follow me on instagram

[unframedminds]

Love the tutorial style videos. Very clear and helpful. Thank you for creating them.

[tntube]

I almost listed all your video, great content bro

[ciaranmccracken]

Great content that provides genuine value, I hope you keep making more! Excited to see a typography episode.

[Krishna-lefo]

Valuable information about Gid, , , Thank you

[ashwin-wbyq]

Thanks for sharing. I would like to know how do you decide the proportions ( how many col, how much height ) of each element . Is there any ratio that you follow between the height and snd no.of Columns of each element.

[taorui]

Great content. Absolutely helpful. Thanks man! What are your tips on communicating with engineers on grid/layout?

[arturorago]

Hi, thanks for this - the video is super clear and it's nice to see examples of your work. How do you choose things like the artboard size and overall grid size? Also, do you work with a pixel grid? Any best practices there? Thanks and keep up the good work!

[fabianponten]

Great video man, I also like using sacred geometry grids, they're great to make really creative layouts, used one in my last video if you wanna have a look 🙌Cheers brother!

[sofiamichili]

Great video thank you so much for it! Do you know if there are ready grid templates available for download somewhere? Or do you usually draw yourself the lines with the ruler? (I'm not using sketch that's why i'm asking :), thank you!

[Darklaki]

Very useful video, thank you! It would be nice if you'd mentioned about horizontal grid as well

[luhole]

Thanks so much for this. Really, really helpful. Those grids in the example designs you showed (very nice btw) seem to be a lot wider than the default, or most grid examples I've seen when people talk about grids - can you give an example of what the numbers might be for one of the wide ones? Full grid width as well as columns and gutters? I have experience using like 1200 grid width with 12 columns, but I'm trying to start incorporating much wider ones - I've just never used them before and I'm unsure how wide to make them.
Thanks!

[timtang]

Thank you so much for sharing! Would you mind going through the layout setting of the GLOBEX project? I was trying to recreate your grid system but failed. Thanks again.

[gautaminD]

hey there, can you tell me about the grid setting you used in last dashboard page?

[nesapa]

I've learned from you
Thank you very much

[saikopiratos]

Grid ok. But how do you guys design the texts or typography in general so everything fits in and aesthetically looks pleasing? I got such a hard time at optimizing texts.

[herrdesigner]

Great Content! How do you come up with ideas for content?

[daskhux]

Curious to know why you are designing at 2x? Why not design at 1x and then export to 2x?

[ziggerwebdesign]

Cool video, one thing though, I have virtually stopped using pixels altogether, much prefer VW.

[arjunjacob]

someone playing fortnite in the background lol