What is visual design? What does it have to do with UI/UX design? Should product, user experience, and user interface designers know visual design?
Imagine that you enter an online store for the first time. You look at the first page of the store (Homepage) for a few moments. Everything seems strange. As if nothing is familiar to you. Colors do not attract you. The layout of the page is “one of a kind” that you cannot describe. Nothing catches your eye. You leave the site too soon.
If the design of the digital product (website and application) does not look attractive, harmonious, and appropriate to the user’s eyes at first glance and interaction, that product has no chance to compete and last in the market. What should the owners of digital products do to have a product that attracts users at first glance?
Leaving product design to UI/UX designers because they have learned visual design and can create that harmony, fit, and appeal in the product.
Visual design, just like interaction design, in which the overall interaction and communication between the user (human) and the product (machine) are designed, is one of the main and basic topics in UI education and product design. But why? What is visual design and why is it important in product design? In this content, you will read the answers to these two questions.
Table of Contents
What is visual design?
Each page of the website or application is made up of a set of lines, shapes, words, phrases (texts), and images. If we consider them as materials for making product pages, how should they be arranged together on one page? Is there a standard or not? Is it completely tasteful? Every designer puts those materials together as he wants. If there is a standard, is it the standard of beauty and attractiveness? Or should it also be considered that each of those materials can convey messages and information to the user that is effective in his interaction with the product?
Yes, there are criteria. The beauty and attractiveness of the product are important. But it is more important that the product has beauty and usability at the same time. For this reason, all the materials and elements must be placed together in such a way that they are beautiful in the eyes of the user and help the user to use the product.
Visual design work is the same. This is how interaction-design.org defines visual design:
Visual design aims to improve a designs/product’s aesthetic appeal and usability with suitable images, typography, space, layout, and color.
Visual design elements
What are the elements of visual design? Or in other words, which materials in visual design should be beautiful together and at the same time guide and help the user on the way to interact with the product so that he can reach what he wants?
1. Lines and shapes
With the help of various lines (straight and curved), the designer can divide the page and also create different shapes. For example, the top space of a page can be divided into two equal rectangles, one for placing the site name and logo and the other for menu items.
2. White space (empty or negative space)
Empty spaces on every page of the site are very important and practical. White space around an important image or button can be used to draw the user’s attention. Sometimes it is possible to use white spaces to create a special shape or space on the page. And most importantly, it gave the user’s eyes a little rest with a few empty spaces instead of a busy page.
3. Volume
By giving volume to the shapes or lines, it is possible to create three-dimensional shapes on the two-dimensional screen and highlight the element or image in such a way that the user’s attention is drawn to it and the user understands its great importance.
4. Color
Colors are one of the most important elements in design. Each color has specific characteristics and evokes specific meanings. With colors and playing with colors, you can create contrast and bright shadows and attract the user’s attention as much as possible.
5. Texture
Not all businesses have the same website or app. Sometimes it is necessary to show a certain material and texture (such as wood, paper, metal, etc.) to the user so that the user can feel the subject or product offered on the website more and better. This feeling is very effective in his interaction with the product.
Principles of visual design
We got acquainted with the elements of visual design. Now it’s time to answer the question, how and considering what principles should the designer put those elements together so that they are attractive, useful, and helpful?
1. Principles of Gestalt psychology
The principles of Gestalt psychology are among the most important principles and rules that help the designer in the design and especially the design of the user interface of digital products. These principles and rules tell the designer that the natural tendency of the human brain is to see and understand shapes as a group and a whole when they are put together in different ways. So, if the designer wants to convey to the user the message that the elements are grouped and similar on a page, he must follow the Gestalt rules for their arrangement.
2. Visual hierarchy
The designer with visual design directs the user’s eye and attention on each page. The way the design elements are placed, as well as the special features of each, convey certain messages to the user. With the help of the principles of visual hierarchy, the designer can arrange the elements in the order of their importance and priority for the business (product owner) and in this way direct the user’s eye to the things that must be seen.
3. Highlighting
Not all visual design elements are equally important on a product page. For this reason, sometimes it is necessary to make certain elements stand out more than others. This can be done by making it larger than the others, by creating contrast, or by choosing a very different color. In this way, the element that is more prominent with its color or size affects other elements and becomes the center of attention.
4. Balance and harmony
These two principles are the most important. Visual design should create harmony and balance between every element. Three other principles are important because they help the designer to achieve balance and harmony in the design of elements. If the visual design does not have harmony and order, the user will face a chaotic page that does not know where and which element to look at.
The importance of visual design in UI/UX design
Websites and applications have little time to attract users at first interaction and first glance. If the user cannot easily find the information he wants and do what he wants on each page, that is, if the product does not have usability; the unsatisfied user leaves it. If the design is not beautiful, the user will not be attracted and may leave it. For businesses, this means losing customers.
Therefore, each design element must be beautiful and useful for the user. Because each visual design element directly or indirectly conveys a message to the user and provides information about what needs to be done or what the user wants to do. And it is the visual design that guarantees beauty and usability in the product. And as a result, the success and profitability of the product is guaranteed.
This is exactly why the giants of the technology world like Google and Apple have their design systems. System design is nothing but a guide to designing user interfaces throughout the product. In the system design, it is determined what color, shape, and features the interfaces (such as buttons, icons, etc.) should have in different situations. System design helps to create unity and harmony in product design.