THE DEFINITION OF 'THE GRID'
"In graphic design and word processing applications, a grid is a series of vertical and horizontal lines that are used to subdivide a page vertically and horizontally into margins, columns, inter-column spaces, lines of type and spaces between blocks of type and images. These subdivisions form the basis of a modular and systematic approach to the layout, particularly for multipage documents, making the design process quicker, and ensuring visual consistency between related pages."
A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.
The less common printing term “reference grid,” is an unrelated system with roots in the early days of printing.
Before the invention of movable type and printing, simple grids based on optimal proportions had been used to arrange handwritten text on pages. One such system, known as the “Villiards Diagram,” was in use at least since medieval times.
Evolution of the modern grid
After World War II, a number of graphic designers, including Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced by the modernist ideas of Jan Tschichold's Die neue Typographie (The New Typography), began to question the relevance of the conventional page layout of the time. They began to devise a flexible system able to help designers achieve coherency in organizing the page. The result was the modern typographic grid that became associated with the International Typographic Style. The seminal work on the subject, Grid systems in graphic design by Müller-Brockmann, helped propagate the use of the grid, first in Europe, and later in North America.
Reaction and reassessment
By the mid 1970s instruction of the typographic grid as a part of graphic design curricula had become standard in Europe, North America and much of Latin America. The graphic style of the grid was adopted as a look for corporate communication. In the early 1980s, a reaction against the entrenchment of the grid, particularly its dogmatic use, and association with corporate culture, resulted in some designers rejecting its use in favor of more organic structure. The appearance of the Apple Macintosh computer, and the resulting transition away from type being set by typographers to designers setting type themselves resulted in a wave of experimentation, much of it contrary to the precepts of Tschichold and Müller-Brockmann. The typographic grid continues to be taught today, but more as a useful tool for some projects, not as a requirement or starting point for all page design.
Grid use in modern web design
Web developers have only recently started to show a real interest in grid systems. While grid systems have seen significant use in print media, interest from web developers has only recently seen a resurgence. Website design frameworks producing HTML and CSS had existed for a while before newer frameworks popularised the use of grid-based layouts. Some examples of grid system frameworks are:
- 960 grid system
- grid system generator
Adobe InDesign is the industry-standard software (used within publishing house, magazine companies, etc) which is used for creating griding systems to produce print-ready publications.
The software provides an accessible, and easy way to produce professional designs with consideration for elements of griding such as bleed, margin, columns, baseline grids, type, and image.
SECONDARY RESEARCH//GRIDS//PRINTED PUBLICATIONS
Sourcing images from printed publications about designing with grid systems and measures- how to create an affective and visually communicative design.
The first source book, 'Grid Systems' with Kimberly Elam which utilises simple pictorial images and varying stocks to demonstrate methods of working with, and against, the grid (whether it be positive or negative).
The book provides a useful guide for advice on the aesthetic positives and negatives of grid design- what is effective, and what is not. The 'Constraints and Options' (page 8) for example, displays simple diagrams about how elements should be arranged on the page- not extending over the grid or overlapped, but not mixing horizontal/vertical compositions with diagonals, overlapping, or overlapping grid column structures.
The book demonstrates a wonderful use of varying stocks- in this circumstance to showcase how grids are applied over designs- giving a great insight into the consideration for the design, which you may not always consider from first impressions or viewing.This has provided great inspiration to consider how I myself utilise the grid, and how when you understand how the griding system works, you can play around with it, and readily manipulate it.
Some interesting compositions- and a style that I am not very accustomed to. Using 45 degree angles, these compositions and designs have created an interestingly deconstructivist- like style, reminisiant of bold (yet minimal) Swiss typographic design and layout considerations.
'Making and Breaking the Grid' by Timothy Samara, whilst still discussing grid structures, is less of a manual, and more of an overview of griding and DPS examples- providing a varied and insightful overview of grid-structured designs.
Love the unique layout of the DPS in the bottom right-hand corner of the page- the inner margin has been cleverly utilised to manipulate the images for a blended, condensed effect. Great reversed out symbols too, a creative design.
Here, the Proportional Modular grid is utilised for structured and considered design- often found in magazines and other such publications, this allows for a great deal of content whilst the page, though busy, still remains consistently balanced.
Modular grid deconstructed through chance operation (above).
One of my favourite styles of DPS- Pictorial manuscript grid deconstruction- photography is a great love of mine in my design practice (though these slap-dash shots of the book pages might not go to show it...) and the inventive application of typography through the photos, as well as stroke (dot) application creates a really unique and engaging design.