User Interface Development for the Primo RPA AI Server
+
+ Intelligent document processing platform
+ and AI agent orchestration
+
+
+
+
Overview
+
+ A service was launched within the company that significantly improved the workflow for text recognition models on documents: loading a dataset from company documents, field tagging, model training, and the subsequent use of the model in other products. This approach provided higher recognition quality and met security requirements—data remained within the company’s network. As work on the product progressed, functionality was added to fine-tune the base neural networks for the company’s specific tasks and to work with skills such as summarization, extraction, generation, and other scenarios.
+
+
+ I was invited to join the project as a UX/UI designer; prior to that, the developers had been building the interface on their own. As a result of this work, the service’s barrier to entry was lowered—significantly more people could use the product without specialized training in AI and OCR.
+
+
+
+
+
+
Before and After
+
+ The service was built using Ant Design on top of React with the Hope UI visual theme for Bootstrap. The company already had several web products and wanted to unify and refresh the user interface, so the development team relied on components from those systems.
+
+
+
+ I immersed myself in the product and, together with the team, analyzed all the functionality in detail.
+
+
+
+ I mapped out user flows based on current scenarios: these showed the team where confusion arose in the interface and user journeys. Based on this, we redesigned the configuration processes themselves: we automated and hid some functions to reduce the risk of errors and eliminate unnecessary routine tasks.
+
+
+ The new approach changed both the perception of the product and the setup process. The interface guides users through the setup steps without disrupting their usual workflows: a fully linear wizard isn’t feasible here—users still need to go back and refine settings to ensure high-quality results.
+
+
Questions for the team regarding the current status
+
The answers will help quantify the impact of the implementation with facts and figures.
+
+
Has the number of support requests decreased?
+
Are users able to complete project setup on their own from start to finish?
+
Does the new interface allow users to create new types of projects based on existing patterns?
+
+
+
+
+
Interface Patterns
+
+ Below are the key areas of the product: how they support learning and model-working scenarios, and how they differ from the previous approach.
+
+
+
Field Mapping
+
+ Mapping links document fields to the target data structure. It was important to make the relationship visual and reversible so that users don’t lose context when making edits.
+
+
+
+
+
+ Field Mapping in the Interface
+
+
+
Dataset, Training, and Quality Control
+
+ The dataset editor, training launch, and quality screens form a single mental path: data preparation → training → result verification.
+
+
+
+
+ Dataset Editor—Current Version
+
+
+
+ Previous version of the editor
+
+
+
+ Training on a dataset
+
+
+
+ Quality and result verification
+
+
+
Inference in the project
+
+ Special Focus: Running and Monitoring the Model Within the Project: The user must understand the status of the inference run and stay in sync with the rest of the settings.
+
+
+
+ Inference in the project
+
+
+
+
+
+
+
+
+
+
+
+ Full vertical screenshot of the inference screen
+
+
+
+ Previous version of inference
+
+
+
+
+
Full-Screen Mode and Import
+
+ This isn’t about “long tasks,” but rather about processes in a separate context: some block work on the project until they’re finished, while others run in parallel in a separate window, allowing you to continue configuring project settings. We moved this functionality to a separate window because there were several entry points for these tasks, and a standard modal wasn’t enough—you had to complete a separate process elsewhere and then return to the project settings. This approach reduced the amount of development and testing required.
+
+
+ Below are three full-screen canvas options: import in a separate window, panel mode, and the minimalist “zen” mode.
+
+
+
+ Import in a modal window
+
+
+
+ Full-screen mode with panels
+
+
+
+ Minimal mode without unnecessary chrome
+
+
+
Future Development
+
+ Several major items remained on the roadmap: scenarios related to the LLM (lists, statuses, actions), a step-by-step training wizard with progress tracking and undo functionality, and a full-featured OCR engine with region marking and on-page quality previews. These were not included in the minimum set for the interface’s first production release, but the established patterns should accommodate them without major rework.
+
+
+
+
+
Process and Handoff
+
+ Work proceeded through regular synchronization with the development team: mockups, specifications, and a phased handoff to the front end. After I left the project, the team looked for the next designer and structured the onboarding process based on the existing design assets and layout guidelines.
+
+
+
Questions for the Next Designer
+
+
What turned out to be unclear during the first two weeks on the project?
+
Which artifacts and handover guidelines proved most useful?
+
What had to be redesigned and why.
+
How would you describe the current state of UX in three sentences?
+
+
+
+
+
Conclusion
+
+ The AI Server interface in Primo RPA was transformed from an “engineer-oriented developer interface” into a product with intuitive configuration logic and user guidance. The focus on user flows and routine automation reduced the implementation burden and paved the way for broader adoption within the company and among clients.
+
+
+
+
-
-
-
-
Product Design · AI
-
Разработка интерфейса для Primo RPA AI Server
-
- Платформа интеллектуальной обработки документов
- и оркестрации ИИ-агентов
-
-
-
-
Обзор
-
- Внутри компании появился сервис, который заметно улучшил работу с моделями для распознавания текста на документах: загрузка датасета из документов компании, разметка полей, обучение модели и дальнейшее использование модели в других продуктах. Такой подход давал более высокое качество распознавания и соответствовал требованиям безопасности — данные оставались внутри контура компании. Уже в ходе работы в продукте появился функционал дообучения (fine-tuning) базовых нейросетей под задачи компании и работы со скилами: суммаризация, извлечение, генерация и другие сценарии.
-
-
- В проект меня пригласили как UX/UI дизайнера: интерфейс до этого собирали разработчики своими силами. В результате работы у сервиса снизился порог входа — продуктом могли пользоваться существенно больше людей без специальной подготовки в области ИИ и OCR.
-
-
-
-
-
-
Было и стало
-
- Сервис был собран на Ant Design под React с визуальной темой Hope UI для Bootstrap. У компании уже было несколько веб-продуктов с задачей унифицировать и освежить интерфейс, поэтому в разработке опирались на компоненты этих систем.
-
-
-
- Я погрузился в продукт и вместе с командой детально разобрал весь функционал.
-
-
-
- По текущим сценариям собрал юзерфлоу: они показали команде, где в интерфейсе и в маршрутах пользователя возникает путаница. На этой основе переработали сами процессы настройки: часть функций автоматизировали и спрятали, чтобы снизить риск ошибок и убрать лишнюю рутину.
-
-
- Новый подход изменил и восприятие продукта, и процесс настройки. Интерфейс ведёт по этапам настройки, при этом не ломает привычные сценарии: полностью линейный визард здесь невозможен — пользователю всё равно нужно возвращаться назад и уточнять параметры ради качества результата.
-
-
Вопросы к команде по текущему состоянию
-
Ответы помогут зафиксировать эффект от внедрения в цифрах и фактах.
-
-
Сократилось ли количество обращений в поддержку.
-
Получается ли у пользователей самостоятельно пройти настройку проекта от начала до конца.
-
Позволяет ли новый интерфейс заводить новые типы проектов, опираясь на уже заложенные паттерны.
-
-
-
-
-
Паттерны интерфейса
-
- Ниже — ключевые зоны продукта: как они поддерживают сценарии обучения и работы с моделью и чем отличаются от прежнего подхода.
-
-
-
Сопоставление полей (маппинг)
-
- Маппинг связывает поля документа с целевой структурой данных. Важно было сделать связь наглядной и обратимой, чтобы пользователь не терял контекст при правках.
-
-
-
-
-
- Сопоставление полей в интерфейсе
-
-
-
Датасет, обучение и контроль качества
-
- Редактор датасета, запуск обучения и экраны качества образуют один ментальный путь: подготовка данных → обучение → проверка результата.
-
-
-
-
- Редактор датасета — текущая версия
-
-
-
- Предыдущая версия редактора
-
-
-
- Обучение по датасету
-
-
-
- Качество и проверка результата
-
-
-
Inference в проекте
-
- Отдельный фокус — запуск и контроль модели внутри проекта: пользователь должен понимать состояние прогона и не терять связь с остальными настройками.
-
-
-
- Inference в проекте
-
-
-
-
-
-
-
-
-
-
-
- Полный вертикальный кадр экрана inference
-
-
-
- Предыдущая версия inference
-
-
-
-
-
Полноэкранный режим и импорт
-
- Речь не о «длинных задачах», а о процессах в отдельном контексте: одни до завершения блокируют работу с проектом, другие идут параллельно в отдельном окне, и при этом можно продолжать настраивать параметры проекта. Функционал вынесли в отдельное окно, потому что точек входа в такие задачи было несколько, а обычной модалки было недостаточно — нужно было пройти отдельный процесс в стороне и затем вернуться к настройкам проекта. Такой подход сократил объём разработки и тестирования.
-
-
- Ниже — три варианта полноэкранного холста: импорт в отдельном окне, режим с панелями и минималистичный «zen».
-
-
-
- Импорт в модальном окне
-
-
-
- Полноэкранный режим с панелями
-
-
-
- Минимальный режим без лишнего chrome
-
-
-
Дальнейшее развитие
-
- В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без больших переделок.
-
-
-
-
-
Процесс и передача
-
- Работа шла через регулярные синхронизации с разработкой: макеты, спецификации и поэтапный handoff во фронт. После моего выхода из проекта команда искала следующего дизайнера и выстраивала онбординг по уже оформленным артефактам и правилам компоновки.
-
-
-
Вопросы следующему дизайнеру
-
-
Что оказалось неочевидным в первые две недели в проекте.
-
Какие артефакты и правила передачи пригодились больше всего.
-
Что пришлось пересобрать и по какой причине.
-
Как в трёх предложениях описать текущее состояние UX.
-
-
-
-
-
Итог
-
- Интерфейс AI Server в Primo RPA перевели от «инженерного интерфейса разработчиков» к продукту с понятной логикой настройки и сопровождения пользователя. Упор на юзерфлоу и автоматизацию рутины снял часть нагрузки с внедрения и открыл дорогу к более широкому использованию внутри компании и у клиентов.
-
-
-
-
+
+
+
-
-
-
-
+
+
+
+
diff --git a/public/en/cases/ai-platform-primo-rpa-v2/index.html b/public/en/cases/ai-platform-primo-rpa-v2/index.html
index 65decf5..fff78f9 100644
--- a/public/en/cases/ai-platform-primo-rpa-v2/index.html
+++ b/public/en/cases/ai-platform-primo-rpa-v2/index.html
@@ -5,9 +5,9 @@
- AI Server в Primo RPA — кейс
+ AI Server in Primo RPA — Case Study
-
-
+
-
+
diff --git a/public/en/cases/ai-platform-primo-rpa/index.html b/public/en/cases/ai-platform-primo-rpa/index.html
index bfa5d43..0f2ee39 100644
--- a/public/en/cases/ai-platform-primo-rpa/index.html
+++ b/public/en/cases/ai-platform-primo-rpa/index.html
@@ -1,13 +1,13 @@
-
-
-
-
-
-
- AI Server в Primo RPA — кейс
+
+
+
+
+
+
+ AI Server in Primo RPA — Case Study
-
+
-
-
-
-
-
+
+
+
+
+
Skip to case content
User Interface Development for the Primo RPA AI Server
+
+ Intelligent document processing platform
+ and AI agent orchestration
+
+
+
+
Overview
+
+ The AI Server product is deployed on clients’ internal servers. It enables the use of neural networks within the company’s internal network and is configured via a web interface.
+
+
+ I was invited to join the project as a UX/UI designer. The product was in the active testing phase; feedback from customers made it clear that the configuration was too complex: only experts and the Primo RPA implementation team could handle it. The complex configuration reduced the product’s appeal and hindered scaling.
+
+
+ My task was to simplify the configuration process and lower the barrier to entry, thereby reducing the workload on technical support and the implementation team—so that customers could configure the service themselves to meet their specific needs.
+
+
+
+ Below is an in-depth look at the product, examples of completed tasks, and interface patterns.
+
+
+
+
+
Overview
+
+ I began by getting to know the team: who was responsible for the product, who was responsible for implementation, and how everything was currently organized. I spoke with configuration experts, categorized key and secondary scenarios, and compiled a visualization of user behavior. I worked closely with the development team to identify areas where the interface could be simplified and the setup process accelerated.
+
+
+
+ The product was already in use by customers, so we couldn’t halt development and completely rebuild the interface. I had to decide in what order and which parts to address in the redesign. I incorporated the most significant changes into the current development plan without disrupting the release schedule.
+
+
+ I had to plan the interface changes with the framework in mind. At the time, it was
+ Ant Design on top of React, styled after
+ Hope UI.
+
+
+ I only had to create new components as a last resort; the priority was to reuse the existing library. This is evident in the final screens: the interface is mostly built from ready-made blocks, rather than from scratch.
+
+
+
+
+
Completed Tasks
+
+ Interface elements that I redesigned or built almost from scratch. Below are individual tasks from the project that I wanted to showcase in my portfolio—not an overview of the entire product.
+
+
+
Main navigation of the service
+
+ The service used a layout common for admin panels: a side menu on the left and content on the right. The screenshot shows that this page structure didn’t make effective use of the available screen space. When you open the project, the navigation for the project sections appears on the left—intermixed with the main navigation—which confuses the user. This situation needed to be fixed.
+
+ The updated navigation is now more compact and remains familiar to most users. There is significantly more space for content. As you’ll see later, projects will have their own separate navigation that won’t overlap with the main navigation. At the same time, the service’s overall aesthetic has improved.
+
+
Navigation Within a Specific Project
+
+ Users retain access to both the navigation within a project and the service’s main navigation. Different project types contain varying numbers of items, and this solution allows for their optimal placement.
+
+
+
+ NLP Project
+
+
+
+ OCR project
+
+
+ I’d like to highlight the design of the navigation items. Visually, it subtly suggests that it’s more convenient to go through the setup step by step, but the sections still function as regular tabs: you can switch between them in any order.
+
+
+
+ Shape of navigation items
+
+
Dataset Annotation Editor
+
+ This is the screen where users spend the most time. Annotating fields across hundreds of images is monotonous work, but the quality of the data used to train the model depends on it. The previous editor stood out sharply from the service’s overall style: it looked cluttered and was confusing in places, especially when working with fields.
+
+
+
+ Previous version of the dataset editor
+
+
+ I broke down the editor into microscenarios, organized them by priority and how they relate to each other. The team and I discussed how to make the user experience smoother and more intuitive. In the new page structure, I reserved space for new functionality and incorporated the same design patterns used throughout the rest of the service. The editor’s design now aligns with the overall style.
+
+
+
+ Updated version of the dataset editor
+
+
+ The schematic sketch shows that the page has become symmetrical: almost all the space is devoted to the image being marked up. Actions are grouped by panels—making it easier to find the desired function.
+
+
+
+ Frame: Default mode
+
+
+ Added a “Full Screen” mode. Advanced users usually hide unnecessary panels and work with markup using keyboard shortcuts and the bottom panel. The side panels can be collapsed when more space is needed for the image—this is especially important on smaller monitors.
+
+
+
+
+
+
+
+
+
+
+ Editor view in “Full Screen” mode
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Layout options in "Full Screen" mode
+
+
+ The bottom toolbar lets you switch between images and perform quick actions.
+
+
+
+ Bottom toolbar
+
+
+
Model training configuration cards
+
+ After labeling the dataset, the model can be fine-tuned. As usual, our team broke down all user actions for this task. We created several layout options for this page; the one with a card feed turned out to be the most successful.
+
+
+
+ View of the Model Training section
+
+
+ At the top of the feed, the user sees a training configuration card: it displays the annotation results for the active dataset, allows the user to set parameters, and initiates fine-tuning.
+
+
+
+ Training Configuration Card
+
+
+ The card includes a separate section with an assessment of the dataset’s annotation quality and a section with parameters to configure before starting training.
+
+
+
+ A separate card will appear below for each process that is started. You can run multiple processes with different parameters and then compare which configuration performed better.
+
+
+
+ Training Process Card
+
+
+ Within the card, information and actions are organized into logical blocks. We considered various layout options and ultimately settled on a scheme that proved to be more user-friendly than the others.
+
+
+
+ Wireframe of the Learning Process Card
+
+
+ The cards can be collapsed. For convenience, the name and status are displayed in the header.
+
+
+
+ Collapsed Card
+
+
+ After refining these cards, we identified patterns that were later used in other sections of the product. This makes it easier to maintain a consistent style across the interface.
+
+
+
Field Parameter Configuration
+
+ On one of the pages in the project section, we needed to allow users to configure unique field parameters for a dataset. The editor required a large area for an image (a scanned document), and there could be dozens of fields, each with its own dependent parameters and types.
+
+
+ The video shows the prototype of the finished solution in action.
+
+
+
+
+
+ Field mapping in the interface
+
+
+ The interface turned out to be compact and clean. The mechanics aren’t immediately obvious, but after a brief learning curve, users find it comfortable to use.
+
+
+ Developing the editor proved to be an interesting and challenging task for me: there were many drafts and different behavior options. In the end, we settled on a version that met all the requirements my team and I had defined.
+
+
+
Modal windows on a separate screen
+
+ In the service, some tasks need to be performed alongside other work. For such scenarios, we implemented the following: a modal window opens on a separate page.
+
+
+
+ Importing a dataset in a modal window
+
+
+ A placeholder is displayed on the project page: the process is in progress, with a button next to it to navigate to it.
+
+
+
+ Importing a dataset within a project
+
+
+ These placeholders appear in several sections of the project—depending on whether you can work with that section while the task is active.
+
+
+
+ This approach turned out to be technically simpler than selectively disabling buttons on individual pages.
+
+
+
+
+
+
Handoff to Development
+
+ Once a week, the team met to discuss the design. The calls were long but productive. We created a weekly list of design tasks, adjusting priorities and deadlines to align with release plans.
+
+
+ I created the designs in Figma and sent links to the finished user flows to the development team. We didn’t set up a separate design system or UI kit—the product already had a ready-made framework.
+
+
+ From time to time, I would have one-on-one calls with the front-end developer to clarify details about the mockups or explain how the interface should behave. After the layout was completed, I provided feedback on revisions to ensure the result matched the intended behavior and appearance of the interface.
+
+
+
+
+
Change in Designers
+
+ I managed this project alongside others, so I had to balance my workload. The company hired a new designer—my task was to bring her up to speed and oversee the results of her work on each task. Once she was up to speed, responsibility for the project shifted entirely to her.
+
+
+
+
+
Result
+
+ The Primo RPA AI Server interface now has a consistent look and feel. It is user-friendly even for those who are not yet experts in AI. The interface is designed to accommodate future changes, allowing for the addition of new features without major overhauls.
+
+
+
+
-
-
-
-
Product Design · AI
-
Разработка интерфейса для Primo RPA AI Server
-
- Платформа интеллектуальной обработки документов
- и оркестрации ИИ-агентов
-
-
-
-
Обзор
-
- Продукт AI Server разворачивается на внутренних серверах клиентов. Он позволяет использовать нейросети во внутреннем контуре компании и настраивается через веб-интерфейс.
-
-
- Меня пригласили на проект как UX/UI-дизайнера. Продукт был в активной стадии тестирования; по обратной связи от клиентов стало ясно, что настройка слишком сложна: с ней справляются только эксперты и команда внедрения Primo RPA. Сложная настройка снижала привлекательность продукта и тормозила масштабирование.
-
-
- Передо мной стояла задача упростить настройку и снизить порог входа, разгрузить техподдержку и отдел внедрения — чтобы клиенты могли самостоятельно настраивать сервис под свои задачи.
-
-
-
- Ниже — погружение в продукт, примеры выполненных задач и паттерны интерфейса.
-
-
-
-
-
Погружение
-
- Работу начал со знакомства с командой: кто за продукт, кто за внедрение, как всё устроено сейчас. Пообщался с экспертами по настройке, разделил ключевые и вспомогательные сценарии, собрал визуализацию поведения пользователя. Плотно работал с разработкой и искал, где интерфейс можно упростить и ускорить настройку.
-
-
-
- Продукт уже использовали клиенты, поэтому нельзя было остановить разработку и пересобрать интерфейс целиком. Пришлось решать, в каком порядке и какие части трогать в редизайне. Самые крупные изменения встраивал в текущий план разработки, без отрыва от релизов.
-
-
- Прорабатывать изменения в интерфейсе нужно было с учётом используемого фреймворка. На тот момент это был
- Ant Design под React со стилизацией под
- Hope UI.
-
-
- Новые компоненты приходилось придумывать только в крайних случаях, в приоритете было переиспользовать уже существующую библиотеку. По итоговым экранам это видно: интерфейс в основном собран из готовых блоков, а не с нуля.
-
-
-
-
-
Выполненные задачи
-
- Фрагменты интерфейса, которые я переработал или собрал почти с нуля. Ниже — отдельные задачи из проекта, которые хотелось показать в портфолио, а не обзор всего продукта.
-
-
-
Главная навигация сервиса
-
- В сервисе стояла привычная для админок схема: слева боковое меню, справа контент. На скриншоте видно, что такая структура страницы неэффективно использовала доступное рабочее пространство на экране. Если открыть проект, слева окажется навигация по разделам проекта — вперемешку с главной, и это путает пользователя. Эту ситуацию нужно было исправить.
-
- Обновлённая навигация стала компактной и всё так же привычна большинству пользователей. Для контентной части пространства стало значительно больше. Как будет видно дальше, у проектов внутри появится отдельная навигация, которая не будет перекрывать главную. При этом улучшилась эстетическая составляющая дизайна сервиса.
-
-
Навигация внутри конкретного проекта
-
- У пользователя остаётся доступ и к навигации внутри проекта, и к главной навигации сервиса. Разные типы проекта содержат разное количество пунктов, и такое решение позволяет удачно их разместить.
-
-
-
- NLP-проект
-
-
-
- OCR-проект
-
-
- Отдельно отмечу идею с формой пунктов навигации. По виду она мягко подсказывает, что настройку удобнее проходить по шагам, но разделы по-прежнему работают как обычные табы: можно переключаться в любом порядке.
-
-
-
- Форма пунктов навигации
-
-
Редактор разметки датасета
-
- На этом экране проводят больше всего времени. Разметка полей на сотнях изображений — монотонная работа, но от неё зависит, насколько качественными будут данные для обучения модели. Прежний редактор сильно выбивался из общего стиля сервиса: выглядел перегруженно и местами сбивал с толку, особенно в работе с полями.
-
-
-
- Предыдущая версия редактора датасета
-
-
- Я разобрал редактор на микросценарии, выстроил их по приоритету и связке между собой. С командой обсудили, как сделать поведение пользователя плавнее и понятнее. В новой структуре страницы заложил место под новый функционал и те же паттерны, что в остальном сервисе. Дизайн редактора привёл к общей стилистике.
-
-
-
- Обновлённая версия редактора датасета
-
-
- На схематическом наброске видно, что страница стала симметричной: почти всё пространство уходит на размечаемое изображение. Действия сгруппированы по панелям — нужную функцию проще найти.
-
-
-
- Каркас: режим по умолчанию
-
-
- Добавил режим «Во весь экран». Продвинутые пользователи обычно прячут лишние панели и работают с разметкой через горячие клавиши и нижнюю панель. Боковые панели можно свернуть, когда нужно больше места под изображение — на небольших мониторах это особенно имеет значение.
-
-
-
-
-
-
-
-
-
-
- Вид редактора в режиме «Во весь экран»
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Варианты рабочего вида в режиме «На весь экран»
-
-
- Нижняя панель позволяет переключаться между изображениями и выполнять быстрые действия.
-
-
-
- Нижняя панель инструментов
-
-
-
Карточки настройки обучения модели
-
- После разметки датасета модель можно дообучить (fine-tuning). Мы с командой, как обычно, разобрали все действия пользователя для этой задачи. Сделали несколько вариантов компоновки этой страницы; самым удачным оказался вариант с лентой из карточек.
-
-
-
- Вид раздела обучения моделей
-
-
- В начале ленты у пользователя карточка с настройкой обучения: через неё видно результат разметки активного датасета, задают параметры и запускают fine-tuning.
-
-
-
- Карточка настройки обучения
-
-
- В карточке отдельный блок с оценкой качества разметки датасета и блок с параметрами перед запуском обучения.
-
-
-
- Под каждый запущенный процесс ниже появится отдельная карточка. Можно завести несколько процессов с разными параметрами и потом сравнить, какая конфигурация сработала лучше.
-
-
-
- Карточка процесса обучения
-
-
- Внутри карточки информация и действия разнесены по логическим блокам. Мы рассматривали разные варианты компоновки и в итоге зафиксировали схему, которая оказалась удобнее остальных.
-
-
-
- Вайрфрейм карточки процесса обучения
-
-
- Карточки могут быть свёрнуты. Для удобства в шапку вынесены название и статус.
-
-
-
- Свёрнутая карточка
-
-
- После проработки этих карточек появились паттерны, которые потом использовались в других разделах продукта. Так проще держать интерфейс в едином стиле.
-
-
-
Настройка параметров полей
-
- На одной из страниц раздела проекта нужно было дать возможность настроить уникальные параметры полей для датасета. Редактору требовалась большая область под изображение (скан документа), могло быть десятки полей, у каждого — свои зависимые параметры и типы.
-
-
- На видео — работа прототипа готового решения.
-
-
-
-
-
- Сопоставление полей в интерфейсе
-
-
- Интерфейс получился компактным и лаконичным. Механика не считывается с первого взгляда, но после короткого обучения пользователю в нём комфортно.
-
-
- Редактор для меня оказался интересной и сложной задачей: было много черновиков и вариантов поведения. В финале остался вариант, который закрывал все требования, которые мы с командой сформулировали.
-
-
-
Модальные окна на отдельном экране
-
- В сервисе часть задач нужно выполнять параллельно с остальной работой. Для таких сценариев сделали так: модальное окно открывается на отдельной странице.
-
-
-
- Импорт датасета в модальном окне
-
-
- На странице проекта отображается заглушка: процесс идёт, рядом кнопка перехода к нему.
-
-
-
- Импорт датасета внутри проекта
-
-
- Такие заглушки есть в нескольких разделах проекта — в зависимости от того, можно ли с ним работать, пока задача активна.
-
-
-
- Такой вариант оказался технически проще, чем точечно блокировать кнопки на отдельных страницах.
-
-
-
-
-
-
Передача в разработку
-
- Раз в неделю команда собиралась на обсуждение дизайна. Созвоны были длительными, но продуктивными. На неделю формировали список задач для дизайна, приоритеты и сроки подстраивали под планы релизов.
-
-
- Я делал дизайн в Figma, в разработку передавал ссылки на готовые юзерфлоу. Отдельную дизайн-систему или UI-kit не заводили: в продукте уже был готовый фреймворк.
-
-
- Время от времени созванивался с верстальщиком тет-а-тет, если нужно уточнить детали по макетам или объяснить поведение интерфейса. После вёрстки давал фидбэк на правки, чтобы результат не отличался от задуманного поведения и вида интерфейса.
-
-
-
-
-
Смена дизайнера
-
- Проект вёл параллельно с другими, нагрузку приходилось распределять. В компанию наняли нового дизайнера — моя задача была ввести её в курс дела и курировать результат по задачам. После адаптации работа над проектом полностью перешла под её ответственность.
-
-
-
-
-
Итог
-
- Интерфейс Primo RPA AI Server стал выглядеть консистентно. С ним могут работать пользователи, которые ещё не эксперты в области ИИ. Для будущих изменений в интерфейсе заложена возможность наращивать функционал без больших переделок.
-
Токены, типографика, сетка, компоненты и блоки лонгрида кейса
-
- Переключайте тему, акцент и шрифт через плавающую панель справа. При глобальных правках стилей (токены,
- компоненты, блоки лонгрида) обновляйте и эту страницу — живой каталог UI проекта.
-
-
-
-
-
Цвета
-
- Акцент и «холод/тепло» всего UI задаются тремя числами в модели HSL (Hue — оттенок,
- Saturation — насыщенность, Lightness — светлота) на <html>. Из них собирается
- --accent и производные токены; нейтральные фоны слегка подмешивают тот же оттенок
- (--neutral-accent-tint). Светлая/тёмная тема — data-theme, mesh —
- data-mesh-bg. Меняется в FAB справа.
-
-
Что такое --theme-h, --theme-s, --theme-l
-
-
- --theme-h — оттенок (Hue), позиция на цветовом круге 0–360°. Сдвиг hue
- перекрашивает кнопки, ссылки, mesh-градиент и квадратные акценты (--accent-square-2 …
- 4), не трогая вручную каждый hex.
-
-
- --theme-s — насыщенность: насколько «чистый» цвет, а не серый.
-
-
- --theme-l — светлота акцента: темнее или ярче основной фирменный тон
- (в панели обычно ограничен диапазоном, чтобы кнопки оставались читаемыми).
-
-
-
- В CSS это выглядит так:
- --accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)).
- Значения пишутся в localStorage (siteThemeV1) и подставляются inline-скриптом в
- head, чтобы не было вспышки «чужого» цвета при загрузке.
-
-
-
-
- --bg
-
-
-
- --bg-elevated
-
-
-
- --surface
-
-
-
- --text
-
-
-
- --text-muted
-
-
-
- --line
-
-
-
- --accent
-
-
-
- --accent-text
-
-
-
- --accent-soft
-
-
-
- Дополнительно: квадратичные оттенки mesh — --accent-square-2 … 4; они зависят от hue.
-
-
-
Шрифты
-
- Пара шрифтов — data-font на <html> (FAB «Типографика»): задаёт
- --font-accent (заголовки) и --font (проза). Шкала в таблицах: класс, пример, назначение.
-
-
Семейства
-
-
-
-
-
data-font
-
Стек
-
Где
-
-
-
-
-
merriweather
-
Merriweather + Alice
-
Пара по умолчанию; Alice — основной текст, Merriweather — акцентные заголовки
-
-
-
mono
-
Source Code Pro + PT Mono
-
Моноширинная пара
-
-
-
geologica
-
Geologica + PT Sans
-
Гротеск + нейтральная проза
-
-
-
-
-
-
Типографическая шкала
-
-
-
-
-
Класс
-
Пример
-
Назначение
-
-
-
-
-
.hero__eyebrow
-
Подпись секции
-
Hero, ввод кейса
-
-
-
.hero__title
-
-
- Display заголовок
-
-
-
H1 главной; на DS уменьшен для колонки
-
-
-
.section__title
-
Секция
-
«Навыки», «Портфолио», контакты; основной шрифт, без капса
-
-
-
.case-page__h1
-
Заголовок страницы
-
H1 кейса / Design System
-
-
-
.case-page__sub
-
Лид под заголовком
-
Подзаголовок под H1
-
-
-
.section__prose
-
Основной текст абзаца.
-
Проза, списки, ссылки в статье
-
-
-
h2 в .case-article
-
Подсекция H2
-
Разделы лонгрида (как «Цвета»)
-
-
-
h3 в .case-article
-
Подсекция H3
-
Подразделы внутри H2; отступы в main.css: сверху 3.25rem, снизу 1.5rem, после figure 4rem, h3+h3 3.5rem
case-media-gallery--wide схлопывается в ширину колонки
-
-
-
-
-
-
Hero: одна → две колонки
-
Схема .hero__grid (сжато до 860px):
-
-
-
Текст
-
Визуал
-
-
-
-
Контакты: 1 → 2 → 4
-
Демо .contact-grid (плейсхолдеры, без переходов):
-
-
-
-
-
-
- 1 col
- < 560px
-
-
-
-
-
-
-
-
- 2 col
- ≥ 560px
-
-
-
-
-
-
-
-
- 4 col
- ≥ 1024px
-
-
-
-
-
-
-
-
- Сетка
- на главной
-
-
-
-
-
- Навыки: мозаика на широком экране — см.
- главную, #skills. Портфолио: карусель на
- 100vw с --projects-card-width и JS-прокруткой — на главной
- #projects.
-
-
-
Wide в кейсах
-
- .case-media--wide, .case-media-gallery--wide и .case-callout шире
- колонки статьи: min(100vw − 2×padding, content + 8rem), с полями --space. На узком
- экране (до 640px) wide схлопывается в ширину колонки. Кадры с data-image-viewer — обводка и hover
- как у .case-video-shell (живые примеры — демо элементов кейса). Подпись под видео —
- figcaption по центру колонки.
-
-
-
Типографика и motion
-
- Fluid type: clamp() на .hero__title, .section__title,
- .case-page__h1. Скругления (data-radius) сетку не меняют. Для длинных скринов и
- анимаций учитывается prefers-reduced-motion: reduce.
-
-
-
Компоненты
-
Живые примеры; оболочка (шапка, FAB, футер, cookie) уже подключена на этой странице.
- Пока img ещё не загрузился, initImageLoadPlaceholder вешает
- .is-img-loading на картинку и .has-img-loading на обёртку. Слой фона —
- ::before, один блеск слева направо — ::after (img-ph-shine-sweep).
- Иконки, SVG и мелкие картинки до 40px пропускаются;
- отключить точечно: data-no-img-placeholder. Ниже — зафиксированное демо (на сайте классы снимаются
- после load).
-
- На главной полоса .section--surface визуально читается через mesh; в кейсах фон страницы
- ровный — ниже компактное демо с background: var(--surface).
-
- Горизонтальные разделители: линия или просто воздух (отступ). Модификаторы --line, --air, --air-lg.
-
-
-
-
-
-
-
.sep · .sep--line · .sep--air · .sep--air-lg
-
-
Блоки
-
-
- Разметка лонгрида кейса: медиа и галереи, карточки ссылок, видео, callout, wide-блоки и прочие partials.
- Живой эталон со всеми вариантами — на отдельной странице; оттуда копируют куски при сборке нового кейса.
-
Tokens, typography, grid, components, and longgrid blocks
+
+ Switch between themes, accents, and fonts using the floating panel on the right. When making global style changes (tokens,
+ components, longgrid blocks), be sure to update this page as well—it’s the project’s live UI catalog.
+
+
+
+
+
Colors
+
+ The accent and “cool/warm” tones of the entire UI are defined by three numbers in the HSL model (Hue,
+ Saturation, Lightness) at <html>. From these,
+ --accent and derived tokens; neutral backgrounds are slightly tinted with the same hue
+ (--neutral-accent-tint). Light/dark theme — data-theme, mesh —
+ data-mesh-bg. Can be changed via the FAB on the right.
+
+
What is --theme-h, --theme-s, --theme-l
+
+
+ --theme-h — hue (Hue), position on the color wheel 0–360°. A hue shift
+ recolors buttons, links, the mesh gradient, and square accents (--accent-square-2 …
+ 4), without having to manually adjust each hex value.
+
+
+ --theme-s — Saturation: how “pure” the color is, rather than gray.
+
+
+ --theme-l — Accent lightness: darker or lighter than the primary brand color
+ (usually limited by the panel’s range to ensure buttons remain readable).
+
+
+
+ In CSS, it looks like this:
+ --accent: hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)).
+ Values are written in localStorage (siteThemeV1) and are inserted by an inline script into
+ headto prevent a “foreign” color from flashing during loading.
+
+
+
+
+ --bg
+
+
+
+ --bg-elevated
+
+
+
+ --surface
+
+
+
+ --text
+
+
+
+ --text-muted
+
+
+
+ --line
+
+
+
+ --accent
+
+
+
+ --accent-text
+
+
+
+ --accent-soft
+
+
+
+ Additionally: quadratic mesh shades — --accent-square-2 … 4; they depend on hue.
+
+
+
Fonts
+
+ A pair of fonts — data-font on <html> (FAB “Typography”): sets
+ --font-accent (headings) and --font (body text). Scale in tables: class, example, purpose.
+
+ Headings use clamp() — scale relative to the viewport; see the “Grid” section for more details.
+
+
+
Grid and Responsive
+
+ There is no separate 12-column grid: a full-bleed layout with side margins
+ --space and local CSS Grid within sections. The content column for DS and case studies —
+ .case-article (max-width 48rem).
+
case-media-gallery--wide collapses to the width of a column
+
+
+
+
+
+
Hero: one → two columns
+
Layout .hero__grid (compressed to 860px):
+
+
+
Text
+
Visual
+
+
+
+
Contacts: 1 → 2 → 4
+
Demo .contact-grid (placeholders, no transitions):
+
+
+
+
+
+
+ 1 col
+ < 560px
+
+
+
+
+
+
+
+
+ 2 col
+ ≥ 560px
+
+
+
+
+
+
+
+
+ 4 col
+ ≥ 1024px
+
+
+
+
+
+
+
+
+ Grid
+ on the homepage
+
+
+
+
+
+ Skills: mosaic layout on wide screens—see
+ the homepage, #skills. Portfolio: carousel on
+ 100vw with --projects-card-width and JS scrolling — on the homepage
+ #projects.
+
+
+
Wide in case studies
+
+ .case-media--wide, .case-media-gallery--wide and .case-callout wider
+ article columns: min(100vw − 2×padding, content + 8rem), with margins --space. On a narrow screen (up to 640px), "wide" collapses to the width of the column. Images with data-image-viewer — the outline and hover effects
+ are the same as .case-video-shell (live examples — case study element demo). The caption below the video is
+ figcaption centered in the column.
+
+
+
Typography and Motion
+
+ Fluid type: clamp() on .hero__title, .section__title,
+ .case-page__h1. Rounded corners (data-radius) do not change the grid. For long screenshots and
+ animations, the prefers-reduced-motion: reduce.
+
+
+
Components
+
Live examples; the shell (header, FAB, footer, cookie) is already integrated on this page.
+ While img hasn't loaded yet, initImageLoadPlaceholder it
+ .is-img-loading on the image and .has-img-loading the wrapper. The background layer is
+ ::before, a single glow from left to right— ::after (img-ph-shine-sweep).
+ Icons, SVGs, and small images up to 40px are skipped;
+ disable selectively: data-no-img-placeholder. Below is a fixed demo (on the website, the classes are removed
+ after load).
+
+ Loading large images in the viewer (.case-image-viewer) is indicated by a monospaced Braille spinner—just like in TUI. Pure CSS, no JS: 10 frames cycle through an animation. Reusable class: steps()an animation. Reusable class .tui-spinner
+ (color — --accent, font—system mono).
+
+ On the homepage, the strip .section--surface is visually presented using mesh; in other cases, the page background is
+ solid—see the compact demo below with background: var(--surface).
+
+ Horizontal separators: a line or simply white space (indentation). Modifiers --line, --air, --air-lg.
+
+
+
+
+
+
+
.sep · .sep--line · .sep--air · .sep--air-lg
+
+
Blocks
+
+
+ Longgrid case layout: media and galleries, link cards, videos, callouts, wide blocks, and other partials.
+ A live example with all variations is available on a separate page; use it to copy sections when building a new case.
+
+ On the homepage in the section #mini-projects card mp-card section on the homepage in a masonry grid. Types, cells, and the live
+ layout are on a separate page.
+
+ Work on the Lunacy interface as part of the Icons8 team: user flow, prototypes of complex scenarios, refinement of functionality and
+ visual logic. Below are screenshots from the process (the order of the screenshots is based on the filenames).
+
General view of the application—the workspace with an open document, toolbars, and the canvas. This screen demonstrates Lunacy’s basic layout: the left panel shows layers, the right panel shows object properties, and the top bar displays the context bar with the current tool. This serves as the starting point for the rest of the materials on the page.
+
+
+ Overview of the Lunacy window.
+
+
Next are individual scenarios and interface iterations, presented in the order that makes the most sense in terms of context and file names.
+
+
Blob: Settings on the Canvas
+
Working with a blob in the context of the canvas is a separate scenario, prior to the analysis of the panel across versions.
+
+
+ blob_settings_on_canvas
+
+
The settings panel for these tasks evolved through a series of mockups from v1 to v9—they’re compiled in the grid below.
+
+
Components and Comparison
+
Comparison of components and the update indicator in the panel.
Four consecutive frames show the development of a single subproject: from the panel and sketches to refining the behavior in modals.
+
+
Blob settings panel: versions v1–v9
+
+ Panel iterations by filename blob_settings_panel_v1 … v9. Grid based on text width, three columns on a
+ wide screen; as the window narrows, the number of columns decreases automatically.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Nine versions in a row: read from left to right, top to bottom.
+
+
The grid is convenient for step-by-step comparisons; for details, clicking on a cell opens a full-screen view.
+
+
Slider: versions v1–v18 and frame 14
+
+ Ordered by name: slider_v1 … slider_v13, then slider_14 (in the asset without a suffix v),
+ then slider_v15 … slider_v18.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Eighteen slider variants plus a separate frame slider_14 between v13 and v15.
+
+
This sequence is useful for analyzing the evolution of the control: from early layouts to final states.
+
+
Sliders: general frame
+
A summary screen for sliders—following the version series.
+
+
+ sliders_all_set
+
+
This concludes the section on sliders: context—how multiple controls coexist on a single screen.
+
+
-
-
-
-
Icons8 · desktop
-
Графический редактор Lunacy
-
- Работа над интерфейсом Lunacy в команде Icons8: user flow, прототипы сложных сценариев, доработка функциональности и
- визуальной логики. Ниже — фрагменты экранов из процесса (порядок кадров ориентирован на имена файлов).
-
Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.
-
-
- Обзор окна Lunacy.
-
-
Дальше — отдельные сценарии и итерации интерфейса в том порядке, в каком удобнее читать по смыслу и по именам файлов.
-
-
Blob: настройки на холсте
-
Работа с blob в контексте холста — отдельный сценарий до разборов панели по версиям.
-
-
- blob_settings_on_canvas
-
-
Панель настроек для тех же задач развивалась серией макетов v1–v9 — они собраны в сетку ниже.
-
-
Компоненты и сравнение
-
Сравнение компонентов и индикатор обновлений в панели.
Четыре кадра подряд показывают развитие одного подпроекта: от панели и набросков к уточнению поведения в модалках.
-
-
Панель настроек blob: версии v1–v9
-
- Итерации панели по именам файлов blob_settings_panel_v1 … v9. Сетка на ширине текста, три колонки на
- широком экране; при сужении окна число колонок уменьшается автоматически.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Девять версий подряд: читать слева направо, сверху вниз.
-
-
Сетка удобна для сравнения шага к шагу; для деталей клик по ячейке открывает полноэкранный просмотр.
-
-
Слайдер: версии v1–v18 и кадр 14
-
- Порядок по именам: slider_v1 … slider_v13, затем slider_14 (в ассете без суффикса v),
- затем slider_v15 … slider_v18.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Восемнадцать вариантов слайдера плюс отдельный кадр slider_14 между v13 и v15.
-
-
Такой ряд полезен при разборе эволюции контрола: от ранних раскладок до финальных состояний.
-
-
Слайдеры: общий кадр
-
Сводный экран по слайдерам — после ряда по версиям.
-
-
- sliders_all_set
-
-
Завершает блок про слайдеры: контекст, как несколько контролов сосуществуют на одном экране.
+ Interface redesign and development: a new operational concept, an updated visual system, and hundreds of carefully crafted user scenarios.
+
+
+ The work focused on the desktop editor and associated panels: the goal was to maintain the integrity of the visual language while expanding functionality and ensuring that the usage scenarios of power users were preserved.
+
+
+ A detailed case study will be posted on this page later; below is the cover image for portfolio navigation.
+
+
Cover
+
+
+ Current preview for the portfolio card
+
+
+
-
-
-
-
Product Design · Desktop App
-
Игровой движок MANU
-
- Редизайн и развитие интерфейса: новая концепция работы, обновлённая визуальная система и сотни проработанных пользовательских сценариев.
-
-
- Работа велась вокруг десктопного редактора и связанных панелей: нужно было удержать целостность визуального языка при росте функциональности и не потерять опытные сценарии силовых пользователей.
-
-
- Развёрнутый лонгрид кейса появится на этой странице позже; ниже — обложка для навигации из портфолио.
-
Все типы карточек и живая сетка для подбора раскладки на главной
-
- Страница для верстки и контента: здесь те же классы и скрипты, что в секции на главной. Меняйте шрифт и тему в панели
- справа, сужайте окно — сетка пересчитается. Подписи в заголовках карточек — подсказки, в проде их убрать.
-
-
-
-
-
Как пользоваться
-
- Сначала выберите тип (stack, horizontal, compact, decor), затем data-mp-cells (1–4) и
- порядок li в списке. Карточки с data-mp-extra не влияют на высоту списка до кнопки «Показать все».
- Подробности — в docs/mini-projects-cards.md.
-
-
-
Типы карточек
-
- Слева пример карточки с текстом, справа название типа и пояснение по классам.
-
- Compact со ссылкой. Только текст, без mp-card__media. В сетке часто с
- data-mp-cells="1".
-
-
-
-
-
-
-
mp-card--compact без ссылки
-
-
-
Compact без ссылки
-
-
документ
-
-
- Markdown-список проверок перед релизом мелких правок в интерфейсе.
-
-
-
-
-
-
- Compact без ссылки. Короткая заметка или чеклист без внешней ссылки.
-
-
-
-
-
-
-
mp-card--decor
-
-
-
-
-
-
- Декоративная ячейка. Заглушка в сетке, без проекта и ссылки. Внутри
- span.mp-card__decor-pattern.
-
-
-
-
-
-
-
Ширина в клетках
-
- Атрибут data-mp-cells на li.mini-projects-grid__item задаёт желаемую ширину от 1 до 4 клеток.
- Скрипт не даст карточке быть шире текущего ряда.
-
-
- Для адаптивной ширины используйте data-mp-cells-sm (при 4 клетках в ряду, ≥ 880 px) и
- data-mp-cells-xs (при 2 клетках, ≥ 520 px). Скрипт выбирает значение по текущему числу клеток в ряду.
-
-
-
-
-
-
Атрибут
-
Когда применяется
-
Пример
-
-
-
-
-
data-mp-cells
-
Широкий экран (6 клеток, ≥ 1180 px)
-
data-mp-cells="3"
-
-
-
data-mp-cells-sm
-
Средний экран (4 клетки, ≥ 880 px)
-
data-mp-cells-sm="2"
-
-
-
data-mp-cells-xs
-
Узкий экран (2 клетки, ≥ 520 px)
-
data-mp-cells-xs="1"
-
-
-
-
-
- Пример:data-mp-cells="3" data-mp-cells-sm="2" — карточка занимает 3 клетки на широком экране, 2 на среднем, 1 на узком.
-
-
-
-
- 123456
-
-
≥ 1180 px — 6 клеток
-
-
3
-
3
-
2
-
2
-
2
-
1
-
2
-
3
-
4
-
2
-
-
-
-
- 1234
-
-
≥ 880 px — 4 клетки
-
-
3
-
1
-
2
-
2
-
1
-
2
-
2
-
4
-
-
-
-
- 12
-
-
≥ 520 px — 2 клетки
-
-
1
-
1
-
2
-
2
-
1
-
1
-
-
-
- Цифра в блоке = значение data-mp-cells. Карточка занимает столько клеток подряд. При узком экране клеток меньше — карточки с шириной > число клеток переносятся на следующий ряд. С data-mp-cells-sm / data-mp-cells-xs карточка меняет ширину при сужении.
-
-
-
-
-
-
Ширина списка
-
Клеток в ряду
-
-
-
-
-
≥ 1180px
-
6
-
-
-
≥ 880px
-
4
-
-
-
≥ 520px
-
2
-
-
-
уже
-
1 (вся строка)
-
-
-
-
- На шести клетках пара 3 + 3 или тройка 2 + 2 + 2 обычно смотрится ровнее случайного набора.
- Декор (mp-card--decor) заполняет пустоты в сетке.
-
-
-
-
-
-
-
-
Живая сетка masonry
-
- Демо блока «Активность» с главной: здесь все типы карточек в одной живой сетке. В подписях у каждой — тип
- раскладки и data-mp-cells. Меняйте ширину окна и шрифт в панели темы, смотрите, как сетка
- перестраивается, и переносите удачный порядок на главную.
-
- Атрибут data-mp-height="…" на li.mini-projects-grid__item задаёт фиксированную высоту карточки в пикселях. Текст обрезается с многоточием, если не влезает.
-
All card types and a live grid for selecting layouts on the homepage
+
+ Layout and content page: the same classes and scripts are used here as in the section on the homepage. Change the font and theme in the panel on the right;
+ narrow the window, and the grid will recalculate. The text in the card headers is just placeholder text; you can remove it when previewing.
+
+
+
+
+
How to Use
+
+ First, select a type (stack, horizontal, compact, decor), then data-mp-cells (1–4) and
+ the order li in the list. Cards with data-mp-extra do not affect the height of the list until the “Show All” button is clicked.
+ For more details, see docs/mini-projects-cards.md.
+
+
+
Card Types
+
+ On the left is an example of a text card; on the right is the type name and an explanation of the classes.
+
+ Stack with a link. Full-width preview, text at the bottom. For an external link:
+ mp-card--link and mp-card__ext in the title (as in the "Experience" block).
+
+
+
+
+
+
+
mp-card--stack without a link
+
+
+
+
+
+
Stack without a link
+
+
note
+
+
+ A collection of databases and a rollup for a weekly overview, for personal use only.
+
+
+
+
+
+
+ Stack without a link. Same view. Wrapper div or article, without
+ mp-card--link.
+
+ Compact with a link. Text only, no mp-card__media. In the grid, often with
+ data-mp-cells="1".
+
+
+
+
+
+
+
mp-card--compact no link
+
+
+
Compact without a link
+
+
document
+
+
+ Markdown checklist before releasing minor UI changes.
+
+
+
+
+
+
+ Compact without a link. A short note or checklist without an external link.
+
+
+
+
+
+
+
mp-card--decor
+
+
+
+
+
+
+ Decorative cell. A placeholder in the grid, with no project or link. Inside
+ span.mp-card__decor-pattern.
+
+
+
+
+
+
+
Width in Cells
+
+ Attribute data-mp-cells sets li.mini-projects-grid__item specifies the desired width from 1 to 4 cells.
+ The script will not allow the card to be wider than the current row.
+
+
+ For responsive width, use data-mp-cells-sm (for 4 cells per row, ≥ 880 px) and
+ data-mp-cells-xs (for 2 cells, ≥ 520 px). The script selects the value based on the current number of cells in a row.
+
+
+
+
+
+
The
+
When to use
+
Example
+
+
+
+
+
data-mp-cells
+
Wide screen (6 cells, ≥ 1180 px)
+
data-mp-cells="3"
+
+
+
data-mp-cells-sm
+
Medium screen (4 cells, ≥ 880 px)
+
data-mp-cells-sm="2"
+
+
+
data-mp-cells-xs
+
Narrow screen (2 cells, ≥ 520 px)
+
data-mp-cells-xs="1"
+
+
+
+
+
+ Example:data-mp-cells="3" data-mp-cells-sm="2" — A card takes up 3 cells on a wide screen, 2 on a medium screen, and 1 on a narrow screen.
+
+
+
+
+ 123456
+
+
≥ 1180 px — 6 cells
+
+
3
+
3
+
2
+
2
+
2
+
1
+
2
+
3
+
4
+
2
+
+
+
+
+ 1234
+
+
≥ 880 px — 4 cells
+
+
3
+
1
+
2
+
2
+
1
+
2
+
2
+
4
+
+
+
+
+ 12
+
+
≥ 520 px — 2 cells
+
+
1
+
1
+
2
+
2
+
1
+
1
+
+
+
+ The number in the block = the value data-mp-cells. The card occupies that many cells in a row. On a narrow screen, there are fewer cells—cards with a width greater than the number of cells are carried over to the next row. As data-mp-cells-sm / data-mp-cells-xs the card changes its width when the view is narrowed.
+
+
+
+
+
+
List width
+
Cells per row
+
+
+
+
+
≥ 1180px
+
6
+
+
+
≥ 880px
+
4
+
+
+
≥ 520px
+
2
+
+
+
already
+
1 (entire row)
+
+
+
+
+ A pair on six cells 3 + 3 or a trio 2 + 2 + 2 usually looks neater than a random set.
+ Decor (mp-card--decor) fills in the gaps in the grid.
+
+
+
+
+
+
+
+
Live masonry grid
+
+ A demo of the “Activity” block from the homepage: here, all card types are in a single live grid. Each card’s caption shows the type of
+ layout and data-mp-cells. Change the window width and font in the theme panel, watch how the grid
+ rearranges itself, and apply the best layout to the homepage.
+
+ Attribute data-mp-height="…" sets li.mini-projects-grid__item sets a fixed card height in pixels. Text is truncated with an ellipsis if it doesn’t fit.
+
+ Booking doctor appointments and managing medical services: a simple user journey, intuitive navigation, and quick access to actions.
+
+
+ The project’s focus is on alleviating patient anxiety and eliminating unnecessary steps: clear appointment statuses, predictable forms, and reliance on familiar mobile app patterns.
+
+
+ A full breakdown of the case study will be published here; for now, this page serves as an entry point from the portfolio section on the homepage.
+
+
Cover
+
+
+ Current preview for the portfolio card
+
+
+
-
-
-
-
UX/UI · Mobile App
-
Мобильное приложение для сети клиник
-
- Запись к врачам и работа с медицинскими услугами: простой путь пользователя, понятная навигация и быстрый доступ к действиям.
-
-
- Фокус проекта — снять тревожность и лишние шаги у пациента: ясные статусы записи, предсказуемые формы и опора на привычные паттерны мобильных приложений.
-
-
- Полный разбор кейса будет опубликован здесь; пока страница служит точкой входа из блока портфолио на главной.
-
+ Primo RPA Orchestrator: launching robots, managing projects, and monitoring processes in a web dashboard for administrators and automation developers.
+
+
+
+
Context
+
+ In the Primo RPA stack, the orchestrator manages the scheduling, queue, and statuses of RPA robots on the client’s infrastructure. It can be accessed not only from the development studio but also from a browser: users view projects, restart tasks, and troubleshoot failures.
+
+
+ By that point, the product was already in use, but the interface was noticeably outdated: users faced navigation issues, visual clutter in tables, and confusing workflows in some sections. The goal was to refresh the interface’s look, modernize it, and fix the accumulated UX issues.
+
+
+
+
+
Role and Approach
+
+ My role in this project was more of a curatorial one—I didn’t do the design myself, but rather structured the process so that the design and development teams could work in sync.
+
+
+
+ At the same time, I was looking for a designer who could take on the main visual design work. Elizaveta was selected—out of more than 150 applications, she was the best fit for the upcoming workload.
+
+
+ Over the course of three months, I brought the new team member up to speed on the project details: I assigned tasks, provided feedback on the mockups she created, and shared context on user scenarios. Together with the development team, we planned the order in which to update the service’s design—we revised screens based on priority, incorporating changes into ongoing releases, without “stopping everything and redesigning from scratch.”
+
+
+
+
+
Technical Stack and Tools
+
+ The latest version of Ant Design was chosen as the UI framework. It was already in use on the project, and its latest release introduced the Theme Editor—a feature that allowed us to customize the appearance of components using design tokens without manually overriding styles. This provided both designers and developers with a unified language for describing the user interface.
+
+
+ Storybook served as the single source of truth and the bridge between design and development. In Storybook, components weren’t just documented—they actually worked in an isolated environment. This allowed designers to see the elements in action and developers to integrate components into the dashboard more quickly.
+
+
+
+
+
Design System and Synchronization
+
+ To streamline our workflow, we synchronized tokens from Ant Design with those in Figma—colors, padding, typography, and corner radii were standardized to consistent values. Here’s how it worked: if tokens were updated in Figma, they could be exported as JSON and immediately imported into the code without any issues—instead of having a developer manually search for changes and update each token individually. This approach also allowed us to view the design more systematically.
+
+
+
+ Components in Figma were built from scratch—based on Ant Design references, but without using pre-made libraries. The decision to avoid pre-made solutions was a conscious one: we needed full customization to fit our workflow and the ability to use new Figma features that weren’t supported in libraries from the Figma community.
+
+
+ For Storybook, we selected and configured plugins that were relevant to our tasks—accessibility checks, viewing component states, and switching themes and locales. This turned Storybook into more than just a showcase for components; it became a full-fledged design review tool.
+
+
+
+
+
Designer’s Work Environment
+
+ We set up the environment so that designers could see the live implementation of components on their own computers using a local Storybook instance and Git. This allowed for more precise control over how the intended design was translated into code and enabled us to quickly spot discrepancies early on.
+
+
+ We also discussed a step to accelerate Storybook support by allowing designers to write the JSX for implemented components themselves—this shortened the path from mockup to a documented component in Storybook.
+
+
+ We fine-tuned the workflow for adding icons to the library. The key feature was that icons could be displayed in Storybook with filtering and sorting capabilities. At the same time, designers could update icons without involving a developer—they simply pushed new files to the repository.
+
+
+ Being able to see the updated icon immediately in the browser allowed us to optimize it better and eliminate display glitches when using Boolean operations.
+
+
+ We also developed an approach and set of rules for Figma that not only guided the designer but also ensured the creation of consistent and functional icons.
+
+
+
+
+
UX Improvements
+
+ During the interface update, Elizaveta also proposed a number of user experience improvements. Some of them were successfully implemented—for example, clearer grouping of elements in complex forms and redesigned loading states. However, the priority was not to disrupt the existing UX that users had grown accustomed to, so many ideas were saved for the backlog for the next iteration.
+
+
+
+
+
Project List
+
+ The project table is one of the most frequently viewed screens. In the old version, there were many columns, a dense grid, and small text: the project status and name were difficult to read, especially on a laptop.
+
+
In the new version:
+
+
the columns have been reduced to what’s necessary for daily work;
+
statuses and actions have been moved to predictable areas within each row;
+
indentation and typography have been aligned with the rest of the panel using Ant Design.
+
+
+
It used to be
+
+
+
+
+
Now
+
+
+
+
+
+
+
Results and Reflection
+
+ The projects screen became easier to scan: less visual noise, and it’s faster to find the right project and its status. After rolling out the new design to several clients, we received positive feedback and many ideas for further improvements.
+
+
+ I stepped away from the project once Elizaveta felt confident in her role and was able to handle design tasks independently. I occasionally answered specific questions, but overall, the handoff went smoothly.
+
+
+ A little over a year later, the team’s processes have changed significantly. According to the team, tools powered by neural networks—such as Claude Design—are now actively involved in the creation and handoff of designs. What we used to build manually using tokens, Storybook, and environment synchronization is now, to some extent, automated.
+
+
+ I believe the work was completed fairly quickly and to a high standard—amid constant changes in the market and within the company, we managed not only to update the interface but also to establish a sustainable process that continued to function even without my involvement.
+
+
+
+
-
-
-
-
Primo RPA · UX/UI · Web App
-
Веб-панель для оркестрации автоматизаций
-
- Оркестратор Primo RPA: запуск роботов, проекты и контроль процессов в веб-кабинете для админов и разработчиков автоматизаций.
-
-
-
-
Контекст
-
- В стеке Primo RPA оркестратор отвечает за расписание, очередь и статусы RPA-роботов на инфраструктуре клиента. С ним работают не только из студии разработки, но и из браузера: смотрят проекты, перезапускают задания, разбирают сбои.
-
-
- К тому моменту продукт уже был в эксплуатации, но интерфейс заметно устарел: пользователи сталкивались с неудобствами в навигации, визуальным шумом в таблицах и неочевидными сценариями в некоторых разделах. Задача стояла освежить вид интерфейса, сделать его современным и исправить накопившиеся UX-проблемы.
-
-
-
-
-
Роль и подход
-
- Моя роль в этом проекте была скорее кураторской — я не делал дизайн самостоятельно, а выстраивал процесс так, чтобы команда дизайна и разработки работала слаженно.
-
-
-
- Параллельно я искал дизайнера, который взял бы на себя основную визуальную работу. Отбор прошла Елизавета — среди более чем 150 заявок она лучше всего подходила под предстоящий фронт работ.
-
-
- В течение трёх месяцев я погружал новую сотрудницу в детали проекта: ставил задачи, давал обратную связь по создаваемым макетам, делился контекстом по пользовательским сценариям. Вместе с командой разработки мы планировали порядок обновления дизайна сервиса — меняли экраны по приоритету, вкладывая изменения в текущие релизы, без «остановить всё и перерисовать».
-
-
-
-
-
Технический стек и инструменты
-
- В качестве фреймворка для интерфейса был выбран Ant Design последней версии. Он уже использовался в проекте, и его свежий релиз предлагал Theme Editor — возможность настраивать внешний вид компонентов через дизайн-токены без переопределения стилей вручную. Это давало и дизайнерам, и разработчикам единый язык описания интерфейса.
-
-
- Единым источником правды и мостом между дизайном и разработкой стал Storybook. В нём компоненты были не просто задокументированы, а реально работали в изолированной среде — это позволяло дизайнерам видеть реализацию элементов вживую, а разработчикам — быстрее интегрировать компоненты в панель.
-
-
-
-
-
Дизайн-система и синхронизация
-
- Для удобства работы мы синхронизировали токены из Ant Design с токенами в Figma — цвета, отступы, типографика и радиусы скругления были приведены к единым значениям. Работало это так: если в Figma токены обновлялись, их можно было выгрузить в JSON и без проблем сразу загрузить в код — вместо того, чтобы разработчик вручную искал изменения и правил каждый токен индивидуально. Такой подход также позволил смотреть на дизайн более системно.
-
-
-
- Компоненты в Figma создавались с нуля — по референсам Ant Design, но без использования готовых библиотек. Отказ от готовых решений был осознанным: нам нужна была полная настройка под наш стиль работы и возможность использовать новые функции Figma, которые не поддерживались в библиотеках из сообщества Figma.
-
-
- Для Storybook мы отобрали и настроили плагины, которые были уместны для наших задач — контроль доступности, просмотр состояний компонентов, переключение тем и локалей. Это сделало Storybook не просто витриной компонентов, а полноценным инструментом дизайн-ревью.
-
-
-
-
-
Рабочая среда дизайнера
-
- Мы настроили среду так, чтобы дизайнер мог видеть реализацию компонентов вживую у себя на компьютере, используя локальный Storybook и Git. Это позволяло точнее контролировать, как задуманный дизайн воплощается в коде, и оперативно замечать расхождения на ранних этапах.
-
-
- Обсуждался также шаг ускорить поддержку Storybook тем, чтобы дизайнер сам мог описывать JSX для реализованного компонента — это сокращало путь от макета до документированного компонента в сторибуке.
-
-
- Мы отладили рабочий процесс по передаче иконок в библиотеку. Особенность заключалась в том, чтобы иконки можно было отобразить в Storybook с фильтрацией и сортировкой. При этом дизайнер мог обновлять иконки без привлечения разработчика — просто пушил новые файлы в репозиторий.
-
-
- Увидеть обновлённую иконку сразу в браузере позволяло лучше её оптимизировать и убрать косяки отображения при использовании булевых операций.
-
-
- Для Figma также был разработан подход и правила, которые не только ограничивали дизайнера, но и позволяли гарантированно делать консистентные и рабочие иконки.
-
-
-
-
-
UX-улучшения
-
- За время обновления интерфейса Елизавета предложила ещё и ряд улучшений пользовательского опыта. Часть из них была успешно внедрена — например, более понятная группировка элементов в сложных формах и переработанные состояния загрузки. Но в приоритете было не ломать старый UX, к которому привыкли пользователи, поэтому многие идеи сохранились в бэклог для следующей итерации.
-
-
-
-
-
Список проектов
-
- Таблица проектов — один из самых частых экранов. На старой версии много колонок, плотная сетка и мелкий текст: статус и имя проекта читаются с трудом, особенно на ноутбуке.
-
-
В новой версии:
-
-
колонки свели к тому, что нужно для ежедневной работы;
-
статусы и действия вынесли в предсказуемые зоны строки;
-
отступы и типографику подтянули под остальную панель на Ant Design.
-
-
-
Было
-
-
-
-
-
Стало
-
-
-
-
-
-
-
Результаты и рефлексия
-
- Экран проектов стал проще сканировать: меньше визуального шума, быстрее находить нужный проект и его состояние. После раскатывания нового дизайна среди нескольких клиентов мы получили положительные отзывы и множество идей для дальнейших улучшений.
-
-
- Я оставил проект, когда Елизавета уже уверенно чувствовала себя в нём и могла самостоятельно вести дизайнерские задачи. Периодически я отвечал на точечные вопросы, но в целом передача прошла гладко.
-
-
- Спустя год с небольшим процессы в команде заметно изменились. По словам ребят, в создании и передаче дизайна теперь активное участие принимают инструменты с нейросетями — такие как Claude Design. То, что мы начинали выстраивать вручную через токены, Storybook и синхронизацию сред, сейчас в какой-то мере автоматизируется.
-
-
- Считаю, что проделанная работа была выполнена достаточно оперативно и качественно — в условиях постоянных изменений на рынке и внутри компании нам удалось не просто обновить интерфейс, но и выстроить устойчивый процесс, который продолжил работать уже без моего участия.
-
-
-
-
+
+
+
-
-
-
-
+
+
+
+
diff --git a/public/en/cases/site-with-ai-ide/index.html b/public/en/cases/site-with-ai-ide/index.html
index 4f936a4..64d5dbb 100644
--- a/public/en/cases/site-with-ai-ide/index.html
+++ b/public/en/cases/site-with-ai-ide/index.html
@@ -5,9 +5,9 @@
- Этот сайт — Разработка с AI IDE — кейс
+ This Website — Developed with AI IDE — Case Study
-
-
+
-
+
diff --git a/public/en/cases/task-distribution-concept/index.html b/public/en/cases/task-distribution-concept/index.html
index 525ff02..19ed453 100644
--- a/public/en/cases/task-distribution-concept/index.html
+++ b/public/en/cases/task-distribution-concept/index.html
@@ -1,13 +1,13 @@
-
-
-
-
-
-
- Концепт сервиса распределения задач — кейс
+
+
+
+
+
+
+ Task Distribution Service Concept — Case Study
-
-
-
-
-
+
+
+
+
+
Skip to case content
+ Product concept: setting, assigning, and tracking tasks with an emphasis on process transparency and seamless teamwork.
+
+
+ The goal of the concept is to show how the team views the workflow without “black boxes”: who is working on what, where the bottlenecks are, and which statuses are critical for the next step.
+
+
+ A detailed case study will be posted here later; the page is already linked to a portfolio entry on the website.
+
+
Cover
+
+
+ Current preview for the portfolio card
+
+
+
-
-
-
-
UX/UI · Analytics
-
Концепт сервиса распределения задач
-
- Продуктовый концепт: постановка, распределение и отслеживание задач с акцентом на прозрачность процессов и удобство командной работы.
-
-
- Задача концепта — показать, как команда видит поток работ без «чёрных ящиков»: кто что взял, где узкие места и какие статусы критичны для следующего шага.
-
-
- Детальный кейс появится здесь позже; страница уже связана с карточкой в портфолио на сайте.
-
+ Implement an interface for planning and assigning tasks to employees in the operations department who work in a back-office system. There are a large number of diverse tasks that can be grouped into the following categories: Type-1, Type-2, Type-3, Type-4, Type-5, Type-6, Type-7. Each task has its own automatically assigned priority. Users have access only to tasks from specific categories.
+
+
The following needs to be implemented:
+
+
+ Main screen:
+
+
where the user can view all open general tasks and select some for themselves.
+
A personal to-do list displaying both manually selected tasks and automatically assigned ones.
+
For a selected task, there is the option to assign it to another employee or return it to the general list.
+
+
+
A screen where users can see what tasks each person is working on.
+
+
+
Introduction
+
+ Since I personally have extensive experience working with task trackers, I’m drawing on my own experience and that of my colleagues, while taking the project requirements into account.
+
+
+
References
+
+
+
+
+
Task trackers (Trello, Monday, YouTrack, etc.)
+
Services for visual database management (Notion, Airtable, etc.)
On the All Tasks tab, the employee can view all available tasks.
+
+
+
+
+ The "My tasks" tab displays only those tasks assigned to the current employee. Tasks are grouped by status (the status is hidden in the task card).
+
+
+
+
+
The “Task by Assignee” tab displays all tasks broken down by assignee.
+
+
+
+
Options for the current tab are located on the right-hand side.
+
+
+
+
+ All changes are saved when you leave the tab and when you close the entire Tasks page. These settings are individual, and each employee can customize the page as they see fit.
+
+
+
Group—allows you to create additional groupings based on task properties (category, priority, assignee, status, creation date, modification date).
+
View—allows you to change the display of current tasks to a different view: board, list, or table.
+
Filter—allows you to hide tasks based on their properties.
+
+ Sort—allows you to determine the order in which tasks are displayed based on their properties. If sorting by status (High, Medium, Low) is enabled, you can choose either alphabetical order or reverse order, or you can create your own order. Dates and numbers are sorted in ascending or descending order.
+
+
+ Search on page — allows you to display only those tasks whose title or description contains a specific search word or phrase. (Search functionality can be improved by adding search operators if research demonstrates the need.)
+
+
+
+ The page uses lazy loading for tasks. As you scroll down, new tasks will load. The number of tasks is displayed in the headers; this can be helpful for estimating how far you need to scroll to see everything. There may be a large number of tasks, in which case it might make sense to add pagination as well.
+
+
+
Display Options (Views)
+
+ Different views of the same tasks can be useful for various contexts in which the Tasks page is used, as well as to accommodate employees’ personal preferences, which increases their efficiency. An employee who isn’t annoyed by the interface works more productively and contributes more.
+
+
+
+
+
+
+ The Board view makes it easier to use the drag-and-drop feature (see below). It’s also visually easier to determine the number of tasks in a category, which I imagine could be helpful. When tasks are grouped by completion status, moving cards from left to right creates a natural horizontal flow of tasks from point A to point B.
+
+
+
+
+
+ The List view allows you to see more information in a smaller screen area. At the same time, this view is visually and functionally simpler than the table view, which means less cognitive load on the user. Also, all task titles start at the far left, making it easy to scan the list.
+
+
+
+
+
+ The Table view allows you to work with all task fields immediately, without having to open the task in a modal window or a separate page. The table allows you to customize the width and order of columns, which can be convenient in certain use cases.
+
+ In all views, you can drag and drop elements (cards, list items, and table rows and columns). This promotes more productive work and feels natural to the user. For example, if you need to distribute tasks among employees (for an admin or manager), change the status of multiple tasks at once, or do so within a short period of time.
+
+ A schematic representation of how Drag & Drop works. This type of prototype helps designers better understand the nuances that need to be considered in the user flow, as well as when preparing specifications for developers. Also, by testing this prototype, you may realize that the feature needs to work completely differently and decide to redesign it right away. This saves overall development time.
+
+ In the prototype, only the blue card can be moved, and not all positions work correctly. You can view the recording, which is available on the same prototype page.
+
+
+
Style
+
+ The visual style can be anything you like without changing the framework itself. For example, it could be a bit more colorful with more expressive fonts.
+
+ During the Figma prototyping phase, you can conduct interviews with several employees—for example, 5 people. First, add real tasks from the current system to the prototype; about 20 should be enough. Next, you can hold a video call with the respondent’s screen shared or meet in person to present a few tasks and ask some questions. During the session, the respondent can interact with the prototype, but if something doesn’t work, the interviewer can note the attempt and explain that this feature isn’t working yet, as well as ask what the respondent expects to see next.
+
+
Tasks
+
+
Find your current tasks on the Tasks page under the All Tasks tab
+
Assign tasks to yourself to work on
+
Find a task related to a specific topic (the interviewer provides an example) that they have already completed
+
Show tasks that belong only to a specific category and must be completed by the end of the week
+
Request that the priority of several tasks be changed at once
+
Rate the visual appeal of the interface on a scale of 1 to 10
+
Rate your overall impression of the proposed concept on a scale of 1 to 10
+
Suggest additional features that would be useful
+
+
Analytics
+
To assess the relevance of the implemented features, the following metrics must be collected.
+
+
+ Number of page views for the "Tasks" page page_views_tasks with the option to break them down
+
+
+ by tabs
+
+
All tasks all_tasks_tab
+
My tasks my_tasks_tab
+
Tasks by Assignment tasks_by_assign
+
+
+
+ by role
+
+
Admin admin
+
Manager manager
+
User user
+
+
+
+ by search attempts
+
+
Search Used search used
+
+
+
+
+
+ Number of enabled custom settings custom_settings with the option to group
+
+
+ by tabs
+
+
All tasks all_tasks_tab
+
My tasks my_tasks_tab
+
Tasks by Assignment tasks_by_assign
+
+
+
+ by role
+
+
Admin admin
+
Manager manager
+
User user
+
+
+
+ by type
+
+
Group group
+
Filter filter
+
Sort sort
+
+
+
+
+
+ Number of included species View Usedview_used with the option to break down
+
+
+ by tabs
+
+
All tasks all_tasks_tab
+
My tasks my_tasks_tab
+
Tasks by Assignment tasks_by_assign
+
+
+
+ by role
+
+
Admin admin
+
Manager manager
+
User user
+
+
+
+
+
+
+ Then, over the next six months (or sooner, depending on user activity), we’ll be able to see the results and conduct a study (in the form of interviews) on the features that are used least frequently and those that have received complaints, in order to gather high-quality data and get a complete picture of what’s happening.
+
+
+
Additional details
+
+ When creating mockups in Figma, the following were used: auto-layout features; interactive components; plugins (Iconify, Fitter, Protofly, Shadow Maker, Dark Side, etc.); and the Community file (+40 Types of Cursor). About 60% of the layers are named and organized for easier workflow. An 8pt grid is used, with additional sizes of 2pt and 4pt. Color styles are available for light and dark themes. The design adapts to changing window sizes (no mobile version).
+
- Реализовать интерфейс для планирования и распределения задач между сотрудниками операционного отдела, работающими в некой бек-офис системе. Существует большое количество разноплановых задач, которые можно сгруппировать: Тип-1, Тип-2, Тип-3, Тип-4, Тип-5, Тип-6, Тип-7. У каждой задачи есть свой, выставляемый автоматически, приоритет. Пользователю доступны только задачи из определенных категорий.
-
-
Нужно реализовать:
-
-
- Общий экран:
-
-
где пользователь может посмотреть все открытые общие задачи и взять какие-то себе.
-
персональный ToDo лист, где отображаются как взятые вручную задачи, так и автоматически назначенные.
-
у взятой задачи есть возможность передать ее другому сотруднику или вернуть в общий список.
-
-
-
Экран, где можно посмотреть, что у кого в работе.
-
-
-
Введение
-
- Так как у меня лично есть обширный опыт работы с таск-трекерами, то я опираюсь на свой опыт и опыт моих коллег с учётом требований задания.
-
-
-
Референсы
-
-
-
-
-
Таск-трекеры (Trello, Monday, YouTrack и др.)
-
Сервисы для визуальной работы с базами данных (Notion, Airtable и др.)
На вкладке All tasks сотрудник может ознакомиться со всеми доступными задачами.
-
-
-
-
- На вкладке My tasks отображаются только те задачи, что закреплены за текущим сотрудником. Группировка идёт по статусам задач (статус в карточке задачи скрыт).
-
-
-
-
-
На вкладке Task by assign отображены все задачи c разбивкой по исполнителю.
-
-
-
-
В правой части имеются опции для текущей вкладки.
-
-
-
-
- Все изменения сохраняются после ухода с вкладки и после закрытия всей страницы Tasks. Эти настройки индивидуальны и каждый сотрудник может настроить страницу как ему удобно.
-
-
-
Group - позволяет создать дополнительную группировку по свойству таски (категория, приоритет, исполнитель, статус, дата создания, дата изменения).
-
View - позволяет изменить отображение текущих задач на другой вид: доска, список, таблица.
-
Filter - позволяет скрывать задачи по свойствам.
-
- Sort - позволяет определять порядок отображения задач по свойствам. Если включена сортировка по статусу High, Medium, Low то можно выбрать либо по алфавиту, либо в обратном порядке, а также можно создать свой порядок. С датами и цифрами работает принцип по возрастанию/убыванию.
-
-
- Search on page - позволяет отобразить только те задачи, в названии или описании которых есть поисковое слово или фраза. (Можно улучшить функционал поиска, добавив поисковые операторы, если исследования докажут эту необходимость)
-
-
-
- На странице работает постепенная подгрузка задач. По мере скрола вниз, будут подгружаться новые задачи. Кол-во задач указывается в заголовках, это может быть полезно, чтобы оценить как далеко надо скролить, чтобы все посмотреть. Задач может быть очень много и тогда возможно имеет смысл добавить ещё и переход по страницам.
-
-
-
Варианты отображения (Views)
-
- Разные виды отображения одних и тех же задач могут быть полезны для разных контекстов использования страницы Tasks и также в угоду личным предпочтениям сотрудника, что повышает его эффективность. Сотрудник, которого не раздражает интерфейс работает продуктивнее и приносит больше пользы.
-
-
-
-
-
-
- Вид Board позволяет удобнее работать с функцией Drag&Drop (см. ниже). Также визуально легче определить кол-во задач в категории, подразумеваю что это может быть полезно. В случае использования группировки задач по статусам выполнения, перемещение карточек слева направо создаёт естественное горизонтальное течение задач из точки А в точку Б.
-
-
-
-
-
- Вид List позволяет увидеть больше информации на меньшей площади экрана. При этом этот вид визуально и функционально легче табличного вида, а значит меньше когнитивной нагрузки на пользователя. Также здесь все заголовки задач начинаются в крайнем левом положении, поэтому становится легко пробежаться глазами по списку.
-
-
-
-
-
- Вид Table позволяет сразу же работать со всеми полями задачи, без раскрытия её в модальном окне или отдельной странице. Таблица подразумевает пользовательскую настройку ширины и порядка столбцов, что может быть удобно в некоторых кейсах использования.
-
- Во всех видах можно перетаскивать элементы (карточки/элементы списка/строки и столбцы таблицы). Это способствует более продуктивной работе и выглядит естественным для пользователя. Например, если требуется раскидать задачи между сотрудниками (для админа или менеджера), поменять статус для нескольких задач разом или в короткий отрезок времени.
-
- Схематичное представление того как работает Drag&Drop. Такой прототип помогает дизайнеру лучше понять какие нюансы нужно учесть в юзерфлоу, а также и при подготовке спецификации для разработчика. Также попробовав данный прототип можно прийти к тому, что функционал должен работать совсем иначе и переделать его сразу. Это экономит общее время разработки.
-
- В прототипе можно перемещать только голубую карточку и не все положения работают корректно. Можно посмотреть запись, которая доступна на той же странице прототипа.
-
-
-
Стиль
-
- Визуальный стиль может быть любым, не меняя самого каркаса. Например, чуть более красочным и с более выразительными шрифтами.
-
- На этапе прототипов Figma можно провести интервью с несколькими сотрудниками, например 5 человек. Предварительно в прототип нужно добавить реальные задачи из текущей системы, порядка 20 должно хватить. Далее можно созвониться по видеосвязи с шэрингом экрана респондента или встретиться лично и задать несколько заданий и вопросов. Во время сессии респондент может тыкать в прототип, но если что-то не сработает интервьюер может зафиксировать попытку и объяснить, что этот функционал пока не работает, а также поинтересоваться что респондент ожидает увидеть дальше.
-
-
Задания
-
-
Найти свои актуальные задачи со страницы Tasks вкладки All tasks
-
Назначить себе задачи, чтобы взять в работу
-
Найти задачу про что-то конкретное (интервьюер приводит пример), которую он уже выполнил ранее
-
Показать задачи, которые относятся только к определённой категории и должны быть сделаны до конца недели
-
Попросить поменять приоритет у нескольких задач одновременно
-
Оценить визуальную привлекательность интерфейса по шкале от 1 до 10
-
Оценить общее впечатление от предложенного концепта по шкале от 1 до 10
-
Предложить ещё функции, которые были бы полезны
-
-
Аналитика
-
Для оценки актуальности реализованного функционала необходимо собирать следующие показатели.
-
-
- Кол-во просмотров страницы Taskspage_views_tasks с возможностью разбиения
-
- Кол-во включенных видов View Usedview_used с возможностью разбиения
-
-
- по вкладкам
-
-
All tasks all_tasks_tab
-
My tasks my_tasks_tab
-
Tasks by assign tasks_by_assign
-
-
-
- по ролям
-
-
Admin admin
-
Manager manager
-
User user
-
-
-
-
-
-
- Далее в течение полугода (может и раньше, в зависимости от активности пользователей) можно будет увидеть результат и провести исследование (в виде интервью) по функциям, которые используются реже всего и тем на которые есть жалобы, чтобы получить качественные данные и составить полную картину происходящего.
-
-
-
Дополнительные детали
-
- При создании мокапов в Figma были использованы: возможности автолэаутов; интерактивные компоненты, плагины (Iconify, Fitter, Protofly, Shadow Maker, Dark Side и др.), файл Community (+40 Types of Cursor). Слои названы и организованы для более удобной работы где-то на 60%. Используется сетка 8pt + есть размеры 2pt, 4pt. Имеются цветовые стили для светлой и тёмной темы. Присутствует адаптивность под изменяющиеся размеры окна (мобильной версии нет).
-
Медиа для демо лежат в public/assets/ (сборка страниц их не копирует). См. public/assets/README.md.
-
-
Контекст
-
- Этот раздел показывает пример рыбы для вступления. Здесь можно коротко описать продукт, аудиторию и ограничения проекта.
- Текст нейтральный: цель — быстро набросать структуру и проверить визуальный ритм страницы.
-
-
-
Задача
-
- Нужно собрать демонстрационный лонгрид с основными UI-элементами: карточками ссылок, медиа-блоками и примерами оформления контента.
- Дополнительно важно проверить, как блоки ведут себя на узких и широких экранах.
-
-
-
Решение
-
Ниже собраны готовые примеры, которые можно копировать в реальные кейсы.
-
-
- Изображение в уменьшенном натуральном размере, по центру.
-
-
-
Картинка: по ширине контента (с превью)
-
-
- Изображение по ширине контента. Клик открывает viewer.
-
-
-
Картинка: чуть шире контента (с превью)
-
-
- Изображение немного выходит за пределы контентной колонки.
-
-
-
Длинный скрин: свёрнутая высота и кнопка внутри превью
-
- Блок data-case-tall-media: ширина задаётся атрибутом data-case-tall-width="wide" (как «широкая» картинка) или content (по колонке). В свёрнутом виде видна верхняя часть кадра, внизу превью — плотный «туман». Кнопка «Развернуть» / «Свернуть» с иконкой-шевроном поверх нижней части кадра, внутри рамки; после раскрытия туман скрывается, после сворачивания страница прокручивается к превью. Высоту превью — на .case-media-tall__clip через --case-tall-max (по умолчанию min(70vh, 32rem)).
-
-
-
-
-
-
-
-
-
-
-
- Длинное изображение img-long.webp (исходник PNG рядом в public/assets/template-elements-demo/).
-
-
-
Галерея: сетка по ширине контента
-
- Колонок на широком экране задаётся на figure: атрибут style="--case-gallery-cols: 3". Ниже порогов сетка схлопывается до двух и одной колонки. Клик по миниатюре открывает общий viewer кейса.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Сетка в колонке статьи; на этом примере три колонки на десктопе.
-
-
-
Галерея: сетка на ширину страницы с боковыми отступами
-
- Класс case-media-gallery--wide — та же логика выхода за колонку, что у одиночного case-media--wide. Здесь четыре колонки на широком экране (--case-gallery-cols: 4).
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Ширина как у wide-картинки; на узком экране wide-обёртка схлопывается в 100% ширины колонки (см. медиазапросы).
-
-
-
Слайдер: одна картинка, стрелки и точки
-
- Блок .case-media-slider показывает слайды по одному: навигация стрелками «пред/след»,
- пагинация точками (активная — акцентным цветом). Поддерживается клавиатура (←/→, Home/End на точках),
- тач/мышь-свайп и ленивая подгрузка соседних кадров через data-src. Клик по активному
- кадру открывает общий viewer кейса.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Тот же слайдер, но с модификатором case-media--wide — выходит за колонку
- контента, как одиночные широкие картинки. Кнопки пред/след и точки ведут себя так же.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Слайдер с горизонтальными (широкими) кадрами одного размера — все картинки
- 1024×800.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Тот же слайдер, но с вертикальными кадрами одного размера — все картинки
- 600×800.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Отдельный пример: переключатель режима анимации смены кадров —
- slide (сдвиг), fade (кроссфейд) и none (без перехода).
- Режим задаётся атрибутом data-slider-anim на фигуре.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Callout: важный абзац с эмоджи
-
-
-
Видео: карточка с тенью и фиксированными малыми углами
-
-
-
-
- Пример видео-карточки в стиле кейса.
-
-
-
Результат
-
- Шаблон готов для копирования в новый кейс: остаётся заменить рыбу на фактический текст, подставить реальные ссылки и медиа проекта.
-
Text blocks and elements for quickly building a longread
+
The media for the demo is located in public/assets/ (the page builder does not copy them). See public/assets/README.md.
+
+
Context
+
+ This section shows an example of a text block for the introduction. Here, you can briefly describe the product, the audience, and the project’s limitations.
+ The text is neutral: the goal is to quickly sketch out the structure and check the page’s visual rhythm.
+
+
+
Task
+
+ We need to put together a demo longread with the main UI elements: link cards, media blocks, and examples of content layout.
+ It’s also important to check how the blocks behave on narrow and wide screens.
+
+
+
Solution
+
Below are some ready-made examples that you can copy into real-world projects.
+
+
+ Image at reduced actual size, centered.
+
+
+
Image: width of the content (with preview)
+
+
+ Image matches the width of the content. Clicking opens the viewer.
+
+
+
Image: slightly wider than the content (with preview)
+
+
+ The image extends slightly beyond the content column.
+
+
+
Long screenshot: collapsed height and button inside the preview
+
+ Block data-case-tall-media: width is specified by the data-case-tall-width="wide" (like a “wide” image) or content (per column). When collapsed, the top part of the frame is visible; at the bottom of the preview, there’s a solid “fog.” An “Expand” / “Collapse” button with a chevron icon appears above the bottom of the frame, inside the border; when expanded, the fog disappears; when collapsed, the page scrolls back to the preview. The preview height is set .case-media-tall__clip via --case-tall-max (default min(70vh, 32rem)).
+
+
+
+
+
+
+
+
+
+
+
+ Long image img-long.webp (source PNG next to it in public/assets/template-elements-demo/).
+
+
+
Gallery: grid based on content width
+
+ The number of columns on a wide screen is set via figure: the style="--case-gallery-cols: 3". Below these thresholds, the grid collapses to two or one column. Clicking on a thumbnail opens the general case viewer.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Grid in an article column; in this example, three columns on a desktop.
+
+
+
Gallery: Full-page grid with side margins
+
+ The case-media-gallery--wide — same logic for extending beyond a column as in the single-column case-media--wide. Here, there are four columns on a wide screen (--case-gallery-cols: 4).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Width is the same as for a `wide` image; on a narrow screen, the `wide` wrapper collapses to 100% of the column width (see media queries).
+
+
+
Slider: one image, arrows, and dots
+
+ Block .case-media-slider displays slides one at a time: navigation using “prev/next” arrows,
+ paging using dots (the active one is highlighted in accent color). Keyboard support (←/→, Home/End on dots),
+ touch/mouse swipe, and lazy loading of adjacent frames via data-src. Clicking on the active
+ slide opens the general case viewer.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The same slider, but with the modifier case-media--wide — extends beyond the content column,
+ like single wide images. The previous/next buttons and dots behave the same way.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Slider with horizontal (wide) frames of the same size—all images
+ 1024×800.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ The same slider, but with vertical frames of the same size—all images
+ 600×800.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ A separate example: a toggle for the frame-switching animation mode—
+ slide (slide), fade (crossfade), and none (no transition).
+ The mode is set by the attribute data-slider-anim on the shape.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Callout: Important paragraph with an emoji
+
+
+
Video: Card with a shadow and fixed small corners
+
+
+
+
+ An example of a case-style video card.
+
+
+
Result
+
+ The template is ready to be copied into a new case study: all that’s left is to replace the fish with the actual text and insert the project’s real links and media.
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
+ 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
- 
- 
-
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
- 
-