The role of visual design in UX

Visual design combines text, color, and imagery to enhance a design or interaction. Visual Design & Branding has grown out of both user interface (UI) design and graphic design.

Visual design improves usability — influencing user behavior and drawing the user’s eye to the correct information. Visual designers shape page content through size, color, and the use of positive and negative space. When this goal is achieved, designers introduce elements of delight into their app designs, such as animated effects of crisp illustrations that make the UI more attractive and engaging.

A successful visual design does not take away from the content on the page or function.  Instead, it enhances it by engaging users and helping to build trust and interest in the brand.

Elements of visual design


Any page or screen in a digital product can be broken down into fundamental elements of visual appearance. Fonts, lines, shapes, colors, textures, volume, and negative space are the basic tools that designers use. The role of a designer is to tie those elements of design together and build an optimal layout from the visual perspective.

People tend to identify objects by their basic shapes. Using lines alone, it’s possible to create simple or complex objects. While the elements of visual design describe the building blocks of a product’s aesthetics, principles of design tell us how to use those elements together for the best results.

When visual designers are asked to define the most important design principle, most of them will say “unity.” Unity is the fundamental principle of design because it’s about creating a sense of harmony between all elements in a page. A lack of unity in designs can easily cause chaos and create a bad visual experience for people who will interact with a product.

Important visual design principles that you need to consider when creating digital products:

Gestalt


Gestalt is a German word meaning “shape” or “form.” Gestalt psychology was founded by German psychologists Max Wertheimer, Wolfgang Kohler, and Kurt Koffka and focused on how people interpret the world.

Wertheimer, Kohler, and Koffka established a few fundamental principles, also known as “laws of perceptual organization.” These principles describe the way we perceive the world.

People tend to perceive the sum of all parts as opposed to individual elements. Thus, one of the Gestalt rules (Law of Similarity) says that elements that have a similar visual appearance seem to be more related.

Contrast

‍
Visual designers use contrast to make an element stand out. It’s possible to create contrast by manipulating differences in the color of objects. When visual designers work on web pages, they often rely on contrasting colors to put more visual weight on individual elements such as call-to-action buttons.

Hierarchy


The hierarchy shows the importance of individual elements on a page. Usually, designers create a hierarchy by changing the size of individual objects. For instance, the title of a page uses larger fonts than the heading of an individual section.

How Agency 39A delivers great visual design and branding

Visual design and your product’s success


If visual design matters, how do we explain the success of products like Craigslist? Visual appearance isn’t a top priority for products like this, and yet, a lot of people use them. That’s because beauty is in the eye of the beholder, and the way the product works is equally important as how it looks. As Steve Jobs once said, “Design is not just what it looks like and feels like. Design is how it works.”

Usability vs. visual design: What is more important?


‍One of the most important things about digital products is the time that users have to invest to complete a task. User interfaces should be designed to be intuitive and predictable for end-users. Such interfaces help users achieve their goals quickly. That’s why functionality, reliability, and usability create three basic layers in the pyramid of user needs.

When UX practitioners work on usability, they are focused on making the user journey as smooth as possible. When the overall design direction is approved, there is a need to focus on making UI digestible and pleasurable. So they arrange visual elements to address the principles of good visual designs.

But what would happen if we were to skip the usability step and go directly to designing for delight? Most likely, we would end up creating a bad user experience. Great visual design won’t save a bad experience. Even the most attractive visual appearance won’t prevent users from leaving your product if features or functionality are poorly constructed.

Good visual design can improve the overall user experience of a product by making users feel better about it. Here is how visual designers can apply their visual skills to design better UX.

We strive for consistency

‍
Inconsistency can easily make even the most beautiful design completely unusable.  Inconsistency makes users invest more time and effort into learning how to use the product, and no matter how beautiful the product is, it can quickly become ugly for users if they become confused along the way.

That’s why visual design at Agency 39A is not only about making UI look beautiful, but also about creating and making the general aesthetics of a product consistent. To achieve this goal, visual designers create a style guide and define rules regarding how to apply styles to layouts.

We develop clear visual hierarchy on every page/screen

Visual hierarchy is how we display items on a page/screen and how we call attention to them. Clear visual hierarchy helps to communicate information and focus user attention on important actions. This rule is even more important in web design because your competitors’ websites are only a click away. If users cannot find what they are looking for on your website, they will leave and won’t return.

When people scan a new page, their eyes follow an F-shaped pattern. Take this property into account when you work on a visual hierarchy for your product. Image credit NNGroup.

We test visual concepts early and often


Humans are visual creatures. Most of us process information based on what we see. And we respond strongly to visuals. So, the imagery and colors you select for your visual design can influence how much your visitors/users like your product. But we do not assume that people will like our design. We test it with them, and measure success based on their behavior. The earlier we test, the more confident you will be in our design decisions. Thus, we do not wait for the end of development—use a prototype to test your design decisions.