08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)
Composition and Layout (/Composition+and+Layout)
 Edit  12 (/Composition+and+Layout#discussion)  34 (/page/history/Composition+and+Layout)

… (/page/menu/Composition+and+Layout)

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

https://605.wikispaces.com/Composition+and+Layout 1/10
08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)

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.
https://605.wikispaces.com/Composition+and+Layout 2/10
08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)

Source: http://www.mchscats.org/lforsythe/DP/balance.htm 1

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.

https://605.wikispaces.com/Composition+and+Layout 3/10
08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)

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.

Source: http://www.mchscats.org/lforsythe/DP/balance.htm

– Radial: Balance is achieved by making the elements radiate from a central point.
https://605.wikispaces.com/Composition+and+Layout 4/10
08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)

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.

https://605.wikispaces.com/Composition+and+Layout 5/10
08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)

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.
https://605.wikispaces.com/Composition+and+Layout 6/10
08/03/2018 Elements of Visual Design - Composition and Layout

  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, and what will happen,
here (http://blog.wikispaces.com)

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.

Source: http://www.conceptart.org/forums/showthread.php/56493-Principles-of-

https://605.wikispaces.com/Composition+and+Layout 7/10
08/03/2018 Elements of Visual Design - Composition and Layout

Early Manifestations of Contrast

The use of contrasts

 It's have
time for us been
to say around a
farewell… long time.we've
Regretfully, For example Johannes
made the Itten, as
tough decision to part
closeofWikispaces.
his work at the
FindDessau school
out why, of art,
and what willdesign,
happen,
and architecture in Bauhaus Germany singularly emphasized the concept of contrast in the 1920s. Some representative items on
here (http://blog.wikispaces.com)
Itten’s Contrast List follow:

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

https://605.wikispaces.com/Composition+and+Layout 8/10
08/03/2018 Elements of Visual Design - Composition and Layout

(https://www.wikispaces.com/user/view/mlapugot)
  It's time for us to say farewell… Regretfully, we've made the -tough
Image embeddecision
sourceto link
close Wikispaces. Find out why, and what will happen, 
here (http://blog.wikispaces.com) mlapugot (https://www.wikispaces.com/user/view/mlapugot) Sep 22, 2014

Suggestion to embed the source link for images via the images. This can
be done by clicking on the image and then choosing link from the main
menu and adding the source link. Thank you.

(https://www.wikispaces.com/user/view/kevinpointer) kevinpointer
(https://www.wikispaces.com/
Sep 22, 2014
mlapugut ---- thanks for
your suggestion. I
attempted to embed a link
directly from my graphics
but I could not get it to
work ,,,,, For some reason
I could not find / get the
wiki to give me the ability
to straightforwardly the
present me with a name
for my graphics or
straightforwardly present
me with a box to past my
graphics urls. I'm pretty
sure its my error, I am
hoping the fact that each
url is right underneath
each graphic will do for
now. Kevin

(https://www.wikispaces.com/user/view/kevinpointer) kevinpointer
(https://www.wikispaces.com/
Sep 22, 2014

https://605.wikispaces.com/Composition+and+Layout 9/10
08/03/2018 Elements of Visual Design - Composition and Layout

mlapugot --- Please

forgive my typos above. I
don'tand
  It's time for us to say farewell… Regretfully, we've made the tough decision to close Wikispaces. Find out why, seewhat
a way
willtohappen,
edit
them once they have been
here (http://blog.wikispaces.com)
posted.

(https://www.wikispaces.com/user/view/mlapugot) mlapugot
(https://www.wikispaces.com/use
Sep 24, 2014
No problem, Kevin. That is
how you pronounce my last
name anyway. I was going to
attempt and do it for you
(using any url), but the edit
mode is already locked in.

Help · About · Pricing · Privacy · Terms · Support · Upgrade

Contributions to https://605.wikispaces.com/ are licensed under a Creative Commons Attribution Share-Alike 3.0 License.
Portions not contributed by visitors are Copyright 2018 Tangient LLC
TES: The largest network of teachers in the world

https://605.wikispaces.com/Composition+and+Layout 10/10