Visual design principles and their power to create delightful user experiences

Shravan Rajawat
Bootcamp
Published in
4 min readFeb 28, 2022

--

Learn the fundamentals of visual design to build upon and create newer, attractive, and likable user interfaces

As a new-age designer, you must be familiar with the buzz words such as glassmorphism, minimalism, brutalism, aurora backgrounds, claymorphism, and whatnot. The creative world of UI design is constantly introducing new design concepts and setting new trends that become designers’ favorites in no time. Every designer wants the creative freedom to break the rules, color outside the lines, and create something extraordinary. But in this ever-evolving industry, it is equally important not to drift apart from the fundamentals of UI design, i.e. the visual design principles as they bring sense and order to design.

Visual design principles lay a foundation upon which newer design concepts and styles rest. These principles inspire form and consistency in a design. It governs the proper placement and organization of different design elements which together form an eye-pleasing layout.

Here are six visual design principles that you should follow to make your designs standardized yet exceptional.

Balance

Balance is a proportional distribution of design elements on an interface. It creates order and signals an overall relationship between the visual elements of a design. To achieve balance in a design, one needs to distribute or place visual elements equally along both sides of an imaginary axis. As can be seen in the images below how thoughtfully the lines, images, and text is placed to attain an overall balance.

The difference balance makes in making the design look clean and organized.

Rhythm

When all of the elements have a consistent size and shape, that creates a rhythm. When elements repeat at regular intervals, the visual rhythm is maintained which speeds identification. A rhythm is important to help people better understand an interface and intuitively guide them around.

Rhythm in a mobile UI design by grouping similar visual elements like profile image, title text, subtext.

Harmony

When visual elements are in harmony, they relate to and complement each other. Harmony creates a clear, purposeful flow and comes largely from rhythm and repetition. As per cognitive psychology, the human mind is programmed to detect patterns and form associations for better comprehension. Harnessing the same, harmony between visual elements on a digital interface helps us understand and use the product better.

Creating harmony on a UI by maintaining rhythm and consistency of visual elements.
Harmony on a UI by creating an intuitive login flow which guides a user.

Dominance

Apart from balance, rhythm, harmony, repetition, and consistency, another important principle is dominance. You have got to create a visual hierarchy for your design and you do that by starting with dominance.

Dominance is highlighting or focusing on specific elements of your design to attract the user’s attention to it first. It is going to immediately convince the user of the importance or significance of a certain element. Dominance can be established in a lot of ways for instance, through size, shape, color, contrast, position, typographic styles, etc.

Establishing dominance on a UI by clear and prominent images, variation in weight of fonts used, etc.
Improving a message prompt by creating dominance through bold text, colored buttons, and clear images.

Alignment

Alignment is the most important visual design principle. Without alignment, a design will be discomforting for a user just at the first glance. Even if you do nothing but use proper alignment, your designs will be definitely more useful, usable, and understandable which also makes them more valuable.

Aligning the labels and text input fields on a form to make it look more organized.

Proximity or Gestalt

Proximity is the relative distance between visual elements. This principle is also known as Gestalt principle which is the human tendency to perceive a group of similar things as a whole rather than just the individual elements it is comprised of. Elements visually close to each other are perceived as a single group, related by the context of use. Unrelated items are visually separated, far from each other.

Example of the principle of proximity: Related images, text, tabs, buttons placed together on the Samsung website.
Images source by Google

Stay tuned for the next article in the series to learn about how to enhance your designs by following some simple yet impactful rules to use typography.

--

--