Eventually you will convert your basic layout ideas into a formalized permanent
structure.
![]()
A grid
(or template) can be as simple or as complex as you wish. The basic skeleton
for print usually consists of a double-page spread, showing bleed and trim
sizes, page margins and text columns, but any amount of additional information
can be included - it is normally defined on a master page so recurring graphic
elements, for example, or hanglines or folios (page numbers) can also be
included.
![]()
The basic skeleton for a web page is more complicated as the possible size
will vary dependent on the viewers monitor size and resolution. However
the same decisions have to be made - column widths, margins etc. For regular
HTML pages frames, tables or layers are used to create placeholders for
text and images. If your are using Flash the design process will more like
print-based DTP but with animation and multi-media elements as well.
![]()
Grid setup
![]()
The setting-up of a screen-based grid will vary according to the software
used. For print-based DTP the master page, appears as a fixed background
to the publication pages. The screen-based grid (rulers and guides) will,
of course, never appear on the typeset page. The text will flow down the
columns and run around inset graphics or pictures; the headings will hang
or sit on the relevant grid line; and boxes can be drawn in position to
provide keylines for pictures. Some Web design software follows the print
paradigm; a template image appears on a layer under the working area so
the web page can be assembled on top of it.
![]()
Using the Grid
![]()
Having designed the grid, you should test it to see that you have included
all the information you will need to create additional spreads or web pages.
It is, however, possible to clutter up the grid with too much information,
making it confusing. A grid with more columns-six, for example-is more flexible
than one with fewer. For printed work a bleed is required. The purpose of
the bleed (which will be trimmed off) is to ensure that pictures that extend
to the edge of the page are not left with a thin strip of white paper if
the page is trimmed a little oversize. The distance between the trim and
the bleed will normally be 3-5mm.
![]()
The Grid and Printing
![]()
The size of the margins is important too, particularly the gutter. A 100-page,
perfect-bound (square-backed) publication will not open out as flatly as
a 16-page, wire-stitched one and so will require a wider gutter margin.
Bleed pictures will also be trimmed at the gutter because the 100 pages
will be cut into a stack of single sheets and glued together at the spine.
It is this glue, which is squeezed a small distance onto each page, that
stops the publication from opening flat. (Normally, this bleed into the
gutter is ignored on the grid, but it needs to be taken into account when
you are scaling up pictures, or they will be 3-5mm undersized.)
![]()
Always remember that the grid is just a tool to help you. Adhering to it
slavishly can result in boring, repetitive layouts; ignoring it, on the
other hand, can produce disjointed, uneven ones.![]()
© 2001-2002 Graham Davis, E-Design
All rights reserved, text, graphics and HTML code are protected by international
copyright law and may not be copied, reprinted or distributed by any means

