Cannons of page construction session 1 & 2

Cannons of page construction session

Session 1
Todays session gave us an introduction into cannons, a geometric system that can be used to create layout designs. 

The use of a cannon can be carried across printed and digital media as a means of organizing type & image and allows a balance of the use of space within the interaction of these visual elements. In turn producing more aesthetically pleasing design. 

To introduce us to basic cannon systems we looked at the golden ratio and how it is applied to benefit page layouts in the form of a golden rectangle. 

Golden Ratio

To calculate a golden section, or a golden rectangle theres a formula to follow. 

For example a golden section of 100cm:

100cm / 1.618 = 61.8 

100cm = 61.80 + 38.20 

The ratio of 61.80cm to 38.20cm is 1:1.618 

Adding/Increasing 

100cm x 1.618 = 161.80cm

The ratio of 161.80cm is 1:1.618 

Here is how the golden section works here to split a page up into a number of squares and rectangles and how they all fit within the golden ratio spiral and it can keep going for infinite amounts with a rectangle and square been made out of a rectangle and so on. 

De devina proportion

The same idea of dividing the length and widths and be used to create columns and rows creating a golden ratio  grid system. It can be quite complex or simplistic depending on how many vertical or horizontal divisions you want to make.

The use of this grid system could be used to organize web content so could benefit my practice, it creates a nice balance within the spacial elements of a page. 

It can be quite complex, but I don't think this method would fit my style of working as I like to keep things quite minimal and symetrical and working to this grid would suggest I need a lot of different elements and content. 

By experimenting with the horizontal and vertical devisions in a more minimal sense I can create a more simplistic and symmetrical grid system, starting with a simple grid system would be best to use as a starting point and adding additional divisions when required. As compared to using a complex system and realizing all the given modules created from the divisions aren't required, so an analyse of the quantity of content would be the idea starting point before creating the grid system. 

This system could be beneficial if a main focus is needed on the centre of the layout as all the divisions focus the eye in onto this point.

Digital variations 

An example of the golden ratio of 1.618 been used in typography to create a balance within the type hierarchy, harmonic proportions is supposed to be presented here while maintaining positive aesthetics and readability & legibility. 

This idea of De Divina Proportion is used in other graphic design outcomes like logo design.

The National Geographic using the system within the icon element and typographic element of there logo to create balance in aesthetics and mathematical proportions. 

It can be used in a more geometric aspect to create complex logos that initially look quite simplistic, the golden ratio can help make complex things more concise.

How the golden ratio translates into web formats. This doesn't make much sense though as the way the divisions overlaid ontop of the website presenting the sectioning and organization of the site don't really make sense.

I sort of see how the page is broken up into the image portion been the larger section and how the type sits within the body text section on the bottom right square, the other sections don't really make much sense to me though.  

I see the grid systems you create out of the horizontal and vertical divisions a more successful way of organizing  page layouts rather than the traditional golden ratio sectioning. 

Van De Graaf cannon

A system I liked was J.A. Van De Graaf's system of page layout deriving from the Gutenberg press process, and early medieval script. Its primary a method of effectively positioning body text within a spread of pages. 

The margins and the text area are determined by the page dimensions and spread dimensions. 

Keep this system of lines going to produce the full Van Da Graaf pattern. 

Depiction of the proportions in a medieval manuscript. According to Jan Tschichold: "Page proportion 2:3. Margin proportions 1:1:2:3. Text area proportioned in the Golden Section.

My interpretations of the Van Da Graaf system using a 2:3 page ratio which is important for creating the correct proportioned pattern.  

Digital variation 2:3 ratio

I see the systems use for centering body copy in a way in which balance is presented within body copy and negative space but it doesn't have much use other than that.

This is were I think Raul Rosarivos version that devices the page into 9ths allows a little more versatility when playing about with type and image alignment. 

Jan Tschichold created a similar layout with harmony and balance within the grid guides. Again based on a 2:3 ratio offering more versatility for typographic or image elements. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Session 2

Todays session taught us about the Muller-Brockman Grid. Its a method for aligning textual and image elements and has a very mathematical system leaving lots of creative opportunity and variety through the grid guidelines. 

I created our own Muller-Brocknman grid following these guidelines.

Determine type area (Van Da Graff method)

Divide into two columns (or more for future grid work.)

Divide columns further with an intervening gutter. 

Divide text columns into more fields. 

A digital variation I made that could be applied to web design layout scamps deriving from the van da graff spread & incorporation of muller brockman grid. 

The system can help determine ideal and proportional type size & leading through mathematical equations involving the gutter widths. 

We were refreshed on a method of thumb nailing from last years design principles. 

Inserting "empty lines" to determine type area's, boxes for images and alignment of image boxes helps to create detailed thumbnails.

Each field should contain a number of lines of type with each empty line should be able to contain a single line of type.

Images placed on the adjacent columns will perfectly align with type as well as image boxes. 

We then tried to apply these guidelines to the magazine, book and newspaper spread if possible.

If this wasn't possible we were to identify the structural grid systems through sectioning off bodies of text and images to try determine a grid system. 

Another refresher from last years design principles as I wasn't able to apply the exact Muller-Brockman grid theory I dissected the page layout up to identify main text boxes like the bellow contents spread which follows a similar system as the Van da Graff cannon does. The positioning of the body copy has mainly been centered and positioned in the top section of the page. 

Looking at how gutters can work to create proportioned leading and type point sizes in headers and footers as seen in the folio numbering system here and the gutter between the small indented square paragraph of type. The gutters widths co-inside with point sizes and leading amounts to create proportion and mathematical accuracy to create aesthetically pleasing design.  

The same book Naomi Klien - No logo with use of image and typography showing links between the gutter width and leading highlighting a key theory mentioned in the Muller Brockman grid system. 

Analyzing the Printed Pages magazine I initially thought that it appeared like a simplistic and minimal column grid system but after closer investigation I figured out that its a multi modular grid system, the gutter width is consistent with the sub header pt size no the first page of the spread along with the leading settings showing constant structured design layouts. 

The Independent newspaper confused me a a fair amount but I think I grasped that this too is a multi modular grid system but it doesn't follow the same connection between gutters influencing Typography pt sizes and leading between paragraphs and lines of text. 

Theres a lot of content in a newspaper so I feel this spreads guidelines and grids are maybe a simpler presentation of the actual grid they use as i recall Fred mentioning last year how complex these newspaper grids can be due to the versatility that needs to be created in the guidelines for the large bodies of text and image. 

This task helped identify how certain pages are deconstructed in textual and image elements and how cannons & grids are used in print based medias, a thought to take further on for my website brief is to consider these grid systems and cannons we have learnt in current website layouts and use them to inform my thumb nailing stage along with.

Thoughts on these sessions

These sessions taught me a few basic aspects of how page layouts can be created without following the typical standard modular grid system i tend to use, so in this sense has given me a body of knowledge to work and advance from when experimenting with future layout on print, digital and web based outputs. 

It allows me to create balanced layouts, creating aesthetically pleasing layouts that don't rely on absolute symmetry to present structure and organization. It showed me that creating symmetrical layouts is not the be all and end all in producing balanced, structured and aesthetically pleasing layouts.

Can take these and further systems forward to use on print layouts, digital layouts, web layouts and most other graphic design specialisms showing its versatile uses.

The golden ratio and this system of mathematical divisions are used in many other aspects not just design, so taking influence from how it interacts with:

Architecture

Book design

Music 

Nature

Maths 

Historic paintings like Leonardo Da Vinci

Things to take forward from these 2 sessions

The session made me think on how these systems can be used to create other pieces of graphic design work, trying these systems out like the golden ratio on logo design will help me create better developed design work and will help produce adaptable design work. A logo following the golden ratio will scale up or down and keep a consistent balance in its aesthetics and proportions, particularly effective when playing around with typography and icon based logos. 

Read the Vignelli cannon to further my understanding of these types of grid/cannon layout systems. 

Using these layouts system as a base of influence to create 5 rough website thumbnails, base each idea around an original concept that follow a different unique aspect and purpose of the site. Take into account target audience when producing these concepts. For each website plan create thumbnails with a supporting flowchart of how all the pages will interact. (use digital outputs for grid systems to work from over tracing paper)

These two sessions made me really think about grid systems and how they form a strong base/starting point for good design work be it layout or print. So to develop my understanding of potential layout methods I am going to look into other grid systems that don't follow the typical modular or column style like the Marber grid system designed in 1962 and based around the golden ratio its a fluid grid system within the horizontal, vertical and diagonal guidelines. Its used by Penguin Books for its versatility and structure it allows and the presentation of lots of negative space for image use for front covers. 

Looking at these other grid and cannon systems will as mentioned influence my website layout thumb-nailing.

Taking forward the conjunction of the Van Da Graff method within the Muller Brockman grid system makes me think about combining other grid system's up to add more versatility to the guidelines I follow for my design work. Grids and guidelines can also be made up of my own mathematical systems like the guys at Numiko presented when they created a grid system based on the European star found in the Europe flag. 

They took the star and broke it down into the angles it was made up of to create a series of shapes with european countries colors used to represent their concept of uniting nations. 

The final point I want to take forward is the further investigation of how the Muller Brockman grid system can be used to create ideal Pt size typography choices and line leading deriving from gutter widths to create a nice structure and aesthetic accuracy in my print and web work.