Layout Techniques. 1. Rhythm. There are several different ways to achieve rhythm in a layout.

Transcription

1 Layout Techniques There are 5 layout techniques in graphic design that we are going to look at. Layout techniques are concepts that are incorporated into graphic design to increase the effectiveness of the design. 1. Rhythm Rhythm is the direction in which the eye reads the layout. The eye usually starts at the optical center of the page. The optical center is the center of the image or word at or near the center of the page. The eyes tend to move clockwise from the optical center. There are several different ways to achieve rhythm in a layout. a) One technique to create rhythm in a layout is to use pointing devices. A pointing device is an image that directs the eye where to look. Can you identify the pointing device?

2 b) Element positioning is a design technique where the eye is influenced to move by the placing of boxes, borders, or other objects. Here is an example of element positioning. c) Numbering items in a graphic design layout explicitly tells the eyes where to focus and when. An example of this numbering is found in this graphic design.

3 d) The Z pattern creates rhythm on a page by making the zig-zag pattern of the letter Z something very easy for the eye to follow. Mark the Z pattern in the following example. Cradle of Collective Bargaining e) Eyes will tend to follow the direction in which eyes in the picture or design are looking. This is a creative way of adding rhythm to a design. The following Digital Collection example contains eyes that guide the eyes of those viewing it. Canadian Public Parks Movement: The Hamilton Experience These methods for creating rhythm in a graphic design layout can be used powerfully to enhance the quality of the design.

4 2. Emphasis Most design layouts contain some amount of text. This text can be emphasized by using capital letters, bold font, underlined text, large size, and by leaving plenty of "white space" around the words. "White space" refers to space in a layout that contains no designs, images, or text. Write a five-sentence paragraph on the importance of oxygen. In each sentence emphasis one or more words using one of the five methods for giving emphasis. After you are finished writing the paragraph, pass the paper to a colleague and ask her or him which words stand out the most. Remember these techniques used to create emphasis and use them. 3. Balance There are two different types of balance that we are going to look into: a) Symmetrical layout. This type of balance is the traditional one and comes across as very formal. Here is a good example of symmetrical layout from one of the Digital Collections. In a symmetrical layout, the text and graphics are arranged so that one side balances out the other and top balances out the bottom.

5 The Prime Minister's Project is part of a National Digitization Network, which is working on making information on all of Canada's Prime Ministers available to schools across the country via the Internet. Le projet des premiers ministres fait partie du réseau national de numérisation qui travaille à rendre l'information sur tous les premiers ministres du Canada disponible via Internet à toutes les écoles canadiennes. Canada's Prime Ministers b) Asymmetrical layouts come across as less traditional and more informal than the symmetrical layout. In an asymmetrical layout, the text and images are not necessarily balanced to the eye from side to side and from top to bottom. In this Digital Collection example, we have an asymmetrical layout.

6 4. Readability Readability is how easy it is for the reader to read through the text in a layout without being bored or fatigued. If the layout has high readability, then the material in it is easy to read and even motivates the reader to read. a) Text justification affects the readability of a layout. Text can be justified in a variety of forms. i) Centered text has each phrase in the middle of the page. This makes it difficult for the eye to find the beginning of each line. ii) Left Justified text has each line starting the same distance from the left margin of the page. This is the most common form of setting up text.

7 ii) Left Justified text is not uncommon and it occurs when all the lines on a page begin at the same distance from the left margin and all lines end at the same distance from the right margin. This justification can be very pleasing to the eye. The only problem is that many hyphens are made at the end of the lines when words need to be broken up. This can be distracting. Full justification is rarely used in Web publishing and is simulated here using "preformatted" text and a nonproportional font. ii) Justified text is not uncommon and it occurs when all the lines on a page begin at the same distance from the left margin and all lines end at the same distance from the right margin. This justification can be very pleasing to the eye. The only problem is that many hyphens are made at the end of the lines when words need to be broken up. This can be distracting. Full justification is rarely used in Web publishing and is simulated here using "preformatted" text and a non-proportional font.

8 iv) Right justified text has each line ending the same distance from the right margin. This style is good for variety, but can lead to many distracting hyphens along the right side of the page. b) Choice of font is another factor that affects readability. i) Choose a font that suits what the design is about. For example, if the design is advertising the latest computer hardware, which of the following fonts would be best suited? ii) Be sure that the font is legible. iii) Kerning is the space between the letters in a word. If the kerning is too l a r g e or too small, the readability comes into jeopardy. 5. Presentation The final layout technique relates to how the items on a page are arranged. Each method of presentation gives a different effect to the design. a) Adding tilt to a page can add a great amount of punch. In this Digital Collection example we find an example of tilt layout.

9 b) Vertical layouts can make the page look narrow and slim. This SchoolNet Collection example makes good use of vertical layout.

10 c) Borders add to the clarity and focus of a layout design. The Collège Joliette Digital Collection title page contains borders. d) Frames add focus to layouts. Collège Joliette: 150 ans d'éducation e) Mondrian layout happens when the page is divided using rectangles of different sizes.

11 f) Knockout causes the item in the layout to stand out greatly. Attestation Papers: Canadian Expeditionary Force Make a design layout for each of the following items. For each layout, incorporate at least five concepts from each of the five different layout techniques (Rhythm, Emphasis, Balance, Readability, Presentation). 1. A summer camp 2. A Chocolate bar Take 25 minutes to complete this task. When you are finished, divide into groups of four and exchange papers. Try to identify the concepts used in the layouts passed out to you. Write the concepts that you identified on the back of the sheet and pass it back to the creator.