Sunday, May 17, 2015

Grids and Geometry: Fine Art Principles Applied to Graphic Design

We've published posts before in which we extolled the virtues of creating grids for graphic design projects, and it occurred to us that it might be fun to revisit that topic every so often to illustrate (no pun intended, really...) our design process, and the planning/thinking that go into our creations. In today's post, we're going to look at a few of the two-page photo spreads that we created for the last Paradise City USA lookbook as examples of how we use grid and mathematical ratio systems, and why.

As you can see, there are several underlying geometry and grid structures aligning the subjects within the images.

So... why do we use these to lay out our designs instead of just winging it and placing images and type by eye? In two words: balance, and precision.

In the same way that people's eyes are naturally drawn to symmetrical faces (right from infancy at that!), we innately find well-balanced artwork to be aesthetically pleasing. This doesn't mean that a piece has to be perfectly symmetrical, but rather that it should conform to an underlying geometric layout. By using grids, baselines, and regularly spaced divisions, we can create pieces that are appealing to both the eye and the psyche, which is what fine artists have been doing for centuries.

Above: Botticelli's "Birth of Venus". You can see that the piece has been divided into thirds, and that a spot above Venus's head is used as the focal point. From there, lines radiate outward to delineate limb placement, such as aligning the right-hand female figure's nose and shoulder, while her hands and feet are on another line. 

Then there's the flying Zephyr guy and friend on the left. See how the male figure's toe lines up with the angle created by the bottom of the shell? Or how his girlfriend's knee is on the same line as the male's thumb and the right-hand figure's ankle? If we were to add even more geometric lines on here, you'd notice that even the flowers connect on vertices: everything has been placed carefully, with a solid plan, rather than just being slapped on haphazardly.

Above: "Christ Healing the Blind", attributed to El Greco

This may be one of El Greco's variations on the "Christ Healing the Blind" theme, but it's also been attributed to other artists, so we're not entire sure who created it. Whoever painted it, this section of the larger painting also shows how underlying geometry is used to create balance and harmony in a piece. It's divided horizontally into fourths (vertically as well, though we refrained from adding more lines to the image), with an additional smaller section acting as a grounding area. 

Although the Christ figure is front and centre as the main focal character, and there are alignments in the other characters that meet up with the point at the top of his head, the primary geometric forms here seem to be drawn from the upper left and upper right, the latter likely referring to divine nature, the heavens, etc.

You can see how one line flows across the top of Christ's head, along the eye-line of the figure behind him, to the hand of the figure at left. Similarly, another line from the upper left goes across the pale man's hand, through the bicep of the bare-chested one, back across pale guy's hip, and down to the heel of his angled foot. Nothing is placed without thought, plan, or harmony.

It's not just classic art that uses this kind of divisional structure—take a look at this piece by contemporary artist Mark Lang:

...and now check out his sketch of the underlying geometry in the piece:

Can you see the geometry in the painting after looking at its grid structure?

When objects in art pieces, be they paintings or graphics, are planned with careful consideration, they exist harmoniously. Text is balanced by white space, and sits firmly on established baselines. 

Above: An example from the book Geometry of Design: Studies in Proportion and Composition, by Kimberly Elam.

As we've mentioned before, there's a startling amount of freedom in restriction, so to speak: when you have an established grid and mathematical relationship structure to work within, a lot of the guesswork is removed with regard to where colour boundaries should be placed, where to set the type, and where complementary assets can be popped in without causing conflict in the piece.

Here's an album cover that we created for La Famiglia Recordings:

...and here's an animated GIF showing the different geometric layers within it:

In this particular case, we used the same grid and geometry that we've used for other La Famiglia assets to create a sense of continuity. Posters, flyers, and now the album cover as well, have all been created with the same proportions and divisions so they all live in the same world.

Not every design requires diligent planning and a painstaking setup; sometimes, simplicity is key, and just adhering to a rule of thirds, or working within two columns can work wonders. Ultimately, the key is to design conscientiously, with solid intent. This is invaluable when a client asks why X asset can't be bigger, or shunted off to the left or whatnot: it's where it is because that's where it needs to be for everything to flow perfectly.


  1. This comment has been removed by the author.

  2. In the first picture the horizon is tilted, it disturbs me seeming an amateur work, especially with the grids above that increase the regularity of the composition...
    if you believe there are rules then you need to apply them ... :)