5 Basic Principles of
Graphic Design
1. Proximity
• Grouping of elements together
A B
Proximity
• Guides the viewer/reader’s eye to different parts of the message
A B
Proximity
A B
C
2. Alignment
• Aligning elements in a visual and readable arrangement
3. Repetition
Repetition
• Like the use of repetitious hooks in a song, repeating
elements in a graphic design can be visually appealing.
4. Contrast
• Makes a presentation stand out and get
noticed.
Contrast
Contrast
Contrast
Better Contrast, Larger Title b/c mixed case, not all caps.
5. White Space/ Negative Space
• Makes a presentation stand out and get
noticed.
Useful when you want to
make a direct message to
stand out above the
clutter found in many
graphic designs.
White Space/ Negative space
• White space is used to give space around an
object/shape, to keep the object and shape in
the center of attention.
• White space makes it look clean and clear of
clutter. Many believe that white space is a
waste of space, and therefore a waste of
money, as this is space that they believe
should be used for content.
• But we have to educate customers to see the
importance of the white space, and how this
can make a bigger impact on the design.
4 Effective Web Design
Principles
4 Effective Web Design Principles
1.Visual Hierarchy
2.Divine Proportions
3.Rule of Thirds
4.Gestalt Design Laws
#1: Visual Hierarchy
Visual hierarchy is the order in which
the human eye perceives what it
sees.
#1: Visual Hierarchy:
Exercise
Please rank the
circles in the order
of importance:
#1: Visual Hierarchy:
Hierarchy does not
only come from size.
Amazon makes the
‘Add to cart’ call to
action button more
prominent by using
color:
#1: Visual Hierarchy:
#1: Visual Hierarchy:
1.huge piece of meat - make me
want it
2.the headline - say what it is
3.button - get it!
#2: Divine Proportions
1.618 - Golden ratio
- makes all things proportioned to it
aesthetically pleasing.
#2: Divine Proportions
#2: Divine Proportions
#2: Divine Proportions
#3: Rule of Thirds
An image should be imagined as divided into
nine equal parts by two equally-spaced
horizontal lines and two equally-spaced
vertical lines, and that important
compositional elements should be placed
along these lines or their intersections.
The Rule of Thirds
⊡ A simplified version of the golden ratio is the rule of thirds
48
49
#4: Gestalt Design Laws
#4: Gestalt Design Laws
#4: Gestalt Design Laws
• The human eye sees objects in their entirety before
perceiving their individual parts.
• The word Gestalt is German, and literally stands for a
pattern, figure, form or structure that is unified.
#4: Gestalt Design Laws
6 gestalt design laws
1. Law of Proximity
2. Law of Similarity
3. Law of Closure
4. Law of Symmetry
5. Law of Common Fate
6. Law of Continuity
#4: Gestalt Design Laws: 1. Law of Proximity
• People group things together
that are close together in
space.
• The principle of proximity states
that we tend to perceive
elements as a group when they
are close to each other.
Our mind perceives each of the proximate vertical bars to
combine and form a single image of a deer.
#4: Gestalt Design Laws: Law of Proximity
#4: Gestalt Design Laws: Law of Proximity
• The principle of proximity is also
effectively applied in Unilever’s logo.
• Since the small figures are laid out
closely to each other, you can easily
perceive the cluster as a U (in Unilever).
• According to their brand site, their logo
was designed to include “25 icons, each
of which represents something
important to Unilever”.
#4: Gestalt Design Laws: Law of Proximity
• In the poster below, Coke wanted to
convey happiness (one of its core brand
values) by creating the shape of a smile
using bottles.
• The fact that they are placed near each
other in such a deliberate fashion helps
the viewer perceive that smile.
• These groups don’t sit inside boxes or have clearly delineated borders around them. Yet we
perceive them as separate clusters of content. We do so because the elements in each section
sit close to each other.
• If you look a little closer, you’ll notice subgroups in each group. In group 3, each input field and
label are perceived as a separate group. In group 4, each list item is perceived as another. This
is the principle of proximity in action.
#4: Gestalt Design Laws: 2. Law of Similarity
• We perceive elements as belonging to the
same group if they look like each other.
• This similarity can occur in the form of
shape, color, shading or other qualities.
• The principle of similarity can be triggered
using color, size, orientation, texture and
even fonts. When laying out a multi-page
document.
• For example, creating a strong type scheme will
help readers understand which chunks of text are
captions, which are headlines and which are body
copy.
#4: Gestalt Design Laws: Law of Similarity
In the image, our mind perceives the
similarly colored circles not as individual
circles but as combining to form rectangles,
squares and lines separate from those of
another color.
#4: Gestalt Design Laws: 3. Law of Closure
• People seek completeness. With shapes that aren’t closed, when
parts of a whole picture are missing, our perception fills in the
visual gap.
• When seeing a complex arrangement of elements, we tend to look
for a single, recognizable pattern.
#4: Gestalt Design Laws: Law of Closure
White triangle even though the image is
actually comprised of three black Pac-
Man-like shapes. You see a panda even though the
figure is several random shapes.
#4: Gestalt Design Laws: Law of Closure
#4: Gestalt Design Laws: 4. Law of Symmetry
• It is perceptually pleasing to be able to divide
objects into an even number of symmetrical
parts.
• When we look at the image, we tend to
observe three pairs of symmetrical brackets
rather than six individual brackets.
In the image above, you should see three pairs of opening and closing brackets.
• Symmetrical elements are perceived as
part of the same group. Have you ever
looked at figures that look like mirror
reflections of each other? This
relationship helps us perceive these
elements as a single figure.
• In this poster for the Bike Expo in New
York, the design concept aimed for a
unified circle as the main focal point. To
create the circle, the designer portrayed
one half as a bike wheel and one half as
a manhole cover. While different in
texture and color, the fact that they
resembled a symmetrical figure unified
them in the eyes of this poster’s
audience.
#4: Gestalt Design Laws: Law of Symmetry
#4: Gestalt Design Laws: 5. Law of Common Fate
• While common fate was not
originally included in gestalt
theory, it has since been
added. In UX design, its
usefulness can’t be
overlooked.
• This principle states that
people will group together
things that point to or are
moving in the same
direction.
#4: Gestalt Design Laws: 5. Law of Common Fate
• In nature, we see this in things like
flocks of birds or schools of fish.
• They are made up of a bunch of
individual elements, but because
they move seemingly as one, our
brains group them together and
consider them a single stimulus.
In the image, because each of the individual birds are travelling
in unity in the same direction our mind perceives them as
forming part of a single group, carrying away a captured fish.
#4: Gestalt Design Laws: 6. Law of Continuity
• People have a tendency to perceive a line as continuing its established
direction.
• The law of continuity posits that the human eye will follow the
smoothest path when viewing lines, regardless of how the lines were
actually drawn.
We see a line and curve
crossing instead of four
distinct line and curve
segments that meet at a
single point.
Continuation is when you
have movement in the
picture, and you have
elements that draws your
attention from one part to
another.
• Elements are visually associated if they are
aligned with each other. Lines are perceived as
a single figure insofar as they’re continuous.
The smoother their segments are, the more
we see them as a unified shape.
• This Christmas card by Publicis Singapore
portrays how the principle of continuity can
help us create shapes.
• The sharpened pencil’s thin green line helps
guide the eye from the top of the composition
to the bottom, creating a Christmas tree shape
in a very unexpected way.
This illustration consists of
four lines that meet at the
central point, but we prefer
to see two intersecting lines
rather than four lines that
converge
YOUR TURN!: Gestalt Design Principles
Create your OWN animal graphics that
demonstrates the Gestalt principles.
What are the principles you have
applied and how did you apply it.
Due: May 30, 2021 11:59pm submit
your work in PDF format
https://artsydork.com/gestalt-theory-animal-graphics/
You can see closure in the space between the squid and the whale. You can see continuation in
the squid legs. The squid legs are also similar in shape, using the principle of similarity. The
proximity of the black circle allows us to identify them as the squid’s eyes. Finally, the student
used figure and ground by using the squid’s ink to define the outline of the squid’s body.
78
