Design Demystified | Visual Design Principles 101

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.

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.

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 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.

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 visual 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 unified through the use of the same elements of design such as colours, shapes, typefaces and 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 navigates a design. On top of the visual r