MSPTC_Logo_small.jpg


Composition and Layout

by Kevin Pointer



Introduction


If you have experience with composition and layout or related principles and elements then you can more readily appreciate whether a printed or electronic design (e.g. website, magazine, brochure, even business card) is effective or not. Even if you don’t have experience with composition and layout or related principles and elements you might intuitively know whether composition and layout principles are effective within a given design artifact. Have you ever not purchased a product because the packaging design did not look professional? Or vice versa. Maybe you didn’t go on that date because of the way the person dresses, if nothing else, was not appealing. Or vice versa. We probably make decisions about the elements of “composition and layout”, or at least design, consciously or unconsciously on a regular basis.

The following excerpted video, from the excellent online learning environment, Lynda.com offers a good overview in terms of understanding composition and layout as it pertains to graphic design.

Principles of Layout & Comp SS Lynda.com- PNG.png
Source: http://www.lynda.com/Illustrator-tutorials/Exploring-principles-layout-composition/161817/177323-4.html
(A Lynda.com video will be inserted here once / if I can get it under the 50MB file size limit)

Definition of Composition and Layout


So what are we really talking about when we refer to the concept of composition and layout? Robert Lane a graphic designer discusses composition and layout in this way:

Composition is the manner pieces or components are combined and arranged visually to tell a story. Proper composition considers alignment, grouping, placement, space, and visual flow within a layout. This layout can be any medium. Once a proper audience and purpose have been determined then composition, components, and concept can encompass that identified purpose allowing a successful design.

So What? … The Importance of Composition and Layout in Design

As previously alluded to having some knowledge of composition and layout can help you evaluate the plethora of websites, brochures, multi-media presentations, advertisements, and the like that you are bombarded with on almost a daily basis.

Also such design knowledge is mandatory if you ever hope to create or modify your existing designs in effective way. This means in a way that will achieve your intended purpose and reach your intended audience. The following graphic is intended to help illustrate the importance of good design and move us beyond mere definitions lest we compose and layout in a vacuum.
Graphic 2 Help Illustrate Importance of G Layout & Composition-PNG.png
Source: http://www.mchscats.org/lforsythe/DP/balance.htm

Six Key Composition and Layout Principles and Selected Examples


Although there are others, 6 design components of good composition are balance, proximity, alignment, repetition, contrast, and white space. A brief description of these composition and layout principles follow:
  • Balance – The placement of elements on the page such that text and graphic elements are evenly distributed. There are three basic ways to achieve balance:

Symmetrical: Balance is achieved by making all elements visually equal on all sides.


Exs of Symetrical Balance - PNG.png
Source: http://www.mchscats.org/lforsythe/DP/balance.htm

Asymmetrical: Balance is achieved by creating an odd number of elements or where the elements are off-center.

Ex of ASymetrical Balance - PNG.png
Source: http://www.mchscats.org/lforsythe/DP/balance.htm

Radial: Balance is achieved by making the elements radiate from a central point.

Exs of Radiall Balance - PNG.png
Source: http://www.mchscats.org/lforsythe/DP/balance.htm

  • Proximity – Proximity refers to how items are grouped and spaced on a page. When you're talking about proximity, you want to group like items together.

We know from Gestalt theory (a psychological framework which emphasizes the relationship between the parts and the whole of a
composition) that the law of proximity (on the left of the graphic below) is among the design principles that are important to understanding good composition and layout concepts.

Laws - Including Law of Proximity.png
Source: Ronkowitz, Kenneth. “Gestalt - One Set of Principles of Visual Perception” New Jersey
Institute of Technology. 2 September 2014. Lecture Notes.

Proximity and the Rule of Thirds

Speaking of proximity the desktop publishing section of About.com points out that the rule of thirds says that most designs can be made more interesting by visually dividing the page into thirds vertically and/or horizontally and placing our most important elements within those thirds. The rule of thirds can come into play compositionally within various areas of design from scrapbooking to
photography.

In the photo below, for example, the School of Digital Photography website informs us that rule of thirds could be used as a guideline for placing horizons right. The site goes on to tell us that often what determines the placement of horizon is the type of sky you have. If you have a dramatic sky and need to emphasize it, place your horizon lower down in your composition and if what you have is a boring sky and very interesting foreground, then place your horizon higher up in your composition.

Interestingly enough the photo below also is an example of the stark use of contrast, which is yet another compositional technique that is mentioned below.

Rule of Thirds AND Contrast.png

  • Alignment – Alignment refers to lining up the top, bottom, sides, or middle of text or graphic elements on a page. Horizontal alignment includes flush-left (also called left-justified or ragged right),flush-right (also called right-justified or ragged left),centered, and fully justified.

  • Repetition – Use of the same colors, styles, shapes, or other elements and principles throughout a document.

  • Contrast – Differences between items on the page.

Ex of Contrast - PNG.png
Source: http://www.conceptart.org/forums/showthread.php/56493-Principles-of-

Early Manifestations of Contrast

The use of contrasts have been around a long time. For example Johannes Itten, as part of his work at the Dessau school of art, design, and architecture in Bauhaus Germany singularly emphasized the concept of contrast in the 1920s. Some representative items on Itten’s Contrast List follow:

Itten's Contrast Examples.png
Source: Freeman, Michael. "Contrast." The Photographer's Eye: Composition and Design for Better Digital Photos. New York: Focal, 2007. 34-37. Print.

  • White Space – The use of empty space to give a layout breathing room.

Works Cited

http://www.lynda.com/Illustrator-tutorials/Exploring-principles-layout-composition/161817/177323-4.html
http://desktoppub.about.com/od/glossary/g/balance.htm
http://www.mchscats.org/lforsythe/DP/balance.htm
http://desktoppub.about.com/cs/pagelayout/qt/rule_of_thirds.htm
FreMichael. "Contrast." The Photographer's Eye: Composition and Design for Better Digital Photos. New York: Focal, 2007. 34-37. Printeman, Michael. "Contrast." The Photographer's Eye: Composition and Design for Better Digital Photos. New York: Focal, 2007. 34-37. Print
http://www.school-of-digital-photography.com/2013/10/where-to-place-the-horizon-line-when-shooting-landscapes.html
http://www.robertlanedesign.com/graphic-design/graphic-design-definition-composition/
http://desktoppub.about.com/cs/basic/g/principles.htm
http://www.conceptart.org/forums/showthread.php/56493-Principles-of-Design