Visual Direction in Web Design

Just came across an excellent article that clearly illustrates core design concepts that help inform any website design.

Written by Ahmed Hussam  for Web Design TutsPlus (Apr 13th 2012), the following is an excerpt from Visual Direction in Web Design.


One of the big secrets of design is learning how to guide the visual direction of viewers.  This principle is often overlooked by even the most experienced designers, so today we’re going to take a deeper look at how it works.  Visual direction controls the eye movement of the user, and this is achieved through the combination of careful image selection and well-placed and aligned design elements.

It is greatly established that the default eye movement throughout the page (in an LTR – Left to Right – layout) is from the top left towards the bottom right as the image illustrates:

However by arranging the composition elements in a certain way, a designer can control and force the movement of the viewer’s eyes in and around the layout of the design. For example, the eye will travel along an actual path such as solid or dotted line, or it will move along more subtle paths such as from large elements to little elements, from dark elements to lighter elements, from color to non-color, from unusual shapes to usual shapes, etc. Graduation of size, and repeated shapes and size of related elements subtly leads the eye as well.


1. Controlling Directions with Images


Images can easily control how your clients view your design, below are some explicit examples of directional images that can either be used as part of your design or in the content to guide visitors around the page:


Of course it’s pretty obvious which direction these images are pointing to, however many images may not be as clear, take a look at these other examples:


Next chapters discuss:

2. Leading the Eye, 3. Forms and 4. Design Direction

View these in the rest of the article here.