As you read, notice the uses of the elements and principles of design. See how direction depends on them and helps to support other principles.

What is direction?

Direction is realized in the movement of the eye through a design. It helps you as a designer to draw attention to the key points of the layout. Direction gives peace to the design because as a viewer, you know exactly where to go next in the information and you are not left feeling overwhelmed.

Direction is used to…

• Create focus
• Emphasize important areas
• Organize information

Creating Direction

Direction is wholly dependent on the elements of design and other principles of design, especially contrast and emphasis (we haven’t talked about this one yet). Remember that westerners tend to read left to right and top to bottom, so this will greatly influence where they feel the most comfortable starting (upper left) and ending up (lower right) in the design.

Bright colors like red and orange will attract the viewer’s eye immediately, where darker colors recede into the background.

Line is probably the easiest way to guide the audience through a design. Arrows are commonly used to point to important information or to the next area. Be careful, though, because using line conspicuously like this can be unsophisticated and maybe even condescending.

Objects with the largest scale tend to draw the most attention.

Circular shapes are a great way to draw attention to the focal point (think of a spotlight!).

Obviously space filled with information will be more noticed than empty space, but that doesn’t mean the empty space is unimportant. It can be essential to provide rest for the eye, to separate content and also to emphasize the areas that do contain content.

Human eyes are drawn to complexity, so be aware of how you use texture to enhance the direction of your designs.

Contrast in value will create direction because the eye will be drawn to and follow the areas that are in highest opposition to their surroundings.

Examples of Direction

To Be Free like the Wind

It’s quite easy to see and follow the direction in this illustration. Although we have a very obvious form of direction—the woman is almost pointing to the Chinese characters (please forgive me if they’re actually Japanese…) with her fingers, looking at them and directly pointing to them with her sword—it is not as condescending as arrows might be. Her curved shape also serves to create border or a loop for the viewer’s eyes to go back into the piece.

The important lesson to learn from Carol’s illustration is to arrange your elements in such a way that they keep pointing back into the piece to keep the viewer’s eyes on the focal point. For more on this, visit another article I wrote on direction for Snap2Objects, How to Improve Direction in Your Designs.

Fully Loaded Tea Packaging

The type of tea (Strawberry) is the first place I looked when I saw this awesome packaging from Sub Plot. I noticed it first because of its high contrast with the background in both color and value. Next my eye went to the tea company name (Fully Loaded) because of its heavy weight, and also its contrast with the white square.

The three prominent white spaces create a nice direction for the overall piece, going from the tea type to company name to illustration in the lower right corner. The illustration, because of its own triangle shape serves to push you back into the layout. You notice the other details, too, like the little story and the specifics of the contents (white box), but those are clearly secondary to what the designers wanted you to see first.

Edit Studios Website

If you’re having trouble determining the direction of a piece, it can help to shrink it down so the main elements stand out better. In Edit Studio’s site, immediately your eyes are drawn to the rotating images in the upper right corner. Because they are rotating, they hold your attention for a while. Be careful with animation, though, because the human eye is always drawn to movement, and this can detract from the purpose of your design.

Contrast in size and value are the primary means of direction for this site. We move from the largest, lightest space on the page, to the next largest and lightest, the studio name. From there, we track down to the mission statement and then to “What internet services do we provide?”

The way they use the strong tag in the copy is interesting; instead of bolding the word, it highlights it white (more contrast in value). At first, I thought these were links and I was a little frustrated that I couldn’t click. It’s different, which seems to be what every designer strives for, but it also can make the user feel stupid! That’s bad usability! This website is only a single page, so the only links are for email and external links to XHTML and CSS validators, and these are indeed are formatted the same way as the strong tag.

Kellogg’s Frosted Mini Wheats

The first place the viewer looks is probably the area of lightest value, which here is the conversation bubble. Then, the eye follows where the mini wheat is looking into the spoon. The line of the spoon also points us to the mini wheat’s reflection. From there, the eye tracks down to the cereal box and over to the tagline.

Other things that contribute to the direction are the visual weight are the objects being placed in the space of the bottom half of the composition. The heavier weight of the more saturated colors also draw the eye down into the information at the bottom.

How you can improve your sense of direction

Close your eyes and try to get rid of the image of the composition in your mind. Then open them and observe your initial responses. What do you look at first? Is that what you intended to be the first thing noticed? What do you notice next? Be aware of how you track through the design. It would also be helpful to ask other people (especially non-designers) how they see the layout and what they notice first, second and so forth.

Once you determine the direction of your piece, adjust anything necessary by using the elements and principles of design we’ve discussed.

If you need to review, we’ve been through the design principles of balance, contrast, direction, economy, emphasis, proportion, rhythm and how to apply them in your designs.