Content flow is perhaps less a principle and more of a collection of best practices to achieve a good flow of a viewer's eye through the content of a composition or interface.
Strategies for achieving successful content flow
1.)A good balance between Unity and Variety
Unity is good because design elements that are unified by color, form, typography, alignment/position, and proximity help us to see how they all relate as a whole – the so-called gestalt principle.
But…well, unity is also kinda bad. Why? Well look at the example below:
...what, huh? Sorry, I fell asleep. You see, this design is really static and dead because it has near-perfect unity: shape, space, and color are all unified. Frankly, I find this fascist as hell. In the following steps, we're going to pull away from unity by introducing some variety.
2.)A Strong Focal Point
But just by adding a focal point – in this case giving one of the squares a blue hue – we’ve suddenly created some movement. It could be made stronger, but at least it's a start!
3.)Uneven Spacing
Not only that but because we chose an off-centered square to make blue in the above image, we’ve employed one of the most cherished tools in the designer’s toolbox for creating interesting content flow – uneven spacing.
4.)Contrast
By the way, "uneven spacing" is just another way of saying “contrasting space between elements,” which is another way of saying, “a variety of spacing between elements." In the case above, the spaces between the blue square and the four sides of the format (or compositional frame) all contrast with one another. We can use color and scale contrast as well to suggest different areas of meaning. Like typefaces, try to keep your color scheme to one or two colors. In the same way that type has different faces (oblique, regular, condensed, bold, etc), you can use different shades or hues of a single tint to create subtle variations in the color story.
5.)Negative space
We shouldn’t feel the need to crowd the composition either. As we all know, people get nervous when crowded, and have trouble finding a way out. The eye is no different: it won’t be able to read through the composition without space. (see below)
6.)Use of lines
Lines can either be explicit or implied through alignment. I’m not using any actual (explicit) lines in the finished composition below (though you will see lighter-shade lines to draw attention to the grid. The grid lines are said to be implied: not actually there but suggested due to various elements being aligned with each other (see below).
7.)Rhythm
The grid (and therefore the alignment to it) is also unevenly spaced, creating a pleasing rhythm as the eye moves across the page (see below).
8.)Hierarchy
In the completed composition above, we created a top-most shape in a dark shade, hovering over everything below it, with a series of smaller elements close by to suggest a relationship. This effectively creates a kind of document header. Because of the alignment and proximity of certain elements, we have two separate areas of interest underneath – the larger and lighter of the two perhaps taking secondary focus to the header, and the left-hand side coming in third. This creates a kind of hierarchy, which is very important for successful content flow.
Below is a breakdown of where all these elements and principles have come together to go from static to dynamic layout:
