Direction: a Basic Element of Design

Direction intentionally guides your viewer's eyes from one element to another

Designers reviewing ideas on desktop computer
Shannon Fagan / Getty Images

Among the elements of good page design—whether for print or web—is the concept of direction, which is closely aligned with movement. Elements in the page design intentionally guide the viewers' eyes from one area of the page to another. The three directions common in designs that are 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 important elements. 

Use of Direction in Design

In web design, direction is most often determined by the images on the page, but you can also impose direction through the placement of type or graphic elements on the page, and with lines— especially when they have arrowheads on them.

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 are facing. If the people in the picture are looking to the right, then you should place the image on the left side of the page. Otherwise, the direction of the eyes in the photo will direct your readers' eyes away from the page. You don't want any people looking off the side of the page.
  • Use your layout to suggest direction. Position dense elements, like photos, in horizontal, vertical or diagonal lines. While less dense elements, like text, surround them.
  • 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 design, the place the eye goes next leads to an important part of the message the page is attempting to deliver. The motion of the first large object on the page to the next important object can be influenced by several things 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 certain 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 specifically to identify where your eye goes first and then where it goes second. Then look for the reason that happened. Once you recognize the design elements that cause your eye to move from one element to the next, you can use those elements in your own design.