Editorial

Design
Support Material
What is the
definition of
grid system?

A grid system is the foundation of any solid design or a manner

of regularly spaced horizontal and vertical lines.

Another grid meaning is a template or guide used for

positioning and organizing the element of an order to facilitate
and ease decision-making.
An example:

One unit equals 20 × 20 pixels.

Each unit is further divided into sub-units of 5 × 5 pixels. There are 16 sub-units per
square unit.

This can then be also looked at from a print point of view where the values would be
represented using millimetres rather than pixels.
An example
of a text based
grid:
A grid is a set of guidelines, able to be seen in the design
process and invisible to the end-user/audience, for aligning and
repeating elements on a page.

A page layout may or may not stay within those guidelines,

depending on how much repetition or variety the design style in
the series calls for. Grids are meant to be flexible.

Using a grid to lay out elements on the page may require just as
much or more graphic design skill than that which was required
to design the grid.

In contrast, a template is more rigid. A template involves

repeated elements mostly visible to the end-user/audience.

Using a template to lay out elements usually involves less

graphic design skill than that which was required to design the
template.

Templates are used for minimal modification of background

elements and frequent modification (or swapping) of
foreground content.

Before the invention of movable type and printing, most text had
been hand scribed, and basic grids were used to identify a margin
area along with guides to ensure typography is kept aligned and
straight.

Grids &
Templates;
what is the
difference?
The Golden
Ratio - what is
it?

In simple terms, the golden ratio (also known as the divine

proportion or the golden mean), is a mathematical constant that
appears repeatedly in nature and artwork.

Expressed as an equation, when a is larger than b, (a + b)

divided by a is equal to a divided by b, shown in the image
below which is equal to about 1.618033987. That number,
often represented by the Greek character “phi,” is the golden
ratio.

a b

a+b

a a+b
= = 1.618... = φ
b a
 The same theory can be used to construct a rectangle, called
the golden rectangle. An image that follows the golden ratio
can be placed neatly inside a rectangle that obeys the ratio.

To construct a golden rectangle, choose a number that will be

the length of the rectangle’s short side. For argument’s sake,
let’s say 500mm. Multiply that by 1.618. The result, 809mm,
is the length of the long side of your rectangle. Therefore, a
rectangle that is 500mm by 809mm is a golden rectangle. It
obeys the golden ratio.

a b

a a+b
= = 1.618... = φ
b a

The Golden
Rectangle
example
So how can we Divine Composition
use the Golden How then do you use this magic number in the composition of
your web page? The math may seem like a stifling box that your
Ratio? creativity will struggle in, but the golden ratio is simply a useful
guideline. Having a basic guideline to build from can end up
giving you more creative room by taking some of the guesswork
out of proportions and placement.

Think of it as a tool instead of a cage. At its most basic, you

can use the golden ratio to designate the size and placement of
content areas and side bars. A fixed-width layout is the easiest
application. Decide on the overall size of your layout via the
method for creating a golden rectangle.

For Grids/Blocks
The square created by the a lines would be your content block.
The smaller rectangle would be a side or navigation bar. Once you
have figured out the size of your rectangle, finding out how wide
your navigation bar needs to be is easy maths.

For this example;

we’ll say your rectangle is 525 pixels by 850 pixels.

525 is a and 850 is (a + b), and b will be the width of your side
bar.

To find b, we simply subtract from (a + b), which is 325.

Therefore the width of your side bar is 325.

Remember that your rectangle can be flipped around to suit your

purposes, putting the sidebar at the top, bottom, or opposite
side. As long as the ratio holds, your design will feel harmonious.

For Text
There’s a faster way to get the measurements you need and it can
be applied with text content.
Let’s say your context text is size 12.
Multiply 12 with 1.618, the golden ratio, and you’ll get 19.416.
A header text size of 19 or 20 would closely follow the golden
ratio.
The golden ratio is a language your mind understands, and
by communicating with it, your ideas will come across more
effectively. You don’t have to adhere to it exactly; the basic
principle is enough. Applying the ratio to image sizes, the
relationship between text and image placement and the creation
of subdivisions within side bars are all possible concepts.
Grid Work:
The Rule Of If maths isn’t your cup of tea, the concept of the golden ratio can
be simplified. The rule of thirds governs the placement of points
Thirds of interest in a scene. Divide any given image into thirds both
horizontally and vertically. You’ll get 9 grids.

According to the rule of thirds, the vertices of those lines (where

the lines cross) are the ideal placement for points of interest.

People scanning the page are more likely to notice things placed
near the points, and the division is comfortable to view.

More complex design is possible by breaking down those thirds

into further thirds.

In short, the eye can be lazy and not have to search for important
details. Our brains like this. Major images, news boxes, search
bars and any other points of interest can be nestled on or near
the vertices.

This little shortcut will give you a design that is both easy on the
eyes and makes people drawn to key pieces of data.
Evolution of
the Modern
Grid

After World War II, a number of graphic designers, including

Max Bill, Emil Ruder, and Josef Müller-Brockmann, influenced
by the modernist ideas of Jan Tschichold’s Die neue Typographie
(The New Typography), began to question the relevance of the
conventional page layout of the time.

They began to devise a flexible system able to help designers

achieve coherency in organizing the page. The result was the
modern typographic grid that became associated with the
International Typographic Style.

The seminal work on the subject, Grid systems in graphic design

by Müller-Brockmann, helped propagate the use of the grid,
first in Europe, and later in North America.

(via Wikipedia)
Consideration of the use of grids within typographic design
work must relate to both the content and the context of the
work to be produced.

It is impossible to prescribe at which point in the design process

a grid system should be introduced. This will be towards the
earlier stages of the process certainly, but perhaps not before
the initial concept is worked through.

This may take some working backwards and forwards between

the overall design concept in relation to rationalizing aspects of
the design such as the choice of typeface and line length.

The latter will give an indication as to dimensions for column

widths of the grid, for example. Remember, the design should
take priority – the grid must be used to guide, not to constrain.

Use of Grids in
graphic design
layouts
What grids Simple Typographic Grids
can I use when These may consist simply of a number of vertical columns used
to position text and image matter, and may include the space
designing? between columns – the gutters – and the margins of the page,
which must be given consideration.

It may be necessary to produce grids with narrower sub-columns

to enable a greater degree of fl exibility in the design and layout
of pages. Text widths can be set to multiples of the narrower
columns, allowing the design to accommodate different matter
thus allowing for a change of pace, rhythm and style from one
page or section to the next, while still relating the content.

Modular Grid Systems

Modular grids are associated with Swiss typography or the
‘International Style’ of the 1950s and 60s. As well as a vertical
division of space, modular grids divide space horizontally too,
creating units or cells.

The depth of the cell may depend upon the size of the text type
and leading being used. Multiples of the line depth (leading size)
form a good basis on which to construct the cells.

For example, ten lines of 10pt type on 12pt leading could allow
for a cell height of 120pt within the grid. Again, each cell division
is spaced by the equivalent of a gutter both vertically and
horizontally.

Vertical columns still appear, but further rationalization as to the

position of text and image in relation to the depth of the page
can be made via the grid.

Symmetric Grids
Symmetric grids sit centrally on a single page (folio) so that the
left and right margins are equal. The term can also be applied to
a grid system used across facing pages where the position of the
margins and text areas are symmetrically refl ected or mirrored.
Margins are not necessarily equal but run both left and right of
the text area on single pages and are mirrored across the spread.

Asymmetric grids
These grids may have an off-centre appearance either as single
pages or combined in spreads. If used in spreads, the grid is not
mirrored from one page to the next as in symmetrical grids, but
is more likely to appear repeated in a single position from page to
page. Again, as with all grid systems, attention to the relationship
of the margins is important. It can be this element alone that
determines the success of the eventual layout.
Grids are often constructed
as simple columns of vertical
lines but may be devised
as more complex modular
systems allowing for greater
fl exibility.
Grids & Columns
tutorial

A column-grid system is a particularly useful tool for any designer wanting to create perfectly aligned
typography. It can be used in both print design projects and in your web designs, to help you achieve
pixel-perfect website layouts.

As Swiss graphic designer and teacher Josef Müller-Brockmann puts it: “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 their personal style. But one must learn how to use the grid; it is an art that requires practice.

As a general rule of thumb, the more columns you have, the greater the layout possibilities. I typically
use columns vertically, but for additional layout options you can also place rows across the page
horizontally, to create ‘modules’.

This tutorial will show you how to set up a column-grid structure the old-fashioned way. Of course,
InDesign enables you to create columns (the quick way) with margins and gutters when you
create a new document, but by mastering column-grid structures in Illustrator, you can gain a real
understanding of the mathematics and principles involved in creating the perfect grid-based design.
01 In Illustrator, create
your document for an A2
portrait poster (mine’s
420x594mm high).
Decide how many columns
you want for your poster
– I find that multiples of
four are ideal for this (so
4, 8, 12, 16, 20 and so on).
I’m going with 16 in this
case, since it should give
me plenty to play with.
But when designing an A4
brochure or magazine, for
example, it would probably
be more like eight or nine
columns.

02 Decide on the size of

your margins (the distance
into your design from the
edge of the artboard) and
your gutters (the distance
between the columns). I’m
going for a 20mm margin
on each side, with 4mm
gutters. This will allow for
a decent amount of ‘safe
space’ between the borders
and the artwork.

03 Now work out where

to put your guides – to
do this, take your page
width (420mm) minus
40mm (the 20mm left
and 20mm right margins),
which equals 380mm, in
this case. Now multiply
your gutters. Quick
hint: this will be one less
than the number of your
columns, so in this case 16
columns means 15 gutters.
Each gutter is 4mm wide,
so I’ve multiplied 4mm
(gutter width) by 15
(number of gutters), which
equals 60mm.
04 To work out your
column width, take your
gutter width total (in this
case, 60) away from your
artboard width, excluding
margins (380, here) – so
380 minus 60 leaves us
with 320. Divide this value
by the number of columns
(16) and you’ll get your
individual column width
(20mm). If you’re bad
at maths, like me, use a
calculator for this.

05 Show your rulers

(View>Show Rulers) to
help you measure, and
drag a vertical guide onto
the artboard. Using the X
co-ordinates, set your first
guide to zero. Repeat this
again to 20mm (your left
margin). Remember that
you’ll need to make sure
your guides are unlocked
(View>Guides>Lock
Guides) at this stage.

06 Continue setting
guides at 40mm (first
column), 44mm (first
gutter), 64mm (second
column), 68mm (second
gutter), and so on. Your
penultimate guide should
be set at 400mm and
your last at 420mm. You
can repeat this process
horizontally, if required,
using the Y co-ordinates to
create ‘modules’
07 The first step to
designing your poster is
gathering content and
pasting it into individual
text boxes. In this
case we’re designing a
poster using the London
Underground tube lines as
the subject, and I found
all of the information I
required online. Copy
and paste your text into
separate text boxes – I’m
using the name of the tube
line and each of its stations
– and loosely start laying
out the content.
08 A lot of design
inspiration comes from the
50s and 60s International
Typographic Style, made
famous by the likes of
Wim Crouwel and Josef
Müller- Brockmann. The
use of grids and large titles
were commonly used by
the ‘godfathers of design’,
so to echo this style I’ve
opted for an apt title name
in of AG Schoolbook, at a
font size of 190pt.

09 For the central visual

element of my poster, I
want to design something
new that will symbolise all
12 of the tube lines. First,
draw a rectangle. Hold and
click on the object while
pressing Opt/Alt+Shift,
and drag the object
directly below to duplicate
it. Using smart guides, line
it up perfectly underneath
the original – then hit
Cmd/Ctrl+D to duplicate
the object until you have a
total of 12 rectangles.
10 Draw a large rectangle,
then use the Rotate tool
to set it to -45°. Place the
rotated rectangle above the
12 rectangles on the left-hand
side (Object>Arrange>Bring
To Front) and use the Direct
Selection tool to select all 13
objects. Open the Pathfinder
panel, select Trim and cut the
rectangles at 45°. Doing this
will automatically group the
objects together, and give
them one sheer face, so you’ll
then need to ungroup the
objects (Object>Ungroup).

11 Repeat this process for

the right-hand side of the
rectangles to again get a
diagonal line across, then
change each rectangle to a
different tube line colour.
Now select alternate
rectangles and drag them to
the right to achieve the offset
look seen here. Lastly, select
all 12 objects, group them
together (Object>Group),
rotate the whole shape by
-45° and then centre it to the
artboard – both horizontally
and vertically.

12 Once you have all of the

individual elements required
for your poster placed in
the document, set about
laying out the type around
the central design element.
Setting type is a bit like
piecing a jigsaw together: it
takes a while, but eventually
you’ll find a basic layout that
you’re happy with. Using
the 16-column grid enables
you to ensure all the text
and elements are perfectly
aligned with each other.
13 Now draw some lines
using the Pen tool, joining
the central element colours
to each tube line description
with routes that resemble
the map of the London
Underground system.
Clicking on your start point,
plan a way out from the
central element to the tube
line title – holding down
Shift will enable you to draw
straight lines and 45° angles.
Next, round off the angles
between lines by creating
extra nodes near to the
bends – using the Convert
Anchor Point tool (under
the Pen options), adjust
them to achieve a smooth
bend.

14 Now convert your main

heading text to outlines
(Type>Create Outlines),
and then begin interweaving
the letters into the central
design elements. I’ve done
this by both trimming (as
in step 10) and bringing
the tube lines forwards
or backwards on layers
(Object>Arrange>Bring
To Front, or Send To Back.
When converting text to
outlines, remember that this
is a destructive process so
keep a copy of the previous
version, just in case.
15 To finish off the poster I’ve added some final touches, including circles of colour to
represent the interchanges at each station and junction points to join different coloured tube
lines to each other.

Lastly, check the alignment of individual elements to your column grid to ensure everything is
perfectly aligned
Final finished
design
 Get Inspiration
Before you start your magazine, go to a newsstand and purchase
a few magazines that catch your eye. Take them home and try to
decide WHY they caught your eye. What is it?... the photos? the
layout? the subject of the magazine? Use elements you like in
other magazines to inspire your magazine’s layout. And do your
best to not let the computer dictate your layout. The software
works for you not the other way around.

Design a Great Cover

A well-designed cover can get your magazine noticed and even
more importantly, picked up! Therefore, all cover photos must be
of a good, high quality photo (in the proper resolution).

Choose a photo or illustration that is interesting to your potential

readers or which tells a story. Showing the unexcited face of an
unknown person will not do much to get the potential customer
to reach for your magazine. Choose a photo that is recognizable
to your target readers or shows action, unusual colors, taken from
unusual angles, or combinations of all these.

Remember, your magazine only gets one chance to make its

first impression. Photos are powerful in making a good first
impression.

Careful Font Usage

The choice of fonts can have a major impact on the overall
professionalism a magazine conveys. Using too many font faces
is visually confusing to the reader. He/she may have trouble
distinguishing the stories from the ads. Not to mention that too
much “stuff” can be tiring on the eyes.

Consider using only one to two font families in your articles; one
for the headlines and subheads, one for the body text.
Research shows that serif fonts, especially small ones, are easier
to read than san-serif fonts (serifs are the little tick marks at the
end of lines in the letters). The eye tracks across the serifs of the
letters making reading easier.

ALL CAPS are difficult to read. If you want to emphasize a

word consider using bold versions of that font as an alternative.
Stretching/compressing fonts look awkward. Consider the
extended or condensed version of that font or even another font

Magazine family.

Design ideas
and hints
Multi-column Layouts
One trick for having your stories look professionally built is to
use a multi-column grid to the page. For regular sized magazines
try using three columns, digest sized mags use two. Not only does
it look more professional but text will flow better on the page and
you will have more options for placing photos.

Don’t Be Afraid of “White Space”

Although it can be difficult, consider leaving some areas of the
page blank. Stuffing as much as you can onto a page is visually
overwhelming to the reader. Experiment with leaving some
column white space in your new multi-column layout.

Try running text in one of the columns only with a photo or graph
covering the other two columns. Try starting your article halfway
down the page with the top half being reserved for a photo.
Experiment - computers make that easy.

Stay Away from the Edge

Many magazines that come through our facilities have layouts
with text too close to the edge of the page. Again, don’t try to
fill up the entire space. 10mm margin is the minimum suggestion
but better 12mm or even more, page margin is suggested. Again,
it looks more professional adding more white space and you will
not worry about the possibility that text might be cut off when
the magazine is cut down to size after printing.

Avoid Clip Art

Market research has shown that cartoons do not sell to adults. In
this case you are selling the story to the reader. He has not read
the story and is deciding whether to or not based on the graphics.
If poorly designed cheap clip art is used there is a good chance he
will not read the article.
 It would be fanstastic if we all as designers had the knowledge to
just just straight on a mac and design an effective, creative and
innovative magazine (or any design) straight away.

Unfortunately, design is always evolving and you should always

take into consideration the way that you design should be
constantly evolving too!

The only way we can do this is by researching, and then using

our findings from research and analysis to inform our initial
ideas.

When we talk about initial ideas, especially within the area of

editorial design, we generally use sketches of layouts to help
convey our ideas quickly and effectively. These do not have to
be a realist style painting; nor perfect in every way!

Usually a quick, well proportioned sketch is sufficient to help

inform our development in a clear and concise way.

To the right you will be able to see a few examples of what

I mean; both are good examples of quick sketches that can
inform our further development.

Creating Ideas
for Magazine
design
Developing
ideas using
InDesign

1. Open InDesign and go

to File>New or click the
Create New File icon on
the welcome screen. Set
the settings shown here,
all the default settings,
except set it to 4 pages.

2. Let’s set up the master

pages. That way we can add
a header and page numbers
automatically. Double-click
on the A-Master icon on
the top of the Pages pull-
out palette to open up the
master pages. Make sure that
you double click on the first
page to take you back to your
working document!
3. To be able to adjust your margins, column
number and gutter size; you will need to select
layout>margins and columns.

4. Inside this menu

box, you can
change the values
for the margins
on all four sides,
along with defining
the number of
columns you may
want to use, and
finally setting the
measurement of the
gutter between the
columns. We use a
gutter as it allows
there to be enough
space between the
columns of text so
you can read the
text easily. (see
how much easier
that was to do in
InDesign rather
thean Illustrator?
You had to do no
maths at all!)
5. After setting up your column system, you then
might want to put some text into the page to
see how it looks. You will need to click on the
type tool on the left toolbar, then click and drag
to create a text box that you can fill with text.

6. The main difference between

Illustrator and InDesign is when you
come to change the colour of the text
you have put into the layout.
Instead of just clicking a colour swatch,
you will have to highlight the text, then
in the swatches menu click on the little
‘T’.
This means that you will be changing
the colour of just the text rather
than the container itself - a common
mistake to make but better if you can
get the hang of it now!
7. Placing a picture into your layout
couldn’t be easier! All you need to do
is at the top menu bar go; File > Place.
Your image comes into the document
attached as a little preview connected to
the cursor. You can then click and drag
to place the image in the right place,
and at a size which fits your design. If
you click once it places your picture where
you clicked and will be the full size of the
image

8. To resize your image, you can use the

9. When filling your text into
free transform by just press ‘E’ on your
your text box, you may
keyboard to get the bounding box to
find that the text over
appear for resizing like in Illustrator.
runs the box - this isn’t a
problem as InDesign will
draw your attention to the
overspill by putting a little
red box on the bottom of
the text box. To continue
the text into another text
box, you click on the black
arrow of the left tool bar,
then click the little red
box. What you will see
is that the text will link
to the cursor again - just
like the image did! Click
and drag to create a new
text box with the overspill
text in the right empty
column.
10. You can experiment further using different
shapes and text to help improve the creativity
of your design and make certain elements such
as the header and subheader stand out from
the reast of your text. Remember to reflect on
keeping your designs within the columns that
you have created, and always reflect on where
there is any overspill of design outside that
document area, as when exported this will not be
printed.

11. To export the document to print, you must go

File > Export > PDF - this is due to the printers
not having the right drivers to print directly from
InDesign. You will have to poen the PDF up in
Preview to print the document off.

Experiment
further with
different
ideas!
Examples
of creative
editorial design

There are plenty of good

examples of editorial design
that you can find on the
internet these days - there
are many examples of
well designed and creative
editorials on issuu.com.

Look at them and try to

decode the way that their
grid system and layout has
been put together.
Editorial
Design
Support Material