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:

I'll try not to overstate this, but next to visual hierachy, unity is probably the most important principle you can strive to achieve in your compositions...or websites, layouts, books, films, videos, dances, songs, sculptures, or anything other visual medium you are working in. 

In the visual arts, unity can be achieved through proximity, repetition and pattern, continuation, similarity, and/or rhythm of elements in a composition. In the image above, there is no unified color. Rather, all of the forms have unified shape and scale. This, compounded with their pyramidal arrangement, forces our brains to believe they all belong to the same overall construct. They don't really, but our brains have evolved and have also been trained from birth to see overall constructs and patterns. This doesn't just happen with shapes and colors: it happens with dreams, with stories, with sequences of images, with sounds, with words... it happens everywhere, all the time. 

Harmony

Harmony is very closely related to unity and is, in a way, a kind of unity. Harmony is like a state of being, achieved when the elements of a composition are unifed with one another in some way, but these elements also complement each other's unique attributes.

You can see harmony in the above image. There is certainly overall unity as the groups of multicolored hexagons all form a larger "supergroup," forming an overall pyramidal shape. But each group of 3 identically shaped and sized hexagons also fit together with radial symmetry, and therefore acheive a kind of harmony. Without this harmony between each group, the overall gestalt or unity would falter.

That's not to say that disharmony is a bad thing, or that it should be avoided. Just know that it can create a sense of disunity. Below are two quick examples of harmony and disharmony:

Repetition to create Harmony

There are many ways to achieve or break harmony, as the above examples make clear. Harmony is achieved between the square and the circle, for example, through careful superimposition of each shape.  However, another way to achieve harmony is through repetition. In the examples below, simply by repeating certain colors and shapes, and arranging purposefully, otherwise unrelated colors and shapes become related in a unified whole:

Variety is, in many ways, the opposite of unity. In some ways, variety is totally necessary in order to recognize distinct shapes and type (which also happen to be shapes). But it's more than that: variety breaks up a composition, relieving some of the monotony caused by extreme unity.  

Unity and Variety to Achieve Content Flow

Extreme unity, as seen in the image below, actually inhibits eye movement through a composition. Breaking this unity with a little variety, demonstrating in the steps below, will help create better content flow and increase visual interest.

Variety in Type

Variety is an important concept found in type design as well. Within a typeface, a good variety of thick and thin, round and flat, or dark and light can give a single line of type a beautiful and pleasing rythym.

Remove the contrast between elements and you remove much of the variety, leaving only the varied letterforms – which areobviously necessary for legibility and readability:  

Lastly, variety between typefaces in a single composition can also be a good thing...or it can be a complete disaster. A pairing of two typefaces can be quite complementary, and thus create a harmony between them:

But mix three or more typefaces and you've strayed way to far into variety territory and have thus broken unity:

I’m sure you all know William Shakespeare’s Sonnet 18, right? Anyone? Anyone?

It's ok if the nondescript title throws you: the sonnet begins, “Shall I compare thee to a summer’s day?”

Yeah, you know it. This sonnet is one of Shakespeare’s most famous and, like all of his sonnets, it follows a prescribed structure, described below:   

“[there are] fourteen lines in a Shakespearean sonnet. The first twelve lines are divided into three quatrains with four lines each. In the three quatrains the poet establishes a theme or problem and then resolves it in the final two lines, called the couplet. The rhyme scheme of the quatrains is abab cdcd efef. The couplet has the rhyme scheme gg¹.” 

What’s that now? This description of a sonnet is written in plain English (a language that Shakespeare himself helped to crystalize into what we speak and read today). However, for some reason, I still don’t exactly understand what the above paragraph is saying upon the first read, and only slightly more on second read. This is where some kind of visual aid would really come in handy, eg:

The Shakespearean Sonnet Structure

In the simple table to the left – titled with a large header to describe what data lay below – line numbers are laid out in each row, along with the rhyme scheme of that line, and finally, a third layer (the quatrain) is achieved with color. Though I'm not a big fan of tables, I can at least say that the structure it provides, and  the hierarchy the color helps to instill, definitely makes the sonnet structure more clear that the above, textual description. 

Similarly, if we were to take Shakespeare’s Sonnet 18, remove all formatting, and put everything into one continuous line – title, subtitle, author, author’s dates, and then the poem itself, we’d have this somewhat incomprehensible paragraph:

By separating the elements of title, author, and body, we have achieved at least a bit of logical order. As far hierarchy is concerned, given the context clues, we may be able to guess that each element is the title, author, and poem body respectively. But why leave our audience guessing when we have basic typographical tools at our disposal to convey that meaning? The text above is set in Adobe Caslon Pro, that corporation's homage to the original, eponymous typeface designed by William Caslon in 1734. Like the original, Adobe’s version has a few different weights and obliques (i.e. italics), collectively called faces. With contrasting faces, we can stay within the same typefaces and further increase the visual contrast of each of the three elements:

Better, but still not quite enough contrast. "Shall I compare..." could just be a part of the previous paragraph. By increasing the contrast with more dramatic scale, and just a bit of color, we can enforce a really strong hierarchy (see below). Notice also that I reintroduced Shakespeare’s original line structure, which clarifies a sense of rhythm (e.g. iambic pentameter and rhyme scheme):

With even basic typesetting and layout choices available to us in any word processing program, we can go from the formless:

To the hierarchically structured:

Other wAys to Achieve Hierarchy

You can think of hierarchy as a kind of grandmother principle achieved thru the careful use of all the other principles. That said, it's actually very simply defined: visual hierarchy is the arrangement, contrast, and overall presentation of elements in a composition such that the relative visual importance of each element is clearly conveyed to the viewer.

In the example below, the poster on the left is broken down on the right to demonstrate where my eye moves as I'm reading through. The thick blue line is the first read-through, whereas the thinner light blue line is the secondary read through. Notice how my eye goes from the top to bottom, but I start from the largest object with the darkest values to the smallest objects with the lightest values. In this case, proximity, position on the page, scale, value, and alignment are all being used to force a visual hierarchy.

Applications of Visual Hierarchy

In traditional prose text, laid out in, say, a book, visual hierarchy isn't necessarily needed as the reader generally is culturally aware of where to begin, e.g. the first letter of the first word of the first line on the page, and which direction to read in. In the West, we generally read from left to right, top to bottom. No further content flow is needed:

But what if the audience reads only Hebrew, Arabic, Japanese, or – geez, I don't know – Ancient Egyptian hieroglyphs? These languages are all read in directions unfamiliar to those of us in the West. Therefore visual hierarchy is still important, even in basic situations. In the example below – which is hardly basic – there is no real hierarchy, no indication of where we should begin reading; of what is most important, of secondary importance, tertiary importance, etc. No offense to the Egyptian priests who kept this knowledge to themselves, but their understanding of typographic hierarchy kinda sucks.

And what if our audience doesn't read at all (think children's media)? In that case, we need to be creative and decisive in how we present and contrast elements. For an excellent example of how challenging and frustrating a lack of visual hierarchy can be, take a look at the below image from the Where’s Waldo series of visual puzzles:

Having some trouble? That’s because of one simple reason: lack of hierarchy. In this case, we know conceptually that the focal point of this composition should be Waldo, a goofy guy with glasses who likes to hide. But visually there is no focal point, there is no predominant color, form, or grouping of objects. And because there are so many figures in this composition, there is little to no content flow, so the eye is already struggling to distinguish different objects. As the eminent designer and statistician Edward Tufte wrote in Visual Explanations (1997), "When everything is emphasized, nothing is emphasized."

You can therefore imagine that an excellent way to achieve hierarchy is to begin with a strong focal point, use a lot of white space to facilitate content flow, and to use contrast well to achieve an order of importance:

The format of a composition refers to its size, shape, and material qualities. E.g. "I want to design a one-sided, 3.5 inch by 2 inch business card, in landscape configuration, on thick cardstock." Or "Get me an 8 by 10 headshot, ASAP!" Or perhaps, "I am painting on an 5 by 7 foot canvas." Regardless, of what the particulars of your format are, they are usually decided upon first and therefore, a discussion of format is really where we want to begin when starting a new composition. Format is really less of a design principle and more of a collection of decisions about how to implement some overarching principles and elements, such as the proportions of one side to the other, the overall scale of the piece, and what will the shape of the whole thing be.

Below are some common film, video, and device formats. This is by no means a definitive list and it is definitely subject to change as more devices advance to the marketplace. 

Symmetry refers to the similarity of elements and their mirroring or repetition around one or more axis. It often is perceived as high-level ordering and, as a result, goes along way towards achieving unity and balance.

Asymmetry is the lack of mirroring of similar around axis points. But it isn't necessarily a bad thing: the imbalance created by an asymmetrical layout can move the reader's eye through the composition.  

In the world of symmetry, there is exact symmetry around a vertical, horizontal, or some other line parallel to the picture plane; there is radial symmetry, where similar objects are rotated about an axis perpendicular to the picture plane (a.k.a. the z axis); and there is approximate symmetry where elements other than shape account for the symmetry (in the example above, the collective weight of the group of shapes approximately equals the weight of the orange hexagon).  

In fact, the whole of the example above exhibits a kind of approximate symmetry. Can you see it?

But balance can also be less explicit, and require a little more work from the ol' visual cortex, such as the example of asymmetrical balance below:

Similar to unity, balance can convey order and unity of forms, but it can also help guide the eye as it flows through the content. Balance creates a feeling of order, whereas imbalance can create a feeling of unease or movement in an otherwise still composition.

The below examples exhibit some kind of balance or imbalance. 

Achieving balance or imbalance

Scale: Perhaps the most obvious way of working with and achieving balance is through the principles of scale and proportion. Due to our real-world experience with such things, forms that are larger in size feel heavier. A large form can thus be balanced with a larger number of smaller forms.

Colors and values: colors carry with them their own weight. Reds and purples may feel heavier than light blue or yellow. Value is also closely related to weight, as black often feels much heavier than, say, white or light grey. One can use colors to achieve balance, but it is often more interesting to create imbalance through contrast color and value weights.

Thickness: similar to scale, lines can be thick, and thus feel heavy. Likewise, other lines can be thinner and feel much lighter. This contrast in line weight is particularly important in the world of typography, where even a single letterform will require within it a balance of thick versus thin lines:

You'll likely find that many typefaces have bottom-heavy letterforms.  

Scale

Scale and proportion are both concerned with ratios between sizes. Scale, however, is a broader concept concerned with the size relationships between two or more unified wholes. On the left side of the example below, scale is demonstrated between two seemingly unrelated forms:

Proportion

Although related to the principle of scale, proportion refers to the size relationships between two or more elements within a unified whole. On the right of the above example, a gradual, repeated, and regular increase in proportion creates movement and rhythm.

Format Scale and Proportion

Just to clarify, the terms scale and proportion apply to an overall composition as well. When we discuss format generally, we can say that something is a landscape (i.e. its top and bottom are larger in proportion to its sides), or a portrait (i.e. left and right sides are larger in proportion to its top and bottom). We can communicate the proportions of the piece and say, for example, that a piece is 16 by 9 – a common proportion in film and television. But this tells us nothing of the size.

If, on the other hand, I say a composition is 16 feet tall and 8 feet wide, I now know the scale (it's big!) and I know the proportions (it's twice as tall as it is wide, and therefore it is has a portrait configuration).     

The world of art and design has a very long and storied relationship with scale and proportion, modernism in particular taking the reins of non-naturalistic scale, and the contrast of scale. But intersting use of these principles can be found throughout the art and design worlds. Below are some images demonstrating the value of scale and/or proportion:

Likewise, without the benefit of proximity, visually distinct elements may not seem visually related:

Lastly, proximity is particularly important when used to achieve order and hierarchy, as the above example (on the right) demonstrates. In this example, the shapes have been grouped, the type has been moved closer to these shapes, and finally the title has been increased in weight and size, and moved above the type. These groupings and placements help enforce the hiearchy that the increased weight of the title creates. If I had left the title where it was in the example on the left, the relationship wouldn't have been so immediatly clear. 

Tell the browser to ignore these .css files and, well...you get just raw information without any alignment or positioning:

1. In Chrome (Mac OS), bring up the developer console by pressing either ctrl-shift-j or go to Menu->View->Developer->Developer Tools. 
2. Within the developer Tools pane that pops up, browse to the Elements tab.
3. This window will show you the source of the HTML document. Look for the <head> tag and click the little triangle next to it to expand its contents.
4. Anywhere you see a  , delete it!
5. Slowly but surely you will begin to see all the meticulous alignment that made the page beautiful and easy to read is now missing.

But look a little closer: the content is still exactly the same. If you scroll down, you can still read it (eventually). Only the formal qualities have deteriorated. It’s not just alignment that have suffered: visual hierarchy in general has greatly suffered and, as a result, reading becomes and awful, mind-numbing experience.

Creating alignment guides and grid lines prior to implementing a design in content creation applications such as PhotoShop and Illustrator set alignment rules in place well ahead of time and help you remain conscious of how elements are aligned with other elements.

In the examples below, I created a basic (and largely arbitrary) grid structure in Adobe Illustrator by enabling rulers (command+R) and then pulling guides out to where I wanted them. Then I added some rectangular place-holders and some text. Finally, I just hid the guides to demonstrate the resulting alignment.

Repeating elements or even certain properties of elements can produce many different effects, but repetition fundementally creates unity in a very direct way. For example, repeating certain hues creates color unity between elements; repeating elements of a typeface design creates textual unity; repeating proportional relationships between forms creates formal unity; etc. In other words, using elements and properties consistently throughout a design is, in and of itself, a form of repetition. The unity one achieves with this kind of consistent repetition creates thematic structures, and these themes can be used to unify multiple compositions.

Speaking of themes, notice what repeats and what varies in the below example:

Repetition and Rhythm

Repetition also provides an excellent way to create rhythm within a single composition. Below is a photograph of Jackson Pollock's 1952 piece Blue poles which, despite its overtly erratic presentation of elements (in this case paint drip lines), has a repetitive structure of thick, near-vertical, blue lines that sits atop its fragile, visual hierarchy. Thick, near-vertical, and blue: these are all design attributes that, when repeated, create rhythm and a recognizable pattern. Take those consistencies away and this piece might just look like an accidental mess. Add them, and this piece suddenly has intention.

Even within a typeface, repetition of certain visual properties like stroke width, serif shape, and character angle, create rhythm and unity within a whole line of type. The examples below illustrate specimens from 6 historic families of type (from the Vox classification). Look how the unique attributes of each typeface – like serifs, x-height, and the stress or angle of the letter – repeat through each character, creating a understandable rhythm for the reader. 

Design Elements need contrast

Visual compositions are, by definition, arrangements of one or more elements or forms. This definition, therefore, presupposes that those elements or objects are somehow distinct from one another: e.g. a series of lines, a combination of text and image, a diagram of the inner ear, or a movie poster with the title of the film and the different characters in that film, etc.

But besides these utilitarian uses of contrast, this principle is also a key way to make a composition more interesting. Below left is the same word processing document shown above that uses only scale and weight to provide contrast. On the right is the same content with a more lively and decisive contrast between various elements:

 

But Not too much contrast...

It's true that contrast is critical, but a designer should try to obtain just the right amount of contrast. In his excellent book Visual Explanations (1997), statistician and data designer Edward Tufte discusses the contrast between design elements as more of a design strategy than a principle – what he refers to as the smallest effective difference – wherein one endeavor to, "make all visual distinctions as subtle as possible, but still clear and effective (73)."

He then presents a simple example – two detailed diagrams of the inner ear:

On the left is the original, with pointers as thick or thicker than the linework of the item being referenced, and uppercase letters at the end of these lines that refer to some lookup table. This requires the viewer to a.)tease out where the pointer lines end and the thing pointed to begins (quite difficult down there in the vestibule and semicircular canals...ouch!), and b.)then leave the illustration for some abstract list of definitions to see what she was just looking at, thereby losing focus. 

On the right is Tufte's improved version: the pointer lines are perhaps half as thick, and labels have helpfully been placed within the illustration itself, obviating the need for a lookup table. These new lines are just pulled back in stroke thickness enough to create a more readable difference between the pointers and the things being pointed to. One other layer is information is added with contrast: by using all UPPERCASE letters for larger ear structures (e.g. EXTERNAL EAR, or MIDDLE EAR, etc.), and lowercase letters for the substructures within the larger structures (eustachian tube, cochlea, etc.). No color, no wild changes in scale, just thinning the strokes and using the contrast within a single typeface. Hence: the "smallest effective difference."

Another example from Visual Explanations:

The left-most two columns is an original analysis of various humanist typefaces. Some are filled in, and some are not – a confusing contrast choice seeing as it is implied that we are to compare all of these letterforms on equal footing. But note too that the grid, drafting lines, and notations are as thick as the letterform lines. Because of the lack of contrast between all these elements, it makes it visually confusing to separate letterform constructions from the artifacts of their construction. 

On the right is Tufte's approach: he thinned down the grid and drafting lines just enough so that they are noticeable, but do not interfere with the letterforms. Note that he also unifies the fills for the A letterforms, so that they all appear to be equal in importance and intent. Lastly, the notations are made uniform and positioned consistently around each specimen.  

The Focal point

Lastly, contrast is how one creates a focal point in a composition, as seen here in this very famous poster by French illustrator (and frequent barfly) Henri de Toulouse-Lautrec. Because of its dark value, large mass and scale, and highly contrasting yellow eyes, the titular 'black cat' is the first thing that grabs our attention.