All Rights Reserved
© 2021 UCT
MODULE 5
Layout and composition
Part 1
Table of contents
1. Introduction 3
2. Elements of composition 3
2.1 Gestalt theory 3
2.1.1 Positive and negative shape 4
2.1.2 Proximity 5
2.1.3 Common region 6
2.1.4 Similarity and anomaly 6
2.1.5 Closure 7
2.1.6 Alignment 7
2.1.7 Balance, symmetry, and asymmetry 8
2.2 Visual hierarchy 10
2.2.1 Size 10
2.2.2 Placing 11
2.2.3 Colour 11
2.2.4 Contrast 11
2.2.5 Grouping, proximity, and common region 12
2.2.6 Combining visual clues 12
3. Strategies to improve composition and layout 13
3.1 Work with the grid 13
3.1.1 Margins 14
3.1.2 Alignment, width, and spacing 16
3.2 Symmetry and balance 18
3.3 Create strong negative shapes 19
3.4 Consider groups 20
3.5 Control the visual hierarchy 21
3.6 Popular layout strategies 22
3.6.1 Golden ratio 22
3.6.2 The myth of the golden ratio 23
3.6.3 The rule of thirds 24
4. Conclusion 25
5. Bibliography 26
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 2 of 26
Learning outcomes:
LO1: Discuss “Gestalt” theory and its application to graphic design.
LO2: Identify the various principles of Gestalt theory such as grouping, symmetry, and
figure or ground.
LO3: Show the visual hierarchy in the context of graphic design.
LO4: Apply the Gestalt principles to improve layout and composition.
LO5: Investigate popular strategies for achieving pleasing compositions such as the
“golden ratio” and the “rule of thirds”.
1. Introduction
Design is more than the sum of its parts. A designer can choose the perfect photograph, craft
an eye-catching illustration, use exactly the right font, and write the perfect message, and yet
the design can still fail. On the other hand, a good designer can turn an amateur, awkward
piece into a professional design with a few well-considered tweaks, adjusting the size and
position of the component parts.
2. Elements of composition
The terms “composition”, and “layout” are often used interchangeably, and in fact, their
meaning is closely related. In the context of graphic design, composition is the action of
putting things together, or the artistic arrangement of the parts. The term composition is used
broadly and can refer to painting, photography, drawing, or any kind of visual art.
Layout is the arrangement of the parts of the design. It is a more focused term than
composition. It refers to page layout, which is composed of the arrangement of pictures,
words, and space on the page, usually of a book, magazine, poster, or web page.
The secret to successful composition and layout is the ability to put the parts of a design
together in such a way that each part looks as though it is meant to be exactly where it is.
2.1 Gestalt theory
What are the “parts” of a design? They are the pictures, blocks of text, headings, buttons,
frames, decorations, or any other element the designer has added. Other elements are not so
obvious. These have to do with the way humans look at, and decode images. The theory of
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 3 of 26
how the human mind organises and interprets visual data is called Gestalt theory. Not all
aspects of Gestalt theory are relevant for graphic design, but some are applicable.
According to Gestalt theory, people grasp the totality of the things they look at before
worrying about the details. For example, when looking at a poster, you don’t study each little
bit of it separately. Instead, you take in the entire design all at once. If the movie poster is well
designed, it is instantly clear which part is the movie title, and which are the actor’s names.
Details such as the size of each part, and how words and images are placed in relation to one
another suggest which parts are most important and which can be ignored.
Gestalt theory helps designers to understand how “grasping the totality” works. What
assumptions will the viewer make in that first instant, and how can the designer make sure
that the viewer interprets the design as intended?
2.1.1 Positive and negative shape
One of the most useful Gestalt principles is “figure and ground”, or “positive and negative
shape”. The figure, or the positive shape, is the subject of the image. The ground, or the
negative shape, is the surrounding, or background. In Figure 1, the arrow is the figure and the
blue shape surrounding it is the ground.
Figure 1: Figure or ground.
When looking at an image, most people instantly decide which part is the figure and which
the ground. They will focus on the figure as the meaningful part of the design, while the
ground is just background. For example, it is unlikely that Figure 1 will be seen as a blue square
with an arrow shaped hole. The viewer focuses on the arrow as the most “important” part of
the image, the subject, and relegates the blue shape to the background.
• Shapes that surround, or seem to be behind other shapes, are more likely to be
considered ground. In Figure 2, the image on the left is almost completely surrounded
by blue, and so the blue shape clearly reads as “ground”. In the image on the right, it
is not so easy to see which shape surrounds which. This makes it harder to separate
figure from ground.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 4 of 26
Figure 2: Recognisable images are more easily identified as the figure.
• The more recognisable a shape is, the more likely it is to be considered the figure. In
Figure 2, the left image is easier to recognise as a face. This makes it easy to distinguish
which part is supposed to be figure, and which part is ground.
• In Figure 3 dark shapes surrounded by lighter shapes are more likely to be perceived
as the figure.
Figure 3: Dark and light shapes can create confusing figure or ground relationships.
2.1.2 Proximity
Shapes that are placed close together appear to form groups. Grouping seems to imply that
there is a reason for the groups existence. Viewers often assume grouped shapes share
meaning or function. In Figure 4, the squares are grouped according to proximity.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 5 of 26
Figure 4: Shapes grouped by proximity.
2.1.3 Common region
Proximity is not the only way to create a group. In Figure 5, the shapes are grouped by placing
them in a common region such as surrounding them with another shape. The viewer will
assume that shapes that share a common region are related in meaning or function.
Figure 5: Shapes grouped by common area.
2.1.4 Similarity and anomaly
Shapes that are similar to one another seem to share the same function. A shape that is
different from the rest, appears to have quite a different meaning or function. In Figure 6, the
pink heart shape will have a different meaning to the blue square shapes.
Figure 6: Contrast in shape or colour.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 6 of 26
Elements can share the same shape, or they can share the same size or colour. Size often
trumps the other aspects. In Figure 7, the shapes that are the same size but differ in colour
and shape can still seem to form a group.
Figure 7: Size, shape, and colour can create groups.
2.1.5 Closure
If a shape is incomplete but clearly suggests another shape, the viewer can perceive a shape
that is not actually there. This process of completing the implied shape is called “closure”. The
principle of closure means that a viewer may visually link elements that do not actually touch
or overlap. In Figure 8, the negative space between the three blue shapes suggests a heart.
The heart is recognisable enough that the viewer’s eye closes the gaps and sees the shape.
Figure 8: An implied shape.
2.1.6 Alignment
The human eye tends to notice whether objects are aligned. Even a small discrepancy can be
quite noticeable. In Figure 9, the shapes don’t align, they seem unstable in relation to one
another and are less likely to be grouped. In Figure 10, the shapes align according to their
centres or edges and can therefore be grouped.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 7 of 26
Figure 9: Two shapes that are not quite aligned.
Figure 10: Shapes aligned by their edges or their centres.
2.1.7 Balance, symmetry, and asymmetry
Humans have a strong tendency to notice symmetry and often find it pleasing. In Figure 11
and 12, the designs are symmetrical as if the shapes on each side are exact reflections of one
another. Symmetry can be horizontal, vertical, or both.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 8 of 26
Figure 11: Symmetrical shapes.
Figure 12: A symmetrical page layout.
You can apply the same logic of weight and balance to a composition on a page that you do
to actual objects. A large object on top of a small one makes for an unstable pile. In Figure 13,
the tall stack of small shapes with a large one on top is even more unstable.
Figure 13: Page layout can imply balance and stability.
As illustrated in Figure 13:
• Large shapes, particularly dark ones, seem heavier than small or light-coloured
shapes.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 9 of 26
• Many shapes packed together can "weigh" as much as one large shape.
• Positive space weighs more than negative space.
2.2 Visual hierarchy
A graphic designer is tasked with presenting information in such a way that the viewer can
easily tell which parts are important. This is done by creating a visual hierarchy.
According to the Gestalt theory, people glance at a design, but they do not perceive every
aspect of the design all at once. In Figure 14, the broad areas of shape and tone of the page
are noticed first, followed by the smaller shapes and details.
Figure 14: Scanning a page.
Your eyes move over the design, going first to the part which seems most important. Then
you look at the next most important element, and so on. You use various visual clues to
discover the most important part of a design. Designers can use those visual clues to establish
a clear visual hierarchy and help the viewer to process information. The various visual clues,
size, placing, colour, contrast, grouping, proximity, common region, and combining visual
clues are outlined in the following section.
2.2.1 Size
A viewer’s eye is drawn to larger elements before they move on to the smaller ones. In Figure
15 , they would be drawn to “which” first as it is the largest, followed by “do”, and so on.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 10 of 26
Figure 15: Size suggests importance.
2.2.2 Placing
The higher on the page, the more important the element will seem. Items placed by
themselves may also draw the eye. In Figure 16, the viewer will be drawn to the square at the
top of the page and then the four squares at the bottom of the page.
Figure 16: Shapes higher on the page draw the eye.
2.2.3 Colour
Brightly coloured elements are noticed before duller ones. In Figure 17, the viewer will be
drawn to the darker blue squares first.
Figure 17: Intensity of colour.
2.2.4 Contrast
An element that stands out from the rest because it differs in tonality, shape or colour will
draw the eye. In Figure 18, the flower shape is more eye-catching because it differs from the
squares surrounding it.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 11 of 26
Figure 18: A contrasting shape or colour.
2.2.5 Grouping, proximity, and common region
Elements that are grouped together will seem to have the same level of importance, as
illustrated in Figure 19.
Figure 19: Shapes grouped by proximity and similarity in shape and colour.
2.2.6 Combining visual clues
These various aspects of size, placing, tonality, and so on can be combined to reinforce visual
hierarchy. For example, if a heading is placed at the bottom of the page, it might not be
noticed because a viewer might assign more importance to elements higher on the page. In
Figure 20, by making the heading a lot larger and using a brighter colour, the designer ensures
that its importance is reinforced.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 12 of 26
Figure 20: Size and colour create significance.
3. Strategies to improve composition and layout
Various Gestalt principles can be used to compose attractive and effective page layouts. It is
important to keep in mind that the principles are not rules to be followed rigidly. They are
guidelines to help you consider the various ways in which a design could be improved. Each
design is different and what makes sense in one context, may not work in another.
3.1 Work with the grid
One way of organising a design is to align all elements to an implied grid. That is, the grid itself
is not part of the design as lines on the page, but the fact that the various elements line up
horizontally and vertically gives the design grid-like structure. In Figure 21, it’s illustrated that
a grid can be rigid or flexible. In a rigid grid, all elements are lined up exactly and the rows and
columns are similar in width or height. A more flexible grid allows for variety in width and
height and some elements may be tilted away from the exact vertical or horizontal axis
created by the grid.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 13 of 26
Figure 21: A rigid, and less rigid grid structure.
3.1.1 Margins
The margins are the spaces between the contents of the design and the edge of the page.
Shapes with straight edges that are parallel to the edge of the page create a more noticeable
spacing than irregular shapes. In Figure 22, space between the image and the left edge of the
page is more noticeable than the space between the words “The Title” and the left of the
page. In this case, adjusting the image will make more of an impact on correcting the spacing
than adjusting the title text.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 14 of 26
Figure 22: Margin spacing.
Margins should either be the same width or noticeably different from one another. In Figure
23, the left and right margins are almost the same but not equal, which can look like a mistake.
The same is true for the bottom and left margins.
Figure 23: Unequal margins.
The alignment in Figure 23 can be improved by placing the image in the centre to make the
left and right margins equal or placing it firmly against the side of the page to make them
noticeably different. In Figure 24, and 25 the side and bottom margins have been made equal
as well.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 15 of 26
Figure 24: Two approaches to improving margin spacing.
In Figure 25, the designs looks better as the bottom margin is wider than the top margin.
Figure 25: A larger bottom margin creates a sense of balance.
3.1.2 Alignment, width, and spacing
Be aware of the relationship between all the elements in the design. Make sure that elements
are either aligned, or clearly not aligned, the same width, or visibly different. Slight differences
seem like mistakes. Compare the widths and placing of the images in Figure 26. Which
alignments seem like mistakes? Which seem to be intentional?
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 16 of 26
Figure 26: Different approaches to alignment.
Being aware of the grid and considering margins, spacing, and alignment does not have to
limit your freedom as a designer. Elements can be placed partly off the page or can overlap
one another to create any number of interesting effects. The secret to working well with a
grid design is to consider every aspect of the design, and make sure the placing, size, and
alignment seems intentional.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 17 of 26
Figure 27: Elements do not have to stay within the page.
Note:
The practical Illustrator tips on how to work with the grid, guide, and glignment are
covered in Sections 3.2-3.4 in Part 2 of the notes.
3.2 Symmetry and balance
Ensuring elements are centred brings symmetry to a design. In Figure 28, the symmetrical
design is perfectly balanced, but it can seem a little stiff and uninteresting.
Figure 28: A symmetrical layout.
Asymmetry implies movement and can make a design seem livelier. In Figure 29, the title is
not centred, which creates an interesting effect. The design also seems more solid because
the title text is no longer balancing on top of the smaller author name as in Figure 28..
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 18 of 26
Figure 29: An asymmetrical layout.
3.3 Create strong negative shapes
The negative shapes between the various words and images are just as important to the
design as the positive shapes. The viewer may not notice these shapes as much as they notice
the positive shapes, but it still plays a role in how the design is perceived.
Be aware of how you place each element in a design. In Figure 30, the image and the words
are surrounded by negative shapes. The negative shape seems arbitrary: it has no particular
character, making the layout weak and arbitrary.
Figure 30: Weak negative shapes.
Create well-considered negative shapes. In Figure 31, the elements have been moved and
resized so that the page is clearly divided into different areas. There is the area occupied by
the gun, the area with the title and author name, and the negative shape that separates the
two, resulting in a much stronger composition.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 19 of 26
Figure 31: Strong and well-structured negative shapes.
3.4 Consider groups
According to the Gestalt theory, grouping objects creates the sense that they share a purpose,
or are related in some way. Therefore, grouping objects can lend a sense of structure to an
otherwise vague, and arbitrary design.
The example on the left in Figure 32 has three separate elements: title, author name, and
image.
Grouping the elements by proximity and similarity in size allows or a more coherent design.
Figure 32: Different approaches to grouping.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 20 of 26
3.5 Control the visual hierarchy
If all the elements in a design are similar in size and intensity of colour, the viewer’s eye will
not settle on the most important element first.
Be aware of what elements attract the eye. In Figure 33, all the text is similar in size and colour.
The least important elements (the flowers) attract the eye first, as they are the brightest
colour and clearest shape. The bright yellow of the flowers combined with the busy
background pattern of shells make the text difficult to read, and the photograph seems dull
in comparison.
Figure 33: A design with indistinct visual hierarchy.
In Figure 34, the poster can be improved by making the most important text largest, placing it
against a white background so that it does not have to compete with the background pattern
of shells, and reducing the size, and intensity of the flowers.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 21 of 26
Figure 34: An improved visual hierarchy.
3.6 Popular layout strategies
3.6.1 Golden ratio
The golden ratio – also called the golden mean or the golden section – is a concept often
encountered in mathematics, art, biology, and design. Unfortunately, there are many
misconceptions about this ratio. The golden ratio can be expressed in several different ways.
One method is to draw a rectangle with the width and height calculated in such a way that if
one were to cut a square off the rectangle, the remaining rectangle would have the same
proportions as the original rectangle. In Figure 35 the ratio of length to width of the rectangle
illustrates the golden ratio.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 22 of 26
Figure 35: The golden ratio expressed as a rectangle.
Another method is to use the Fibonacci series, a mathematical series of numbers in which
each number is the sum of the preceding two numbers. The following is an example of a
Fibonacci series:
1, 1, 2, 3, 5, 8, 13, 21
Two is the sum of one plus one, three is the sum of two plus one, five is the sum of three plus
two, and so on. The golden ratio can be expressed as any of these number pairs:
1:2
2:3
5:8
8:13
By using these proportions, you can create many pleasing shapes, including, for example, a
particular kind of spiral illustrated in Figure 36.
Figure 36: The golden ratio expressed as a spiral.
3.6.2 The myth of the golden ratio
The golden ratio appears in many natural forms, such as shells and plants. As a result, a myth
has been created around this ratio according to which there is a special significance and
beauty to its proportion that is universally recognised. Various ancient buildings such as the
Parthenon are supposed to be based on the golden ratio. Artists such as Leonardo da Vinci are
alleged to have used it to specify proportion in their works. People allegedly find this
proportion particularly pleasing and are attracted to buildings or page-layouts that are divided
according to this ratio.
Unfortunately, these myths don’t withstand closer scrutiny. Although it certainly appears in
many natural shapes, so do many other proportions. Shells and plants have shapes
determined by a variety of logarithmic spirals that don’t follow this ratio. The golden ratio was
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 23 of 26
never referred to in any ancient texts. There is no evidence that ancient architects or artists
were aware of it. Its first mention appears in 1835, and there is no evidence that people find
it any more attractive than any other set of proportions.
Nevertheless, it is worth being aware of the golden ratio as many artists, architects and
designers have used this proportion in their work in the last two centuries.
A simple way to incorporate the golden ratio into a design:
• Use a Fibonacci pair to decide on the ratio of width to height of a page, or to divide a
page into sections. For example, a page could have the 5:8 ratio of width to height.
• Use the spiral derived from the golden ratio as the basis of placing elements in a page-
layout.
Explore further:
Read the following article to learn more about the golden ratio and how it can be used in
design.
3.6.3 The rule of thirds
The rule of thirds is most often used in photography as a short-hand for composing
photographs. It can also be used in graphic design as a guide for creating interesting layouts.
According to the rule of thirds, a pleasing composition is achieved when the main elements in
an image are placed on imaginary lines dividing the image into thirds, either horizontally,
vertically, or both.
In Figure 37, the flower has been placed near the centre of the image, which creates an
acceptable but uninteresting composition.
Figure 37: The subject of the image is centred.
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 24 of 26
In Figure 38, the image is recomposed so that the flower is placed on one of the lines dividing
the image into thirds, resulting in a far more pleasing composition:
Figure 38: An improved composition.
The rule of thirds can be used as a guide for placing elements in a layout, or for dividing a
layout into sections, as illustrated in Figure 39.
Figure 39: The rule of thirds applied to a cover design.
4. Conclusion
All the aspects of design work together. It is not possible to fix just one part. Everything must
be considered together. The size of each element in relation to other parts of the design, the
space between the elements, the way in which they align, the colour of each element, all must
be set accordingly by to the conscious choice of the designer.
In this set of notes, you learnt how to use Gestalt theory to analyse how viewers look at a
design, and how to apply principles such as figure or ground and symmetry, which can be used
to enhance and support the various parts of a design. You also discovered how to control the
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 25 of 26
path a viewer’s eye takes over a design and how to ensure they look at certain items first, by
creating a visual hierarchy.
5. Bibliography
Bradley, S. 2010. Gestalt Principles: How Are Your Designs Perceived? [ Blog, 26 January]
Available: [Link]
perception/. [2016, February 26].
Bradley, S. 2010. Gestalt principles: how are your designs perceived? [Blog, 25 January].
Available: [Link]
perception/ [2016, February 26].
Bradley, S. 2011. 3 design layouts: Gutenberg diagram, z-pattern, and f-pattern [Blog, 7
February]. Available: [Link]
[2016, February 26].
Seewald, N. 2015. The myth of the golden ratio. Available:
[Link] [2016, February 26].
Simanek, D.L. 2015. Fibonacci flim-flam. Available:
[Link] [2016, February 26].
Tuck, M. 2010. Gestalt principles applied in design [Blog, n.d.]. Available:
[Link]
[2016, February 26].
© 2021 UCT
All Rights Reserved
Tel: +27 21 447 7565 | Fax: +27 21 447 8344
Website: [Link] | Email: info@[Link]
Page 26 of 26