Articles & Examples

Feeling your way around grids

Making sense of the Golden Section when designing grid systems. Originally published in Design in Flight (April 2005)

For centuries there has been a link between art and mathematics, but how can you quantify beauty? How can you create a formula for aesthetic appeal? Philosophers, mathematicians, architects and artists have tried to answer these questions for thousands of years.

During art college I was subjected to a lecture on the Golden Section (who remembers that lecture, come on hands up?), that ambiguous set of rectangles that is requisite art school discussion. During this lecture I was shown slide after slide of seemingly tenuous links between paintings and sculptures, and this set of rectangles. My lecturer at the time seemed as equally uninterested, droning along in self-imposed boredom. What he failed to convey at the time, has taken me over 15 years to even begin to understand. So what is the importance of these boring rectangles and how do they relate to design?

The Golden Section

Many theories on aesthetic measurement have their basis in numerical patterns that occur naturally such as the proportions of the human body, for example the distance between your elbow and the tip of your fingers compared to the distance between your elbow and your wrist. Theories, such as the Golden Section (and its many other names) arise from these natural patterns and they are applied to art (either consciously or subconsciously) to create ?beauty? by way of considered composition.

The Golden Section, Golden Ratio, and the grandiose Divine Proportion are all names for the same thing; a ratio of 1.618. Nodding off? Not yet? Good! Bear with me. Here?s the maths: the Golden Ratio is the ratio between two segments so that the ratio between point ac/bc is 1.618.

{title}

This may not seem that important, but the Golden Section is found throughout nature, mathematics, architecture, art and design. It is derived from a naturally occurring number, called Phi, which has intrigued humanity for thousands of years.

Many usages of the Golden Section in art ? and architecture specifically ? were no doubt by complete accident. Artists and architects are visually aware people. Those early experimenters were in tune with the proportions of their surroundings and incorporated what they saw into their art. They did it because it felt right. And it?s this word, felt, that interests me.

Throughout art school I was taught to feel my way round composition. I was taught that when something was right, it felt right. This school of thought went all the way up through college to university and my first job as a designer. Composition was about feel, not thought. This seemed to go against the very nature of what I understood to be design ? communication and problem solving. So, why do compositions feel right?

Grids and the Rule of Thirds

Grids have long been used by designers to aid and measure composition ? to create a framework with which to construct the design.

Grids come in many shapes and sizes, and generally they?re not much to look at, just a bunch of lines. But it?s the relationship a designer has with this grid that makes them so much more than just lines. They are the framework of possibility. It?s only when a designer sits down and correctly designs a grid that these possibilities reveal themselves.

One of the most eff ective principles in grid design is called the Rule of Thirds, also known as the golden grid rule. The Rule of Thirds is a technique which is applied by dividing a space into thirds, both vertically and horizontally, creating a grid of rectangles. It is perhaps most widely used as compositional theory in photography and film.

{title}

The technique was adapted by artists due to its rough approximation to the Golden Section. The widespread adoption of the technique is due to its simplistic construction compared to the Golden Section.

Grid design, for any medium, is an important part of any design process and it deserves the time and energy it demands. Grids designed with compositional theories, such as the Rule of Thirds, can feel right and thus aid legibility.

Using the Rule of Thirds to construct a grid is a simple enough, but what other factors should be considered when designing a grid system?

Designing a grid for a travel guide

To illustrate my thoughts on Grid design, I?ll walk you through the typical process I go through whenever designing a grid. For this example we will be designing a grid for a guidebook. A guidebook has many similarities with a website, so bridging the gap shouldn?t be too difficult.

Note: I?ve chosen print rather than web as the example medium simply because it?s easier to explain the theory without clouding the issue with questions about CSS, fixed or fluid, browser quirks etc.

The brief

For this demonstration, I?ve decided this guide book will be printed as European A5 size, as a guidebook should fit in your pocket, and will contain a mixture of photographs, maps and illustrations. It will also be full colour throughout and aimed at a populist readership. As all guidebooks, this book will have a dual purpose ? as a travel companion and tour guide. It must provide relevant, contextual information whilst also giving enough information for those who want more.

Process

Before I even put pen to paper, I have to ask myself certain questions about the project, the answers to which will inform the grid and eventually the design. Here?s the basic outline:

  1. Content: I familiarise myself with the content as much as I can. If I?m designing a book, I try to read the manuscript. The content can always inform the grid design.
  2. Audience: Consider what the audience will be using the book for. As this is a guide book they will no doubt be using it for quick reference and will be task focussed. Guide books are not coffee table books. Grid design can help increase legibility and the access structure.
  3. Illustrations / Photography / Icons: Does the book make use of a wide variety of illustrations and photographs? What about icons? As this is a guide book there will probably be maps and associated icons. The grid must be designed to make sure they are as usable as possible.
  4. Format: Once I?ve got a good idea of the content, photographs and intended audience I can begin to make informed choices about the format of the book. I also have to consider the usage of the book. A guide book will be carried around in a backpack or a pocket. It should be easily handled and not too large, comprehensive, but not expensive.
  5. Typography: Typography is another important consideration. Clear, concise typography using legible typefaces is extremely important in any book design. The typography shouldn?t get in the way of the word. What I mean by that is that the reader shouldn?t notice the typography in the book, the typography exists purely to help separate and categorise the information. A well-designed book, doesn?t look designed.

Now that I?ve considered all of the above I begin to experiment with grid design.

Construction of the Type Area

Once I have answered most of the questions regarding the content, format and typography, I begin sketching out grid structures based on different page sizes and formats. I begin by defining what is called the Type Area.

The Type Area is the area where your grid will be contained. It is surrounded on all sides by margins and in some cases running heads and page folios (numbers).

{title}

Construction of the grid

After defining the Type Area I then begin to work on the grid.

As the brief states, the audience is a populist one, so type size must be considered. Also, the brief states that the book must have a clear dual function. I?m proposing the grid design has a single column for the main body text, and a smaller outside column for providing a place for smaller pieces of content, such as captions. As the defined Type Area is 16cm and my grid is going to be a basic two column grid, I?m going to design it based on the Golden Section.

{title}

Making it modular

Now that I have my columns, I can begin to consider what kinds of pages will be in this book. There will be content pages, titles, half-titles, index, contents, full page illustrations, half-page? and the list goes on. I must make sure the grid can cope with all of these pages, so I modularise it, or break it into chunks.

As I?ve used the Golden Section as a way of dividing the space horizontally, I?m now going to use it vertically. There will then be a relationship between the vertical lines of the grid and the horizontal lines of text, but also the white space in between.

Access Structure

Next, I?m going to insert the elements which make a page ? and a book ? navigable, the Access Structure. In simple books, such as paperback, the Access Structure is composed of chapter titles and page folios, but in guide books the Access Structure is much more important. In this grid I?m including elements which will help the reader orient themselves, not only in the place they are in, but also within the book.

{title}

  1. Page folios
  2. Running head
  3. Coloured tab. This will indicate the section of the book you are in.
  4. Outside column. This will be used for iconography to emphasis certain paragraphs.

The finished grid

So, here we have it. I?ve applied an example of the guidebook design to show the grid at work.

{title}

As I?ve constructed the design using simple compositional theory there is a comfortable relationship between all page elements and space in between. This creates a harmonious, balanced design, aiding legibility and enhancing the book in terms of usability and aesthetics.

Designing grids carefully and thoughtfully, using simple compositional theory, such as the Rule of Thirds or the Golden Section, increases the legibility of your designs. By using a grid a designer shows an understanding of systems within visual communication and a sympathetic knowledge of conventions. By doing this, an overall sophistication in the design is soon achieved. When you?ve constructed your grid in this way and begin designing with it you will soon see it can provide the answers to many of the compositional problems you may have encountered in the past. But most importantly, it will feel right.

Articles

Examples

Legal disclaimer: Any redesigns of existing sites may use names, logos, graphics, and/or images which are trademarked or copyrighted by the owning organisation. These items do not fall under any copyright claim or association of Mark Boulton.

Search

A picture of Mark BoultonI'm a graphic designer from near Cardiff in the UK. I've been a designer for over ten years now and primarily work on the web. I'm still partial to a bit of print every now and then though. I used to work for Agency.com in London as an Art Director before working as a Senior Designer for the BBC in sunny Cardiff. This was all before I took leave of my senses and formed my own design consultancy, Mark Boulton Design Ltd.

I've got a thing about grids and typography and occasionally ramble on about them to anyone who will listen.

If you're after simple, clean and effective web design; let me know.