Advertisement
Design Theory

All About Grid Systems

by

Now you know all about colour, typography and various things you should undertake before you start a design project, it’s time to start getting down and dirty with some of the basics of working with grids in your designs.

Grids enable you to build solid structure and form into your designs. Much like we looked at typographic hierarchies and rhythm, we can effectuate the same feelings through using a grid structure. Just as with coding, there are recommended ways to organise modules and sections of code, and a grid system can help similarly when designing for the web.

The Grid System website
The Grid System website

Grids aren’t just useful for us as designers or developers - they’re good for the user, too. All through this session I’ve emphasised the importance of creating a good user journey and a good user experience through your designs - after all, the user is there to consume your content and you want to make it as good an experience for them as you can. Having a solid grid system to use in your designs (and then carry through to the development phase) will allow you to do just that, by creating consistency and familiarity (and thus building trust) in your design.

If your website is well designed, a grid will help you to project that confidence further to your users - however consciously or sub-consciously that projection may be. Using a grid system doesn’t mean that your designs need become boring or boxy, either. Just like it has been said with responsive web design, the responsibility is with you to create a design that is unique and has something different to it - and a grid system should be seen as something that will enable you to do that, rather than restrict you.


What is a Grid System?

..a structure comprising a series of horizontal and vertical lines, used to arrange content.

In its most basic terms, a grid system is a structure comprising a series of horizontal and vertical lines which intersect and are then used to arrange content. In even more basic terms (which make it easier to understand!) a grid system is a way of providing a system that designers can work with to structure and present content and imagery in a much more readable, manageable way.

Grid systems have long been used in print publications, but with their introduction into designing for the web and the many, many CSS grid frameworks which have since popped up, they’re now being used almost as standard.

Using a grid system in your designs is one way to achieve a level of consistency that would be otherwise extremely difficult to master and to portray in your designs. Again, uniformity and consistency are key to creating a website that your users will find easy to navigate, read and understand. A good user experience is created by engaging with your user and building a sense of familiarity with them - and a grid system helps you to do that by providing a solid base that you can grow your design from.

An example grid, the Gerstner, on the Gridset App website.

An example grid, the Gerstner, on the Gridset App website.

Although your grid system is something that will eventually be invisible to your final user, you can use it to aid you in creating layouts for your designs. But, like all rules when designing (and sometimes when developing) rules are made to be broken. You might not necessarily always need to stick to your grid formation, but you do need to understand grid systems, before you can commit to breaking the rules.

On the web we have many CSS grid frameworks available to us, as well as many tools available to roll with our own grid systems that we can create ourselves. It’s totally up to you which of these you would choose to use when designing - for example, a CSS framework may be familiar to you as a developer, so you may want to try your hand at designing with it, too - but let's examine why designing with a grid system is good practice, and also help to make your mind up with which grid system to pursue further.

Advantages of Using Grid Systems

There are many advantages to using grid systems - this can start when you’re first designing the website but can also prove useful when you move on to the build and development stages, as well as when managing both the website’s design and build in the future.

The good thing about grid systems is that they allow you to design in proportions, balancing between all of the different elements that you might have in your design. A grid system should always be very flexible, so that you can almost twist it to your needs when you’re designing the different parts of your website.

A grid overlay, with guides in Photoshop.

A grid overlay, with guides in Photoshop.

Using a grid system in your design also allows for that sense of uniformity and familiarity - whilst it may work for some sites to have vastly different page designs, for many it will not be the case and you will want to have a uniform and more structured feel to the main layout. This also makes it a lot easier when you come to code the design up, as it will mean that you can pick out the uniform elements in your design and apply this modular effect to your code and CSS structure.

Disadvantages of Using Grid Systems

For the sake of balance, let's look at some cons..

First up, many people - particularly those who are new to design or designing with grids - may find that grid systems are quite stifling and restrict creativity. Unfortunately, this can sometimes happen and - pardoning the pun - you may sometimes feel like you’re being prevented from thinking outside of the box and are instead creating very plain, clinical designs. In those sorts of instances, I would encourage you to try and step back from the grid - instead, play around with the elements on a page until they feel like they look like they’re in the right place, and then switch to looking at your grid overlaying your design (we’ll talk some more about that in a bit), and see how you can make your ideas work to the grid structure that you have. If it doesn’t conform to that grid design, then it may be time to start working with another grid system or design instead.

Grid systems are also really, really hard. Not only do they take a lot of willpower to get your head around the first few times you use them (though you’ll likely have an “aha!” moment not long after some good practising and playing with them) but they can also sometimes involve a lot of maths and calculations. I’m not someone that ever copes well with doing much maths - so that side of things I can personally find very difficult. It’s also really hard just to simply get your head around the concept of grids and how they can help your design - but hopefully you’ll start to see the effect soon after using them in your designs, just as you will have likely done with your development practices somewhere down the line. And while grids are damn hard work, they’re most definitely worth it for the end result.


Using Grid Systems in Your Designs

Here are a few simple, practical tips for using grid systems in your designs:

  • Set an overlay of your grid onto your design. If you’re comfortable designing in the browser using your CSS framework of choice (either a premade example, or one of your own) then that’s fine - but otherwise, I would always recommend creating an overlay of your grid system for your design. Whether you’re in Photoshop or another favourite graphics program, set a top layer that displays your grid and lock it in place. That way, it’s always available for you to toggle on and off if you so please.
  • Create some guides to help you. If you have an overlay in place, the next thing to do is to create some guides to help me. Generally, I like to create a guide for every beginning and end to a column in my grid system. At this point, it is there purely as a little extra helper alongside my grid overlay - to help me define the edges at which my grid columns are.
  • Try to work with constraints and restrictions. Many may think that working with a grid system alone is a good recipe for working in a more constrained manner, but that’s not the case. Working with grid systems - and particularly when creating your own - it’s very easy to go creating a system that allows for 16 columns, when 6 may instead be a wiser solution. Learning to design with constraints - not just within your grid system - will only help you in the long run, as you will be able to focus your design on what is most important and relevant to your users.
  • Pay attention to your spacing. A lot of the focus in grid systems that we use is on the amount of columns there are - the width of the columns, the width of the gutter between columns (the amount of space between each column) and how much space should be given around those elements. However, in turn, don’t forget the vertical space that is available to you and ensure that you also use your grid to help you with the spacing available there. For example, using the measurement of the gutter width, also as a vertical spacing value may work wonders for your design and how elements are each spaced out.

Assignments

By now you should have a pretty good idea about grid systems, what they are and useful ways that you can start to use them in your designs. The next article will talk about how to go about choosing your grid system - and whether you choose to create your own, or work with a pre-made framework instead.

In the meantime, I'd you to do some more planning. Quite a short little assignment really (you’re getting off quite lightly here!) but sketch around in your notepads, playing with grids and layout. Think all about structure, using the columns as an idea to base your content around the grid. What you create might not be any good come the next morning, but it will at least help you to focus on thinking about grids and seeing what you can do with them in a throwaway format.


Further Reading

Related Posts
  • Web Design
    HTML & CSS
    Build a Dribbble Portfolio Grid With Flexboxgrid and JribbbleFlexboxgrid dribbble
    Flexboxgrid is a new framework which allows you to combine the predictability and common language structure of a grid system with the flexibility and simplicity of flexbox. Today, we will walk through the basics of using Flexboxgrid, and use it to build a simple Dribbble feed. Let's get started!Read More…
  • Web Design
    Applications and Tools
    The ThemeForest Author’s Guide to Unbounce TemplatesUnbounce preview
    In this tutorial I'm going to introduce you to Unbounce, a tool for building campaign-specific landing pages. We'll walk through the anatomy of various types of landing page, go through the tool’s features, then cover what’s needed to sell your own Unbounce templates on Themeforest.Read More…
  • Web Design
    Design Theory
    Responsive Web DesignDsfd rwd retina
    Unless you’re totally new to the industry, or you’ve been living under a rock in the faraway lands of another planet, you’ll have heard about responsive design. Even if you don’t understand it fully, it’s bound to be something you’ll have come across or interacted with in some way or another.Read More…
  • Web Design
    HTML/CSS
    Foundation's Sassy Styles ExplainedFoundation sass retina1
    In this tutorial we'll cover what can be done with the flexible Sass styles included in the Foundation framework. A lot of these offer a more customisable feature set than that of the CSS version, plus there are shortcuts which can be used to style items such as the top bar quickly and easily.Read More…
  • Web Design
    Design Theory
    Using Alignment to Improve Your DesignsDsfd alignment retina
    Alignment is one of those things that comes hand-in-hand when working with grid systems. The subject of alignment isn’t simply a matter of choosing whether or not you want to align text or images to the left or right of a design (though those decisions obviously still matter), instead, we employ alignment to improve our designs. Proper alignment in your designs will make them visually more appealing and will also make it easier for users to scan over a page, sub-consciously also offering a calmer reading experience.Read More…
  • Web Design
    Design Theory
    Choosing a Grid SystemDsfd grid choice retina
    In the previous article, I introduced you to grid systems. With any luck, by now, you should have a good understanding of what they are and why they’re a good weapon to have in your design arsenal.Read More…