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.

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

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 good visual hierarchy, one simultaneously achieves good content flow, leading the eye from the most important elements to the least.

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, position on the page, size, and value are being used to force a visual hiearchy.

GDPE diagrams hierarchy content flow 20 20

 

In traditional prose text, laid out in, say, a book, visual hierarchy isn't necessarily needed as the eye generally knows where to begin, e.g. the first letter of the first word of the first line on the page. 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, I don't know...Ancient Egyptian hieroglyphs?

Or 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 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 the conceptual focal point of this composition is 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. 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 Stifl, and Constructivist movements could be used in good old, mass-media design. The only problem: symmetry can help considerably with information hierarchy and 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 creates 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

Colors and values: colors carry with them their own weight. Reds and purples feel heavier than light blue or yellow. Value is also closely related to weight, as black feels much heavier than 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 letterforms will require within it a balance of thick versus thin lines:

Different letterforms with different contrasts between strokes.
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 elements that, when repreated, 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. 

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, 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! Contrast between elements makes their distinction clear, and allows the eye and brain to flow between these distinct elements from the mot important to the least important.
Even in the most basic web page or word processing document, without any advanced styling whatsoever, there a basic ways to use size to contrast between things like headers, sub headers and body text:
The first web page ever!
yucky Word...

But besides these utlitarian uses of contrast, this principle is also a key way to make a composition more interesting. Below is the same word processing document that uses only scale and weight to provide contrast, side by side with the same content with 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!

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

Henri de Toulouse-Lautrec, 1893.