Direction: Basic Element of Design

Among the elements of good page design, whether for print or web, is the concept of direction, which closely aligns with movement. Elements in the page design intentionally guide the viewers' eyes from one area of the page to another.

Common Directions in Designs

The three directions common in designs used to direct the eye are:

• Horizontal: If you divide the page or screen in half from side to side with a line or other element, the eye moves to each element in the top half of the design before moving to the section under the horizontal line or element that divides the page.
• Vertical: If you have two long, narrow columns of text or two long, narrow photos or graphic elements, you have a design with a vertical direction. The eye flows from the top of one column to its bottom and then moves to the top of the second column.
• Diagonal: If you use diagonals or triangles in your design, the eye is captured, particularly on the web, where you don't see many diagonal direction layouts. 

Every page design has a dominant direction, which is established by the placement of the most critical elements.

Use of Direction in Design

In web design, the images on the page most often determine direction. Still, you can also impose direction through the placement of type or graphic elements on the page and with lines— especially when the lines have arrowheads.

How to Include Direction in Print and Web Designs

Incorporate direction in your web designs in the following ways:

• Look at your images to determine which direction the subjects face. If the people in the picture look to the right, place the image on the left side of the page. Otherwise, the direction of the eyes in the photo direct your readers' eyes away from the page. You don't want people looking off the side of the page.
• Use your layout to suggest a direction. Position dense elements, like photos, in horizontal, vertical, or diagonal lines. While less dense elements, like text, surround those elements.
• Use lines, images, or HR tags, to suggest movement and direction. A horizontal line is quiet and moves the eye smoothly from left to right on the page. A vertical line suggests movement from top to bottom, and a diagonal line strongly indicates movement from one area of the page to another.
• Unbalanced elements also indicate direction and movement.

Layout Characteristics That Influence Direction and Movement

The eye usually goes to the largest element on a page first. It may be a large photo or a large headline. Where it moves next is a function of direction in the design.

In a good, balanced design, the place the eye goes next leads to an important part of the message the page attempts to deliver. Several things influence the motion of the first large object on the page to the next significant item, including:

• Color: A bright color attracts the eye more quickly than a neutral color.
• Graphics: A pointing finger or an arrow causes the eye to look in a particular direction.
• Shapes: A shape that winds through the page (like a spiral or a dotted line moving from one element to the next) carries the eye along its path.

How to Determine Direction

If you aren't sure how to design a page to indicate direction, experiment by looking at web pages and print publications to identify where your eye goes first and then where it goes second. Then, look for the reason that happened.

Once you recognize the symmetrical design elements that cause your eye to move from one element to the next, you can use those elements in your design.