Grid Systems in Web & UI Design

Join this channel to get access to perks:

0:00 - Intro
0:31 - What is a Grid System?
0:52 - How do we use a Grid System?
1:16 - Basic Terms
1:20 - Columns
1:30 - Gutters
1:41 - Margins
2:10 - 12 Column Grid
3:05 - Breaking the Rules

Great Examples of using and breaking the grid

------------------------------------------------------------------------------------

////////// Connect with me here 👍🏼

////////// Sign up for my Monthly Newsletter 📫

////////// Elevate your videos with record-label quality music from Musicbed👇🏼

////////// Equipment 📸

[krzysztofchoma]

Grid is something that I definitely underestimated when I started learning UI, now I know that. I should practice it more. And I think that breaking Grid is ok but only for people who know how to do that :)

[PaytonClarkSmith]

Loving this video! Your animations make it easy to visualize the different elements of a grid. Thanks Jesse 👊🏻

[Coco-visc]

I just realized how even your walls look like a well organized, stylish website lol! The lights are insane.

[kaveengoonawardane]

Huh...now the bootstrap 12 column grid system makes perfect sense. Thanks Jesse! :)

[rehanqureshiyt]

Knowledgeable as always! Thank you. Waiting for the Responsive Grid Explanation.

[vsk.design]

Thanks!
Waiting for the video on Responsive grid system!

[chichi-buxu]

Wow, love this.. it's simple and clear, I'm not new to web designing but have always dreaded studying the GRID in depth, my goal is to translate designs into code properly.
I'm looking for your next video now, thank you for sharing your knowledge!

[DanOladipo]

Simple and Clear, just as anything Jesse does is.

[josh_ux]

I love all the videos you make Jesse! Did you drop off for a while while working for Adobe? I still tell all my budding designer friends about you. Thanks for doing a video about grids! No one really talks about them. Please make another video about breakpoints, if you haven't already, and popular grid frameworks like Bootstrap.

[stephanienoel]

Thanks again for another awesome video. I been out of the design loop for a while now and just relearning everything.

[nazaradana]

never though i would be learning about grids from brendon urie, dude's is a tech nerd

[Sara-oyly]

Best explantion 😊after watching tons of videos

[sengkeavideos]

Great video for basic understanding of Grid. I always ignore this one when working on UI.

[codeandcurious]

Thanks jesse for the short information

[vishnurnair]

Thank you so much for the awesome tips. You're awesome. ❤

[vrm_ravi]

your way of talking is fabulous bro. great, keep it up

[EpicDurian]

Thanks buddy, it was nice and an informative video.

[jonaspedersen]

Great video! You say that you'll save the responsive grid system for another video. I'd love to see that video :)

[johnnygarces]

always a treat to see your videos, Jesse! Would it be possible to see you build a grid in action (i.e. Figma/Sketch/XD?) Keep it rocking'

[delta_]

I cannot imagine a Spanish person trying to explain the grid system... It will take one hours.. 😂That's why I love English speaks.. They are so directly and pragmatic.