Let’s figure out the stages of the UI / UX-designer and which tools will help him in each of them.

Idea
At this stage, UX designers create the logic and structure of the future site or app from scratch. At first, they may sketch out ideas schematically, for example on paper, in a text editor or in mind-map services. Designers work closely with the content team at all times to present the content on the site in a convenient and advantageous way.

User flow map
During the creation of a user path map, or User flow, the UX designer works out scenarios for interaction with users. For example, when working with a website for sale, the client needs to get to the product and put it in the cart for further purchase. The designer needs to predict and plot this path.

Sketch (Wireframe).
At this stage, the designer creates a draft of the site or application – wireframe. In this digital sketch designer tries different combinations of shapes of images, bars and text.

Programs for creating sketches:

Adobe Photoshop,
Sketch,
Figma, and so on.

Design concept and development of UI components
A design concept is an image of how the final site should look. It is essentially similar to a person’s character and appearance – color type, mood, behavior. For example, the customer wants the site to be more calm, in muted tones, or, conversely, bright and active. Based on this, UI-designer selects for the future site colors, textures, typography. He can do it from scratch or rely on the existing corporate identity.

Design concept helps to understand where to go designer, as well as agree on ideas with the customer. At this stage, it is possible to evaluate whether the selected design fits the product being sold and how it will be perceived by users.

Prototype
Prototyping is a process of joint work of UX- and UI-designers. At this stage they work out what is to appear on product pages and how to arrange the completed UI elements on them.

In Figma it is possible to make an interactive prototype to test how the user will interact with it.

An interactive prototype helps:

find out how users interact with the site or application,
Identify usability problems,
understand how to better meet users’ needs.
In our experience, it is most convenient to make a prototype in Figma: there it is easy to combine design and development. Below is an example of UI/UX design – an interactive prototype of our website.