How visual design influences UX design

Reading Time: 9 minutesWhat comes to your mind when you think of visual design? Graphics? Fonts? Colours?

Well, it is much more than that. Visual design is the cohesion of aesthetics and functionality. All of the elements i.e. images, typography, space, layout and colour are planned very carefully so that it optimizes user experience and enhances conversions.

In this article, we shall try to explain to you what is visual design, what role it plays in UX design and Gestalt principles in the simplest manner.

What exactly is visual design?

Visual design is the use of imagery, colour, shapes, typography, and form to enhance usability and improve the user experience. Visual design as a field has grown out of both UI design and graphic design.

It refers to everything that we see on the screen. It is about how every software, website, mobile app, smart TV interface and even wearables such as smartwatches and fitness bands look.

Not only that, but it also includes how the information is presented that is both pleasing and easy to use.

But many professionals fall into the trap of being in love with their own designs and how beautiful they are. They fail to check whether the designs are actually easy for the users to use or not.

Now that we have understood what visual design is, let’s understand the most fundamental elements that make visual design.

Fundamental Elements of Visual Design

1. Lines

They can be straight, geometric, curved, or organic. Lines are used to create divisions, textures and shapes.

2. Shapes

We see shapes regularly in our everyday lives. Rectangles, triangles, squares and circles are the most common shapes. There are some complex shapes too such as pentagon, hexagon, stars and abstract shapes.

3. Negative space/whitespace

Negative or white space is used to create a sense of clarity and openness. If too many items are crammed together, it is not only difficult to understand but they do not look attractive.

Most modern websites understand this and hence, use white space to keep the user focused on the main content and simultaneously make the product visually appealing.

4. Volume

Volume refers to the quantity and frequency of elements you have used in your design.

If a website or an app is heavily using all visual elements it may appeal to a few, but most people will find it distracting. To counter this, designers strip all the non-essential flashy and gaudy elements and keep only the most essential ones. This concept is known as Minimalism and it has been in practice for a couple of years now.

5. Value

Value sets the relationship between lightness and darkness, typically through a light source to create shadows and highlights. It can be referred to as contrast. Designers must ensure the balance between the two.

6. Colour

Colours communicate brand value and have an emotional appeal. Colours must be carefully chosen so that they are consistent with branding and are appropriate for target users.

7. Texture

Textures define an object’s surface. It gives an illusion of ‘feeling’ to the visual design. For example, a business selling organic fruits and vegetables will have an earthy texture.

So, these were the fundamental elements. We shall now move on to discuss the role of visual design in the UX design process.

Role of Visual Design

As we mentioned at the beginning of the article, visual design is not just about aesthetics, but also about usability.

UX design revolves around the principle of usability and functionality and visual design helps in visually organizing and presenting each element coherently.

There are three main roles that visual design performs with respect to the UX design process:

1. It takes care of both aesthetics and usability

The core purpose of visual design is to use the design elements in a way that they do not negatively affect usability. It is evident that in some cases, aesthetics presides over the usability aspect, which defies the purpose of UX design.

2. It helps in improving the user experience

People still like to prefer to use products that are beautiful over simpler looking ones. It is a natural human tendency to get attracted to visually pleasing things.

Hence, the visual design ensures that the user enjoys using the product as well as visual elements are pleasing enough to keep them engaged and motivate them to use the product over and again.

3. It helps in boosting conversions

The company has provided all the information in the world but it simply doesn’t seem attractive enough to take any action.

Similarly, if your product is poorly designed, the target users will not take any action and the purpose of your product may entirely fail here.

So to ensure that target users are motivated to take the desired action i.e. signing up for your newsletter, starting a free trial, signing up for a membership or even purchasing your product/service, you need to have an effective visual design.

With that said, let’s quickly review the most famous psychological principles that are used in the design – Gestalt principles.

Gestalt Principles

The Gestalt Principles are a set of psychology laws identified by German psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler in the 1920s. They describe how humans see objects by seeking patterns, similar grouping elements, and simplifying images.

The three psychologists demonstrated that human beings typically extract meaning from chaotic stimuli as a way to make sense of the world around them.

A sort of natural compulsion to find order where there isn’t, thus seeing sensible images that don’t actually exist in the physical world but only in their mind. In other words, illusion.

“The whole is other than the sum of the parts” — Kurt Koffka

The Gestalt Principles are decisive in UX design, in interfaces particularly as users must be able to intuitively understand the design and quickly grasp how they can use it to reach their goals.

UX and UI designers, have to appreciate the importance of Gestalt using this knowledge in order to guide users through the interface without confusing or delaying them, but rather helping them to find a way through their options and identify with the brand or product.

Further, as the ones responsible for the human-centred design approach, designers must remember that even if these principles are universal to the human experience, they still have to be perfected and adjust to the cultural background and physical proficiency of the end-user.

The most important seven principles are:

1. Figure-Ground
2. Similarity
3. Proximity
4. Common Region
5. Continuity
6. Closure
7. Focal Point

So let’s start with the most fundamental principle, i.e. Figure-Ground Principle.

1. Figure-Ground Principle

The figure-ground principle illustrates how people perceive objects as either being in the background or the foreground. The elements of an image either stand out in the front (figure) or withdraw into the back (ground).

There are 3 generally agreed categories of figure-ground relationships, Stable, reversible and ambiguous.

(i) Stable

The figure element is clear and obvious against the ground. One typically dominates the composition. This is the most commonly used category and is mostly used to create a call to action (CTA) buttons.

(ii) Reversible

Both figure and ground have equal hierarchy creating uncertainty and tension, which can lead to interesting and dynamic design. It is generally used to create patterns.

(iii) Ambiguous

Elements can be regarded as both figure and ground simultaneously. They form equally demanding shapes, and the person viewing the communication must form an active participant in the decoding. The most ideal use case of this would be a logo.

A figure-ground relationship is an act of balance.

Figure and ground can enhance or detract from each other, and mindfully crafting both in relation to each other is among the more powerful aspects of design. It sets a context for how your message will be interpreted.

The clearest example of the figure-ground relationship in action is in how you read.

When you see a web page, poster, advertisement, book or set of instructions in which the white or the negative space has been every bit as considered as the figurative content, you perceive the communication as clearer, more elegant or simple to digest.

2. Similarity Principle

The similarity principle states that we tend to mentally group items when things appear to be similar to each other. This perceptive vision can be achieved using various design elements such as colour, shapes, or organization.

The human brain seeks similarities and differences and is naturally driven to link similar elements. Factors like symmetry and regularity also add to the mix by giving regular visual handles to identify patterns.

In the image below, there are five columns, each made of four evenly spaced circles. Three columns have light grey circles, one has black circles, and another one has white circles

Even to describe the image, you will be compelled to mentally divide the image into three distinct groups based on their colour like this:

Users tend to group each of the elements of your website or app based on how similar they look. So, as a UX designer, you should ensure that your links should look the same, and your call to action buttons (CTA) should look the same. If they all look different, it leads to confusion and chaos.

The pricing page from the Hootsuite website is an ideal example of the similarity principle in practice. All of the calls to action buttons, even for different pricing plans have the same shape and green colour.

This establishes consistency and conveys a single message to the user that clicking on any one of these will lead to signing up for their service.

3. Proximity Principle

The proximity principle shows how elements that are arranged close together appear more related than elements that are farther apart. It is one of the most powerful principles because it completely overrides other principles like the previous similarity principle.

Our brain tends to mentally encapsulate together close objects, differentiating them from those that are separated by greater distances.

The proximity principle is mainly used while planning for information architecture to categorize objects which belong to similar groups. The most common use cases of this principle are eCommerce websites like Amazon and news websites.

4. Common Region Principle

The common region principle describes how elements that are visually enclosed in the same region tend to be perceived as a unique group.

It is closely related to the proximity principle but can include much-distanced elements as long that they are bound together in the same closed region, delimited by a specific background tone or a border.

Myntra, on its website, seems to use this principle to categorize the assortment based on its type/use and discounts/offers. This creates a perceived separation between the group and other separated objects, even if those objects are closer to some of the objects inside the region.

5. Continuity Principle

The continuity principle states that we perceive elements arranged in a line or curve as more related to each other, our eyes search for continuous forms and follow smooth paths.

This means we prefer to interpret visual information as connected instead of disconnected. As an example, if we look at the image below, we’ll be inclined to see the disjointed dots as running in a smooth, curved line.

IBM logo is a classic example of using the continuity principle effectively.

6. Closure Principle

The closure principle illustrates our tendency to complete shapes, automatically filling in gaps between elements to perceive a whole image. When looking at complex arrangements, we search for a recognizable pattern to make sense of the chaos. If some shape has missing parts in it, our brain fills in the blanks.

In this image, we perceive an overlapping square that in reality, doesn’t exist. They are complex shapes with missing parts that we are completing mentally.

7. Focal Point Principle

The focal point principle states that elements that stand out visually immediately capture our attention. This can be achieved using a coloured element in a black and white composition, leveraging size, spacing, or shading.

Apple uses the focal point principle extremely well. The background is white and clear and the products showcased have black colour and the screens have vivid colours. This immediately attracts attention to it and makes the white background seemingly invisible.

There are other principles as well. They are:
Significance – We perceive ambiguous images as simple ones.
Good shape – We cluster elements together to complete familiar shapes.
Synchrony – We group elements that appear at the same time and
Common fate – We isolate and unify elements based on their direction and pulling force.

Conclusion

Visual design is not just limited to images, colour and typography. It has deep roots in psychology. Hence, we can safely conclude that Gestalt principles, which are based on the human psyche, are the driving force behind the visual design of any digital product.

The visual design based on these principles leads to the design of a simple, memorable and needless to mention, beautiful user experience.