Design Demystified | Visual Design Principles 101 13/09/24, 12:55

Hatch Academy's Digital Marketing Career Accelerator is Now Open – Enroll Today! Find out more here

Academy Mediahouse Impact Blog +65 8040 4697

Blog

Design Demysti!ed | Visual

Design Principles 101
Bring a greater focus when creating user-centric designs by rethinking how
design principles are interrelated.
UI/UX Design

Wong Wing Lum

Contributor

User Interface (UI) Designer. Graphic Designer. Web Designer. Visual Designer.
User Experience (UX) Designer. (And more)...

Regardless of the role that you pursue in the creative design !eld, a common
intersection across all designers is a basic foundation in "sual design
principles to create intuitive user-centered digital products that people want.

This article hopes to pro"de a structured framework to learn and understand

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 1 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

how key principles interrelate and how they can be used to create user-centric
interfaces.

What are Design Principles?

By de!nition, design principles refer to a set of proven and shared best
practices that can be applied across any design composition.

One of the most in#uential set of design principles dates back to a theory in
psychology emerged in the 1920s. Gestalt principles – German for “uni!ed
whole” – posits that humans perceive patterns or con!gurations as a whole
and not their isolated components. De"sed by German psychologists Max
Wertheimer, Kurt Ko$ka and Wolfgang Kohler, Gestalt principles have come to
shape major design decisions in the 21st century.

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 2 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

Double 'S' in Subway's new logo

Look closer and you'll see a 3D letter

You should get the point by now

Since the formulation of Gestalt, new principles have emerged to form an

extensive directory governing what works best for any design. These “rules”
serve as an instruction manual on how "sual elements can best be arranged
strategically to achieve speci!c design or communication objectives.

The creative process behind designing anything requires a deep understanding

of the motivations of the target audience. The knowledge of psychology thus
helps designers to exploit human perception and reap the bene!ts of
optimised user experiences.

Areas of Confusion
Design Elements vs Design Principles

Design Elements are basic building blocks used to create any design, while
Design Principles are "laws" that govern how best to arrange these elements
in a way that optimises the user’s experience. For example, the use of di$erent
colours (element) can help draw emphasis (principle) on certain segments of a
webpage.

Design Elements | Line, Texture, Colour, Point, Shape, Typography, etc.

Design Principles | Hierarchy, Unity, Balance, Repetition, Emphasis, etc.

Overlaps in Design Principles

It’s di%cult to ascertain the exact number of design principles. Credible

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 3 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

sources – from textbooks to leading design blogs from established

practitioners – vary in what they consider primary and secondary design
principles, or which are classi!ed as a cut above the rest.

By and large, while existing resources are su%cient in explaining core

characteristics, they miss out on highlighting the relationship between
indi"dual design principles. This has le& a great deal of ambiguity for aspiring
UI/UX designers who may not be able to fully grasp their nuances and act on
them.

Which brings us to the point of this article

We’ve combed through numerous blogs from leading UX thought leaders and
heaps of "sual design textbooks. We’ve sieved out, restructured and regrouped
their lists of design principles to just six that you should be well acquainted
with to start building upon your "sual design foundation.

The only six you need

1. Repetition

Repetition refers to the repeated use of one similar or the same design
element throughout a design. Its slightly more sophisticated counterpart,
Pattern, is the predictable repetition that comprises of more than one design
element working together. Lastly, their birthchild, Rhythm has the highest
complexity. Visual rhythms comprise of regular, irregular or random repeated
elements that create a "sual tempo that replicates the look and feel of
movement.

The recurrence of certain design elements – such as a particular colour

scheme, typefaces, or motifs – helps to reinforce a sense of unity in a user’s
experience with the brand or design. Ultimately, this communicates a
consistent and memorable message for the audience.

Rule: Related elements of equal importance can

be uni!ed through the use of the same elements
of design such as colours, shapes, typefaces and

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 4 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

lines.

LASALLE College of the Arts employs repetition through the repeated use of
trapeziums throughout its webpages.

2. Movement

Movement refers to a motion that helps to guide how the eye na"gates a
design. On top of the "sual rhythms mentioned earlier, movement can also be
facilitated by action. Though it can seem tricky to illustrate action over a two-
dimensional interface, various "sual strategies help to replicate a sense of
direction.

Ob"ous tactics include "sual action such as arrows, while more subtle
de"ces could be the use of blurring motion lines or shapes. An example is
using a dotted line that traces the path from one element to the next as it
winds through the webpage, carrying the eye along its intended route to
process the most important information !rst.

Rule: Movement can help stir up interest and

keep "ewers engaged by taking them through
the primary to secondary elements. This allows
"ewers to process information with greater ease.

To make information easier to digest, Slavery Footprint uses movement tactics

such as hands and animations to push sections of texts out as the "ewer
scrolls down the webpage.

3. Emphasis / Dominance

Emphasis, sometimes referred to as dominance, is a strategy to direct a

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 5 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

"ewer’s attention to a speci!c part of a design. The purpose of emphasis is to

highlight a design element such that it stands out from the rest of the page.
The reverse is applicable as well. Take the !ne print “terms and conditions
apply” for instance – the choice of size and thickness in typography is
deliberately allocated less "sual weight to be de-emphasized.

Rule: Variations in size, weight, contrast and use

of white space creates a focal point that can
dictate "ewer attention.

a. Contrast

Contrast is also related to the principle of balance and hierarchy (covered

below). It describes how two or more adjacent elements di$er within a design.
The objective of contrast is associated with the legibility of a design – to
create "sual hierarchies. The element that has the starkest contrast
compared to its contrasting opposite is attributed more "sual weight, and thus
able to capture the most "sual interest at a speci!c point of the design.

Contrast also plays a key role in creating designs that are accessible, allowing
design experiences to be inclusive to the widest range of audiences. Here are
some tools to help you do it.

Rule: The most important element in a design

composition should have the highest contrast to
create a focal point for which a "ewer’s gaze is
drawn.

Frans Hals Museum masters contrast in size, colour, texture and hierarchy
when it comes to delivering the most impactful messages.

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 6 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

b. White Space

A common analogy used to "sualise the importance of white space is silence

in a musical composition. Without rests between the notes, listeners are
unable to discern when the score has moved from one section to the next. The
role of silence thus helps to create structure and facilitate the transition.

Yet, the absence of sound does not mean that our brain is resting. Silence
demarcates a piece so that listeners have ample time to structure and
process their thoughts. It gives our minds the opportunity to make meaningful
connections with the information we have just received and prepare ourselves
to receive the forthcoming verses with greater anticipation.

The same goes for white space in the context of creating good designs.

White space, or negative space, is the area of a design composition that does
not include any design element. Contrary to its name, white space can be any
of colour or texture. The purpose of white space is to funnel a "ewer’s
attention towards a speci!c area of a design by gi"ng it su#cient room to
breathe. Space helps to make content scannable, commanding focus through
greater clarity in any composition.

Rule: Less is more. By using white space to

demarcate and group similar elements together,
you can create "sual hierarchy and help your
"ewers focus on the information that matter.

Singapore’s favourite homegrown bubble-tea KOI Thé uses plenty of white

space to drive home the con"ction behind the quality and cra& of their
products.

4. Hierarchy

Hierarchy is the strategic layout of digital elements in a composition to convey

information e$ectively and e%ciently. While emphasis is concerned with how
indi"dual elements are highlighted, hierarchy pro"des a guide to the varying

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 7 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

degrees of which emphasis is given to primary, secondary, or tertiary

elements.

Ha"ng a clear "sual hierarchy instructs a "ewer on how they can na"gate a
design. As mentioned above, contrast plays a key role in implementing "sual
hierarchy. Value, followed by size or shape and position are the most dominant
forms of contrast. Repetition of elements using similar colours or fonts also
helps to create a hierarchy by conveying relative importance.

Rule: There are two predictable eye reading paths

that "ewers take depending on their cultural
in$uences. Namely, the Z-pattern hierarchy and
the F-pattern hierarchy. The placement and
variations of elements can be planned
accordingly to either 1) reinforce these natural
eye movements or 2) disrupt them to highlight a
focal point.

ZALORA knows how to get shoppers frantic to save more money (or just spend
less...) by placing their promotional deal high up their mobile application in
bold colours (see le&).

5. Balance

The concept of "sual weight was covered under contrast, but what is it really?
Every element of design carries a "sual weight, which is de!ned as an
intangible measure of force exerted to capture one’s attention. Just like the
physical world, two-dimensional objects in design carries di$erent weights
caused by variation in design elements such as colour, tone or size.

Imagine a vacant seesaw in perfect equilibrium. If one end is occupied and

tips the balance, a "ewer’s eye is automatically drawn towards the hea"er
end. Balance is the state of stability in any design composition, where the
even distribution of "sual weights creates a pleasant "sual experience.

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 8 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

There are two main types of balance: symmetrical and asymmetrical.

Symmetrical balance relies on an imaginary central point of the axis to dictate
the equal distribution of elements in a composition. Radial balance is a form of
symmetrical balance. Asymmetrical balance is achieved when unequal
elements are distributed such that it o$sets each other’s tension.

Rule: Pay attention to the "sual weights of each

element in any given design composition. A
design layout attains a state of balance when
each "sual element is purposefully placed and
evenly distributed in a composition.

EngineThemes's website uses a symmetrical split-screen layout to convey their

dual expertise in development and design capabilities.

Browhaus’ website is asymmetrically balanced with a large image on the right

balancing with the header and small texts on the le&.

6. Unity (Wholeness)

Unity is a measure of how well your design is "ewed as a singularity. It is

brought about by Harmony, how similar design elements complement each
other. Which in turn, is brought about when all design principles above have
been correctly applied.

Creative brand consultancy The Universe Fantastic's website uses a consistent

colour palette, fonts and motifs throughout the web design, gi"ng a uni!ed
experience for the "ewer.

Unity creates order. When all design elements are in complete agreement with
the overall concept of a composition, it builds a sense of wholeness. A uni!ed
design is able to get "ewers to see the bigger picture !rst before zeroing into
the indi"dual parts that contribute to the whole.

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 9 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

In other words, elements of the page are not competing with each other for a
"ewer’s attention. They work together to reinforce a central message the
design intends to convey.

Rule: Always take a step back and look at your

end-product with an objective lens. Is every
design element li%ing or eating each other up?
Are they coming together to reinforce your
communication or design objective? Unity is
being able to juggle the best design practices
across all principles.
a. Harmony (Sameness)

While unity examines a design composition in totality, harmony looks at how

well indi"dual design elements relate to one another.

Harmony is a pleasing sense of cohesiveness between seemingly separate

elements. It can be achieved by featuring elements that share common
characteristics. The use of analogous colours schemes, shapes and textures
are tactics to help achieve harmony within a composition. Repetitions,
patterns and rhythms also help to reinforce harmony through "sual
agreement.

Rule: Repeating similar colours, typography or patterns can bring harmony

across design elements that may not be situated within close proximity. This
makes it more intuitive for "ewers to derive meaning through a consistent
"sual narrative across di$erent pages.

b. Proportion

Contrary to popular belief, proportion is not merely about size or scale.

Proportion refers to the harmonious relationship of two or more elements in
relation to their "sual weight.

Credit: UX Planet

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 10 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

Credit: Toggl

Rule: The golden ratio is a mathematical

equation used to determine the natural
proportions that are most pleasing to the eye.
Derived from the number pi, it has been used
from designing pyramids in ancient Egypt to the
most notable logos we know in the 21st century.
c. Variety

Variety is created through intentional juxtapositions in design, sometimes

employing drastic variations in design elements such as textures, shapes and
lines. When done right, the stark contrast of the unexpected output can spice
up a design by adding "sual interest.

Rule: Variety is engaged in a constant tug-of-war with unity. A lack of unity

can leave your audiences confused, while too much unity hints at a lack of
personality. Hence, there needs to be a delicate balance between the two
principles to build a user interface that is comprehensible and exciting to use
at the same time.

Instead of opting for the standard na"gation bar, college artist Ileana Mariotto
weaves in an animated carousel to create a dynamic web experience for her
online portfolio website.

Immunity "tamin BOOST takes a persuasive CTA and consistent motif to the
next level with a !xed rotating pill bottle in the middle as you scroll down the
webpage.

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 11 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

Conclusion
All great designers !rst learn by imitation. When you're just starting out, these
rules are great to help you create designs that are guaranteed to work.

As you become more well-versed, reprogram your

mind so that you can constructively break these
rules to create mind-blowing user interfaces.
You need to push your boundaries to move from imitation to innovation.
Impactful designs need a tad bit more than just creating what’s "sually
pleasing to the eye.

Ultimately, it’s not about stubbornly following this set of guidelines that bring
you your design eureka moment. It’s about understanding who you are talking
to and !nding the most captivating way to convey the messages you are
dri"ng at. At the root of it, design is a medium for communication. And
e$ective communication is driven by empathy for its "ewers.

Hatch is an impact-driven business with the

mission to make digital and design opportunities
accessible for all. That's why we are committed
to sharing valuable resources like these freely
and openly for the community.
You might also like these UIUX resources:

UIUX Case Studies: Unpacking Singapore’s Most Popular Apps from the Pandemic
(Part 1: The Good)
UX Case Study: How did Wordle take over the World?
An 8-Point Checklist for Great UI/UX Online

Find out more about what we do at Hatch

Hatch Stories | It Starts with Courage

Re!ections | Why I do what I do
Graduate Stories | A tale of unyielding resilience

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 12 of 13
Design Demystified | Visual Design Principles 101 13/09/24, 12:55

We are an impact driven Let’s Talk Office

business.
[email protected] 71 Ayer
Academy +65 8040 4697 Rajah
Crescent
Mediahouse
#03-25,
Impact Subscribe to Newsletter
Singapore
Job Board 139951
Get exclusive news about our
Team courses, upcoming programs, and
events. Training
Spaces

Email Submit 319

Jurong
East
Street 31,
#01-58,
Singapore
600319

151 Lorong
Chuan,
#05-06
New Tech
Park,
Singapore
556741

© 2024 Hatch. All Rights Reserved. Privacy Policy

https://www.hatch.sg/post/design-demystified-visual-design-principles-101?ref=uxdatabase.io Page 13 of 13