Principles of Design Alignment Essential Question: How does alignment affect layout design? Can you imagine how difficult it would be to find your car in a crowded parking lot if everyone ignored the parking lot stripes and parked in every which direction and angle? Imagine trying to get out of there! Alignment brings order to chaos, in a parking lot and on a piece of paper. How you align type and graphics on a page and in relation to each other can make your layout easier or more difficult to read, foster familiarity, or bring excitement to a stale design. Alignment creates a sharper, more ordered design. Aligning elements allows them to create a visual connection with each other. It tightens the design and eliminates the haphazard, messy effect which comes when items are placed randomly. Aligning elements which are not in close proximity with each other, helps to provide an invisible connection between them. Alignment is one of the most basic and important principles of design. It allows us to create order and organization among elements. Alignment is the placement of text and graphics so they line up on the page. Use alignment to: create order organize page elements group items create visual connections Good alignment is invisible. Most readers won't consciously notice that everything is lined up neatly but they feel it when things are out of alignment. There are several types of alignment: Horizontal alignment left and right margins are exactly or visually equal. Horizontal alignment can be across the page or within columns. It doesn't mean center alignment. A block of flush left/ragged-right text can be aligned horizontally. Even though individual lines of text are not perfectly aligned on each side, careful attention to the amount of rag (white space at the end of the line) can result in a visually balanced amount of margin on each side of the block of text. Vertical alignment top and bottom margins are exactly or visually equal. Vertical alignment can be the full page or within portions of the page. Edge alignment lines up text or objects along their top, bottom, left, or right edges. Center alignment may be done horizontally or vertically, or both. Visual or Optical alignment fixes some of the problems that can occur with other types of alignment due to the varying shapes of letters and graphics. In visual alignment the objects may not be precisely aligned but to the eye they appear to line up. 1
Using Alignment Lack of alignment creates a sloppy, unorganized look. Mixing too many alignments can have a similar effect. However, it's OK to break alignment when it serves a specific purpose, such as to intentionally create tension or draw attention to a specific element on the page. For simple arrangements, items can be aligned using the automatic align options in your software. For more complicated layouts, the use of guidelines and grids aid in the precise placement of elements. Alignment Examples Left Edge Alignment Edge alignment lines up text or objects along their top, bottom, left, or right edges. Left aligned text with ragged right edges is one of the most familiar alignments. The text in this layout example is all left aligned within each column. The headline is aligned with the left edge of the center column of text. The page number in the upper left corner is both aligned left with the text near the bottom and the bottom edge of the rule above the headline, an example of horizontal alignment. 2
Right Edge Alignment Right alignment, another edge alignment method, generally works best for small bits of text, such as posters, some ads, and in this business card layout. Not only are the lines within each of the three blocks of text aligned to the right, all three blocks of text are right aligned to the same invisible line. Center Alignment Center alignment may be horizontally or vertically aligned, or both. Elements may be centered on the page, within the sections of the page, and centered with other elements on the page. In this example, each line of text and the large graphic are centered horizontally on the page. The main block of text and graphic are also centered vertically on the page. Center alignment generally gives a layout a formal appearance and is often seen in traditional invitations and formal stationery. 3
Grid Alignment For simple arrangements, items can be aligned using the automatic align options in your software or a few guidelines. For more complicated layouts, the use of guidelines and grids aid in the precise placement of elements. This layout relies on a grid to guide placement and alignment of the various text and graphical elements. It combines edge alignment with horizontal and vertical alignment as well as an example of breaking alignment for emphasis. The red lines overlaying this layout represent the underlying grid. The equally sized square of color are aligned along their edges. The graphics are centered within each square. Text aligns along grid lines. The yellow lines represent the horizontal and vertical alignment within the layout. The headline draws attention to itself in part because it breaks out of the grid, not aligning to the grid or the other elements on the page. 4
Visual or Optical Alignment Visual or optical alignment fixes some of the problems that can occur with other types of alignment due to the varying shape of letters and graphics. In visual alignment the objects may not be precisely aligned but to the eye they appear lined up. In this business card, the original version has the text technically aligned to the left. However, the slant of the cursive font and the large flourish on the "V" make it appear that the text underneath was not aligned. In the re-do of the design, the non-script text has been visually aligned beneath the point of the cursive "V". Virtual alignment applies as much to graphics as to text. When aligning neat squares, adjustment may not be necessary but with images of irregular shape it often looks better to ignore small parts that stick out. 5
Breaking Alignment It's OK to break alignment when it serves a specific purpose such as to intentionally create tension or draw attention to a specific element on the page. In this first layout everything is perfectly left aligned, including the intended focus point of not guilty. The eye may be drawn to the longer line of text or color could be used to make it stand out. But changing the alignment would also work. Breaking the neat line along the left edge of the page helps to make the not guilty stand out and draws the eye more quickly to that part of the page. Note that the layout only has one element that breaks alignment. It's the contrast between the alignment and the break that makes the layout work, not a total lack of alignment. 6
There is nothing inherently wrong with centered headlines, text, and graphics. They lend a formal tone to a layout. But, there are time when something a bit more informal will be better. Also, large blocks of centered text are usually harder to read. Text alignment in this example is left-aligned, Ragged right, wrapped around the bottom graphic which is aligned more to the right, opposite an added graphic that is aligned to the right to help balance the overall design. 7
Do In your document titled Principles of Design, make a title called Alignment. Answer the following questions. 1. Define alignment. 2. How does alignment affect layout design? 3. List and describe all of the elements of alignment. Be specific in your descriptions. Horizontal alignment Vertical Alignment Edge Alignment Left Edge Alignment Right Edge Alignment Center Alignment Grid Alignment Visual or Optical Alignment Breaking Alignment Team Assignment Find one example of each of the above and tell where you found it; i.e., I found left edge alignment in the National Geographic March 2008 issue page 79. 8