Grid, layout & composition (OUGD403)

Grid, layout & composition

Jan Tschichold
Before the internet and wide availability of cheap printing books were a luxury item only the rich could afford and a lot of time and effort went into perfecting the layout and grid system to be as aesthetically pleasing as possible. Tschichold came up with a double page spread grid system he believed could create the perfect book every time if used effectively. This grid system became a trade secret between designers and is now known as the secret canon or page harmony. The idea of golden ratio is the main foundations for this grid style creating a perfect harmony. 

This is the layout in its simplest form without any other grid lines. The overall page has a ratio of 2/3 and the red boxes within have this same ratio. The ratio of 2/3 follows golden ratio rules. The idea of golden ratio is that its the most appealing form thats why most books, newspapers, photographs and even wide screen tvs follow this rule.

This more complicated version of the grid shows how the inner red box is positioned. There is a 9x9 grid as the basis with the box falling 1/9th from the top and inside edge and 2/9ths from the outer edge and bottom. The gaps in ratio terms are also 2/3 and 4/6 which is just a multiple of the golden ratio so it all perfectly harmonises with these rules. One other reason the text block is placed high rather than central is because we hold a book at the bottom and outer edges of the pages as we read, laying text like this avoids us covering any of the writing. The idea of this grid is so perfectly calculated and has a real essence of perfection and simplicity.

This gif shows a simple and effective way to construct this type of grid on any size of paper that follows the 2/3 ratio.

This is an example of the canon used in contemporary magazine design. Although the method was designed before computers and even printing presses its still just as effective.

I like this layout as the background is really warm inviting colours and the white text looks bold but not intrusive on it. The range of typefaces is quite unusual and personally I would of chosen differently. In particular the bold header font, there are no uppercase letters which I think looks quite odd as such a bold statement part of the design. The use of two columns here is good as if it was just one the big block of text would look like a lot to read and be unappealing. But overall the use of the canon grid makes it look really effective especially seen as the main part of the photograph isn't hidden by text.

Even in this magazine layout where theres barely any text you can still see the effective use of the canon grid system. I like in this layout how although the photo image covers the whole spread its composed so the main facial components are within the grid so its pleasing to the eye. The typeface used looks like a hand drawn script type and it looks although its drawn in blood so it fits well with the context of the piece.

Josef Muller-Brockmann

“ The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice. ”
Josef Müller-Brockmann

This is a basic example of Josef's work, he created simple grids made up of equally sized boxes over the page. It can be used really simply like this but he used it in other interesting ways such as tilting it. He was a really big swiss designer and he was known for his diagonal grids which were really effective and interesting looking.

This is an example of his work using the grid on a diagonal.

This image shows where I have laid the grid on top of the image to show it follow the angles and lines. Its a really effective way to create an interesting layout as its instantly different to your bog standard vertical layout. 

I briefly read through a book he wrote called Raster Systeme. Above is an interesting quote from it about how large your type should be for people to be able to read it and for it to be pleasing to the eye.

Above is another piece from the book explaining how the size of columns can effect the ease of reading and how its important to judge the right size well both for a good flow in the way you read but not too large as it can become tiresome to read and easy to loose your place. Another thing he goes into is about margin size. He explains if the margin is too large the page looks overfull and the writing can look overwhelming but too large it disturbs the flow between columns and can look unrelated.

Interestingly here when he shows bad margin size and good he uses secret canon ratio for a good example. He is a user of this ratio himself in some cases even though he also uses his own adapted grid dependant on the piece. 

He then goes on to show good placement of columns within this grid system. Its clear his grid system for books is the canon grid and for poster work he prefers using his own equal sized box grid.

As shown in the image above he eventually goes on to say that when designing posters and using image in magazines an equal box grid is more appropriate and interesting to look at. It becomes less about holding space on your page and more about it being interesting looking as a spread. I think his approach to grids is really interesting especially the tilted ones and I think thats something id really like to experiment with in future work.

I found this brilliant contemporary poster by a London design agency. I then used Illustrator to drawn in what I think the grid system would be for this design, it really clearly follows Josef Muller-Brockmans style of poster design and his grids. It shows that this technique is still effective now and will almost definately stay timeless.

This is an interesting downloadable grid template I found for people designing IPhone apps. The app has been made according to golden ratio and although its very different to Jan Tschichold's grid work it follows the same principles and shows this old way of creating harmony is something being passed down to the digital age because its really effective.

I also found out Apple have created their own golden ratio based grid for the production of app logos to based upon. Although a lot of them break these rules its really interesting to see such a big well known company when it comes to up to date branding uses such a traditional grid system.