Looking at the visual in the user interface often tells you whether it is attractive or fake. (Because the patterns Donald Norman designs with emotion often work visually.) However, few can explain in words why compositions are visually appealing. The user interface which uses the principles of good visual design can facilitate interaction and improve usability.
The Visual Principles show how to mix and match design elements like lines, shapes, colors, grids, and space to create a balanced and thoughtful visual.
This article identifies five visual design principles that influence UX.
- Scale
- Visual hierarchy
- Balance
- Contrast
- Gestalt
Scale
This principle is widely used: almost all good visual designs benefit from it.
Definition: The principle of proportion refers to the use of relative sizes to indicate the importance and rank of a component.
In other words, if this principle is used correctly, the most important factors in a project will outweigh the less important factors. The reason for this principle is very simple. The bigger something, the more likely you are to notice it.
Eye-catching designs typically use up to three different sizes. Many elements of different sizes not only create a variety of layouts but also establish a visual hierarchy (see guidelines below) on the page. Try to emphasize the most important aspects of your design by creating the largest part.
The correct use of the principles of proportions and the highlighting of the appropriate elements allows the user to easily analyze it visually and to know how to use it.
Visual hierarchy
A layout with a good visual hierarchy is easy for the user to understand.
Definition: The principle of visual hierarchy is to guide the gaze on the page to approach different design elements in order of importance.
Visual hierarchies can be implemented through scale, value, color, distance, position, and various signal variations.
The visual hierarchy controls the delivery of the experience. If you don’t know where to look on the page, your layout may not have a clear visual hierarchy.
To create a clear visual hierarchy, use multiple font sizes to show the user the most important or higher-level content in the site’s small information architecture. You can also consider using light colors for important items and soft colors for less important items.
Stairs also help define the visual hierarchy, allowing you to incorporate different proportions into different design elements. A general rule of thumb is to include small, medium, and large components in your design.
Balance
in this principle, we try to balance the element in our board or screen.
Definition: The principle of balance refers to the satisfactory placement or proportion of design elements. Equilibrium occurs when there is a uniform (but not necessarily symmetrical) amount of image signal on either side of the imaginary axis that passes through the center of the screen. The imaginary axes that you set up on your image serve as a guide to organizing your composition and helping you understand the current balance of your visual.
With the well-balanced design, no area is so eye-catching that you can’t see the others (some elements have visual weight and can be in focus).
The balance wheel looks like this:
- Symmetrical: elements are distributed symmetrically about the imaginary central axis
- Asymmetrical: elements are distributed asymmetrically relative to the central axis
- Radial: elements are distributed in a circular direction from a common point to the center.
The type of scale you use in your monitor depends on what you want to convey. Asymmetry is dynamic and fascinating. Create a sense of power and movement. Symmetry also works as silence and tranquility. Radial balance always directs your gaze to the center of the composition.
Contrast
This is another principle commonly used to make parts of a design stand out to the user.
Definition: The principle of contrast involves placing different elements visually to represent the fact that the elements are different (for example, they are of different types, have different functions).
In other words, contrast shows obvious differences (such as size and color) between two objects (or between two sets of objects) and emphasizes that they are different.
The principle of contrast is often applied by color. For example, red is often used in user interface designs, especially iOS, to indicate dismissal. Light colors indicate that the red element is different from the others.
Often in User experience, the word “contrast” recalls the contrast between text and its background. Designers can intentionally reduce the contrast of text so as not to emphasize less important text. However, there is a risk when you doing it like that. Reducing the contrast of the text will reduce readability and may make the content inaccessible. Use the Color Contrast Checker to make sure all of your target users continue to read your content.
Gestalt Principles
This is a set of principles established by Gestalt psychologists in the early 20th century, that capture the way people interpret images.
Definition: The Gestalt Principle consists of many elements by placing them in an organized system to create a whole, rather than interpreting the parts as an involuntary series of different elements. . In other words, Gestalt principles capture our tendency to perceive wholes rather than individual elements.
Some of the Gestalt principles include similarity, continuity, closure, proximity, common space, form/plane, symmetry, and order. Proximity is especially important for user experience. This refers to the fact that the visual elements are recognized as part of the group.
References
Lupton, E. (2008). Graphic Design: The New Basics. New York: Princeton Architectural Press.
Poulin, R. (2018). The Language of Graphic Design. Beverly: Quarto Publishing Group USA, Inc.
Gordon, (K) 2020. 5 Principles of Visual Design in UX:Nngroup
