Design

Do you sometimes feel you are drowning in a sea of information? You, and most people in our modern society, are being bombarded with information from all sides, and you are probably very selective about what information you choose to pay attention to. Therefore when you attempt to communicate information to others, it is very important to present that information in an attractive and easily-digestible form. Otherwise your document is likely to go unread. Often, you can make your document more digestible by reducing its information content, perhaps by replacing some text with an appropriate graphic. “It is better to have a reader read half of what you wanted to say than none of it.” This can also be achieved by making sure than the essential information will be communicated even if the reader just scans your document rather than reading it in depth.

Here are some guidelines (not rules) to help you develop good designs in all your documents in all subjectsthroughout the rest of your life!!

1. Proportion

The concept of proportion can be applied to the individual elements that make up the page, or to the relative proportions (sizes) of the page elements with respect to one another.

Proportions of a single item

Over a period of several thousand years, many people have come to the conclusion that the most pleasing proportions to the human mind are those of the “golden mean”. The Greeks even calculated these proportions to many significant figure accuracy - the golden mean is equal to 1.61803498... ! How is the golden mean calculated? Divide a line into two segments such that BC/AB = AC/BC

Now divide AC by BC. The result is the “golden mean”. A rectangle with the proportions 1:1.618 is called a “golden rectangle” and it has been used ever since its invention to make objects more attractive, whether the object should be the Parthenon in Greece, a photographic print or some component of a printed page. Here is an example of a “golden rectangle” alongside a square:

Do you agree that the golden rectangle has a more pleasing appearance than the square?

Open the first book that you can lay your hands on. Calculate the ratio of the books width (across two pages) to its height. You will probably find that the ratio is close to the golden mean. This is no coincidence! Do the same for your TV screen! A modern widescreen TV or computer monitor has a ratio of width to height equal to 16:9 which is equal to 1.77:1 which is very close to the proportions of a golden rectangle!

Proportion of relative sizes

It is no surprise that the more important items on the page should be larger then the less important ones. It is important to realize that the “size” of text refers to the size of individual characters rather than the size of the entire text block - a headline will capture your attention even though it covers only a small part of the page.

2. Balance

For many people, the most obvious way of achieving a visual balance on the page is to make the page symmetrical. This ‘formal balance’ unfortunately is rather boring and uncomfortable to look at - your eye is torn between looking at one side or the other. It is usually much better to give your page an ‘informal balance’ i.e. balance without symmetry.

Which of the following two pictures do you prefer?

If you are like most people, you just chose the picture on the right. (If you just chose the left picture, you are clearly a freak!) The right picture has an informal balance because the square divides the page vertically along the golden mean i.e. the ratio of the distance below the square to that above it is equal to 1.618. This is equivalent to saying that the square has been placed 38% of the way down the page. (38% is obtained by dividing AB by AC in the above diagram.) 38% can be approximated as one third, so it is no surprise that photographers use the ‘rule of thirds’ when composing a photograph e.g. if the horizon is included in the picture then they will put it a third down from the top of the image or a third up from the bottom, rather than slicing the picture in half. Note that the informal balance of the golden mean can also be achieved by placing objects 38% (or one third) of the way up from the bottom of the page.

Note also that the golden mean can be applied to the horizontal proportions of the picture as well as the vertical proportions.

3. Contrast

Some publications fail to capture the reader’s eye because nothing stands out. Contrast between the objects on a page breaks monotony, adds emphasis to important items and brings the page to life.

The two main ways to provide contrast are to vary the type that is used for the text or to incorporate graphical objects onto your text.

Vary the type

Often the titles are set in a font like Arial in order to make them stand out against body text set in a font like Times. Larger text is effective for titles, as is color. Styles such as bold, italic and underlined characters can be used to emphasize important points and to add interest to the text.

Incorporate graphical objects

Graphical objects such as diagrams, illustrations, lines, borders and so on provide the reader’s eye with a break from reading the text. Round or irregularly shaped graphics contrast well with blocks of text (usually rectangular). Bold lines (called rules) create strong black/white contrast.

Don’t overuse contrast. Contrasting items SHOUT for your attention - the occasion shout will help keep your attention but nobody wants to be shouted at continually!

4. Rhythm

The “rhythm” of a design is the way the design leads the reader’s eye around the page. A good design will lead the eye through the important material on the page as if there were an invisible road map.

Research has shown that when a reader encounters a new page the eyes gravitate to a point at the intersection of the two golden means in the top left corner. This point is called the ‘visual center’:

Before (hopefully) reading the text in depth, the reader will usually focus first on the visual center of the page and then scan, usually scanning in a ‘Z’ shaped path on a page with little text or in a zigzag path on a page which is mainly text, as shown:

By placing the major items along these scan lines we can ensure that the page can deliver a message even if it is not read in detail.

Five ways to create rhythm

· Contrast

The eye is drawn to elements that contrast with the rest of the page. E.g. a small area of white text against a black background would catch the eye, especially if the black area were surrounded with white space for emphasis. Also, type that is unusually large (e.g. a headline) will attract the eye.

· White space

The eye will not rest on white space and white space can therefore be used to ‘repel’ the eye and guide it towards your message.

· Lines

Your eye tends to follow lines rather than cross them, especially if the lines have arrows on the end.

Make sure that you use this effect to point the reader’s eyes towards an important item and not off the page!

· Apparent motion

Apparent motion is the direction and speed that is implied by a graphic. The mind perceives apparent motion and follows along that path. Use apparent motion to direct the reader’s attention towards important items. Always make sure that apparent motion is directed towards the interior of the page rather than the edge.

5. White Space

White space is wasted space.... NOT!

White Space can be used to provide a tension between black and white which catches the reader’s attention. White space can be used to surround an important element to make it stand out. White space can be used as an object in its own right to achieve balanced proportions (preferably an informal, asymmetric balance). Here are two pages that contain the same information. The left page is symmetrical and dull. The right page uses an area of white space to set up an informal balance, adding life to the page.

6. Unity

Thematic Unity

All of the items on the page must be appropriate to the theme of the document. A picture of a tiger, for example, would not be appropriate in a brochure about pleasure boats.

Tonal Unity

The tone or style of the different items should be appropriate to the theme. For example, it would be inappropriate to use an Old English typeface in an article about futuristic cars, but a hi-tech font would be perfect.

Visual Unity

Make sure that the page includes a dominant item indicating the theme of the page and ensuring that the eye knows where to start its wandering. Do not, for example, include several different images of the same size on the same page without a larger image to serve as the focus of attention.

Typographical Unity

Don’t use more than two or three typefaces (fonts) on the same page. A good policy is to use a ‘sans serif’ typeface such as Arial for headlines and titles and a ‘serif’ typeface such as Times for body text.

Summary

Proportion refers to the shape and relative sizes of items on the page. Rectangular items should have proportions close to that of the golden rectangle (1:1.618) rather than that of a square. Items should be given a size (or a type size, in the case of text) which corresponds to their importance.

Balance refers to the placing of objects on the page. It is better to achieve an informal (asymmetric) balance rather than a formal balance (symmetry). An informal balance can be achieved by placing items or item edges at the golden mean (38%, or roughly a third of the way across the page, either horizontally or vertically or both.

Contrast can be used to add emphasis to the most important items on the page. Contrast can be achieved by varying the text (size, bold, italic etc.) or incorporating graphic objects such as pictures, diagrams or lines. Don’t use too many contrasting elements.

Rhythm is the way a design leads the reader’s eye around the page. The viewer normally scans the page in a “Z” line or a zig zag line starting near the top left (the visual center) and ending at the bottom right (the terminal area). Place important items along these lines to be sure they will be glimpsed during a quick scan of the page, and place a graphic in the terminal area to stop the eye wandering of the page.

Rhythm can be achieved in various ways

- Contrast. Contrasting elements will attract the eye.

- The eye will be repelled by white space.

- The eye will tend to follow lines or arrows rather than cross them.

- If the page includes an image with eyes then the reader’s eye will look in the same direction that the pictured eyes are looking in.

- If a graphic represents a moving object then the eye will look in the direction of that implied motion so never have an object seeming to move towards the edge of the page.

White space can be used to surround an important item to make it stand out. White space can also be used as an object in itself in order to set up a balance on the page.

Unity - Thematic unity: all items must be appropriate to the theme of the document.

- Tonal unity: the tone or style of all elements should be appropriate to the theme

- Visual unity: make sure the page includes a dominant item.

- Typographical unity: use no more than 2 or 3 fonts on a page.

Bibliography:

Designing for Communication, Ted McCain, ISTE Publications