Grids in web design

Critical essay

by Andreia Caires

What are grids?

The grid is a geometric planned system that divides the information into parts and help the viewer to understand the meaning between elements of information, whether text or images.

A grid at its barest is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at designers disposal.

C.Brauckmuller, 2010

In other words a grid is nothing more than a series of lines that will structure the foundations of the layout in order to facilitate the work of the designer when deciding on the best location of the constructive elements of the interface to be built.

With the proposal of being a tool of order and arrangement of visual elements, it is also a way to solve composition and layout issues to achieve cohesion. It is considered a key element of the design being a useful tool for many types of projects wheatear graphic, visual or architectural.

The major advantages of using grids in a web page are clarity, organization and the ease distinction between the different information in the layout. It allows the designer to send a much clear message to the user.

Why are grids used in web design?

Grids are used to organize design elements presenting a balanced content to help the users to distinguish between different types of information in a clear and accessible manner.

labyrinth of information cartoon
confused users image
grid organizing information image

Its use affects the layout in a positive way bringing visual hierarchy to guide the user during the navigation enhancing the credibility of the message. Without a balance, the user is more likely to loose his interest in the web page. Visual hierarchy combined with visual balance can result in better understanding of the content.

According to Vinh, K, 2011, experienced graphic designers working in all manner of media, the major benefits of designing with grids is:

The grid-based design can be very useful in creating layouts easy to understand and visually appealing. It is useful in generating structures and ways to reduce the errors during the interaction by providing a smoother viewing without losing orientation.

A grid consists of a specific set of alignment rules that function as guides for the distribution of elements in a specific format. Every grid has the same basic parts, however complex it may be. Each part serves a specific function and those parties can be combined as needed, or omitted at the discretion of the general structure of the designer, as they meet or not the requirements of the informative content.

For some designers, it is undeniable part of the work process, delivering precision, order and clarity. However, there is a dissident movement that believes in the limits of the use of grids by considering the system as a restrictive factor in the creative process.

Conversely the advocates of its use emphasize that the grid does not limit, but the contrary, it sustains the creative process. But for that to happen, we need to understand the grid as a tool and not as a rigid rule, being useful only if it is based on the type of content it needs to represent.

The grids are the most misunderstood and misused element in the layout of web pages. Though, in a website we only can create a grid after we set the type of project we're working on. The grid is always built after we have defined the concept of work, after all, the content determines the structure the grid will have.

B. Tondreau, 2009

Grids types

The most common types of grid are:

Manuscript Grid
manuscript grid example

It is the simplest grid commonly used to accommodate a long running text, like a book or a scientific text. This type of grid causes extreme fatigue for being too simple. For instance, to create an incentive to read it is important to use different fonts sizes, spacing or margin between content.

Column Grid
column grid example

The column grid is flexible and can be used to separate different types of information. It can combine columns of same or different widths depending on the content to be inserted. The more columns are created, more flexible the grid becomes to articulate the hierarchy of the information into different zones.

Modular grid
modular grid example

It is the column grid with many horizontal guides, creating modules. Widely used for tabular information it has many advantages over others: in a combination modular widths it can allocate different types of information such as images and text organizing the content into smaller portions of allowing finer control when working with large amount of information.

Hierarchical grid
hierarchical grid example

In the hierarchical grid, column widths and space between columns varies. Dynamic content of most websites and resizing of windows require flexibility in width and length, characteristic of this type of grid. The structure is organized by hierarchy of zones, often composed of horizontal columns.

Grid's anatomy

According to Vinh, K, 2011, common ground terminology that describes the various components of a grid are:

Units

The building block of any grid, a unit is the smallest vertical division of the page, upon which columns are built. Units are typically too narrow to house most textual content.

Columns

Columns are groups of units, combined together to create workable areas for the presentation of content. Most text columns, for example, require two or more units to be workable. A grid system of, say, sixteen units can be combined into two columns of eight units each, or four columns of four units each, and so on.

Regions

Regions are groupings of similar columns that form parts of the page. For example, in a four-column grid, the first three columns from the left might make up a single region for the display of one kind of content, and the remaining column might form another region.

Fields

Fields are horizontal divisions of the page that help a designer to visually pace the placement of elements on the Y-axis. Fields can be calculated in many ways, but using the golden ratio is one of the most effective methods.



grids terminology
Baseline grid

In traditional typography, the baseline is the invisible line on which letterforms rest. The baseline grid is formed by a uniform, top-to-bottom repetition of baselines spaced apart according to the leading or line-spacing of the text.

Horizontal vs. vertical orientations

These concepts are notoriously easy to confuse (a unit can be thought of as either a horizontal or vertical division of a page, depending on one's point of vew), so this book refers instead to the columnar grid (divisions of the page measured in width) and the baseline grid and regions (divisions of the page measured in height).

Gutters

Gutters are the empty spaces between units and columns. When units are combined into columns, they incorporate the gutters between them, but not the space to the left of the leftmost unit nor the space to the right of the rightmost unit.

Margins and padding

Margins are the space outside a unit or column. Padding is the space within a unit or column. Margins are generally used to create gutters, while padding is generally used to create a small, visible inset within a block of text inside a column.

Elements

An element is any single component of a layout. Examples include a headline, a block of text, a photo, or a button.

Modules

Modules are groups of elements, combined to form discrete blocks of content or functionality. A registration form, for example, is a module composed of several constituent elements such as a label, a form field, a button, and so forth.

The 960 Grid System

There are many different grid systems available to help developers to structure and design web layouts. Most grid systems are split up into 9, 12, 16, or 20 columns. Custom grids might use more or fewer columns than this. Some grids also break up the design into horizontal rows, which are generally the same width in pixels as the columns.

On the 960 grid system, columns can have different widths but the overall width of the page is always 960 pixels. This value was chosen because 960 pixels are divisible by a good amount of numbers, which makes it more versatile to be able to achieve the resulting pages widest range.

The framework itself has two different variables, to 12 or 16 columns. A variant of 12 columns gives fewer possibilities to divide the spaces, but in many cases it will be more than enough to create any page structure. The variable of 16 columns, gives a wider range of possible widths for the columns, which may be required in more complex projects.

In both variables the columns obtained have a margin on each side of 10 pixels, so if two columns, one beside the other are placed between the edges of two simultaneously a separation of 20 pixels between them can be obtained.

The main advantages of using a framework like grid 960 is the productivity improvement as it helps the developer to work on a well defined layout very easy as a quick solution.

Another important aspect is the reduction of incompatibilities between browsers, since the options provided with the 960 grid has been created to solve those issues. That does not mean that some browsers will not cause problems, but the hassle can be smaller. The system has also options for adaptive layout for screens with different sizes using a CSS for each resolution.

the 960 grid system example bradford magazine website grid

Grids in action

Here are some examples of grid based portfolio websites:

Ignacio Macri designer website homepage
Ignacio Macri designer website portfolio page
Ignacio Macri designer website portfolio page

The website created by the graphic designer Ignacio Macri is based on a 960 grid system left aligned. The content of the entire website has been split in 2 columns. The left column is used to enhance the branding and as navigation with 300px and the right column with 660px displays images and text.

The German designer Tobias Van Schneider used a 1140px grid system centred aligned with 12 columns. The portfolio pages has been split into four columns and the content on the page "about me" is displayed in two columns passing the impression of containing just one right aligned column with all information, using the blank space to enhance the visibility of the content on the opposite side.

Tobias Van Schneider designer website homepage
Tobias Van Schneider designer website portfolio
Tobias Van Schneider designer personal info page

Grid systems: to use or not to use it?

The big question is not whether or not to use a grid system, but how to use it.

If we look at a newspaper page, for example, we note that a column does not usually runs up and down the page. What it does is switch different distributions of columns to each row. .

A grid based layout does not need to show visible rows or columns. The proper use of grid includes variations on the grid, shifts into and out of the columns and rows, breaks in at strategic moments and as the key rule of its good use implies not leave it visible to users. As a general rule the big newspapers do not show to the user that it is built on grids. .

The main focus of good web design is to position good content to be found and read. Users can get frustrated with websites that do not give them enough information to form an opinion or make a decision. The designer have to re-think the web experience tangibly to virtually design a process to allow the user to get useful information, have an understanding and hopefully consider doing business with the company before leaving the page. .

That is why the design of a grid depends on two phases of development. First, the designer needs to try to assess the characteristics and requirements of the type of information that needs to be addressed. This phase is extremely important because the grid, after it's done, is a closed system, and to build it the designer must meet specific content, for example the multiple types of information, the nature and amount of pictures of them. In addition, the designer must anticipate possible problems that can arise when inserting the content within the grid, such as titles too long, cuts of images or empty space in any section for lack of material. .

The second phase is to have the content according to the guidelines given by the grid. It is important to understand that the grid, even though an accurate guide can never prevail over the information. At this point, the designer main task is to offer a general unit without destroying the vitality of the composition. .

Each design problem is different and requires a grid structure that addresses their specific requirements. There are several basic types of grid, and each is designed in principle to solve certain types of problems. The first step is to assess what type of structure will be able to meet the specific needs of the project. .

The Financial Times website grid

Conclusion

In my point of view, the use of a grid system can facilitate the designer's work in every sense. Furthermore, the responsive solution for many different resolutions of web applications is a plus advantage.

I believe also that its use adds consistency to the work since it offers perfect alignment and hierarchical consistency of content by organizing elements such as width, borders and spacing between columns based on indisputable mathematical calculations making the page concise and visually appealing.

To conclude, I would like to emphasize that despite being enthusiastic about the use of grids I do not believe that it can be the solution for every job.
I believe that each case must be studied taking into account the type of project and the content to be structured in order to decide if a grid must be applied.

References

Websites

Skeleton | Responsive grid system

Designmodo| Grid based design theory

Smashing Magazine | Grid based web design simplified

The 960 grid system

The grid system

Design by grid

Web designer depot | Web culture grid based layout designs

Web design ledger | 22 beautiful portfolio websites to inspire you

Books

Ordering the disorder: Grid principles for web design | Khoi Vinh

Layout essentials: 100 design principles for using grids | Beth Tondreau


back to main page