MED4110 Visual Design | Week 5 | Grids

Grid Layout Case Studies

Grid layouts for design can help provide consistency, structure and rhythm by organising space, text and images. Using grids for things like magazines and newspaper can help provide a guide, which will create page to page consistency. It does not limit design however, as sometimes the grid is broken. 

Above is a grid layout that has three visible columns, but it is probably broken in to four, with the title "She hears only voices" in the top row spanning three columns, with a summary next to it in the fourth column. The main page text is spread out onto two larger columns, with an image in the fourth column. This magazine spread has a pulled quote that breaks the grid by going over the three columns, which is in a bolder font and brings the eye into the quote, which creates interest,  breaking up the page a little. 

The left hand side page is an image, which creates a nice contrast with the text on the page next to it. The background colour of the image on the right is the same colour as the caption background of the right, and this creates a balance of colour. The grey tones of the image also pair with the colour of the text. 

by justifying the main body text it creates a structure that supports the one of the columns. This makes the article easy to read and pleasing on the eye. 

The grid layout above is a two page spread that has three columns on each page, with the left page spreading the text over the three columns and the right page only using the first column. It also look like there are two rows, with the layout being split in the middle.

The designer breaks the grid in two ways, firstly by overlapping the title onto the right page, and by starting the summary to the right of the first column and then by bringing it to the edge of the page. I like how by doing this it brings both pages together, rather than having them on their own. I think by aligning the body text to the left creates a softer shape, which ties in with the theme of the article, which is feminine. 

I think that all of this creates a calm rhythm and has a good consistency. 

Grid Layout Design

As a group we decided on a house style and a grid structure. We decided on three columns, as even numbers are more pleasing to the eye. We decided to have a masculine design feel, as that was the target market for the magazine. We chose to each have a colour theme for each page spread, and mine was Pantone 2623U. The documents margin should be 10mm, bleed 3mm, with 3 columns with a 5mm gap in-between. The document size is 210 x 297mm.

We chose the font Didot. Didot bold title in 43pt -40 tracking. 74pt Pantone 2623U for the first letter of the title. Body text in Didot regular 10pt. The page number should be Didot bold 60pt, in the corner of the margin. The coloured rectangle should be W54mm H297mm, with the horizontal one to be 7pt. Subheadings should be 11pt in bold. The initial should be bold and in 35pt. 

To design this, I followed the house style, added in the text and then added in the images. To get the images with a transparent background, I create a clipping mask around them and then added a text wrap around the object shape, added a 2mm offset. I placed each image just inside the coloured rectangle. 

I think that our house style really suits the male target audience of graduates. It's grown up, without being too old, and is professional, which appeals to the recent graduate who is looking for a job. 

Process

Adding the coloured rectangles and page number

Adding the article text and heading

Adding the clipping mask to the page and placing it

Completing the second page and adding the image

Experimenting with breaking the grid

I followed the house style, but added a few extras to experiment with breaking the grid. I brought the horizontal purple line to come out of the grid and off the page.  I added a pull quote box that also goes off the page and starts somewhere in the middle column. The pull quote has a text wrap with a 2mm offset and a 27pt Didot regular text and a 4 drop cap for the speech mark. 

I also changed the paragraphing so that i could bring the images in a bit, and added a 3mm first line left indent, so that readers can see that start of a new paragraph.  I also added some vertical writing next to the images to make it look more jazzy and less boring. 

Process

Adding some vertical writing to accompany the image

Adding the pull quote

Finishing the second page.