Tag Archives: HTML

Grid Systems in Web Design

Gestalt is the german word for “whole” or “form”. Gestalt principles derive from studies into the psyche of the human mind and how we as humans process information. Concepts like proximity, closure and continuation help inform us as designers on how people can take the information you give them and process it as quickly as possible. For instance, if you have 3 circles and place two closer to each other, your mind will naturally associate those two objects together as a group.

Alignment is another key Gestalt principle that is necessary to developing a well balanced design. Alignment, like it suggests, is the ability to align elements into groups of like elements. Grid systems obviously go hand in hand with this alignment principle, as they help the designer inform the user what elements are placed into these groups. Usually grid systems  are set up in such a way to give you columns (and potentially rows) to align your elements to.

Okay, so you might be familiar with all of these concepts so far. But where do you begin? What grid system is the “best” or easiest to use? How do you sift through all the different systems quickly? These were all questions that all web designers have had to sift through and deal with from time to time. As industry leaders develop more grid systems, we’re faced with a positive, yet challenging decision as to which grid systems are superior to others. I’ll go through a few of the more common grid systems and share my thoughts on them to help inform you on which may work out best for you.

960.gs

One of the original grid systems to be developed for the web. The 960 features many different column layouts because of its reliance on values of 10 to create the grid. Versions of 12 column, 16 column and 24 column grids can be seen throughout many of the examples. This reliance on 10 pixel increments make it very easy for designers to jump into your editor of choice and nudge over elements to fit within the grid system. It also comes with some other tools like a grid overlay tool to see if your pages adhere to the grid format. One of the downfalls of this system though is that it’s fixed to a 960 pixel wide format, which some might find antiquated and old.

978 Grid

This one is pretty similar to the 960 in that it’s a fixed width system that aims to provide you with a set amount of columns to set up your basic grid. What I like about this framework is that they provide you with more than just one size, which is pretty important when dealing with more responsive or media query based layouts. However, their site is pretty average (which actually makes a difference when your target audience is a web designer) and the fact that the columns are in weird non-base 10 increments makes it cumbersome to work with in Photoshop.

Frameless Grid

This framework is a very interesting system to work with. I love that the flexibility that it provides by giving you support towards upwards of 2560 px wide formats (which is next to never, but available if you need it). I absolutely love that it’s flexible in concept, giving you the tools and base incremental system while encouraging you to develop your own breakpoints depending on your design. It’s still a fixed width system but targeted almost as an intermediate level framework by giving you the flexibility of browser width targeting without the confusion that responsive layouts provide. Recommended for those that are used to fixed width systems and want to move to the next level. Oh and they have it set up for you to use SASS and/or LESS relatively easy (if that matters for you).

Golden Grid System

This onion has many layers. Foldable, yummy layers. A truly responsive grid system without the rigidity of specific predetermined browser breakpoints. Think of this system as more of a concept than a framework, though. It will require you to do your own work depending on the project, which can actually be a blessing since a framework can force you into design decisions you might not want or need.  It’s set up for SASS and/or LESS as well, which is something to think about for all you lazy designers (and by lazy, I mean that in the sincerest, heavy-programmer sense).

1140 CSS Grid and Columnal

The reason why these are paired up is because they are extremely similar. Both are based off of the 1280 px wide display, trying to target an 1140 px wide grid system. Both are responsive. Both are 12 column wide grid systems set up with all the CSS classes you could ever want. These are again a nice bridge for those designers trying to make the leap from a fixed width system to a more responsive design framework.

No matter what you use in your next design, keep in mind that these are all frameworks. A strong grid system of any sort is important for good design; but remember that while frameworks are nice to start from, your design might require something more customized and specific. For me, I’m still transitioning into responsive design frameworks (Responsive takes a ton of practice. A TON.)  so I’ve been experimenting with Frameless, 978 and 1140 CSS Grid. Just make sure you research each one to see what best fits so that you can use it wisely in your next project.

Other Grid System References:

The Grid System
Grid Systems in Graphic Design

Advertisements
Tagged , , , ,