Design Assignment.

Grid System Analysis

Design Grids are Not

Mathematical Grids

They have gutters, and

type fits in perfectly

against all the edges

They act as a tool to

divide images and words

in a satisfying way

This confuses a lot of

people a lot of the time.

This zine was made to

help you make design

grids and to give you the

resources to delve further

into the grid world.

written by

Andrew Maher

This process is necessary whenever creating a grid, as

it gives us the divisions on the page which we have to

follow if we want the grid to look really tight. You’re

going to have to trust me because you won’t see this

until a little further on down the track.

So we’re going to define how wide our text columns

are. Again think first about what it’s going to be used

for, if this were a book or a magazine, you want to give

the reader enough room on the outside of the page to

stick his or her thumbs on. But don’t forget the inside

of the page either, as they arch up more and more as

you get closer to the centre which means you’ll want to

give the text enough space on the inside as well, so the

writing doesn’t get too distorted by the curve and the

reader won’t have to flatten the spine every time they

want to read the inside of the page.

Everything has it’s own special little nuances that

you’ll want to think of all throughout this process. In

my experience Industrial Designers do this better than

anyone else.

The grid that this text sits ontop of was designed for the

web. It’s got decent leading so that the pages don’t

look too crowded and a generous gutter so lines of text

don’t run into one another. I like it when there is little

difference between the edge of the page and the edge

of the grid, this will only work when designing for screen.

Draw your type area on a scaled piece of paper first. A

good way to get a template to draw on is if you a piece

of A4 paper and fold it in half 4 times. You should then

have 16 rectangles which are a 1/4 size of an A4 page.

There are a few things that will help you define this

area. In book design Tschichold used “the Van der

Graaf canon”. For websites “http://webtypography.

net/” offers a few tips for good typographical practice

online. All of these things will help you in obtaining a

nice type area for your page.

An a4 page is usually way too wide for one line of

text. Müller-Brockmann; “There is a rule which states

that a column is easy to read if it is wide enough to

accommodate an average of 10 words per line”1. If

you pick a nice type size (usually around 8-10pt for a

serif font, 7-9pt for a sans-serif - all depending on the

font.) You’ll end up fitting about 27-30- so we divide

the page in half.

Gutters now need to be created. This sets up the

division between the two columns. These should be

wider then 1mm, as really tight gutters just make the

text look like it runs from one column right into the next.

Experiment with this, create a few grids and see how

close they are together, keep going and you’ll develop

a nice feel for when a gutter is too wide or narrow.

I don’t want to have too many divisions so I’m going

to leave my type area at two columns. If you’d like

to create 4 you can simply half each of the columns

again and create gutters that are the same width as the

gutters in the centre.

Fonts can be really subjective, everyone likes different

ones. When fonts are designed though they are most

of the time created for specific functions, this may

help you in selecting the right ones. Type Designers

(not typographers) create fonts a lot of the time for

specific needs. Times, created for the London Times

was created with the intent of being printed onto cheap

newsprint paper, it was created with certain properties

in mind, as on newsprint the ink spreads easily. Times

was designed to embrace these special conditions.

Arial, a font loathed by a lot of type designers was

created to be displayed on computer screens, which

means it was created on top of square pixels and lacks

a lot of intricate details. Futura was created with a set

of “perfect proportions” to make it the most readable

font (this it is not, but it is still a beautiful typeface none

the less; you’re lookng at it right now).

What’s the difference to me you may ask? Well that’s

pretty fair, there are a lot of books written on how

to design typefaces and how to select them, “Stop

Stealing Sheep and Find out How Type Works” by Erik

Spiekermann and E.M Ginger offers a great insight in

CHOOSING A TYPE AREA CHOOSING A FONT

Type area (in red) is defined Gutters are createdType area is halfed Type is applied

“Type> Fill With Placeholder text” Am sendelit, que exceaqu asimeturi repedit aecearcia et auta asit qui simus conse et pedigene con re plitassequas debitium acepudandi ute nes ut dolenim oluptam, tempor mi, solore occusci endelli busapissento quatias pedipici cus, id qui quo conec- totam, qui cum quo temped ut es ea enihilles eum alibus aut abore, voloris ma vent ut fugia per- nam, volupti odi di ut el maiorem vendam haritatur? Gitae volorio. Ut

odisquo magnam is aut que lacesti iscitatectur abo. Ic tecero issuntiatur, none impor recupta inverum solum rei- um, omnim et abor a voluptaquae. Nam, tet escienis dolupta tumquam eat omnis soluptatur reribus dolorer atiam, consequid excepel ipsantis nonet fugiati aerovid quae eturibe arciis posandae. Volupta sinvendam volorro dolore cuptiis doloreicium volupitat veni as incipsum net et pora dolor resti dignimus.

Analyze the gird system of one page from one of your favorite magazine.

Extra Credit ( 5 pt )

One paragraph about how this makes you look at content layout on print designs differently.

(How many columns, what’s their margins, etc...)

Bonus Point ( 1 pt ) Figure out the reason why the editor place content on the red area.

Hint

Make your own spread. (Design and layout the a spread on a 11” x 17” paper, with the unity of your content)

2 pts

17 in

11 in

1 22

Sources

“Grid Systems in Graphic Design; a visual communication manual for graphic designers, typographers and three dimensional designers” Josef Müller-Brockmann ISBN: 978-3-7212

Lai, Ivy. “Grid System Research” https://ivylailt.wordpress.com/2012/12/13/grid-system-research/