Applying the Grid

18.01.

- 1.9.16

t

applyin g he

g

An essential guide to the do’s and the don’ts of page layout.

an amalgomation of ordered chaos.

Contents.

hy

w golden ratio f o u n d ation proportion rhythm extra

03

05 07 11 09 13

A l ways use a

grid

Grids enable the graphic designer to create visual harmony between elements. Use of the grid gives the designer total control over the layout of a page providing consistency through a range of different artboards.

3.

or

don’t

4.

th

Grids have existed intuitively since the earliest days of man drawing and writing, but it’s only recently that layout has been considered in a scholarly fashion, and as such they’ve never existed in isolation from other best-practice, well understood layout tools.

e

5.

6.

go l d e n

ratio

The golden ratio determines the most pleasing set of proportions for an element, and is simplified to the ‘rule of thirds’. When used in combination with a grid, these simple rules for size, position and proportion can help ensure a layout feels both coherent within itself, but also appealing aesthetically.

u

fo 7.

n

ud a t ianodn lance ba

This can be used to help ensure that 8. content is presented in an easy-tounderstand order, but conversely by providing a firm foundation a grid can also be used to highlight specific areas of content simply by breaking elements outside the grid. The viewer will naturally identify these breakouts and be drawn towards them, giving the designer the opportunity to play with the hierarchy of a layout and tweak the semantic meaning of a piece of work.

meter The foremost purpose of a grid, in graphic design at least, is to establish a set of guidelines for how elements should be positioned within a layout.

Not only does an effective grid provide the rhythm for a design, but it also defines the meter.

The rhythm and meter of a layout is an important part of making the content accessible, helping the viewer to understand where to find the next piece of information within the layout. It sets expectations and defines the rules, timbre and, in some cases, the voice of the design. Think of a grid as providing the road-map along which your viewers travel.

9.

r rhythm

and

10.

A key aspect of the grid is its ability 11. to help determine and define proportion. In print, proportions most commonly echo the size of the media; the shape and orientation of the paper are often reflected in the size and shape of images included within a layout, for example. This feels comfortable because the reader subliminally understands the context of the layout as a result of the physical shape and size of the delivery mechanism.

proportion

On the web this idea of reflection isn’t quite so important, but grids can be be used in the same way to anchor content back to the screen. Screens can be more fluid, and as a designer it’s not possible to know with the same confidence what size and shape of screen will be used to view content.

Regardless of this, proportion and scale are important tools in a layout so using a grid to determine and enforce rules helps to define that all important set of signposts that helps the reader to access and understand content.

12.

the

13.

e n d othf e

14.

fin. manual

Don’t forget that the grid is just one tool alongside many basic principles you can use to enhance your layouts.

Don’t get overly caught up in using a grid rigidly, some of the best designs break all the rules of grid layout and are all the more successful for doing so. Understanding how and when to use or not use a grid can only really come from experience.

a aa a aa a aaa designed and produced by adam riley

a a

a a a a