• Wong Wing Lum

Design Demystified | Visual Design Principles 101

Updated: Dec 14, 2020

Bring a greater focus when creating user-centric designs by rethinking how design principles are interrelated.

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 field, a common intersection across all designers is a basic foundation in visual design principles to create intuitive user-centered digital products that people want.

This article hopes to provide a structured framework to learn and understand how key principles interrelate and how they can be used to create user-centric interfaces.

What are Design Principles?

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

Gestalt definition

One of the most influential set of design principles dates back to a theory in psychology emerged in the 1920s. Gestalt principles – German for “unified whole” – posits that humans perceive patterns or configurations as a whole and not their isolated components. Devised by German psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler, Gestalt principles have come to shape major design decisions in the 21st century.

subway logo
Double 'S' in Subway's new logo

ntuc logo
Look closer and you'll see a 3D letter
best denki logo
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 visual elements can best be arranged strategically to achieve specific 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 benefits 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 different 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 difficult to ascertain the exact number of design principles. Credible sources – from textbooks to leading design blogs from established practitioners – vary in what they consider primary and secondary design principles, or which are classified as a cut above the rest.

By and large, while existing resources are sufficient in explaining core characteristics, they miss out on highlighting the relationship between individual design principles. This has left 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 visual 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 visual design foundation.

design principles
The only six you need

1. Repetition

Repetition refers to the repeated use of one similar or the same design elements 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 visual tempo that replicates the look and feel of movement.

repetition vs pattern vs rhythm design principle

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 unified through the use of the same elements of design such as colours, shapes, typefaces and lines.

Lasalle College of the Arts website
Lasalle College of the Arts website

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 navigates a design. On top of visual rhythms mentioned earlier, movement can also be facilitated by action. Though it can seem tricky to illustrate action over a two-dimensional interface, various visual strategies help to replicate a sense of direction.

movement design principle

Obvious tactics include visuals action such as arrows, while more subtle devices could be the use of blurring motion lines or shapes. An example is using a dotted line that traces the path from element to the next as it winds through the webpage, carrying the eye along its intended route to process the most important information first.

Rule: Movement can help stir up interest and keep viewers engaged by taking them through the primary to secondary elements. This allows viewers to process information with greater ease.

Slavery Footprint website
Slavery Footprint website

To make information easier to digest, Slavery Footprint uses movement tactics such as hands and animations to push sections of texts out as the viewer scrolls down the webpage.

3. Emphasis / Dominance

Emphasis, sometimes referred to as dominance, is a strategy to direct a viewer’s attention to a specific 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 fine print “terms and conditions apply” for instance – the choice of size and thickness in typography is deliberately allocated less visual weight to be de-emphasized.

Rule: Variations in size, weight, contrast and use of white space creates a focal point that can dictate viewer attention.

emphasis dominance design principle

a. Contrast

Contrast is also related to the principle of balance and hierarchy (covered below). It describes how two or more adjacent elements differ within a design. The objective of contrast is associated with the legibility of a design – to create visual hierarchies. The element that has the starkest contrast compared to its contrasting opposite is attributed more visual weight, and thus able to capture the most visual interest at a specific point of the design.

visual weight factors

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 viewer’s gaze is drawn.

Frans Hals Museum website
Frans Hals Museum website

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

b. White Space