People tend to judge a book by its cover. This applies to many things in our world, including digital experiences. The way our products look affects how our users experience them. The aesthetic–usability effect proves that people tend to ignore some usability flaws in aesthetically-pleasing products. Visual design plays a key role in creating products with excellent aesthetics.
In this article, we will discuss what visual design is, how it is related to usability, and what visual design principles designers should follow to create better user experiences.
The role of visual design in UX
Visual design is about implementing text, colors, and images in a way that enhances a design or interaction. As a field, it has grown out of both user interface (UI) design and graphic design.
The first and foremost goal of product design is to make interfaces usable—the user’s eye should be drawn to the correct information and functionality. To make it happen, visual designers prioritize content on a page through size, color, and the use of negative space. But as soon this goal is achieved, they can also introduce elements delight into their app designs, such as animated effects of crisp illustrations that make the UI more attractive.
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. For instance, if you take a look at the image below, you will probably see an input form, even though it’s just a combination of lines.
This drawing was created using plain black & white lines.Essential visual design principles
While the elements of visual design that we’ve covered above describe the building blocks of a product’s aesthetics, principles of design tell us how to use those elements together for the best results.
If 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.
Here are a few important visual design principles that you need to consider:
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.
Law of Similarity. In this image, you probably see the groupings of colored circles as rows rather than just a collection of individual circles.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.
Contrast naturally directs the visitor’s eye towards the call-to-action button “Watch Our Brand Video.” Image credit hillsboroaviation.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.
The “About” page on the IA website is an excellent example of a visual hierarchy created using text and visual elements.Visual design and 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.”
Craigslist’s design hasn’t changed much since the time it was founded (in 1995).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.
A pyramid of user needs is much like Maslow’s hierarchy due to its ability to define basic user needs that a product must fulfill before more advanced needs can be addressed. Image credit NNGroup.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.
How visual designers can create positive user experience
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.
Strive for consistent design
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 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.
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.Test visual concepts
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 do not just assume that people will like your design. Test it with them, and measure success based on user behavior. The earlier you test, the more confident you will be in your design decisions. Thus, do not wait for the end of development—use a prototype to test your design decisions.
Be careful with trends
Trends can make your visual design look attractive to users. At the same time, it’s vital to evaluate every trend that you see and try to predict what will be a long-lasting trend and what will soon go out of fashion. You probably won’t want to invest time and effort in changing your visual style too often.
Gradients became popular in early 2016, but they are still a favorite choice for many designers. Image credit Dribbble.Conclusion
When visitors enter a website, it takes only a few seconds for them to create a first impression and that first impression, in most cases, is based on what they see. Of course, when they start interacting with a product, they will evaluate it from all different sides. Investing time and effort into visual design will help create a great first impression with your users/visitors.