Grid Theory

The role of design is to communicate. Many web designers find grid is a useful tool to organize space and distribute information to create clarity, efficiency, economy and continuity during communication.

“A grid consists of a distinct set of alignment-based relationships that act as guides for distributing elements across a format.”[1] An anatomy of the grid is as follows:

1

Depending on different informational needs, we can address different design problems based on the following 4 types of grid structures:

  1. Manuscript Grid:

2

This type is derived from traditional manuscript/printing style and is suitable for arranging large volume of text with the simplest layout. It’s defined by a main text body, margins and additional information shown in the header/footer area.

Margin plays an important role in such a simple layout. “In general, wider margins help focus the eye and create a sense of calm or stability.”[2] Variation in margin can also introduce visual interest to engage the reader more when facing such heavy readings. The size, leading, spacing and other characteristics of the text are also essential in enhancing the readability and overall hierarchy of the page.

The following example shows a manuscript grid layout .The line spacing variation helps to distinguish the quotes from the rest. Big margins on both sides direct reader’s eyes to the information, create spaces for rest and define the width of the text line. Although same typeface (Georgia) is used for the whole page, colors and sizes help to group different information. Important links are emphasized by the orange highlights.

screenshot-andyrutledge.com 2015-09-11 20-30-10

http://andyrutledge.com/the-designer-designs.php

  1. Column Grid

3Column grid is useful in organizing discontinuous or independent information with higher flexibility. The most essential consideration for this layout design is the column width, which is highly dependent on the content length and type characteristics. Short width may help fast scanning, but it may introduce excessive hyphenation and uneven rag around the edge. However, too wide columns can create difficulty in finding the beginnings of sequential lines. Driven the nature of the information, columns can be combined to form a compound column grid structure.

The following example divides the page into 4 columns with uneven width. Thus it’s a compound column grid structure which arranges different information with different emphasis. The middle part consisting of 2 columns is the main content while the two columns at the sides are for externals links like advertising and social media.

screenshot-www.reference.com 2015-09-11 21-05-08

http://www.reference.com/

  1. Modular Grid

4Extremely complex information can be organized by modular grid structure which consists of a matrix of cells called modules. Neighboring Modules can be grouped as spatial zones to handle different types of information like images. Smaller subdivision brings more degree of control and precision, while too many modules can become messy and redundant. With its interrelationship and flexibility, we can design the format simultaneously and thus increase efficiency. Aesthetics wise, this structure adds visual interests and makes even simple information look more ordered, clear and modern. Additionally, tabular information like charts, tables and schedules can be integrated harmoniously by making use of the standardized subspaces.

The following example uses the cells of the modular grid as entry points to subpages. This kind of navigation is clear and organized. Information with the same level of importance occupies the same area. Different contents are made uniformed and consistent.

screenshot-www.columnfivemedia.com 2015-09-11 21-13-13http://www.columnfivemedia.com/

  1. Hierarchical Grid

5

The last type of grid depends on the informational needs the most. Column widths and intervals between them tend to vary. With the variation of the display environment, this organic structure is widely used for web pages as it can be customized to different arrangements while still holding all parts together.

The following example shows a hierarchical structure. The top large banner is the login area. The following columns and rows contain various text, images and thumbnails for links. It’s the functional needs determine the structure of information.

screenshot-www.goodreads.com 2015-09-11 21-35-41

https://www.goodreads.com/

These types only serve as guidelines and there is no strict cut among them. Deconstruction, modification and combination may be needed when these layouts fail to solve design problems. After all, it’s the communication that matters the most.

References:

[1][2] Timothy Samara (May 1, 2005). Making and Breaking the Grid: A Graphic Design Layout Workshop

https://designopendata.files.wordpress.com/2014/06/making_and_breaking_the_grid__timothy_samara.pdf

 Andy Leverenz (June 15, 2015). An Exploration of Grids in Modern Design (Retrieved on September 10, 2015)

http://www.web-crunch.com/an-exploration-of-grids-in-modern-design/

Steven Bradley (October 10, 2011). 22 Examples of Different Grid Types On The Web

(Retrieved on September 10, 2015)

http://vanseodesign.com/web-design/grid-type-examples/