6 Principles of Design
6 Principles of Design
Balance
Balance is the distribution of the visual weight of objects, colors, texture, and space.
If the design was a scale, these elements should be balanced to make a design feel
stable. In symmetrical balance, the elements used on one side of the design are
similar to those on the other side; in asymmetrical balance, the sides are different but
still look balanced. In radial balance, the elements are arranged around a central
6 Principles of Design: Emphasis
Emphasis is the part of the design that catches the viewer’s attention. Usually, the
artist will make one area stand out by contrasting it with other areas. The area could
6 Principles of Design: Movement
Movement is the path the viewer’s eye takes through the work of art, often to focal
areas. Such movement can be directed along lines, edges, shape, and color within
6 Principles of Design: Proportion
Proportion is the feeling of unity created when all parts (sizes, amounts, or number)
relate well with each other. When drawing the human figure, proportion can refer to
6 Principles of Design: Rhythm
Rhythm is created when one or more elements of design are used repeatedly to
6 Principles of Design: Unity
Unity is the feeling of harmony between all parts of the work of art, which creates
a sense of completeness.
Basic Design Principles
Contrast
One of the most common complaints designers have about client feedback often
revolves around clients who say a design needs to “pop” more. While that sounds
like a completely arbitrary term, what the client generally means is that the design
needs more contrast.
There are two basic types of balance: symmetrical and asymmetrical. Symmetrical
designs layout elements of equal weight on either side of an imaginary center line.
Asymmetrical balance uses elements of differing weights, often laid out in relation
to a line that is not centered within the overall design.
Emphasis can also be used to reduce the impact of certain information. This is most apparent in
instances where “fine print” is used for ancillary information in a design. Tiny typography tucked
away at the bottom of a page carries much less weight than almost anything else in a design, and is
therefore deemphasized.
A slightly off-centered layout lends balance between the bold image and minimalist typography on
The Nue Co’s website.
Emphasis
Emphasis deals with the parts of a design that are meant to stand out. In most
cases, this means the most important information the design is meant to convey.
Emphasis can also be used to reduce the impact of certain information. This is most apparent in
instances where “fine print” is used for ancillary information in a design. Tiny typography tucked
away at the bottom of a page carries much less weight than almost anything else in a design, and is
therefore deemphasized.
Proportion
Proportion is one of the easier design principles to understand. Simply put, it’s the
size of elements in relation to one another. Proportion signals what’s important in a
design and what isn’t. Larger elements are more important, smaller elements less.
The proportional differences between the tiny type and large images clearly delineates which
elements are the most important on Collin Hughes’ website.
Hierarchy
Hierarchy is another principle of design that directly relates to how well content
can be processed by people using a website. It refers to the importance of elements
within a design. The most important elements (or content) should appear to be the
most important.
Hierarchy is most easily illustrated through the use of titles and headings in a design. The title of a
page should be given the most importance, and therefore should be immediately recognizable as the
most important element on a page. Headings and subheadings should be formatted in a way that
shows their importance in relation to each other as well as in relation to the title and body copy.
Grafill’s website creates hierarchy through the use of layout (the most important part is at the top),
size (more important content is larger), and typography (headlines are larger than body text).
Repetition
Repetition is a great way to reinforce an idea. It’s also a great way to unify a design
that brings together a lot of different elements. Repetition can be done in a number
of ways: via repeating the same colors, typefaces, shapes, or other elements of a
design.
This article, for example, uses repetition in the format of the headings. Each design
principle is formatted the same as the others in this section, signaling to readers
that they’re all of equal importance and that they’re all related. Consistent headings
unify these elements across the page.
The images on the left-hand side of Type and Pixel’s website are a great example of
repetition in design.
Rhythm
The spaces between repeating elements can cause a sense of rhythm to form,
similar to the way the space between notes in a musical composition create a
rhythm. There are five basic types of visual rhythm that designers can create:
random, regular, alternating, flowing, and progressive.
Random rhythms have no discernable pattern. Regular rhythms follow the same
spacing between each element with no variation. Alternating rhythms follow a set
pattern that repeats, but there is variation between the actual elements (such as a 1-
2-3-1-2-3 pattern). Flowing rhythms follow bends and curves, similar to the way
sand dunes undulate or waves flow. Progressive rhythms change as they go along,
with each change adding to the previous iterations.
The irregular spacing between the shapes in the background of TheArtCenter’s website
creates random rhythm.
Pattern
Patterns are nothing more than a repetition of multiple design elements working
together. Wallpaper patterns are the most ubiquitous example of patterns that
virtually everyone is familiar with.
In design, however, patterns can also refer to set standards for how certain
elements are designed. For example, top navigation is a design pattern that the
majority of internet users have interacted with.
Top navigation is one of the most ubiquitous design patterns on the internet, illustrated here on
Isabelle Fox’s website.
White Space
Many beginning designers feel the need to pack every pixel with some type of
“design” and overlook the value of white space. But white space serves many
important purposes in a design, foremost being giving elements of the design room
to breathe. Negative space can also help highlight specific content or specific parts
of a design.
It can also make elements of a design easier to discern. This is why typography is
more legible when upper and lowercase letters are used since negative space is
more varied around lowercase letters, which allows people to interpret them more
quickly.
White space gives the simple text and illustrated content of Jan Behne’s website room to “breathe”
while contributing to a minimalist aesthetic.
In some cases, negative space is used to create secondary images that may not be
immediately apparent to the viewer. This can be a valuable part of branding that
can delight customers. Take the hidden arrow in the FedEx logo, for just one
example.
Movement
Movement refers to the way the eye travels over a design. The most important
element should lead to the next most important and so on. This is done through
positioning (the eye naturally falls on certain areas of a design first), emphasis, and
other design elements already mentioned.
The slanted images and numbers contribute to the movement principle on Abby Stolfo’s website.
Variety
Variety in design is used to create visual interest. Without variety, a design can
very quickly become monotonous, causing the user to lose interest. Variety can be
created in a variety of ways, through color, typography, images, shapes, and
virtually any other design element.
However, variety for the sake of variety is pointless. Variety should reinforce the
other elements of a design and be used alongside them to create a more interesting
and aesthetically pleasing outcome that improves the user’s experience.
Kennard Lilly’s website background uses a variety of colors and shapes to create interest, while also
placing emphasis on the primary text content.
Unity
Everyone has seen a website or other design out there that seemed to just throw
elements on a page with no regard for how they worked together. Newspaper ads
that use ten different fonts come to mind almost immediately.
Unity refers to how well the elements of a design work together. Visual elements
should have clear relationships with each other in a design. Unity also helps ensure
concepts are being communicated in a clear, cohesive fashion. Designs with good
unity also appear to be more organized and of higher quality and authority than
designs with poor unity.
The use of a blue throughout the design (including the blue overlays on the images), along with
consistent typography and proportion, creates a sense of unity in the design.
So, how do we create compelling visual designs, especially when we don’t have a
background in art?
Start with the six principles of design: balance, pattern, rhythm, emphasis, contrast,
and unity. Just as instructional design models and methodologies shape your
training strategy, so should these principles shape your basic visual strategy. By
applying them, you can create high-impact visuals. In addition, the principles
provide you with more precise language to critique visual design when it’s
presented to you.
To understand how these principles are applied with maximum impact, look to the
masters. Throughout history, the world’s greatest artists have used the six
principles of design to captivate viewers.
Here, Raphael uses the design principle of balance. Despite not being perfectly
symmetrical, all the elements are arranged so that neither the left nor the right side
of the work has dominance over the other. We see this when we highlight the
major elements (red), in relation to a vertical axis (black):
On either side of the vertical axis, the arches present mirror images of each other,
columns are evenly distributed, a marble sculpture appears near the outer edges,
and the many figures in the bottom half of the work occupy roughly the same size
and shape of space. Using balance, Raphael depicts a large number of elements
with a wide variety of colors, shapes, and sizes, without seeming cluttered or
disorderly.