An Introduction to Grid Systems in Web Design

In web design, a grid system is an invisible structure that collects all the elements within a web page together. In this article, I'll provide an introduction to grid systems, explaining what they are, their purpose, and some of the theory behind them.

Wikipedia explains a grid system as —

a structure (usually two-dimensional) made up of a series of intersecting straight (vertical,horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.

The Nature of Grid Systems

Grid systems are never properly visible, but traces of a grid's “discipline” can be seen by the placement of elements within a web page. Grid systems also dictate the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid's main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design.

Unity in Grid Systems

Alex White's Elements of Graphic Design explains the use of unity through a grid system:

Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly … So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.

However, the benefits of a grid system on a particular design will only take effect if the grid is used at the initial stages of the design process. Attempting to implement a grid into an existing design will not create the same fluid layout or unity of content. This issue is discussed in Josef Muller-Brockmann's Grid System is Graphic Design. He writes:

A suitable grid in visual design makes it easy: a) to construct the argument objectively with the means of visual communication; b) to construct the text and illustrative material systematically and logically; c) to organize the text and illustrations in a compact arrangement with its own rhythm; d) to put together the visual material so that it is readily intelligible and structured with a high degree of tension.

Grid Systems Beyond Web Design

Grids aren’t just restricted to web and graphic design. Almost every profession where any form of design is implemented has a grid system, which professionals use as a guarantee for positive element positioning. It has become almost professionally vital to use grids in all modern design practices.

Continue reading %An Introduction to Grid Systems in Web Design%

by Callum Hopkins via SitePoint