Design with Power Grids

Design with Power Grids

--------------------------------------------------------------------------------

Design theories are based solely upon opinions. If this were not the case, each publication would look like its counterparts. Imagine a world of look-alike magazines – “yuck” barely describes our disgust. Sadly, computer templates and business card mills are creating a homogeneous environment in the corporate world. We have are own philosophies, but still encourage experimentation. The last thing you want is a layout that look like our work.

Our philosophy is simple: start with the tried and true basics. In publication design, the most basic philosophy involves grids. This chapter discusses how using grids and modular design principles can make designing easier – while still allowing for creativity.

Simple and Friendly
In the past, publications featured dozens of fonts, various styles of art, and mixed column widths. Newspapers and magazines of the late 1960s and early 1970s look like a montage. It’s often hard to distinguish the important from the unimportant articles.

Thankfully, the 1980s introduced a period of organization. Maybe it was the rush to buy daily organizers. Designers realized that content had to be sorted and organized more clearly. The number of fonts was reduced, improving readability. Artwork was standardized in publications, with art guidelines adopted by publications.

Consider the design of today’s reference books, including this one. Chapters are short and divided using short, obvious headings. Locating information is aided further by an overview of the book’s organization, a table of contents, and a lengthy index. Ease of use takes precedence.

Consistency
Simplicity is wonderful, but consistency is just as important. All company documents should have common traits. Develop a consistent design for all documents. Clients should immediately recognize your company’s newsletters, letterhead, et cetera. Once you design a particular type of document, maintain the look.

Professional designers often find it difficult to avoid experimenting with each new document. You might experience the same urge. Fight the desire to continually improve documents. If you do find that a change will improve readability of documents, redesign everything that shares the trait you are changing.

For example, if you decide to change a business card or letterhead design, throw out of the older documents. You should never distribute more than one design. Changing designs leaves an impression of disorganization – far from the ideal image for a business.

Use, Reuse, and Use Again
The easiest way to ensure consistency is to use the same computerized layouts over and over again. Most software allows you to store basic templates to reuse. These templates store information about various layout elements and fonts.

If the software you use does not save templates, store several copies of generic layouts. These layouts should also be backed-up to diskette, tape, or removable cartridge. It is very easy to accidentally change a template in Microsoft Word, for example.

Leading Grids
In order to align elements of a layout, professional designers use leading grids. Leading is the space between lines of text. More accurately, leading is the distance from one text line’s baseline to the next baseline. Leading grids are based upon the leading of the dominant text font on a page.

To create a leading grid, follow these steps:
Set page margins, which are to be ignored,
Select a text font and leading,
“Blue pencil” horizontal rules for every 2 to 5 lines,
Determine the proper column width for the text,
“Blue pencil” vertical rules for each column, leaving one en or em-space between each.
Most page-layout software accommodates grids. Without grids, layouts seem unpolished. Lines of text in one column should line up with the text in neighboring columns. Grids allow you to align text without hassle.

Point to a Start
You cannot begin a leading grid without knowing the point size and leading of the text font. If the leading is 12 points, you have it made – the horizontal gridlines are based upon sixths of an inch. That’s not likely, but worth knowing.

Vertical rules much column widths, so you want to calculate this width based upon the size of an en-space in the text font. Columns should be 30 to 40 en-spaces, or counts, wide. Since an en-space is generally a bit smaller than half of the point size, it’s safe to divide the point size by two, then multiply by 30.

30 × 5 points = 150 points

150 p / 12 (points / pica) = 12.5 picas

Of course, there’s a shortcut used by designers. Multiply the text font size by 1.2 and round to the nearest whole number. The result remains 10 point text uses roughly a 12 pica column.

Blue Pencils and Grids
Programs such as CorelDraw and InDesign allow guidelines to be positioned on screen. These lines appear in blue and do not print. In the “old days” designers drew rules using a blue pencil. The blue did not reproduce – and was hence known as non-repo blue. Some designers call placing guides “ruling with blue pencil” out of habit.

Picas Rule
Before you can place blue rules on a layout, set any visible rulers in the computer software to picas and points. The leading grid is based upon points, so a ruler in inches is useless. When setting the ruler, check to see if an exact number of points can be specified for major marks. Ideally, you want major marks on the rulers to match the leading.

Another important step to take is setting the 0 mark of each ruler to the upper-left corner of the page, within the margins. You do not want 0,0 to be outside of the margins, or you cannot easily set accurate grid rules. Grids must be precise to be effective.

Guidelines
Most modern programs use the same method for placing blue lines. Click on a ruler and drag the dashed line to where you want the blue rule. Remember to place lines only for every 2 to 5 lines of text. Some programs limit the number of guidelines per page.

Place the first vertical guide at the ruler mark indicating the ideal column width. Skip one from en-space to one em-space and create another guide. From this second rule, you have to count the column width for the next rule. Vertical guides, as you can tell, are much more time consuming.

As the vertical rules are difficult to match perfectly to the page width, try another shortcut. Divide the page width, in picas, by the column width. Most software allows that number to be entered into a box – and gridlines are created automatically, with a proper gap between each column.

Using Grids
Once a leading grid is designed, using it is simple. Text near a guideline should be sitting upon the line. Using only multiples of the text size for headlines and other text elements eases the task. Adjust text frames as needed to make this happen.

Sometimes you will have to add a bit of space before or after a paragraph to be true to a grid. These adjustments frequently follow the use of a text element which was not sized a multiple of the text point size.

Other graphical elements use the gridlines as borders. Do not let objects stray from the grid, since all objects affect the text around them. Using grids improves the underlying structure of a design. More importantly, grids facilitate modular layouts.

Modular Layouts
Printed pages always have featured some creativity. Until computers came into the process, however, creativity often required more time than publications had. The problem was worse for most corporations. Companies usually only had typewriters and photocopiers available for in-house documents.

Large publishers and print shops had computerized publishing systems in the mid 1970s, but today’s personal computers far outpace the old monsters.
Until personal computers established themselves in publishing and design in the mid 1980s, most layouts were based upon long strips of text. Older technologies could only produce strips of text, which were then pasted to layout boards. Because of the time involved in the layout process, interesting layouts were seldom created on purpose.

Recall the boring newsletters, memos, and flyers of the past. A secretary would type up various pages of text. Then, she would use scissors and glue to arrange a newsletter. Thankfully, she’s now the boss and understands what a computer and laser printer can do for your company.

Do not worry about creating “assembly line” publications. Modular layouts still allow for creativity. However, people like familiar products. Readers develop habits – a fact you want to use in your favor.

Rectangles
The best layouts package information into definite units. A popular example of packaging is the USA Today newspaper. Articles and design elements are rectangular in shape, which helps each element stand apart. Your designs should utilize this same theory.

Rectangular shapes should include all parts of an article. The headlines, artwork, photos, et cetera should all fit into a rectangle. You should treat rectangles as building blocks. If a more important feature is brought to you, you need to be able to move around others. Any shape, other than a rectangle, makes it difficult to perform last minute revisions.

Using frames in a computer program can guarantee that elements are rectangular. You might have to group several frames for this to work well. For example, you might have to link a frame for headlines to a frame containing body copy. Most layout programs do not allow for multiple column settings within one frame, forcing this two frame approach to modules.

Squares
Most amateur designers think of a square as just a more convenient rectangle. you will quickly find that squares result in boring layouts. Avoid squares whenever possible.

Golden Proportions
The ratio of 3:5 (or 5:3) is special to professional designers. This ratio is known as the Golden Proportion. Supposedly, this ratio dates back to the Roman empire. Photographers and artists have long noted that viewers seem to prefer pictures which are proportioned using this ratio.

Another special ratio is 2:3.5 for smaller shapes. This is the ratio of most business cards. This size, and multiples of it, seem very comfortable and familiar.

When designing a document, use these ratios to check your layout. When you place a photo or a completed module, use a calculator to help judge the element. Measure the sides of the rectangle, then divide the larger side by the smaller. If the result is between 1.50 and 1.75, you have a safe design element. If the result is too close to one, your element is too square. A ratio greater than two indicates that one side is too narrow.

White Space
Readers seldom think about the empty spaces around design elements. However, as an in-house designer, you should give a lot of thought to white space. We can think of no single design tool overlooked as often as empty space.

One reason designers avoid white space is fear. There is a sense that white space makes a publication look only half done. Most people can recall one or two poor layouts where white space looked like someone shot the layout apart. You might want to look at a few popular magazines to study their use of white space.

Solid, interesting designs make good use of white space. White space attracts attention to design elements. This ability to draw attention is why poor use of white space is obvious.

Summary & Tips
Use grids to keep designs consistent,
Rectangles are better than squares, and
Allow for white space in designs.

http://www.tameri.com/dtp/grids.html