Whereas design elements are the things seen and/or heard in art and design - right there in front of us, their arrangements forming the work of art in question, design principles are much more abstract notions and must be interpreted by the brain through relationships of elements. These principles are all around us, in nature, in space, in time, even in our thoughts, and they have parallels in visual design, music, dance, as well as many other creative fields.

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:

content flow 01 static

...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

content flow 02 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.

content flow 05 final

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)

content flow 04 neg space

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 

content flow 06 final no lines

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:

  content flow 05 final with notes@2x

 
GDPE diagrams unity 07

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:

sweet sweet harmony
poor harmony...
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:

GDPE diagrams unity thru repetition 27

GDPE diagrams variety 12

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.

Extreme unity can feel dead and motionless
This creates a little movement beyond the grid
Some variation in thickness, though still very uniform throughout
More variety creates movement, but the edges feel harsh...
Edges continuity creates overall unity and helps eye movement...
Good combo of unity and variety; focal point creates hierarchy.
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.

 

Garamond has a good contrast between thick and thin strokes
Didone faces like Modern No. 20 has super high contrast

 

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

 

No serifs, no contrast between stroke widths.

 

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:

 

I smell a clothing line!

 

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

 

Nope! Ain't nobody got time for that...

 

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 gg1.” 

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

Line Rhyme Scheme
01 A
02 B
03 A
04 B
05 C
06 D
07 C
08 D
09 E
10 F
11 E
12 F
13 G
14 G

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:

Screen Shot 2021 01 03 at 9.15.05 AM

Let’s at least use a little hierarchy by proximity and positioning to create some structured hierarchy:

Screen Shot 2021 01 03 at 9.15.12 AM

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:

Screen Shot 2021 01 03 at 9.15.18 AM

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):

Screen Shot 2021 01 03 at 9.15.25 AM

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

Screen Shot 2021 01 03 at 10.46.00 AM

To the hierarchically structured:

Screen Shot 2021 01 03 at 10.46.08 AM

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.

By achieving a good visual hierarchy, one simultaneously achieves good content flow, leading the eye from the most important elements to the least. Below are a few elements and principles that can be modulated to achieve a successful visual hierarchy.

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.

GDPE diagrams hierarchy content flow 20 20


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:

spread.jpg

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:

Can you find Waldo?

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:

Leopoldo Metlicovitz, Calza- turificio di Varese poster, 1913.
Leopoldo Metlicovitz, Calza- turificio di Varese poster, 1913.

Hierachy in Layout

Modernists like the Bauhaus or the Constructivists certainly introduced to the design world a whole new way of thinking about visual design, typesetting, and organizing principles. Unfortunately, they didn't get much love outside of the worlds of fine art and avant garde design, and then only for a very limited time. One of the earliest designers to really take many of their principles and make them applicable in a real-world setting was Jan Tschichold (1902–74). 

With his "Elementare Typographie,"  Tschichold described ways in which the asymmetry and uneven spacing so prevalent in the relatively esoteric Bauhaus, De Stijl, and Constructivist movements could be used in good old, mass-media design. The only problem: symmetry is actually a very natural way to create information hierarchy and assist content flow, as the overall gestalt of a piece is easily discernible and balanced. Start unbalancing elements and removing symmetry in a composition, and you start removing its more obvious, ordered structure. 

Realizing that imbalance and asymmetry also create visual interest and interesting content flow, Tschichold accounts for a lack of symmetry with rational use of different type sizes, weights, and proportions; decisive and ordered use of color; respect for alignment grids to associated different elements; and the use of rules, bars, and boxes to enhance structure and balance where it otherwise would be lacking.

Below are a few examples of Tschichold's Elementare Typographie that illustrate how to use asymmetrical principles and typography to achieve hierarchy. You'll notice that many of these conventions are quite obvious and natural to us here in the 21st century. However, back in the 1920s and 30s, Tschichold's neue typographie was nothing short of revolutionary:

 
Below are some common formats in the world of traditional art and design, film and television, and digital media. The General Formats are extremely general, and therefore won't likely change. There will always be compositions that fall into one of the following format categories:

GDPE diagrams formats 29

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. 

GDPE diagrams formats 30

layout sketches 02Symmetry 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.  

GDPE diagrams symmetry 10

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?

Balance is an even distribution of weight, and this applies to objects in the physical realm, such as your body weight, architecture, dancing, yoga; flavors like spicy, salty, sweet, and savory; and of course it applies to the visual design as well, as elements like points, lines, and forms have visual weight that can either be balanced or unbalanced to achieved a particular mood or convey an idea.
Closely related to symmetry, objects can be balanced via symmetrical placement on the page as well as in relation to each other.

GDPE diagrams balance 08

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:

GDPE diagrams balance 09

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.

Balancing objects of different scales: which way do you think the scale is going to tilt? Will it tilt at all?

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.

Balancing heavy and light colors and values

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:

Different letterforms with different contrasts between strokes.

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:

GDPE diagrams proportion 11 11

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:

Proximity refers to the closeness of elements. When a series of elements are positioned sufficiently close together in a composition, our brains deem them to be related as an overall whole - a phenomomen referred to as gestalt. Similar to the way alignment creates relatinships between elements, this forced relationship between them due to proximity creates a kind of unity between the elements, even though they may be different colors, values, weights, shapes, textures, or otherwise unrelated.

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. 

Alignment is a very important principle that is often overlooked, perhaps because alignment of elements to a grid is generally taken care of for us by design and word processing software. Alignment refers to the positioning of elements along unseen or implied lines in a composition – it's something we see explicitly in print layout, but it can also appear in any kind of visual composition.
When elements line up to each other, it forces a relationship and unity between them, helps our eyes flow through this now-related content, and creates order and structure in what would otherwise be an unordered collection of forms. Alignment is critical to content flow and structure, and the principle makes clear that no element should be positioned within a composition arbitrarily. Its placement should be purposeful and in relation to some or all other elements in the composition. Below are examples of strict alignment, and near-complete misalignment:
alignment and misalignment
Here's a trick for a good illustration of how important alignment is for every day day design. With a desktop web browser such as Chrome, navigate to a website that you view nearly every day. Sadly, one of mine is Facebook... but you can also use this site, Schwittek.com. Pretty much any site will do.
waste a lot of time on this site...
The browser (in this case Chrome) thinks that Facebook looks the way it does because the Facebook site includes with it a whole collection of style rules, in this case in the form of .css files. These style rules tell the browser what color things certain elements are, the size and scale of text elements, and which elements go where, in addition to many other things. In short, the .css files organizes and aligns the content so we can digest it easily.

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

yuck...
Try it yourself:
  1. In Chrome (Mac OS), bring up the developer console by pressing either ctrl-shift-j or go to Menu->View->Developer->Developer Tools. Screen Shot 2017 07 03 at 10.38.54 AM
  2. Within the developer Tools pane that pops up, browse to the Elements tab.Screen Shot 2017 07 03 at 10.40.37 AM
  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.Screen Shot 2017 07 03 at 10.24.35 AM
  4. Anywhere you see a Screen Shot 2017 07 03 at 10.20.54 AM , delete it!Screen Shot 2017 07 03 at 10.19.59 AM
  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.

 

GDPE diagrams rhytm and repetition 13 13

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:

Alfons Mucha, Four Seasons, circa 1895
Line quality, the texture of cloth, the formal qualities of the hair, the simulated gold frames around each of the figures, the dimensions of each piece: all these things repeat and provide thematic consistency amongst representations of what we know to be very different things, in this case, the four seasons. 
 
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.

Jackson Pollock, Blue poles, 1952. © Pollock-Krasner Foundation/ARS

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 this presupposition is a dangerous one. Elements actually need to be carefully designed with a solid awareness of principles so that they can be distinguished from one another: not just distinguished as being separate, but distinguished in terms of importance! The contrast between elements makes this distinction clear, and allows the eye and brain to flow between these distinct elements from the most important to the least important.
Even in the most basic web page or word processing document, without any advanced styling whatsoever, there are basic ways to use scale to contrast between things like headers, sub-headers and body text (look over here for a good breakdown of how this helps create hierarchy):
The first web page ever!
yucky Word...

 

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:

 

Screen Shot 2017 06 30 at 1.17.45 PM
vom dot com
Screen Shot 2017 06 30 at 1.41.56 PM
pro.fo.sho!

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:

from "Visual Explanations" by Edward Tufte (1997)

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:

from "Visual Explanations" by Edward Tufte (1997)

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.  

Henri de Toulouse-Lautrec, 1893.