Grid theory

Good, clean typography is a fundamental skill of any designer and a skill that, in my experience, is developed through time and experience.

Most creative’s begin their design careers with a desire to be outrageously creative, but with time you realise that simplicity and structure is just as important, if not more so. All design work involves problem solving on both visual and organisational levels.

Pictures and symbols, text fields, headlines, tabular data, all these pieces must come together to communicate your message. A grid is a simple approach to bringing these pieces together. To most designers the grid represents an inherent part of the craft of designing.

The benefits of working with a grid are simple: clarity, efficiency, economy and continuity.

A grid introduces order to a layout, distinguishing types of information and eases a user’s navigation. Using a grid lets the designer lay out vasts amounts of information, such as books, in less time because many design considerations have been addressed in building the grid’s structure.
Working with a grid depends on two phases of development.

The first  involves the designer attempting to assess the information and the production requirements of the content. In this phase, the designer must also anticipate potential problems that might occur while laying out the content within the grid. Issues such as the cropping of images, and unusually long headlines.

The second phase is the laying out of the material according, to the guidelines established by the grid.  It’s important to understand that the grid, is after all, a visual aid.

A grids job is to provide alignment and unity to layouts, so don’t be afraid to explore it.

Manuscript Grid

The block, or manuscript, grid is structurally the simplest type of grid.
As its name implies, its base structure is a large rectangular area that takes up most of the page. Its job being to accommodate extensive continuous text, like a book or long essay.

Even with such a simple structure, care must be taken by the designer so the continuous type can be read comfortably, page after page. It is important to engage the reader and to keep the eye from tiring too rapidly during long reading.

You can read our tutorial on creating one of these grids here.

Column Grid

Information that is discontinuous benefits from being organised into vertical columns.

The columns can become dependent on each other for running text, independent for small blocks of type, or crossed over to make wider columns (joining two or more). The column grid is very flexible and can be used to separate different types of information.

The width of the columns depends on the size of the running type. The designer’s goal should be to find a width that accommodates a comfortable number of characters per line. If your column is too narrow, excessive hyphenation is likely.

At the other extreme, a column too wide will make it difficult for the reader to find the beginnings of sequential lines.

Modular Grid

A modular grid is essentially a column grid with a large number of horizontal flow lines, that divide the columns into rows, creating modules.

Modules can be vertical or horizontal in proportion, and this decision can be related to the kinds of images being organised. The margin proportions must be considered in relation to the modules and the gutters that separate them.
A modular grid also lends itself to the design of tabular information, like charts, forms or navigation systems. The repetition of the module helps to standardise space in tables and can be used to integrate them with surrounding text and images.

The modular grid has somewhat of a cult following due to its roots being in the rationalist thinking of the Bauhaus and Swiss International Style between the 1950s and the 1980s.

One final note, any grid is only truly successful if the designer rises above the uniformity of its structure and uses it to create something dynamic. It’s important to remember the grid is an invisible guide. Grids don’t make dull layouts, bad designers do.

No comments:

Related Posts Plugin for WordPress, Blogger...