Research task: The Golden Section

This task asked me to look into the golden section more generally, by exploring how artists and designers have used these principles, and more specifically in book design. The brief noted J. A. van de Graaf’s Canons of Page Design and Jan Tschichold’s grid designs. First, I made some notes from the course materials.

Next, I used the link https://en.wikipedia.org/wiki/Canons_of_page_construction that was given in the course materials as a starting point for my research, and then I looked more specifically at Jan Tschichold’s influence over the Penguin branding. This all helped me understand grid systems and how they look as an underlying structure.

I wanted to understand how to construct the grids, so I looked in more detail at this. This also helped me understand the maths behind the golden section.

Now that I felt I had a better understanding of the golden section, I wanted to see how this has been and could be applied to design. Some historical examples of this golden ratio in design could be seen in architecture (e.g. Ancient Greek architecture – the width and the height of the buildings had a pleasing ratio and even the columns were placed to fit with this golden ratio) or in fine art (e.g. Leonardo da Vinci used the golden ratio to achieve pleasing compositions in his paintings, such as The Last Supper).

https://www.mathsisfun.com/numbers/golden-ratio.html Accessed 21/12/20

https://www.companyfolders.com/blog/golden-ratio-design-examples Accessed 21/12/20

I also noticed that some design sites discussed the golden section in relation to web design – to have the content on the left in the square, and the sidebar to the right in the rectangle. Design Shack have examples of the golden ratio template overlaid on website designs to show how harmony is created.

https://designshack.net/articles/layouts/golden-ratio-in-design/ Accessed 21/12/20

The golden section is used in typography design, logo design, and so many other areas. It aids in the layout of these elements to create that harmonious, pleasing appearance. (All of these examples found at https://www.companyfolders.com/blog/golden-ratio-design-examples accessed 21/12/20)

https://www.invisionapp.com/inside-design/golden-ratio-designers/ Accessed 21/12/20

My next focus was specifically book design. I tried drawing my own grids (both by hand in my sketchbook and using DTP software). This was very helpful; as I drew these layouts, my understanding grew. Also, the practicality of having a larger margin at the bottom of the page makes perfect sense as this is where (traditionally) someone holds onto a book while reading.

The website I used to help me construct some of these grids also gave lots of examples of this structure and how it can help when constructing page layouts (http://retinart.net/graphic-design/secret-law-of-page-harmony/ Accessed 21/12/20) I am looking forward to the next task where I will hopefully identify this, or another, grid in action in one of my own books.

I also stumbled across this website http://thinkingwithtype.com/grid/ (accessed 21/12/20) where lots of different grid layouts are displayed in action. Below is the golden rectangle of text (just like the page layout I constructed) but on standard US and European page sizes.

The next layout is multicolumn grids, and this can be used in lots of ways. For example, one column could be reserved for images, the images and text could share space, or the different elements could be staggered across grids (like the little example I drew in my sketchbook, where the heading covered two blocks and the text covered more).

A new term I learnt was ‘hang line’ – an area reserved at the top of the pages for images and captions. Below is an example from the website. Again, elements can slightly overlap the grid structure.

Finally, a modular grid has consistent horizontal divisions from top to bottom and vertical divisions from left to right. Swiss designers in the 1950s and 60s created modular grid systems like the one below:

I also saw these layouts plus other on https://www.bookdesignmadesimple.com/layout-grid-book-design/ (accessed 21/12/20). It is interesting to see how many possibilities there are, but the essential point is to split the page into sections and have this underlying structure. This website also gave me an idea of how the next task will work, as it uses real book examples but displays the layout as a flatplan or blank template. I will definitely come back to this page for ideas.

Finally, I read the section in Andrew Haslam’s ‘Book design’ about grid structures and took some notes as I read. This also went over the golden section, as well as other structures. This book contains some very useful charts and templates to help when designing a layout, so I will definitely return to this to help this process. It was also interesting to read about some other designers who contributed to the move away from traditional grid structures and towards modernist approaches.

This research task really opened my eyes to how prevalent the golden section is in all aspects of design. I found that, once I had understood the construction process, I could better observe and understand examples of this in design. I am looking forward to seeing these underlying grids at work in books that I own in the next task.