Back to browsing
How do I best align elements on a page?

MINI LESSON: ALIGNMENT

 

Alignment is an extension of proximity. It has to do with placing items so that they line up. Alignment is a concept that produces both grouping and organizes information to create order.

In this lesson you will:

Learn the two basic types of alignment

Explore some of the more subtle alignment techniques.

 

 



The root word for alignment is "line"-- to line up.

 

Graphic art refers to art that is printed.

  


ALIGNMENT
Alignment is one of those obvious design concepts that hardly seem worth making a big deal about. It is something you see and use every day. There are, however, many more opportunities to use this system for organizing materials than are obvious without a thorough understanding of the principles involved.

Items can line up either along their edges or on their centers. Alignment is used extensively to organize all graphic arts. Almost all text uses alignment to organize lines of type. The letters align along their bases and the lines begin (and/or end) along a line. You probably discovered the importance of this in the last project.

Alignment works best with items that have straight edges, especially rectangles. Rectangles are the most economical shapes to trim pictures into so pictures are most often seen in that format. Text is made of letters of varying shapes that form lines and blocks that act as rectangles. Most formats are also rectangles.

There are two major types of alignment: edge and center.

 
 

 

 

 

 

 

 

 

Place your cursor over the illustration to the right to see the alignment lines.

  


EDGE ALIGNMENT

Any object with flat edge(s) can be used for edge alignment. Rectangles are especially well suited for this since they have four flat edges to align. Their right angels also give a sense of order to a composition using them (similarity).

Note in the example below how it is possible to align one or more edges of a rectangle. When more edges are aligned the rectangle seems to be in a stronger gestalt with the surrounding shapes. Also note how the distance between shapes is a factor in how strong the gestalt seems. The repetition of right angles adds a similarity gestalt to the composition, which increases the sense of unity.

 
 

 

 

 

 

Place your cursor over the illustration to the right to see the alignment lines.

  


It is possible to set up other angles of alignment with shapes other than rectangles. The critical factor is that the objects do align along their edge(s) in a way that is clear. Objects that are on opposite sides of a composition may align but it is unlikely that the alignment will be noticed.

 
 

 

 

 

 

Place your cursor over the illustration to the right to see the alignment lines.

 

  


An obvious kind of edge alignment takes place around the outside of a group of shapes when they align to provide a simple overall shape (format) -- especially when that shape is a rectangle.

Can you see where alignments are used in the interior of the example above?

 
 

Centered on a vertical axis
  


CENTER ALIGNMENT
Any shaped items can be organized using center alignment. Simple shapes work best because it is easier to judge their centers so the alignment is easier to notice.

Center alignment will work to some extent on any axis but it works best with a vertical axis (see the example to the left). This is because the vertical axis relates best to our sense of balance and symmetry (see symmetrical balance).


Centered on a horizontal axis

Objects that are not rectangles should be center aligned on a vertical axis or enclosed in a rectangular background and edge aligned. With diagonals you just take your chances.

As you are looking through magazines for materials to use for this project take time to notice that almost every item on every page is organized using either edge or vertical center alignment.

 
 

 

 

 

  


FINE POINTS
There are a number of subtle variations on alignment that can add to the effectiveness of this concept. The outside edges of pictures usually show up well and make for obvious alignments. The edges of information within a picture can also align with other edges in a composition. This technique can add subtle touches to a composition.


Notice how the back of the cat aligns with the top of the buildings.

Place information where you think it will look best then look for ways you can achieve alignments with a minimal amount of moving and/or trimming. You need to look carefully for opportunities to use alignment since they will help create order.

 
  

Gutters are used in graphic images to separate type and pictures from one another. They also provide a repetitious visual element that can create a rhythm in the composition.
  


Centering in a negative space is a kind of alignment. This works best when there is some other alignment to back up the centering. One positive side effect of this technique is that there is a uniform space around the centered item. Narrow strips of background between pictures and text blocks are called gutters. If they are used throughout a composition they look like lines that go around the information in the design and help achieve unity. When a colored background is used the gutters become colored lines.

In the above example the centered items are marked with dashed blue lines. Note the white gutters that run throughout the composition.

 
    


Inserts are words or images that overlap other images. They can partially overlap or be completely inside. They make a compact package of two or more sets of information and can conserve space or hide unwanted areas in an image. An insert will show up best if there is a contrasting border around the inset. Text can be inserted effectively if it has a background that allows all of the information to be seen.

This partial insert has a white border to make the edge of the inserted picture easier to see.

The smaller pictures is completely inserted. There is enough contrast that no border is necessary.

In the examples above there are only subtle alignments for the inserts. In the first example the right side of the background picture aligns with the left edge of the tower in the insert. In the second example the bottom of the boat picture aligns with the line under the clock on Big Ben. See how many other alignments you can find.

 
 

 

  


WISH BOOK
Previously an assignment was given to make a catalog with one or more pages that illustrate what you wish for. This project is no longer required.