ELEMENTS AND PRNICIPLES OF DESIGN

FOCAL POINT
Focal points are areas of interest, emphasis, or difference within a composition that capture
and hold the viewer’s attention.
“Focal points are a place for the eye to rest in your visual design.”

Sometimes, focal points can be created by giving

the visual element more relative weight.
Colour contrast is one way to draw attention and
create a focal point. But focal points can also be
created based on relative position, surrounding
context, or supporting visual imagery in your
design.

The alternative to a page that creates singular focal points is a page that divides the user’s
attention; giving equal weight to many different potential actions or visual elements.

Amazon’s landing page features a subtle focal point, but has distributed focus across many
visual elements
FOCAL POINT WITH IMAGERY

Both ‘Evernote’ and ‘Kissmetrics’ have used people gazing in the direction of the primary call
to action to create a visual focal point.

Aside from photography, illustrations and iconography can also be used to develop focal
points. “An asymmetrical composition can create the illusion of motion, and can be used to
successfully draw the attention of the audience to a specific point.”

In this design, the car is pointing towards the focal point, drawing your eye to the text and
call to action.
The direction of the car creates a sense of motion from left to right across the page, drawing
the eye to the call to action (which is further supplemented by a right-pointing arrow and use
of the same colour yellow).
When using illustrations to construct a focal point, pay attention to the direction of the
elements, how they are aligned if using a series, and the balance of elements from left to
right on a page.
FOCAL POINTS WITH NEGATIVE SPACE
Like with colour contrast, sometimes the surrounding visual space is just as important as the
element you want to draw attention to.
Negative space —the visual space that surrounds a subject —is another way to create a focal
point. Adding lots of negative space to a visual design reduces the clutter that distracts the
eye of the audience.
The white space draws all of your attention to
the food and the beauty of the presentation.
The food is the focal point in the middle of
the negative space.
GESTALT PRINCIPLES
Gestalt principles or laws are rules that describe how the human eye perceives visual elements.
These principles aim to show how complex scenes can be reduced to more simple shapes. They
also aim to explain how the eyes perceive the shapes as a single, united form rather than the
separate simpler elements involved.
“Gestalt” refers to “shape” or “form” in German.
THESE PRINICIPLES CAN BE COVERED USING

 Continuity
 Similarity (invariance)
 Proximity (emergence)
 Closure (reification)
 Figure/ground (multi-stability)
 Symmetry and order

Gestalt Principles are in the Mind, Not the Eye

CONTINUITY
A road stretching into the distance. Stairs climbing up a tall hill. A river winding through a city.
Every day we experience similar scenes that lead our eyes through them, without even
realizing it. We tend to follow continuous, uninterrupted movement, following elements that
are aligned in straight lines or curves. We perceive these aligned elements as related
groupings more so than we do elements in lines and curves that are unaligned. This is the
principle of continuation.
The eye is drawn up the street, through the city,
to the horizon.

Continuation dictates how we interpret direction and movement through a composition. Our
mind chooses the path of least resistance, perceiving lines as continuing along their established
direction.
In the examples below, our eye follows the less abrupt path, following the straight line or the
curved path through the compositions on the left, more so than the jarring paths on the
right.

HORIZONTAL CONTINUITY
Rows of shoes are nicely aligned, allowing
our eye to follow an established path from
left to right. Continuation guides our eye
through each row, grouping them together
and communicating to us that they are
related products. Continuation is further
enhanced by all of the shoes pointing in the
same direction, encouraging movement from
left to right.

VERTICAL CONTINUITY
Consistent elements are neatly aligned and
grouped into cards, which guide the eye
down through the listings.
SIMILARITY/ INVARIANCE
The human eye tends to perceive similar elements in a design as a complete picture, shape,
or group, even if those elements are separated. The brain seems to craft a link between
elements of a similar nature. Then, we perceive them in a relationship with each other,
separating them from other elements in a design. Human eyes are good at filling in “gaps” or
connecting “dots”. It happens naturally.
Similarity helps us organize objects by their relatedness to other objects within a group and
can be affected by the attributes of colour, size, shape and orientation.
Similarity is influenced by the shape, size and colour of
the elements. When you mix objects with high degrees
of similarity to each other with a group of dissimilar
objects, the brain then devotes time and energy to
creating a link between them so that it can try to
understand their relationship with each other.

Similarity Of Color Similarity Of Size Similarity Of Similarity Of

Shape Orientation
The two sections shown on Salon’s site below are grouped by their relative sizes. We clearly
perceive two separate groups, with top stories on the left and most read on the right. Even
though both sections provide the same function — displaying articles to read — grouping by
size assigns more salience to the left grouping, which allows Salon to guide attention to their
top stories.

In contrast, the lack of size differences in this example from Amazon doesn’t assign any
particular importance to any one section. Despite this, similarity is still achieved through the
use of repetition of similar size and shape, causing us to perceive rows of items.
PROXIMITY / EMERGENCE
The gestalt principle of proximity says that elements that are closer together are perceived to
be more related than elements that are farther apart. As with similarity, proximity helps us
organize objects by their relatedness to other objects.
Proximity is the strongest principle for indicating relatedness of objects, helping us understand
and organize information faster and more efficiently.
Shapes showing no relation. Shapes showing
Relation.

WHITE SPACE
White space is an invaluable tool for creating proximity. Taking the same group of circles and
adding whitespace helps to perceive things differently. Now, on the left, the proximity of the
shapes causes us to perceive the two groups as columns, each its own group. On the right,
the proximity of the shapes causes us to perceive the two groups as rows, again each its own
group. Use white space in your designs to strengthen groupings as well as to differentiate
them from other elements.

THE POWER OF PROXIMITY

Proximity is strong enough to
overpower other elements of
variation. Notice how proximity
still wins out even when other
attributes, such as colour and
shape, are added. Try as they
might, colour and shape do not
overpower proximity here and
each grouping is still perceived as
a separate element
When we’re organizing information in our designs, we can use proximity to create
relationships between elements to aid in understanding the information presented. For
example, by grouping these images from the Apple Store together in close proximity, we
assign a relationship to the whole group. We perceive them as being related and expect the
content to be similar.

However, when we remove the centre column, we suddenly perceive two separate groups
and have an expectation of different content between them.

COMBINING PROXIMITY AND SIMILARITY

Grouping by proximity can also be
combined with similarity to create
stronger relationships. Seen in this
example from Amazon, grouping by
proximity and similarity in size causes
us to perceive two separate groupings
and assigns more prominence to the
left group.
HIERACHY
Hierarchy is the control of visual information in an arrangement or presentation to imply
importance. Hierarchy influences the order in which the human eye perceives what it sees.
Hierarchy is typically created by contrast between visual elements in a composition. Typically
visual elements with highest contrast are noticed first. Using hierarchy we can control how a
viewer engages with information to ensure that information is navigated and digested in the
way it is intended.
Hierarchy in scale Hierarchy in colour Hierarchy in space Hierarchy in Depth

Hierarchy in Perspective

PROXIMITY AND HIERARCHY

Proximity is excellent for organizing hierarchical elements. In this example from Crate &
Barrel, options are grouped together under common headings, creating relationships, which
makes scanning and finding information much easier.
When the headings are removed and the options are grouped without proximity, we lose the
relationships that were created and it becomes much more difficult to quickly scan and find
the information wanted

CLOSURE / REIFICATION
The principle of closure states that people will fill in blanks to perceive a complete object
whenever an external stimulus partially matches that object
The principle of closure describes our tendency to perceive segmented visual elements as
complete or whole objects, even when we’re missing information. This principle is frequently
associated with logo design, but it can influence other visual-design decisions related
to icons and various page elements.
FIGURE / GROUND / MULTI-STABILITY
We dislike uncertainty, so we look for solid, stable items. Unless an image is ambiguous—like
Rubin’s Vase, below—we see its foreground first. You can apply figure/ground in many ways,
but chiefly to contrast elements: for example, light text (i.e., figure) from a dark background
(i.e., ground). When you use figure/ground well, alongside other considerations such as a
careful application of colour theory, you’ll help guide users in their tasks and lessen their
cognitive load.
Figure–ground organization is a type of perceptual grouping that is a vital necessity for
recognizing objects through vision.
Multi-stability is the tendency of ambiguous perceptual experiences to move unstably back and
forth between alternative interpretations. Some objects can be perceived in more than one
way.
The gestalt principle that applies most to space is that of figure-ground. Everything in a
design of yours will be seen as one or the other, and the relationship between them is
mutually exclusive. Neither can be perceived except in relation to the other, and changing
one is impossible without changing the other as well.
The figure-ground relationship is also complementary. Figure and ground can enhance or
detract from each other, and organizing the two in relation to each other is one of the more
important aspects of design. It sets a context for how your design communicates and how it
will be interpreted.

There are three types of figure-ground relationships:

 Stable
figure and ground are clearly separated. One or the other usually
dominates the composition.

 Reversible
Both figure and ground attract the viewer’s attention equally. This
creates tension, whereby either can overtake the other, leading to a
dynamic design.
 Ambiguous
Elements can appear to be both figure and ground simultaneously.
They form equally interesting shapes, and the viewer is left to find
their own entry point into the composition.
The figure-ground principle helps to explain which element in a design will immediately be
perceived as the figure and which will be perceived as the ground. The “figure” is the element
in is question:
 Area: The mind often perceives the smallest object in the composition as the figure,
and the larger as the ground.
 Convexity: Convex elements are associated with figures more often than concave.
When you look at the image below, your perception of
which is the figure and which is the ground alternates
depending on how your mind perceives it. In one instance,
it appears as if the Black Hand is the figure and the white
is the ground, and in another it appears as if the white
head is the figure and the black is the ground focus, while
the “ground” is the background behind the figure.

SYMMETRY AND ORDER

Symmetry is used a lot in logos in order to create a harmonious and balanced design
Rotational Symmetry
Symmetry does not require that the design elements are perpendicular (at right angles) to
each other. If there is a central point (the center of rotation) about which you can rotate the
design while keeping its symmetry
Translational Symmetry
Translational symmetry occurs whenever we can move (translate) an element in a design
without causing it to lose its symmetric properties.
Reflectional Symmetry
If one half of the image is a mirror image of the other, you’ll be looking at a case of
reflectional symmetry
Glide Reflectional Symmetry
If you’ve ever seen footprints in the sand or snow, you’ve seen glide reflectional symmetry in
action. The idea is simple; you reflect the image but then move the copy so that it is no
longer opposite the original image

BALANCE
Balance is the visual weight of elements in a composition. Balance is used to add stability, add
structure, and create emphasis and to create dynamics. In design, one should attempt to
place visual elements in an aesthetically pleasing arrangement, or particular arrangement to
fulfil a purpose or achieve a particular look and feel.
SYMMETRICAL BALANCE (FORMAL)

Symmetrical balance is mirror image balance. If you drew

a line down the centre of the page, all the visual
elements on one side of the screen are mirrored on the
other side. They don’t have to be identical visual
elements but can be similar in number, colour, shape
and scale. When visual elements are equal in weight,
they are said to be in balance.
Symmetrical balance can be used when one wishes to
achieve a formal design, a sense of structure, a sense of
organisation and stability.
ASYMMETRICAL BALANCE (INFORMAL)

Asymmetrical balance is used to describe a kind of

balance that is not identical on both sides of a central
line i.e. not relying on symmetry, opposite of
symmetrical balance.
Asymmetrical balance occurs when several smaller visual
elements on one side are balanced by a large visual
element on the other side or smaller visual elements are
placed further away from the centre of the screen than
larger visual elements.
Asymmetrical balance can be used when one wishes to
achieve a more casual or less planned look and feel. An
asymmetrical composition can create a sense of tension
as if the page or screen may tip or things might slide off
the side. Asymmetrical balance is more dynamic than
symmetrical balance and normally keeps the audience’s
attention focused on the visual message.
RADIAL BALANCE

The third type of balance is radial balance where all

elements radiate out from a centre point in a circular
fashion. It is very easy to maintain a focal point in radial
balance since all the elements lead your eye towards the
centre.
Depending on the intended purpose or look and feel, a
designer must sense which type of balance to execute. A
designer must sense whether or not a composition is
balanced or not. Success in using good balance can help
achieve a strong visual effect and good quality design.

.
VARIETY [UNITY, HARMONY, AND VARIETY]
HARMONY
Harmony is the principle of art that creates cohesiveness by stressing the similarities of
separate but related parts.
One should note that harmony is not the same as unity. Harmony does, however, enhance
unity in a work of art. Specifically, harmony uses the elements of art (color, line, shape, form,
value, space, texture) as a vehicle to create a sense of togetherness amongst otherwise
separate parts.

A set of colours that relate according to a specific scheme creates harmony.

Likewise, a uniform texture of brush strokes across the surface of a canvas creates harmony.
Another way to guarantee harmony is to choose compositional components that are similar
in shape and contour. For example, a composition that utilizes only curvy shapes will have
more harmony than a similar composition that includes both curvy and geometric shapes.
The parts of the image below are in harmony because every contour is a curve.
VARIETY
For many people, performing the same task or following the same routine over and over
again leads to boredom. That is why vacations are such a pleasure. A vacation is an
interruption of life’s routines. Some people are active when on vacation while others do
nothing at all. One thing is certain – vacations look different than the routines they interrupt.
Vacations are a measured dose of variety in a person’s life. Art needs variety also.
All harmony and no variety is boring. A favourite professor of mine used to say, “Variety is
the spice of life”. He was not life-coaching. He was talking about art.
Variety is the principle of art that adds interest to an artwork.
Variety works through juxtaposition and contrast. When an artist places different visual
elements next to one another, he/she is using variety. Straight lines next to curvy lines add
variety. Organic shapes among geometric shapes add variety. Bright colours next to dull
colours add variety.
Note: If an artist uses variety to draw the viewer’s attention to a specific area in a composition
then variety morphs into emphasis, also a principle of art. Principles of art bleed into one
another. They overlap.
Harmony and variety are really opposite expressions of the same nebulous concept. To
emphasize one is to de-emphasize the other. Harmony and variety play tug-of-war in a
composition. Too much harmony is boring while too much variety is aimless and
incomprehensible.
Look at the image below. Both harmony and variety are evident. The orange squares and the
blue grid that surround them are in harmony based on both colour and shape. The round
form of distorted squares adds variety. The ball breaks the monotony of squares and adds
interest.
UNITY
Unity is the principle of art that gives an artwork a feeling of “oneness”. Unity and harmony
are similar, but unity is broader. There are numerous ways to create unity in art. Some of
those ways are particular to individual artist’s style.
Unity is about separate parts working together. We can better understand unity by thinking
about a car. A car’s purpose is to provide transportation. When the many parts of a car are
working together, it moves. No part of the car, separated from the whole, is capable of
providing transportation. When the car functions as it should, the parts are working together
in unity.
Like harmony and variety, unity is not easy to understand at first. Different from the elements
of art, unity is an impression – a feeling the artwork conveys to the viewer.
One can imagine a solitary shape and hold that shape in the mind. One cannot, however,
simply imagine unity and hold that concept in the mind. We must evaluate unity by looking
and analysing. Therefore, developing unity in artworks requires the artist to pay attention to
its development throughout the process of creating.
Here are some proven methods that ensure a unified composition…
 Simplicity
 Repetition

 Proximity
Simplicity
Simplicity refers to purposely
reducing the amount of potential
variety. For example, a graphite
pencil drawing is likely to exhibit
some measure of unity, given the
lack of colour. By eliminating
colour, the image is simpler than
it potentially could have been if
colour was introduced.
A personal favourite is to make a
drawing by hatching with only
straight lines. Straight lines are
less complex than curvilinear
lines and will unify a composition.
Repetition
Repetition within a composition will guarantee a feeling of unity. Tessellations are an obvious
example of how repetition unifies a composition. A tessellation is an arrangement of shapes
that fit together in a repeated pattern without gaps.
Repetition can also unify an entire series of artworks, like a group of paintings. A certain
shape, object or texture that is repeated among a group of paintings acts as a motif, helping
each painting to feel as though it is part of a greater whole.
Proximity
Proximity refers to the closeness of different components in a work of art. By placing parts
close together, the mind is able to see the parts as one thing, a mass.
Negative space is the space between elements in a work of art. It can refer to the “empty
spaces” within a drawing or painting. The more limited the negative space, the more unified
the areas of a composition may feel.
The tessellation below depends on both repetition and proximity, resulting in a highly unified
image. Due to the complete lack of negative space, the repeated bird shapes feel like one
pattern.
REPETITION, PATTERN, AND RHYTHM
REPETITION
Repetition is simply repeating a single element many times in a design. For example, you
could draw a line horizontally and then draw several others next to it.

PATTERN
Patterns are simply a repetition of more than one design element working in concert with
each other. A seamless pattern is one where every element within a design (no matter how
often it’s repeated) combines to form a whole.

RHYTHM
When you repeat elements, the intervals between those repetitions can create a sense of
rhythm in the viewer and a sense of movement. Musicians create rhythm in the spacing
between notes, effectively making these “silent” gaps play off the notes. Designers insert
spacing between elements to make rhythm. There are, broadly speaking, five types of visual
rhythm

Random rhythm
Repeating elements with no specific regular interval creates random rhythms. Think of falling
snow, pebbles on a beach, traffic movements: they are all examples of random rhythms in
action.
Regular rhythm
Like the beating of a heart, the regular rhythm follows the same intervals over and over.
Using a regular rhythm in a design can become monotonous (like the dripping of a tap).
Alternating rhythm
You can repeat more than one element in a design. In an alternating design, you use a 1-2-1-
2-1-2 pattern. Think of the black and white squares on a chessboard: that’s an alternating
rhythm in play. An alternating rhythm is, in fact, a regular rhythm with more complexity. It
could be as straightforward as our chessboard, or we could envision something more
intricate. Some fantastic alternating rhythms include rows of fish, birds, or other animals.
Taking fish as an example, we can see that each identical fish is following another. As simple
or complex as we want to make an alternating rhythm, it can be an easy way to break up the
monotony of a regular rhythm.
Flowing rhythm
A flowing rhythm shows the repeated elements following bends, curves, and undulations. In
nature, you can see this in the waves on a beach or sand dunes.
Progressive rhythm
We can make a progressive rhythm simply by changing one characteristic of a motif as we
repeat it. We could draw a series of circles, one above the other, making each lower one
larger. Do you see how the largest one at the bottom looks like it’s closest to you? We can
make a progressive rhythm change subtly or dramatically. You could add shade to the smaller
circles progressively so that the smallest one at the top is dark, the middle one in partial
shade, and the biggest one only slightly shaded. Progressive rhythms surround us. If you were
to video someone dancing and then examine that video frame-by-frame, you would have a
progressive rhythm.
GRADATION
Gradation is a slow transition between opposites - whether it be darkness slowly changing to
light, small objects growing larger, or one colour turning into another. Any visual element that
can be contrasted can also be gradated: shape, size, edges, direction, value, hue, intensity,
texture or temperature. Gradation creates a sense of harmony between things that would
otherwise be competing with each other.
With gradation the size of the same objects in a room changes from small to large, or a color
from light to dark, creating a subtle rhythm that draws the eye up and down the gradation
line.

In “Soap Orbs”, the soap bubbles slowly change from small globes at the top of the image to
large spheres at the bottom. This creates a sense of perspective as the bubbles float in from
outer space towards the viewer.
A transition in direction can be seen in “Winter Tent”, where the angles of the red tent poles
vary around the curve of the tent. This provides a dynamic feel to the image, leading the
viewer’s eyes into center of the lightweight tunnel.

TEXTURE
Texture in art refers to the feeling given to a surface. This element of art applies to both
the physical feeling of a piece of artwork, as well as the impression of a texture given to a
smooth surface.

TACTILE TEXTURE

This refers to how the art surface physically

feels. Rough, smooth, bumpy, scratchy etc. Painters,
for example, will often add things to their artwork to
give the surface a texture. Some may add gesso or
impasto to create lumpy, rough textures right on
their canvas.Tactile texture also refers to 3D
artwork, where the surface of a clay sculpture can
be scratched, poked, or pressed to give the actual
surface a texture rich quality.
VISUAL TEXTURE
This refers to an implied texture. The surface of the actual artwork remains smooth, but the
image on that smooth surface may look bumpy, rough, scratchy, velvety etc. A good example
of this type of texture would be a photograph taken of tree bark. The photograph
surface itself is glossy and smooth, but the visual image appears to have a rough, bark
texture.

SCALE
Scale and proportion are both design elements that have to do with size. Scale is the size of
one object in relation to the other objects in a design or artwork. Proportion refers to the size
of the parts of an object in relationship to other parts of the same object.
Humans judge the scale of something according to body size. Some of the most common
adjectives that apply to scale include:
• Life-sized
• Miniature
• Oversized
• Enormous
The person pushing the sphere provides a
sense of scale. Given the reflections of
skyscrapers in the sphere, viewers might
infer that the globe symbolizes the world,
and its relatively small scale suggests that
humans can manipulate it.
PROPORTION
Proportion is an element of design that pertains to the relative size of the components that
compose an object. Again, the human body is the standard by which people judge proportion.
An eye should be smaller than a face, for instance, and a male’s shoulders should be wider
than his hips.
The golden ratio is a mathematical method for determining proportion. Based on the number
pi, this ratio has been the standard for artists and designers since the ancient Egyptians used
it in designing the pyramids. Also, the golden ratio is applicable to the natural proportions of
the body. The more closely a person’s proportions conform to this ratio, the more classically
beautiful they are likely to appear.
When you see a disproportionate object, it catches your attention. Cartoons with large-
headed people, for example, catch your eye. Obvious exaggeration may even tickle your
funny bone. “The Head” by Eric Fogel is a good example:
In Greek mythology, monstrous characters
like Medusa had disproportionate traits that
set them apart from humans. Instead of hair,
Medusa had poisonous snakes growing from
her head, as the artist Caravaggio shows
below.

In contrast, an artwork in which all of the figures are proportionate can make you feel calm
and content. Rather than challenging your emotions, proportion infuses you with a sense of
completeness. Georges Seurat’s “A Sunday on La Grand Jatte” shows stylized people, all well-
proportioned and on the same scale, relaxing on a sunny afternoon. Even though there are
variations of light and lots of activities to look at, the overall effect is serene.
CONTRAST
Contrast occurs when two or more visual elements in a composition are different.
In design we use contrast to generate impact, highlight importance, create exciting graphics
and create visual interest and dynamics.

CONTRAST IN SHAPE CONTRAST IN COLOUR

CONTRAST IN SCALE CONTRAST IN LAYOUT

CONTRAST IN TYPE CONTRAST IN TYPE AND COLOUR

CONTRAST IN TYPE CONTRAST IN TYPE

AND ALIGNMENT AND COLOUR

CONTRAST IN SHAPES AND COLOUR

PARALLEISM
Ferdinand Hodler adopted a personal form of symbolism which he called "parallelism”.

The chosen one

DISTORTION
DIRECTION
Direction as an element of design is used to control the eye movement of the user by carefully
selecting images and arranging design elements in a way that will naturally encourage
readers’ eye to travel in your desired direction
Every element on a web page exerts a visual force that attracts the eye of the viewer. The
greater the force, the more the eye is attracted. These forces also appear to act on other
elements, imparting a visual direction to their potential movement and suggesting where you
should look next. We refer to this force as visual weight and to the perceived direction of
visual forces as visual direction. Both are important concepts to understand if you want to
create hierarchy, flow, rhythm and balance in your composition.
VISUAL WEIGHT
Physical weight is a measure of the force that gravity exerts on an object, but two-
dimensional objects (such as elements on a web page) don’t have mass and, therefore, don’t
have any physical weight. Visual weight is a measure of the force that an element exerts to
attract the eye. Two-dimensional objects can attract attention. The more an element attracts
the eye, the greater its visual weight.
If visual weight is about attracting the eye to a particular location, then visual direction is
about leading the eye to the next location. Visual direction is the perceived direction of visual
forces. Think of it as the direction you would expect an element to move if it were in motion.
Visual direction serves a similar function to visual weight in that it’s trying to get you to notice
certain parts of the composition. Whereas visual weight is shouting “Look at me!,” visual
direction is saying “Look over there!”
As with visual weight, you can modify the characteristics of an element to suggest different
directions, although fewer characteristics are at your disposal than with weight.
 Shape of element
An element’s shape might create an axis through it and this axis can suggest a
direction. The prime axis is typically seen as running parallel to an element’s visual
direction.
 Location of elements
Visual weight is a force that can appear to attract or repel a neighbouring element.
This force will move in a direction that connects both elements.
 Subject matter of element
An arrow, a pointing finger, or the gaze of the eye all suggest looking in a certain
direction.
 Movement
An element could literally move through your design, and its movement will have a
direction.
 Structural skeleton
Every composition has a structural skeleton, with forces that naturally run along and
through different axes. This probably needs a little more explanation.
Rudolf Arnheim’s structural net

The center and the four corners of a rectangular canvas act like magnets to the eye. The
strongest magnet is in the center, though not the geometric center of the canvas. Rather, the
center that attracts the eye is the optical center, and it sits just above the true geometric
center.

VISUAL DIRECTION AND GESTALT

You can think of direction as real or imaginary lines that point from one element to another
or that connect different elements. The lines don’t need to be visible.
 Uniform connectedness
The lines connecting elements have direction. An eye gaze creates an imaginary line
between the eye and whatever the eye is gazing at.
 Continuation
This principle relates to elements arranged along a line or curve, as though they are
moving in the direction of the line or curve.
  Common fate
Elements seen as having a common fate are those that move or appear to move in
the same direction.
 Parallelism
In order for elements to be seen as parallel, their internal axes (the same ones that
impart direction) must be established.

FLOW & MOVEMENT

According to The Design Basics, the flow of movement from an interior design perspective is
‘how people ‘flow’ through a space’. Flow of movement, therefore is closely related to
functionality and how people use a space.
How people use and perceive a space can be different for everyone. But there are some
fundamentals based on functionality that are key to observe when developing a proposed
plan. On a basic level this is why ensue is close to the master bedroom.
The connection between functionality and flow of movement is also why a butler’s pantry is
next to a kitchen and why open plan living areas are so popular. Because an open plan living
area creates a flow of movement between connected functions such as cooking, eating and
lounging.
Interior design is about many things including how people interact with all the elements of a
space. The most beautiful space will fail to achieve the holy grail of interior design, which is
harmony, if there is poor flow of movement.

PERSPECTIVE
Perspective as an element of graphic design is used to create a sense of distance between
elements in order to achieve visual unity. Negative space, also known as “white space”,
indicates depth by arranging two-dimensional objects in a way that mimics and recreates the
way they would appear in the three-dimensional world.
CUBISM
Cubism is an early-20th-century avant-garde art movement that revolutionized
European painting and sculpture, and inspired related artistic movements in music, literature,
and architecture. In Cubist works of art, the subjects are analysed, broken up, and reassembled
in an abstract form—instead of depicting objects from a single perspective, the artist depicts
the subject from multiple perspectives to represent the subject in a greater context. Cubism
has been considered the most influential art movement of the 20th century. The
term cubism is broadly associated with a variety of artworks produced in Paris
(Montmartre and Montparnasse) or near Paris (Puteaux) during the 1910s and throughout
the 1920s.

Girl with a Mandolin (Fanny Tellier), oil on canvas

Cubism developed in the aftermath of Pablo Picasso's shocking
1907 Les Demoiselles d'Avignon in a period of rapid
experimentation between Pablo Picasso and Georges Braque.
Drawing upon Paul Cezanne’s emphasis on the underlying
architecture of form, these artists used multiple vantage points
to fracture images into geometric forms.
GRID
In graphic design, a grid is a structure (usually two-dimensional) made up of a series of
intersecting straight (vertical, horizontal, and angular) or curved lines (grid lines) used to
structure content. The grid serves as an armature or framework on which a designer can
organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb
manner. A grid can be used to organize graphic elements in relation to a page, in relation to
other graphic elements on the page, or relation to other parts of the same graphic element
or shape.
GRIDS ESTABLISH A METER AND RHYTHM
POINTILIISM
Pointillism is a technique of painting in which small, distinct dots of colour are applied in
patterns to form an image

Detail from Seurat's Parade de cirque, 1889, showing the

contrasting dots of paint which define Pointillism

All tattoos are essentially pointillism. Typically using eight

needles at once, tattoos are made when each needle penetrates
the skin at high speed to create lines.

COLLAGE
A collage is a visual representation made from an assembly of different forms, materials and
sources creating a new whole. A collage may include newspaper clippings, ribbons, bits of
coloured or hand-made papers, portions of other artwork, photographs, and such, and glued
(photo shopped) to a solid support or canvas.
SURREALISM
Surrealism is a cultural movement that developed in Europe in the aftermath of World War I in
which artists depicted unnerving, illogical scenes and developed techniques to allow
the unconscious mind to express itself. Its aim was, according to leader André Breton, to
"resolve the previously contradictory conditions of dream and reality into an absolute reality,
a super-reality", or surreality. It produced works of painting, writing, theatre, filmmaking,
photography, and other media.

Max Ernst, The Elephant Celebes, 1921

PSYCHEDELIA
Psychedelic art is an experience that immerses you, stimulates the senses and leaves you
with something to remember. Elements such as fantasy imagery, kaleidoscopic and spiral
patterns, ultra-bright colour, extremely intricate detail and groovy typography can be used to
represent perceptions of parallel realities, of mystical experiences or more generally of deep
dreams. Psychedelic art can also serve as a reflective and introspective element.
Some hallmark characteristics of psychedelic art and design include fantasy imagery,
kaleidoscopic and spiral patterns, ultra-bright colour, extremely intricate detail and groovy
typography.

TESSELLATION
A tessellation or tiling is the covering of a surface, often a plane, using one or more geometric
shapes, called tiles, with no overlaps and no gaps. In mathematics, tessellation can be
generalized to higher dimensions and a variety of geometries.
A periodic tiling has a repeating pattern. Some special kinds include regular tilings with
regular polygonal tiles all of the same shape, and semiregular tilings with regular tiles of more
than one shape and with every corner identically arranged.
FIGURE GROUND
The principle of figure-ground design states that the figure is what you notice and the ground
is everything else
The figure-ground principle states that people instinctively perceive objects as either being in
the foreground or the background. They either stand out prominently in the front (the figure)
or recede into the back (the ground).
This states that the figure is what you notice and the ground is everything else. This principle
can be used to help artists and designers in composition of a 2D piece, or as an intentional
visual design technique in which an existing image’s foreground and background colors are
purposely swapped to create new images

COMPOSTION
Composition as an element of design refers to the arrangement of visual elements such as line,
shape, color, value, texture, form and space in order to achieve a unified whole.
The term composition means "putting together". It can be thought of as the organization of
the elements of art according to the principles of art. Composition can apply to any work of
art, from music through writing and into photography that is arranged using conscious
thought.
INTERPLAY OF FOREGROUND AND BACKGROUND
The element of the photo closest to you makes up the foreground. The furthest element away
from you is the background, while the middle ground makes up the area in between. The
foreground element allows the viewer to enter the picture. The middle ground adds a
component that holds the viewer's interest. The first two layers should lead the observer to
the background element to complete the image.

RULE OF THIRDS
The Rule of Thirds is an important element of design used by many designers and artists. It
involves dividing a picture into three sections vertically and horizontally with lines and points
of intersection representing places to position important visual elements. When designing,
the grid should be drawn according to your canvas, excluding the border, to make sure you
don’t place key elements in an unproportional way. The areas where the lines intersect is
where you should place your focal points so that they stand out more.

The rule of thirds states that a surface should be imagined as divided into nine equal parts by
two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important
composition elements should be placed along these lines or their intersections.
GOLDEN RATIO
Simply, the golden ratio (also called the golden rectangle and golden mean) is a shape with a
proportion of 1 to 1.618.
More complexly, the math can be described like this as explained by the Interaction Design
Foundation:
Each number in the Fibonacci sequence is simply the sum of the two numbers before it. It
begins with 1, 1 (i.e., 1 + the unseen 0 = 1), and the first 10 members of the sequence are 1,
1, 2, 3, 5, 8, 13, 21, 34, 55. It continues infinitely.
And it’s not “just a design thing.” The golden ratio is found in nature (nautilus shell), art (the
Mona Lisa), architecture (the Eiffel Tower) as well as design.