Flow in Design - Layout and Artwork that Conveys Motion

01
of 07
What is Visual Flow?

Visual flow carries the viewer's eye through the document in a way that all the important elements receive prominence, and nothing snags the vision or causes the viewer to lose sense of the piece. Using obvious flow elements like arrows or numbers is the most common way Web designers use flow, but there are other types of elements that can be used and mis-used to direct your readers to move along a specific path. The steps in this tutorial will show you examples of good and bad flow and help you learn the vocabulary of visual flow in design.

Visual flow can be achieved in many ways:

  • Arrows
  • Sequential images or text elements
  • Perspective
  • Gradients
  • Size changes
  • Curves
  • Motion in images
  • Faces - especially the eyes

The following images will show you some common mistakes in flow on Web pages and how to correct them.

02
of 07
Western Text Flows from Left to Right

Incorrect Flow
Incorrect Flow. Image courtesy M Kyrnin

If you grew up reading a Western language, you're used to thinking that text should move from left to right. So, as the eye moves across a line of text, it is moving from left to right.

In the above picture, the waterfall is flowing in a right to left direction, and the text is flowing up the waterfall. Since we all know that waterfalls fall down, there is a disconnect in the direction of the flow of water with the flow of the text. The viewer's eye moves in the wrong direction to read the text.

03
of 07
Your Text Should Flow with the Images

Correct Flow
Correct Flow. Image courtesy M Kyrnin

In this case, the image has been reversed so that the text is flowing in the same direction as the water. All elements lead the viewer's eye down with the flow of the water and the flow of text.

04
of 07
Left to Right Equals Fast

Incorrect Flow
Incorrect Flow. Image courtesy M Kyrnin

The horse in this photo is running from right to left, but the text is English and so left to right. The visual impact of the horse racing one direction slows down the pace of the entire document because it is going a different direction than the text.

In Western cultures, because our languages move from left to right, we have come to associate a visual direction of left to right as being forward and fast, while right to left is more backward and slow. When you are creating a layout with a connotation of speed, you should remember this - and keep your images moving in the same direction as the text.

05
of 07
Don't Force the Viewer's Eye to Slow Down

Correct Flow
Correct Flow. Image courtesy M Kyrnin

When the horse and the text are both going the same direction, the implied speed is increased.

06
of 07
Watch the Eyes in Web Photos

Incorrect Flow
Incorrect Flow. Image courtesy J Kyrnin

Many Web sites with photos make this mistake - they put a photo of a person on the page, and the person is looking away from the content. This can even be seen on the About.com Web Design site in the old design.

As you can see, my photo is placed next to some text. But I am looking away from that text, I almost have my back turned to it. If you saw that body language between two people in a group, it would be easy to assume that I don't like the person I'm next to (in this case the block of text).

Many eye tracking studies have shown that people see faces on Web pages. And related studies have shown that when looking at pictures, people will then unconsciously follow the eyes to see what the picture is looking at. If a photo on your site is looking off the edge of the browser, that's where your customers will look, and then hit the back button.

07
of 07
The Eyes in Any Photo Should Face the Content

Correct Flow
Correct Flow. Image courtesy J Kyrnin

In the new design for About.com, the photo is a little better. Now my eyes are looking more forward, and there is a slight hint that I'm looking to my left - where the text is.

An even better photo for that position would be one where my shoulders were also angled towards the text. But this is a much better solution than the first photo. And, for situations where the image will be on the right of content as well as the left, this could be a good compromise.

Remember, too, that while images of people's faces draw the most attention, the same is true of animal photos. For example, in this sample layout, I have my dogs looking left, but the image is flush right. So they are looking off the page. This layout would be improved if I changed the dogs' orientation so that they were looking into the center of the screen.