An Introduction to Grid Systems

We’ve noticed that WordPress themes and frameworks are being promoted for their grid-based layouts and the awareness and value for grid systems amongst designers and developers has rapidly grown in the last few years. You only have to search the term ‘grid’ and there are literally 100′s if not 1000′s of articles, tutorials and books all about grid systems in web design.

What’s interesting is the principles of grid systems are age old and the relevance of it to the digital medium are as real today as ever before. With the increasing scope of screens and resolution sizes the requirements of a designer to think on many different levels are also growing. Designers are no longer just designing layouts for the web but for mobile and tablets and versatility and organization of content is more important then ever.

Presenting information digitally is no small challenge and although it has its many advantages, ironically interactive design is something that still relies heavily on old traditions of the print medium. User Interface design, usability testing and user experience are all buzz words that seem to almost turn into a wish list of skills that people are looking for in designers resumes. Call it what you want though – the principles are the same.

The conversations and discussions about grid systems are far from over when it comes to designing for digital mediums and infact its just beginning to really take form. Theme design based on grid structures are starting to really become important as the various screen sizes and resolutions are now making this an even more imperative consideration.

What we wanted to do was take a quick look at grid systems in relation to designing for digital mediums and the benefits of working this way. More designers today are really starting to find the grid system for web design a really transformative way of thinking more clearly about navigation and spacing. I can’t say that I’m committed to any one grid system, framework or formula as when you think of grids it can be misleading in the sense that you may think you are fixed to one format – but I treat the grid like a mathematical system that allows me to create a grid around the medium and format.

Once you start using grids its hard to go back to working in any other way.

We are what we repeatedly do. Excellence, therefore, is not an act, but a habit.
Aristotle

What is a Grid System

A Grid is the ratio between two units in space and time. It represents the basic structure of graphic design, it helps to organize content, and provides consistency on overall design. Grids are a way to divide infinite possibilities of choices into smaller units. Units are the basic building blocks of a grid and they are all uniform. When we combine units into groups we get columns and the width of the columns can vary.

Grids are also a good way to solve reoccurring design needs, we may think of them as design patterns, but its always better to keep in mind that every pattern has to be fine tuned before the implementation to its own medium.

The Grid System

Where do grids come from?

The roots are in the sense of ratio and the nature of humankind and the surroundings around him. Ratio is a relation between two numbers. And golden section which has been used in the Western art and architecture for more than thousand years.

The formula of the golden section is the following: a : b = b / (a + b)

Grid: Golden Rectanble

This means side a is to side b as side b is to the sum of both sides.

The golden ratio is also used in the print industry and international paper sizes. The grid originated in its traditional form within architecture and print design,  with construction canons, guides, and the concrete modularity of letterpress. After the World War II Swiss designers built a total design methodology around typographic grid, hoping to construct with it a new and rational social order. Masimmo Vignelli, Joseph Muller Brockman are the names you should recognize before designing a grid system.

In the ninetieth century, the news papers and magazines pushed the traditions of book design and its one column framed layout to flexible multi-columned pages and its evolution today into web design has transformed the thinking behind usability and design in relation to content.

The constraints of Digital Design

Screen Resolution

The screen is the visible limit of the current website designs, and these are now varying with lots of new devices and interfaces including mobile phones and tablets.

Visible Area of Screen

Apart from screen resolution, the visible area of the screen is something we have to consider. Different devices, operating systems and browsers will affect the ratio of the visible area. Plus we also need to consider scroll-bars, top/bottom bar and possible plugins.

Actually we can design different grids for every resolution, but we need a logic and standardization that works well for most of them. This is why I like to refer to them as my fine tuned design patterns.

For 1024×768 screen resolution, the approximate visible area is 974×650.

Designing Grid Systems in Graphic Design, 1. figure out the page size, 2. divide it into a grid, 3. start designing.
Josef Muller-Brockmann’s “Grid Systems in Graphic Design”

Constraints are good we need them!

When it comes to constraints it sounds limiting at first, but using the constraints are a way to narrow down the infinite possibilities. Of course all digital screens are grid based on 1px, but the smaller the units the harder they are to manage.  Sometimes we need flexible grids, that stretch across the browser window, they can also be good for cross-platform applications and content.

Vertical Rhythm with Baseline Grid

Grid: Typography Line TermsSince the websites are more vertical then horizontal, we also need a baseline grid which defines the vertical rhythm of the elements. Its more clear to read a page when text, and images on differrent columns matches vertically. So don’t miss this great article on  baseline grid at Teehan + Lax Blog.

Once you make it you can break it!

If you think grid systems are making design boring then think again, you can change the way they look, even while keeping the structure intact.

Here are some ways to break them:

  • The flow between columns.
  • Empty spaces between groupings.
  • Good use of photographic elements and organic forms.
  • Overflow of elements over columns.
  • Flexible columns.

Conclusion

From the Command Line Interfaces with monoblock typefaces, to Graphical User Interfaces with windows and icons, I think grid systems will evolve into  Natural User Interfaces which is also seamless and powerful.  Everyday we’re exposed to more and more images, objects, texts , and grid systems are the rational  way to construct, organize, and understand that information. Grid systems have been known for ages in print and are applied quite commonly for digital interfaces as well but today they are more important as we don’t want to keep creating new designs for different resolutions but we want to use the same layout for different screen resolutions. A good Grid system is the essence of scalable layout design.

Examples

Grid Based Web Design Samples

Resources

Do you use any grid systems in your website designs? Or perhaps you’ve written your own worth mentioning in the resources section? Feel free to share you thoughts and ideas in our comments section. Don’t forget to follow us on Twitter!