Visual design and interactions

Here's where a design comes to life: how the screen looks, how it behaves or interacts, and more.

We create a visual design by combining both sides, UI design and graphic design, using different elements of design itself, such as colors, types, images, and form, to create and improve our product's user experience.

This part is mostly done by a UI designer. Unlike a UX designer, who is involved in the overall process of the product, a UI designer is a person who creates the visible part of our product and how the product is laid out. The UI designer is responsible for designing each screen or element of our product based on the data that we provide to them.
Besides this, another side that UI designers are responsible for is creating a cohesive style guide for our product and ensuring that a consistent design language is applied across the product.

Tools that can be used to create a UI design include Photoshop, Sketch, Illustrator, Fireworks, and Figma. It all depends on the UI designer's preference. But what's important is to achieve high-fidelity mockup results, as shown in the following:

One general responsibility of the UI designer is to produce high-quality visual designs, from the concept, sketching, and wireframe stage up to its execution. It depends on what kind of digital product we are building; if it is an application, the UI designer has to provide various solutions for visual design, including all different devices, such as desktop, web, or mobile, by providing the assets as well, such as icons, graphics, and other needed graphical materials.

Another key part during the creation of UI design or visual design is interaction.
You experience interaction every day on your mobile devices, for example, when you pull down your mail to refresh it to check whether you have any new emails, or when you swipe left or right to access a specific action or menu. That is the work of an UI interaction designer. Compared to a visual designer, who usually creates static visual assets for us, an UI interaction designer creates animation inside our product.

The interaction designer has to deal with what an interface does after a user performs an action on it, such as touch, swipe, and shake. A properly-done interaction becomes an integral part of the user interface by providing a static visual design with a better understanding of how to use the product.

Tools that interaction designers use to create animations include Adobe After Effects, Core Composer, Principle, Framer Js, and Flinto.

Similar to wireframes and prototypes, we will go deeper into visual design and interactions in Chapter 7, Visual Design Principles and Processes, where I will guide you through which tools to use and how to create a visual design from scratch. Here, these are explained so that you can understand the basics and the design stage, so bear with me.