What are the 5 principles of visual design in UX?

Visual design improves the aesthetic appeal and usability of a product/interface.

The 5 principles that impact user experience are:

Scale

The principle of scale refers to using size to signal the relative importance and rank in an interface. The more important elements are larger in size because a larger-sized component is likely to get more attention. A good design is made from a combination of 3 sizes, as they develop a good hierarchy and allow reasonable differentiation. As shown below, the categories have a larger size as the aim is to draw more attention to the categories available.

Visual hierarchy

The principle of visual hierarchy refers to guiding the eye on the interface so that it catches the elements in order of their importance. Visual hierarchy can be applied by variation in scale, color, spacing, placement, and other signals. Similar to the scale principle, we can use 2-3 typeface sizes to create a visual hierarchy. As shown below, despite multiple user interface elements being present, attention is immediately drawn to the food delivery card because of its larger size and prominent color.

Balance

The principle of balance refers to the equal distribution of the number of visual elements throughout the interface. The elements must be distributed equally (not necessarily in a symmetrical manner) across both sides of an imaginary axis. The axis is usually vertical but can be horizontal. We should create a balance between the visual weight of the elements and not the number of elements on both sides of the axis. As shown below, the cards are distributed equally on both sides of the interface.

Contrast

The principle of contrast refers to the juxtaposition of not visually similar elements to convey they are different. Contrast provides a noticeable difference to emphasize that the elements are different. Contrast is implemented through color, e.g., green implies confirming something, and red implies deleting, thus making the element distinct from others, as shown below:

Gestalt principles

Gestalt principles refer to our tendency to perceive elements as a whole rather than separately. You can find details of Gestalt’s principles here.

Conclusion

These principles improve user experience, increase usability and make the interface aesthetic.