Design Demystified | Visual Design Principles 101

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.

design principles — 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.

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

Obvious tactics include visual 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 one 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.

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.

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.

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 masters contrast in size, colour, texture and hierarchy when it comes to delivering the most impactful messages.

b. White Space

A common analogy used to visualise 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 viewer’s attention towards a specific area of a design by giving it sufficient 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 visual hierarchy and help your viewers focus on the information that matter.

Singapore’s favourite homegrown bubble-tea KOI Thé uses plenty of white space to drive home the conviction behind the quality and craft of their products.

4. Hierarchy

Hierarchy is the strategic layout of digital elements in a composition to convey information effectively and efficiently. While emphasis is concerned with how individual elements are highlighted, hierarchy provides a guide to the varying degrees of which emphasis is given to primary, secondary, or tertiary elements.

Having a clear visual hierarchy instructs a viewer on how they can navigate a design. As mentioned above, contrast plays a key role in implementing visual 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 viewers take depending on their cultural influences. 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 left).

5. Balance

The concept of visual weight was covered under contrast, but what is it really? Every element of design carries a visual weight, which is defined as an intangible measure of force exerted to capture one’s attention. Just like the physical world, two-dimensional objects in design carries different 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 viewer’s eye is automatically drawn towards the heavier end. Balance is the state of stability in any design composition, where the even distribution of visual weights creates a pleasant visual experience.

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 offsets each other’s tension.

Rule: Pay attention to the visual weights of each element in any given design composition. A design layout attains a state of balance when each visual 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 left.

6. Unity (Wholeness)

Unity is a measure of how well your design is viewed 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, giving a unified experience for the viewer.

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 unified design is able to get viewers to see the bigger picture first before zeroing into the individual parts that contribute to the whole.

In other words, elements of the page are not competing with each other for a viewer’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 lifting 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 individual 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 visual 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 viewers to derive meaning through a consistent visual narrative across different 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 visual weight.

Credit: UX Planet

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 visual 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 navigation bar, college artist Ileana Mariotto weaves in an animated carousel to create a dynamic web experience for her online portfolio website.

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

Conclusion

All great designers first 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 visually 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 finding the most captivating way to convey the messages you are driving at. At the root of it, design is a medium for communication. And effective communication is driven by empathy for its viewers.

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:

Find out more about what we do at Hatch

‍