Tag: layout

This two part exercise aims to understand the relationship between typography, the grid, and the page in more depth by analysing existing layouts and creatively developing alternative ones. Both of these activities will feed into assignment three.

Understanding layouts

Research into book layouts that you find interesting. These could be art or design books, or others that have more complex layouts that balance images, typography and other content across multiple columns. Trace the grid structure of your chosen double-page spread using tracing paper and a sharp pencil. Measure the margins, column width and depth, plus spaces between the columns. Transcribe the tracing onto a clean sheet of paper, drawing on the measurements. Compare your drawings to other double-page spreads within the same publication. Identify the similarities and differences – is there an underlying grid system and how does it adapt to deal with different content?
Now recreate the same double-page spread using DTP software. Use your traced drawing measurements as a guide. There is no need to copy out all the text – you can use ‘dummy’ text or ‘blurb’ such as lorem ipsum. Lorem ipsum is Latin text which has a distribution of letters that make it look like readable English. You can download some from www.lipsum.com and incorporate it into your layout. Similarly, there is no need to recreate the images – indicate images by a 10% shaded area, whether these are cut-out, full-bleed or within a box. Try to match the typeface as closely as possible. It doesn’t need to be exactly the same, but try to retain something of the original – for example, make sure you
use a sans-serif font if the original is sans-serif.

Experimental layouts

“These conditioned patterns of reading, from left to right or top to bottom for example, allow us to approach any form of printed material with some expectation of how we will navigate through it. This, then, is the starting point for the designer, who is able to build upon this familiarity within the layout and format of a project, often utilising the element of surprise or difference to confound the reader or user’s expectations.”
Russ Bestley & Ian Noble, Experimental Layout, 2001. Hove: Rotovision.

Extend the project by thinking about how you might radically change these layouts – what creative decisions around the grid would you make to improve these designs? Develop layout ideas that ignore the grid structure, challenge it, or offer radical alternatives to the existing layouts. Develop a range of ideas through thumbnail drawings and DTP layouts, in a similar way to the first part of the exercise. Use this as an opportunity to take creative risks, and find radically different ways to layout the existing content. This process might challenge any preconceived rules about how a layout should normally work. Reflect on the process in your learning log.

Layouts

The book I have chosen for this exercise is ‘Stop Stealing Sheep & find out how type works’ by Erik Spiekermann and E.M. Ginger.

This is one of my go-to books when it comes to typography and is well-thumbed. An average double-page spread in the book is made up of the right-hand page describing the function of the type with the left-hand page showing an example of it in use.

I set out measuring the spread and trying to work out the grid that had been used.

Once I’d measured the size of the layout I measured to borders and proceeded to measure the columns and gutters. I was getting some random measurements which made me realise that this was an American publication and was laid out in inches. Once I had taken this into account things made more sense.

I managed to work out that the right-hand page was a 7 column grid where as the left-hand page grid varied depending on the imagery used.

It was fun trying to work this out in InDesign. There were different type sizes and styles; dotted lines; colour blocks; and text wrapping. Once I’d got the basic grid it was fairly straightforward to replicate the layout of the double-page spread.

Experimental

For this part of the exercise I set up another spread in InDesign and added a Golden Section grid.

I then added the elements from the previous layout and tried arranging them in a way that was pleasing to the eye. I took several attempts to find a suitable layout.

I changed the orientation of some of the type and gave the page more whitespace which added to the contrast of typefaces, sizes and colours. I felt this was quite effective but wanted to learn more about more experimental layouts. I have several books on type and grids in my growing collection, and one that looks at different grid styles is Typographic Systems by Kimberly Elam.

It does look at 8 different types of grids and gives examples of them in use.

Axial Grids are where elements are arranged either side of an axis whether that be vertical, horizontal or angled.

Radial grids have elements extending from a single central point like rays.

Dilatational grids use a system of expanding circles to create the lines of the grid. This type of grid is also associated with spirals that can be used to direct the eye to a central point.

Random grids are a complete contradiction as elements are arrange in no particular order and the brain sees patterns in the composition that aren’t there or intentional.

The Grid System is the most commonly used grid in printed media and is used to organise and create relationships between elements with vertical and horizontal divisions.

Transitional Grids use layers of shifted banding to organise type. This is a more relaxed system doesn’t stick to the rule of edge alignment when it comes to compositional elements and type.

Modular Grids are where type is contained in regularised non-objective elements such as boxes or circles.

Bilateral Grids are the most symmetrical of grid systems as they contain type centred on a single axis.

There are many techniques to set out a page layout and depending on how much information you have to convey; the size of the page; legibility; the theme/feel of the piece and its use. You could also combined more than one system but this may impact the coherency of the piece.

Reflection

I enjoyed this exercise and it was good to get the chance to research different layout systems and see how they work. Typographic Systems by Kimberley Elam is a really good book for understanding grids and how they work with examples and exercises to have a go at. I will explore these more going forward and hopefully be able to utilise more experimental layouts in my work.