THE PRINCIPLES

OF DESIGN
CONTRAST
Contrast refers to how different elements
are in a design, particularly adjacent
elements. These differences make
various elements stand out.
Contrast is also a very important aspect
of creating accessible designs.
Insufficient contrast can make text
content in particular very difficult to
read, especially for people with visual
impairments.
BALANCE
All design elements and principles—
typography, colours, images, shapes,
patterns, etc.—carry a visual weight.
Some elements are heavy and draw the
eye, while other elements are lighter.
The way these elements are laid out on
a page should create a feeling of
balance.
There are two basic types of balance:
symmetrical and asymmetrical.
- Symmetrical designs layout elements
of equal weight on either side of an
imaginary centre line.
- Asymmetrical balance uses elements
of differing weights, often laid out in
relation to a line that is not centred
within the overall design.
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. 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
principles of graphic design 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.
HIERARCHY
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 using
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.
REPETITION
Repetition is a great way to reinforce an
idea. Repetition can be done in a
number of ways: via repeating the same
colours, 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, signalling
to readers that they’re all of equal
importance and that they’re all related.
Consistent headings unify these
elements across the page.
RHYTHM
The spaces between repeating elements can
cause a sense of visual rhythm. There are five
basic types of visual rhythm:
- Regular rhythms follow the same spacing
between each element with no variation.
- Random rhythms have no discernible
pattern
- 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.
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.
NEGATIVE SPACE
This is the area of a design that do not
include any design elements. The space is,
effectively, empty.
Negative Space
Negative 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.
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.
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 colour, 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.
UNITY
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.
DESIGN
CONSIDERATIONS
GOLDEN RATIO
The golden ratio occurs with two
objects which, once you divide the
larger by the smaller, result in the
number 1.6180 (or thereabouts).
The most famous golden ratio is
the golden rectangle, which can be
split into a perfect square and a
rectangle the same aspect ratio as
the original rectangle. You might
see this in image composition or
website design and grid layout.
RULE OF THIRDS
You can apply the rule of thirds by
imagining a 3×3 grid lying on top of
your image and then aligning the
subject of the image with the guide
lines and their intersection points (e.g.
placing the horizon on the top or
bottom line) or allowing the elements
of the picture to easily flow from
section to section.

Once you have your grid in place, the

spots where lines intersect each other
indicate the prime focal areas within
your design:
TYPOGRAPHY, TEXT, AND FONT
TERMS
Slab serif
Typography Serif Sans-serif Script Slab serif fonts
“Sans” literally Script typefaces are feature
“Ty­pog­ra­phy is the vi­ A serif is the little
means “without”, fonts or type based geometric feel
sual com­po­nent of extra stroke or
and a sans serif upon historical or than traditional
the writ­ten word,” curves, at the ends
font does not modern handwriting serif fonts and
(Practical of letters.
include any extra styles and are more feature serifs
Typography
stroke at the ends fluid than traditional that square and
explanation) All
of the letters. typefaces. larger, bolder.
visually displayed
text, whether on
paper, screen or
billboard, involves
typography.
Monospace
. A monospaced font is a font whose
letters and characters each occupies
the same amount of horizontal space.
TYPOGRAPHY, TEXT, AND FONT TERMS
Kerning Leading Leading
Kerning refers to the space Leading determines how text is Tracking is similar to kerning in tha
between two specific letters (or spaced vertically in lines. Leading is it refers to the spacing between
other characters: numbers, used when content that has multiple letters or characters. However,
punctuation, etc.) and the lines of readable text and ensures instead of focusing on the spacing
process of adjusting that space the distance from the bottom of the between individual letters (kerning
improves legibility. words above to the top of the words tracking measures space between
below has appropriate spacing to groups of letters.
make them legible.
TYPOGRAPHY, TEXT, AND FONT TERMS
X-Height Ascender/Descender Orphans/Widows
The x-height refers The ascender is the portion - Orphan: A is a single word or very short line, that
to the distance of a lowercase letter that appears at the end of a paragraph or the beginning
between the extends above the mean line of a column or a page, separated from the rest of
baseline and the of a font (the x-height). On the text.
mean line of lower- the other hand, the
case letters in a descender is the portion of a - Widow: A paragraph-ending line that falls at the
typeface. letter that extends below the beginning of the following page or column, thus
baseline of a font. separated from the rest of the text. Or the
beginning of a new paragraph that starts at the
bottom of a column or page.
GRIDS
A grid is constructed from evenly divided columns
and rows. The point of a grid is to help designers
arrange elements in a consistent way.
COLOURS
RGB CMYK
RGB colour is a model in CMYK is a colour
which red, green, and model that is used for
blue light are added print purposes. CMYK
together in various ways colours begin as white
to reproduce a broad and then get darker as
array of colours. RGB more colours are
tends to be used for on- combined.
screen purposes.
COLOURS
COOL COLOURS WARM COLOURS
Cool colours such as Warm colours are made with red,
blue, green and light orange yellow and various
purple have the ability to combinations of these colours. They
calm and soothe. give a friendly, happy, cozy vibe.
COLOURS
HUE TINT
Essentially, a hue is a way Tints are created when you
to describe a colour. And add white to any hue on the
a hue can be any colour colour wheel. This lightens
on the colour wheel. For and desaturates the hue, making
example, red, blue and it less intense.
yellow are all hues.
COLOUR
KNOLLING
Knolling is the act of arranging different objects so
that they are at 90-degree angles from each other,
then photographing them from above. This
technique creates a very symmetrical look that feels
pleasing to the eye. Images that feature knolling
tend to be set against a contrasting solid
background.
FLAT VS SKEUMORPHISM
FLAT SKEUMORPHISM
Flat design is a minimalistic approach Skeuomorphism is when a digital
that focuses on simplicity and element is designed to look like a
usability (almost the opposite of replica of the physical work. For
Skeuomorphism). It tends to feature example, think iPhone’s calculator
plenty of open space, crisp edges, or Apple’s newsstand where the
bright colours and two-dimensional bookshelf and magazines look and
illustrations. feel like they do in real life.