Lesson 4. Design of UI mini-application

The main thing in the lesson

•

The transition from prototypes to development involves a number of steps: developing concepts, designing UI for basic scenarios, developing a design system and styles.
•

At the stage of creating design concepts, think about the appearance and structure of several key screens, do not try to cover all the functionality.
•

When creating the final design, use the styles developed when creating concepts. Consider the different states of the application. Think about navigation, working on large and small screens, using light and dark color schemes, displaying error messages.
•

For design purposes, we recommend using Figma and library VKUI .
•

A design system is a set of rules, patterns, styles, and components. It greatly speeds up the creation of layouts and products, but is time-consuming to create and maintain. In smaller projects, you can ensure style unity without it with pre-built libraries like VKUI.
•

To transfer to developers, prepare the materials correctly: combine them according to user scenarios, use clear names. Collect images and other downloadable files separately so they can be easily downloaded.
•

Organize regular meetings with developers to showcase design, explain ideas, and get feedback. Provide a few iterations before the layouts go into development.

:::