Skip to main content
Wikispaces Classroom is now free, social, and easier than ever.
Try it today.
Elements of Visual Design
Pages and Files
Composition and Layout
Emphasis or Focal Point
Format & Orientation
Composition and Layout
Composition and Layout
by Kevin Pointer
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.
(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
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:
– The placement of elements on the page such that text and graphic elements are evenly distributed. There are three basic ways to achieve balance:
Balance is achieved by making all elements visually equal on all sides.
Balance is achieved by creating an odd number of elements or where the elements are off-center.
Balance is achieved by making the elements radiate from a central point.
– 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
composition and layout concepts.
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
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.
– 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.
– Use of the same colors, styles, shapes, or other elements and principles throughout a document.
– Differences between items on the page.
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:
Freeman, Michael. "Contrast." The Photographer's Eye: Composition and Design for Better Digital Photos. New York: Focal, 2007. 34-37. Print.
– The use of empty space to give a layout breathing room.
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
help on how to format text
Turn off "Getting Started"