USING A GRID SYSTEM for page and screen layout makes it easy to organize and balance all of your elements. Graphics, text, photos, navigation elements, anything that is going to be visible on a printed or web page can be organized using a grid. Grid systems have been in use for a long time and are strictly adhered to in the magazine and newspaper publishing industry, but graphic designers use them for all types of printed and on-screen media. Anyone who creates documents or screen designs should use this handy tool to make a visually pleasing and balanced layout.

A 3 column grid system on 2 pages.

A grid is a series of horizontal and vertical lines that evenly and symmetrically divide a page, whether it is a printed page or a “page” in a website, or an online /computer-based application.

A grid organizes all of the content on a page or screen and makes it easier and much more interesting to read and comprehend.

Grids are used to emphasize the most important parts of your content, organize it into categories, and make it visually interesting and not static.

An unorganized page that does not use a grid

Same page using a grid

Any type of communication that contains several elements such as graphics, photos, and text can benefit from the use of a grid. Use a grid for printed media (flyers, brochures, multi-page documents) and screen designs (websites, training applications).

Using a grid is simple, easy, and can be transferred to many different types software. 

Mouse over the image above to play the animation!

1.Gather all of your different elements and decide which parts are most important.

2.Sketch out a rough drawing of a grid system (view the animation to the right) and experiment with placement of your content

3.Transfer your layout to a software package.

Make a grid for a web page using tables in HTML. Make a grid in Word, PageMaker, InDesign, or CorelDraw using columns and guides.

Grid layouts can easily be adapted to fit any items by "merging" columns, or cells, just as you would in a Word or HTML table. If you decide to move elements around or if your content changes, just rearrange it! The grid system is very flexible.

Once you’ve used one, the next time it will be even easier!

The Grid by Allen Hurlburt, ISBN: 047128923X

Grid Systems in Graphic Design by Josef Muller-Brockmann, ISBN: 3721201450

The Non-Designer's Web Book by Robin Williams (1998), Peachpit Press

The Non-Designer's Design Book by Robin Williams (1994), Peachpit Press

Christine Ramberg - Graphic Designer/Artist/Instructional Designer

EDTEC Home Page