Grid Systems In Web & Ui Design


What's up, everybody, I'm Jesse show alter. And I love it when my design is all symmetrical and lines up nice, don't you. Well, one of the ways we do that as UI and web designers is to use something that we call the grid in this video we're going to talk about the basics of the grid. What is it? How do you use it?

How do you set it up? How do you stick with it? And when to break the rules because let me tell you what there is definitely a time to break the rules all right?

The first question is, what is a. Grid system a grid system is basically a structure of invisible lines and columns that allow you to line up your design neatly in an organized way and keeps everything spaced exactly how it should be. It holds everything together next up. Why do we use grid systems in our projects grid systems are a structural foundation for our design projects?

They allow us to make our projects, look better and feel better by creating consistent rhythm and spacing. They allow us to play with layout, but still keep. That organized manner. So that things just feel locked on and really, really professional, no matter what we're doing all right next up let's. Talk about some basic terminology of a grid system.

First thing you need to know is that grid systems are made out of a series of columns those columns stretch from top to bottom, they're vertical elements in each of the columns in your grid system will be the exact same size. These are the columns next up. You have the gutters. The gutters are the spaces.

In between the columns, and you can usually dictate what that gutter size should be, depending on your project, or in the layout that you want last up, we have the margins are the empty area on the left and right-hand side of your grid system that consists of those columns and gutters it's the space that allows you to place it exactly where you need to in the center of your project, whether it be a website or an interface, you don't, always want the grid to extend all the way out to the edges. Of your project, sometimes you want to create a containing element where everything in your project will fit inside. And the outside of that are the margins. Okay.

Let's. Talk about the industry standard. We call it the 12 column grid you'll, hear it. All the time 12 column grids is the most common type of grid system that you'll use in your projects, especially for web design projects. 12 is a great number that's, 12 evenly spaced columns that way, it's divisible by 4 and 3 and 2 and 1 and 6. It's divisible.

By lots of numbers that way, if you want to create a two column layout those two columns, will each take up six of those 12 columns if you want to make a three column layout or a four column layout, you can do that, and you can do that evenly in that 12 column, usually as you move down to smaller screen sizes, you will decrease the amount of columns in your grid. You might go from a 12 to an eight, an eight to a six column, a six to a four a two, or maybe even a single column layout at times. There is such.

A thing as a responsive grid system, but that's a little more advanced I'll save that for another video, but just know, it's out there. Next let's talk about breaking the grid or breaking the rules. There is a time and a place to break the grid, but first and foremost, you want to make sure that the majority of your project actually abides by the rules of the grid, therefore, when you break it, it looks good.

It looks intentional. It doesn't. Look like an accident. Large feature, images or hero. Images are. A great example of this, they can expand outside the constraints of the grid system, and they can be the full width of the browser.

This allows them to be big and massive and exciting and adventurous while still having the rest of the content, be constrained inside your grid system, there are a lot of really fun things. You can do fun asymmetrical elements that lead off of the side of the page and dip into your grid system. You can do value propositions and image elements that kind of just barely. Break outside them I'll, put some great resources with some examples down in the description of people who break the rules really well, well, that's, it that's, the basic foundations of grid systems for web designers and UI designers is there something I missed. Let me know down in the comments.

I'd love to hear your thoughts. If you enjoyed the video, make sure you leave a thumbs up and subscribe to the channel. I do lots of videos about UI design, just like this one. So maybe hit that subscribe button. And stick around, and possibly that bell notification icon, too.

So you know when another video like this one comes out, I hope you guys are having an amazing week. I hope you're designing incredible things. I hope you're making incredible things. And I hope you know when to stick to the rules, and when to break the rules, see in the next one.

Dated : 18-Apr-2022

Leave Your Comment