[VIDEO] DESIGN SNACK - Grids

TRANSCRIPT

Welcome to Skillcrush Design Snacks, bite-sized demos about all things design!

Today, we’re going to cover how to align content to a grid, how and when you might break a grid, and how grids relate to development. Let's get started!

First, I’ll show you an easy way to align content to your grid. In this example, I’m using a 12-column grid with a margin on each side. I like 12-column grids because 12 is an easy number to divide into smaller, even parts. The first section I’m making is a placeholder for a large hero image that takes up the full width of my page.

Next, I’ll create a section on my homepage with four horizontal image placeholders evenly spaced to show off the services I offer. Because I’m using a 12-column grid, I’ll do some quick math to figure out how many of my grid columns I’ll need to align my content to. So I’ll divide 12 columns by 4 images to figure out that I want to align my content in groups of 3 columns. So now I’ll add some boxes and text placeholders to my wireframe in a 3-column format to get an idea of how this would look.

To align the content to my grid, I can either center my content within these grouped columns, or stretch the content (or bounding box for text) from inside edge to edge, leaving the gutter empty to create space between these sections.

Now at this point you may be wondering if it’s ever ok if your content doesn’t align perfectly to your grid, aka “breaking the grid.” And the answer is… sometimes! But proceed with caution.

Breaking the grid can be a powerful way to call attention to an element. Have you ever walked past a bookshelf and had the urge to push that one book sticking out back into line with the others (no just me?)? When all of your design elements are following the same pattern, breaking the pattern surprises your user and calls attention to the element that’s rebelling against the grid. Designers commonly break the grid in the navigation area by putting elements inside containers and with layering elements.

I’m going to add in a call to action, or CTA, button element that breaks this grid because I really want to drive users to my Contact page.

However, this technique should only be used sparingly and with good judgment! Breaking the grid too often with too many elements results in a messy, chaotic design. Break the grid with the wrong element, such as a less important image of my cat, and my user may be so distracted that she completely misses that important CTA just beneath it. Remember, it’s not required that you break the grid, it’s just a useful tool to have in your back pocket.

And grids are not just for designers creating beautiful comps, they also come in handy when coding your site too! Ever try to position something using CSS? WHY DOES IT NEVER WORK?? What if you could automatically tell your content to organize itself into three centered columns? YAY GRIDS. There are many grid frameworks available for download on the web that can help you facilitate the development of your site. CSS even has a built-in grid called “CSS Grid Layout.”   

Now that you have some more grid tips and tricks in your toolbelt, you’re ready go forth and create some beautiful, harmonious layouts!     

That wraps up this design snack on grid systems. Thanks for joining me - see you next time!