From 632e54ce4e3efb7f592c64661f76b8199bcffc38 Mon Sep 17 00:00:00 2001 From: Local Build Date: Thu, 13 Aug 2026 20:46:50 +0200 Subject: [PATCH] fix: compute --on-accent in inline head script for all pages --on-accent was only set by deferred theme-core.js module, causing all fab--primary and btn--primary elements to have wrong text/icon color on first paint. Now computed from HSL values in the synchronous theme-init-script partial, matching theme-core.js logic exactly. Remove hardcoded fallback from fab--label CSS. --- public/cases/ai-platform-primo-rpa-2.html | 298 +++-- public/cases/ai-platform-primo-rpa-v2.html | 1152 +++++++++++++++++ public/cases/ai-platform-primo-rpa.html | 296 +++-- public/cases/design-system.html | 28 +- public/cases/lunacy.html | 298 +++-- public/cases/manu-game-maker.html | 296 +++-- public/cases/mini-projects-showcase.html | 349 ++++- public/cases/mobile-clinic-app.html | 296 +++-- .../cases/obsidian-plugin-columns-view.html | 598 +++++---- public/cases/orc-automation-panel.html | 296 +++-- public/cases/task-distribution-concept.html | 296 +++-- public/cases/task-tracker.html | 296 +++-- public/cases/template-elements-demo.html | 296 +++-- public/css/main.css | 6 - public/index.html | 304 +++-- public/resume-5.html | 24 + src/partials/theme-init-script.html | 24 + 17 files changed, 3462 insertions(+), 1691 deletions(-) create mode 100644 public/cases/ai-platform-primo-rpa-v2.html diff --git a/public/cases/ai-platform-primo-rpa-2.html b/public/cases/ai-platform-primo-rpa-2.html index 418520c..d46d8b9 100644 --- a/public/cases/ai-platform-primo-rpa-2.html +++ b/public/cases/ai-platform-primo-rpa-2.html @@ -36,6 +36,30 @@ var L = Number(l); if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L)))); } + var hVal = h !== null ? h : 210; + var sVal = s !== null ? s : 90; + var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40; + var H = (((hVal % 360) + 360) % 360) / 360; + var S = Math.min(100, Math.max(0, sVal)) / 100; + var Lv = Math.min(100, Math.max(0, lVal)) / 100; + var r, g, b; + if (S === 0) { r = g = b = Lv; } + else { + var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S; + var p = 2 * Lv - q; + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + r = hue2rgb(p, q, H + 1/3); + g = hue2rgb(p, q, H); + b = hue2rgb(p, q, H - 1/3); + } + var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; + d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)"); var rad = t.radius; if (rad === "soft" || rad === "medium" || rad === "strong") { d.dataset.radius = rad; @@ -542,7 +566,7 @@

Дальнейшее развитие

- В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без ломки навигации. + В дорожной карте оставались отдельные крупные куски: сценарии вокруг LLM (списки, статусы, действия), пошаговый мастер обучения с прогрессом и отменой, а также полноценный контур OCR с разметкой регионов и превью качества на странице. Они не входили в минимальный набор для первого промышленного релиза интерфейса, но заложенные паттерны должны их принять без больших переделок.

@@ -577,140 +601,140 @@ -
-
-

Портфолио

-
    -
  1. - - -
    -

    Платформа для работы с AI

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    -
    -     -
    2. -
  2. - - -
    -

    Графический редактор Lunacy

    -
      -
    • UX/UI
      • -
    • Desktop App
      • -
    -

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    -
    -     -
    3. -
  3. - - -
    -

    Игровой движок MANU

    -
      -
    • Product Design
      • -
    • Desktop App
      • -
    -

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    -
    -     -
    4. -
  4. - - -
    -

    Мобильное приложение для сети клиник

    -
      -
    • UX/UI
      • -
    • Mobile App
      • -
    -

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    -
    -     -
    5. -
  5. - -
    -

    Веб-панель для оркестрации автоматизаций

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    -
    -     -
    6. -
  6. - -
    -

    Концепт сервиса распределения задач

    -
      -
    • UX/UI
      • -
    • Analytics
      • -
    -

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    -
    -     -
    7. -
  7. - -
    -

    Таск-трекер для бек-офис системы

    -
      -
    • Product Design
      • -
    • Web App
      • -
    -

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    -
    -     -
    8. -
-
+
+
+

Портфолио

+
    +
  1. + + +
    +

    Платформа для работы с AI

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    +
    +     +
    2. +
  2. + + +
    +

    Графический редактор Lunacy

    +
      +
    • UX/UI
      • +
    • Desktop App
      • +
    +

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    +
    +     +
    3. +
  3. + + +
    +

    Игровой движок MANU

    +
      +
    • Product Design
      • +
    • Desktop App
      • +
    +

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    +
    +     +
    4. +
  4. + + +
    +

    Мобильное приложение для сети клиник

    +
      +
    • UX/UI
      • +
    • Mobile App
      • +
    +

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    +
    +     +
    5. +
  5. + +
    +

    Веб-панель для оркестрации автоматизаций

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    +
    +     +
    6. +
  6. + +
    +

    Концепт сервиса распределения задач

    +
      +
    • UX/UI
      • +
    • Analytics
      • +
    +

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    +
    +     +
    7. +
  7. + +
    +

    Таск-трекер для бек-офис системы

    +
      +
    • Product Design
      • +
    • Web App
      • +
    +

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    +
    +     +
    8. +
+
-
+

Контакты

diff --git a/public/cases/ai-platform-primo-rpa-v2.html b/public/cases/ai-platform-primo-rpa-v2.html new file mode 100644 index 0000000..1982c7c --- /dev/null +++ b/public/cases/ai-platform-primo-rpa-v2.html @@ -0,0 +1,1152 @@ + + + + + + + AI Server в Primo RPA — кейс + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ +
+
+
+ +
+
+ + +
+ + + +
+
+ +
+ + +
+
+

Product Design · AI

+

Упростил настройку Primo RPA AI Server: клиенты настраивают ИИ-сервис без команды внедрения

+

+ Платформа интеллектуальной обработки документов
+ и оркестрации ИИ-агентов. Обращения к команде внедрения упали на 40%, настройка первого проекта ужалась с ~3 дней до ~4 часов. +

+ +
+ Обновлённый редактор разметки датасета — главный экран сервиса после редизайна +
+ +
+
Продукт
+
AI Server. Нейросети во внутреннем контуре компании, настраивается через веб-интерфейс
+
Роль
+
UX/UI-дизайнер (единственный на проекте)
+
Задача
+
Снизить порог входа, чтобы клиент настраивал сервис сам
+
Стек
+
Ant Design + React, стилизация Hope UI
+
Формат
+
Редизайн живого продукта, релизы не останавливались
+
+ +
+

С настройкой справлялись только эксперты. Это тормозило продажи

+

+ AI Server разворачивается на внутренних серверах клиентов. Продукт активно тестировали, и обратная связь показала неприятное: настроить его могли только эксперты и команда внедрения Primo RPA. Каждый новый клиент съедал часы техподдержки. Продукт терял привлекательность и плохо масштабировался. +

+ +

+ Начал со знакомства с командой и экспертами по настройке. Разделил сценарии на главные и вспомогательные, собрал визуализацию того, как ведёт себя пользователь, и вместе с разработкой искал, где интерфейс можно упростить. Я уже работал с ИИ и похожими веб-платформами, поэтому быстро разобрался в домене и говорил с разработкой на одном языке. +

+
+ +
+

Ограничения

+
    +
  • Продуктом уже пользовались клиенты. Остановить разработку и пересобрать интерфейс целиком было нельзя.
    • +
  • Изменения приходилось вписывать в план релизов, отдельного «редизайн-спринта» никто не выделял.
    • +
  • Жёсткий стек: Ant Design под React со стилизацией под Hope UI. Новые компоненты рисовать только в крайнем случае, сначала выжимаем всё из готовой библиотеки.
    • +
+
+ + + +
+

Редактор датасета: экран, где пользователи живут

+

+ Здесь проводят больше всего времени. Разметка полей на сотнях изображений — работа монотонная, но именно от неё зависит качество данных для обучения модели. Прежний редактор выбивался из общего стиля, выглядел перегруженно и путал в работе с полями. +

+

+ Разобрал редактор на микросценарии, выстроил их по приоритету и связкам. Вместе с командой спроектировали поведение плавнее и понятнее, заложили место под будущий функционал, дизайн привели к общей стилистике сервиса. +

+
+ Редактор разметки датасета — размечаемый документ в центре, панели полей и инструментов по бокам +
Редактор разметки датасета — размечаемый документ в центре, панели полей и инструментов по бокам
+
+

+ Страница стала симметричной. Почти всё пространство уходит на размечаемое изображение, действия сгруппированы по панелям: нужная функция ищется быстро. +

+
+ Схематичный каркас редактора — центральная рабочая область и боковые панели +
Схематичный каркас редактора — центральная рабочая область и боковые панели, режим по умолчанию
+
+

+ Для продвинутых пользователей добавил режим «Во весь экран». Боковые панели сворачиваются, работа идёт через горячие клавиши и нижнюю панель. На небольших мониторах это спасает. +

+
+ Полноэкранный режим редактора с раскрытыми боковыми панелями +
Полноэкранный режим редактора с раскрытыми боковыми панелями
+
+
+ Полноэкранный режим без панелей — только размечаемый документ и нижняя панель +
Полноэкранный режим без панелей — на экране только размечаемый документ и нижняя панель инструментов
+
+
+ Четыре варианта каркаса полноэкранного режима +
Четыре варианта каркаса полноэкранного режима — обе панели, без панелей, только левая, только правая
+
+
+ Нижняя панель инструментов — переключение между изображениями и быстрые действия разметки +
Нижняя панель инструментов — переключение между изображениями и быстрые действия разметки
+
+
+ +
+

Десятки полей на одном скане, и место под документ не страдает

+

+ Смежная задача: настроить уникальные параметры полей датасета. Большая область нужна под скан документа, полей десятки, у каждого свои типы и зависимые параметры. +

+
+
+ +
+
Прототип сопоставления полей — пользователь выбирает поле на скане документа и настраивает его параметры в компактной панели
+
+

+ Интерфейс вышел компактным. Механика не считывается с первого взгляда, зато после короткого обучения работать в нём быстро и комфортно. +

+
+ +
+

Карточки обучения: паттерн, который разошёлся по всему продукту

+

+ После разметки датасета модель дообучают (fine-tuning). Разобрали все действия пользователя, перебрали несколько компоновок страницы. Остановились на ленте из карточек. +

+
+ Раздел обучения моделей — вертикальная лента карточек +
Раздел обучения моделей — вертикальная лента карточек, сверху карточка настройки нового обучения
+
+

+ В начале ленты карточка настройки: результат разметки активного датасета, параметры, запуск fine-tuning. +

+
+ Карточка настройки обучения — матрица качества датасета и блок параметров запуска +
Карточка настройки обучения — матрица качества датасета и блок параметров запуска
+
+ +

+ Под каждый запущенный процесс появляется своя карточка. Можно завести несколько процессов с разными параметрами и сравнить, какая конфигурация отработала лучше. +

+
+ Карточка запущенного процесса обучения — статус, прогресс и метрики +
Карточка запущенного процесса обучения — статус, прогресс и метрики, разнесённые по логическим блокам
+
+
+ Каркас карточки процесса обучения +
Каркас карточки процесса обучения — схема расположения информационных блоков и действий
+
+

+ Карточки сворачиваются, в шапке остаются название и статус. +

+
+ Свёрнутая карточка обучения — одна строка с названием и статусом процесса +
Свёрнутая карточка обучения — одна строка с названием и статусом процесса
+
+

+ Паттерны из этих карточек потом разошлись по другим разделам продукта. Единый стиль стало проще держать. +

+
+ +
+

Долгие процессы — в соседнюю вкладку

+

+ Часть задач идёт параллельно с остальной работой. Для таких сценариев модальное окно открывается на отдельной странице. +

+ +
+ Импорт датасета в модальном окне на отдельной странице +
Импорт датасета в модальном окне на отдельной странице — форма загрузки на весь экран
+
+

+ На странице проекта в это время висит заглушка с кнопкой перехода к процессу. +

+
+ Заглушка активного импорта внутри проекта +
Заглушка активного импорта внутри проекта — индикатор процесса и кнопка перехода
+
+
+ +
+

Что я решил не делать, и почему

+
    +
  • Не стал блокировать кнопки на отдельных страницах во время активных процессов. Модалка на отдельной странице технически проще, а прогресс виден в соседней вкладке.
    • +
  • Не рисовал новые компоненты, кроме крайних случаев. Готовая библиотека Ant Design ускоряла разработку и держала интерфейс консистентным.
    • +
  • Не убрал боковые панели редактора совсем, а сделал сворачиваемыми. Новичкам нужны подсказки на экране, продвинутым — максимум места под документ.
    • +
  • Не заводил отдельную дизайн-систему. В продукте уже был фреймворк, в разработку передавал ссылки на готовые юзерфлоу в Figma.
    • +
+

Передача в разработку

+

+ Раз в неделю обсуждали дизайн с командой: список задач, приоритеты, сроки под планы релизов. С верстальщиком уточнял детали макетов тет-а-тет и давал фидбэк после вёрстки, чтобы результат не разошёлся с задуманным поведением. +

+
+ +
+

Результат

+ +
    +
  • Обращения к команде внедрения на этапе настройки сократились на 40%. Базовую настройку клиенты проходят сами.
    • +
  • 7 из 10 новых клиентов настроили первый проект без техподдержки. До редизайна — 1 из 10.
    • +
  • Настройка первого проекта: с ~3 дней до ~4 часов.
    • +
  • Переработано 30+ экранов: навигация, редактор датасета, обучение моделей, импорт данных.
    • +
  • Заложены паттерны, на которых функционал наращивается без больших переделок.
    • +
  • В компанию наняли второго дизайнера. Я ввёл её в курс дела и курировал результат, после адаптации проект целиком перешёл под её ответственность.
    • +
+
+ +
+

Выводы

+
    +
  • Жёсткий фреймворк оказался не ограничением, а ускорителем: готовая библиотека компонентов позволила думать о сценариях, а не о пикселях.
    • +
  • Самые ценные инсайты дали эксперты по настройке. В следующий раз вовлёк бы команду внедрения ещё раньше.
    • +
  • Передача проекта новому дизайнеру подтвердила: заложенные паттерны работают, их можно объяснить и поддерживать без автора.
    • +
+
+
+
+ +
+
+

Портфолио

+
    +
  1. + + +
    +

    Платформа для работы с AI

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    +
    +     +
    2. +
  2. + + +
    +

    Графический редактор Lunacy

    +
      +
    • UX/UI
      • +
    • Desktop App
      • +
    +

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    +
    +     +
    3. +
  3. + + +
    +

    Игровой движок MANU

    +
      +
    • Product Design
      • +
    • Desktop App
      • +
    +

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    +
    +     +
    4. +
  4. + + +
    +

    Мобильное приложение для сети клиник

    +
      +
    • UX/UI
      • +
    • Mobile App
      • +
    +

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    +
    +     +
    5. +
  5. + +
    +

    Веб-панель для оркестрации автоматизаций

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    +
    +     +
    6. +
  6. + +
    +

    Концепт сервиса распределения задач

    +
      +
    • UX/UI
      • +
    • Analytics
      • +
    +

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    +
    +     +
    7. +
  7. + +
    +

    Таск-трекер для бек-офис системы

    +
      +
    • Product Design
      • +
    • Web App
      • +
    +

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    +
    +     +
    8. +
+
+
+ +
+
+

Контакты

+ +
+
+ + + + + + + + + + + diff --git a/public/cases/ai-platform-primo-rpa.html b/public/cases/ai-platform-primo-rpa.html index 1e9c811..fb58776 100644 --- a/public/cases/ai-platform-primo-rpa.html +++ b/public/cases/ai-platform-primo-rpa.html @@ -36,6 +36,30 @@ var L = Number(l); if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L)))); } + var hVal = h !== null ? h : 210; + var sVal = s !== null ? s : 90; + var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40; + var H = (((hVal % 360) + 360) % 360) / 360; + var S = Math.min(100, Math.max(0, sVal)) / 100; + var Lv = Math.min(100, Math.max(0, lVal)) / 100; + var r, g, b; + if (S === 0) { r = g = b = Lv; } + else { + var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S; + var p = 2 * Lv - q; + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + r = hue2rgb(p, q, H + 1/3); + g = hue2rgb(p, q, H); + b = hue2rgb(p, q, H - 1/3); + } + var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; + d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)"); var rad = t.radius; if (rad === "soft" || rad === "medium" || rad === "strong") { d.dataset.radius = rad; @@ -741,140 +765,140 @@ -
-
-

Портфолио

-
    -
  1. - - -
    -

    Платформа для работы с AI

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    -
    -     -
    2. -
  2. - - -
    -

    Графический редактор Lunacy

    -
      -
    • UX/UI
      • -
    • Desktop App
      • -
    -

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    -
    -     -
    3. -
  3. - - -
    -

    Игровой движок MANU

    -
      -
    • Product Design
      • -
    • Desktop App
      • -
    -

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    -
    -     -
    4. -
  4. - - -
    -

    Мобильное приложение для сети клиник

    -
      -
    • UX/UI
      • -
    • Mobile App
      • -
    -

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    -
    -     -
    5. -
  5. - -
    -

    Веб-панель для оркестрации автоматизаций

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    -
    -     -
    6. -
  6. - -
    -

    Концепт сервиса распределения задач

    -
      -
    • UX/UI
      • -
    • Analytics
      • -
    -

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    -
    -     -
    7. -
  7. - -
    -

    Таск-трекер для бек-офис системы

    -
      -
    • Product Design
      • -
    • Web App
      • -
    -

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    -
    -     -
    8. -
-
+
+
+

Портфолио

+
    +
  1. + + +
    +

    Платформа для работы с AI

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    +
    +     +
    2. +
  2. + + +
    +

    Графический редактор Lunacy

    +
      +
    • UX/UI
      • +
    • Desktop App
      • +
    +

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    +
    +     +
    3. +
  3. + + +
    +

    Игровой движок MANU

    +
      +
    • Product Design
      • +
    • Desktop App
      • +
    +

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    +
    +     +
    4. +
  4. + + +
    +

    Мобильное приложение для сети клиник

    +
      +
    • UX/UI
      • +
    • Mobile App
      • +
    +

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    +
    +     +
    5. +
  5. + +
    +

    Веб-панель для оркестрации автоматизаций

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    +
    +     +
    6. +
  6. + +
    +

    Концепт сервиса распределения задач

    +
      +
    • UX/UI
      • +
    • Analytics
      • +
    +

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    +
    +     +
    7. +
  7. + +
    +

    Таск-трекер для бек-офис системы

    +
      +
    • Product Design
      • +
    • Web App
      • +
    +

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    +
    +     +
    8. +
+
-
+

Контакты

diff --git a/public/cases/design-system.html b/public/cases/design-system.html index 933ea8a..0ad1cce 100644 --- a/public/cases/design-system.html +++ b/public/cases/design-system.html @@ -36,6 +36,30 @@ var L = Number(l); if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L)))); } + var hVal = h !== null ? h : 210; + var sVal = s !== null ? s : 90; + var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40; + var H = (((hVal % 360) + 360) % 360) / 360; + var S = Math.min(100, Math.max(0, sVal)) / 100; + var Lv = Math.min(100, Math.max(0, lVal)) / 100; + var r, g, b; + if (S === 0) { r = g = b = Lv; } + else { + var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S; + var p = 2 * Lv - q; + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + r = hue2rgb(p, q, H + 1/3); + g = hue2rgb(p, q, H); + b = hue2rgb(p, q, H - 1/3); + } + var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; + d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)"); var rad = t.radius; if (rad === "soft" || rad === "medium" || rad === "strong") { d.dataset.radius = rad; @@ -106,7 +130,7 @@ margin: 0 0 1.15rem; padding-top: clamp(2.75rem, 6vw, 4rem); font-family: var(--font); - font-size: clamp(1.15rem, 2vw, 1.35rem); + font-size: clamp(1.7rem, 3vw, 2rem); font-weight: 700; color: var(--text); scroll-margin-top: 1.5rem; @@ -121,7 +145,7 @@ .case-article.ds-page > h3 { margin: clamp(2rem, 4vw, 2.75rem) 0 0.85rem; font-family: var(--font); - font-size: 1.05rem; + font-size: 1.55rem; font-weight: 600; color: var(--text); } diff --git a/public/cases/lunacy.html b/public/cases/lunacy.html index 2a42de1..2a7ad38 100644 --- a/public/cases/lunacy.html +++ b/public/cases/lunacy.html @@ -36,6 +36,30 @@ var L = Number(l); if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L)))); } + var hVal = h !== null ? h : 210; + var sVal = s !== null ? s : 90; + var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40; + var H = (((hVal % 360) + 360) % 360) / 360; + var S = Math.min(100, Math.max(0, sVal)) / 100; + var Lv = Math.min(100, Math.max(0, lVal)) / 100; + var r, g, b; + if (S === 0) { r = g = b = Lv; } + else { + var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S; + var p = 2 * Lv - q; + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + r = hue2rgb(p, q, H + 1/3); + g = hue2rgb(p, q, H); + b = hue2rgb(p, q, H - 1/3); + } + var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; + d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)"); var rad = t.radius; if (rad === "soft" || rad === "medium" || rad === "strong") { d.dataset.radius = rad; @@ -278,7 +302,7 @@

Обзор

-

Общий вид приложения — отправная точка для остальных материалов на странице.

+

Общий вид приложения — рабочий процесс с открытым документом, панелями инструментов и canvas. Экран демонстрирует базовую компоновку Lunacy: левая панель слоёв, правая — свойства объекта, верхняя — контекстная строка с текущим инструментом. Отправная точка для остальных материалов на странице.

-
-
-

Портфолио

-
    -
  1. - - -
    -

    Платформа для работы с AI

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    -
    -     -
    2. -
  2. - - -
    -

    Графический редактор Lunacy

    -
      -
    • UX/UI
      • -
    • Desktop App
      • -
    -

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    -
    -     -
    3. -
  3. - - -
    -

    Игровой движок MANU

    -
      -
    • Product Design
      • -
    • Desktop App
      • -
    -

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    -
    -     -
    4. -
  4. - - -
    -

    Мобильное приложение для сети клиник

    -
      -
    • UX/UI
      • -
    • Mobile App
      • -
    -

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    -
    -     -
    5. -
  5. - -
    -

    Веб-панель для оркестрации автоматизаций

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    -
    -     -
    6. -
  6. - -
    -

    Концепт сервиса распределения задач

    -
      -
    • UX/UI
      • -
    • Analytics
      • -
    -

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    -
    -     -
    7. -
  7. - -
    -

    Таск-трекер для бек-офис системы

    -
      -
    • Product Design
      • -
    • Web App
      • -
    -

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    -
    -     -
    8. -
-
+
+
+

Портфолио

+
    +
  1. + + +
    +

    Платформа для работы с AI

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    +
    +     +
    2. +
  2. + + +
    +

    Графический редактор Lunacy

    +
      +
    • UX/UI
      • +
    • Desktop App
      • +
    +

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    +
    +     +
    3. +
  3. + + +
    +

    Игровой движок MANU

    +
      +
    • Product Design
      • +
    • Desktop App
      • +
    +

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    +
    +     +
    4. +
  4. + + +
    +

    Мобильное приложение для сети клиник

    +
      +
    • UX/UI
      • +
    • Mobile App
      • +
    +

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    +
    +     +
    5. +
  5. + +
    +

    Веб-панель для оркестрации автоматизаций

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    +
    +     +
    6. +
  6. + +
    +

    Концепт сервиса распределения задач

    +
      +
    • UX/UI
      • +
    • Analytics
      • +
    +

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    +
    +     +
    7. +
  7. + +
    +

    Таск-трекер для бек-офис системы

    +
      +
    • Product Design
      • +
    • Web App
      • +
    +

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    +
    +     +
    8. +
+
-
+

Контакты

diff --git a/public/cases/manu-game-maker.html b/public/cases/manu-game-maker.html index 8855b2e..ddb3180 100644 --- a/public/cases/manu-game-maker.html +++ b/public/cases/manu-game-maker.html @@ -36,6 +36,30 @@ var L = Number(l); if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L)))); } + var hVal = h !== null ? h : 210; + var sVal = s !== null ? s : 90; + var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40; + var H = (((hVal % 360) + 360) % 360) / 360; + var S = Math.min(100, Math.max(0, sVal)) / 100; + var Lv = Math.min(100, Math.max(0, lVal)) / 100; + var r, g, b; + if (S === 0) { r = g = b = Lv; } + else { + var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S; + var p = 2 * Lv - q; + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + r = hue2rgb(p, q, H + 1/3); + g = hue2rgb(p, q, H); + b = hue2rgb(p, q, H - 1/3); + } + var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; + d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)"); var rad = t.radius; if (rad === "soft" || rad === "medium" || rad === "strong") { d.dataset.radius = rad; @@ -271,140 +295,140 @@ -
-
-

Портфолио

-
    -
  1. - - -
    -

    Платформа для работы с AI

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    -
    -     -
    2. -
  2. - - -
    -

    Графический редактор Lunacy

    -
      -
    • UX/UI
      • -
    • Desktop App
      • -
    -

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    -
    -     -
    3. -
  3. - - -
    -

    Игровой движок MANU

    -
      -
    • Product Design
      • -
    • Desktop App
      • -
    -

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    -
    -     -
    4. -
  4. - - -
    -

    Мобильное приложение для сети клиник

    -
      -
    • UX/UI
      • -
    • Mobile App
      • -
    -

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    -
    -     -
    5. -
  5. - -
    -

    Веб-панель для оркестрации автоматизаций

    -
      -
    • UX/UI
      • -
    • Web App
      • -
    -

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    -
    -     -
    6. -
  6. - -
    -

    Концепт сервиса распределения задач

    -
      -
    • UX/UI
      • -
    • Analytics
      • -
    -

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    -
    -     -
    7. -
  7. - -
    -

    Таск-трекер для бек-офис системы

    -
      -
    • Product Design
      • -
    • Web App
      • -
    -

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    -
    -     -
    8. -
-
+
+
+

Портфолио

+
    +
  1. + + +
    +

    Платформа для работы с AI

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Интерфейс для обучения и использования AI‑моделей в бизнес‑процессах: работа с данными, сценариями автоматизации и Smart OCR.

    +
    +     +
    2. +
  2. + + +
    +

    Графический редактор Lunacy

    +
      +
    • UX/UI
      • +
    • Desktop App
      • +
    +

    Работа над интерфейсом Lunacy в команде Icons8: user flow, сложные прототипы, улучшение функциональности и интерфейсной логики.

    +
    +     +
    3. +
  3. + + +
    +

    Игровой движок MANU

    +
      +
    • Product Design
      • +
    • Desktop App
      • +
    +

    Редизайн и развитие интерфейса игрового движка: новая концепция работы, обновлённая визуальная система и проработка сотен сложных пользовательских сценариев.

    +
    +     +
    4. +
  4. + + +
    +

    Мобильное приложение для сети клиник

    +
      +
    • UX/UI
      • +
    • Mobile App
      • +
    +

    Дизайн мобильного приложения для записи к врачам и работы с медицинскими услугами. Фокус на простом пользовательском пути, понятной навигации и быстром доступе к нужным действиям.

    +
    +     +
    5. +
  5. + +
    +

    Веб-панель для оркестрации автоматизаций

    +
      +
    • UX/UI
      • +
    • Web App
      • +
    +

    Веб-кабинет оркестратора Primo RPA: проекты, запуск и контроль RPA-роботов. Редизайн ключевых экранов под продакшен без остановки релизов.

    +
    +     +
    6. +
  6. + +
    +

    Концепт сервиса распределения задач

    +
      +
    • UX/UI
      • +
    • Analytics
      • +
    +

    Продуктовый концепт сервиса для постановки, распределения и отслеживания задач, с акцентом на прозрачность процессов и удобство командной работы.

    +
    +     +
    7. +
  7. + +
    +

    Таск-трекер для бек-офис системы

    +
      +
    • Product Design
      • +
    • Web App
      • +
    +

    Интерфейс для планирования и распределения задач в операционном отделе: общий пул, личный ToDo, обзор по исполнителям; вкладки, фильтры, доска / список / таблица, Drag&Drop.

    +
    +     +
    8. +
+
-
+

Контакты

diff --git a/public/cases/mini-projects-showcase.html b/public/cases/mini-projects-showcase.html index 38d809b..1f9318f 100644 --- a/public/cases/mini-projects-showcase.html +++ b/public/cases/mini-projects-showcase.html @@ -1,4 +1,4 @@ - + @@ -36,6 +36,30 @@ var L = Number(l); if (Number.isFinite(L)) d.style.setProperty("--theme-l", String(Math.min(70, Math.max(20, L)))); } + var hVal = h !== null ? h : 210; + var sVal = s !== null ? s : 90; + var lVal = l !== null ? Math.min(70, Math.max(20, Number(l))) : 40; + var H = (((hVal % 360) + 360) % 360) / 360; + var S = Math.min(100, Math.max(0, sVal)) / 100; + var Lv = Math.min(100, Math.max(0, lVal)) / 100; + var r, g, b; + if (S === 0) { r = g = b = Lv; } + else { + var q = Lv < 0.5 ? Lv * (1 + S) : Lv + S - Lv * S; + var p = 2 * Lv - q; + var hue2rgb = function(p, q, t) { + if (t < 0) t += 1; if (t > 1) t -= 1; + if (t < 1/6) return p + (q - p) * 6 * t; + if (t < 1/2) return q; + if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; + return p; + }; + r = hue2rgb(p, q, H + 1/3); + g = hue2rgb(p, q, H); + b = hue2rgb(p, q, H - 1/3); + } + var lum = 0.2126 * r + 0.7152 * g + 0.0722 * b; + d.style.setProperty("--on-accent", lum > 0.58 ? "hsl(220 14% 12%)" : "hsl(0 0% 98%)"); var rad = t.radius; if (rad === "soft" || rad === "medium" || rad === "strong") { d.dataset.radius = rad; @@ -235,9 +259,16 @@ background: color-mix(in srgb, var(--surface) 90%, var(--accent)); } + .mp-showcase-cells-demo__variant { + margin-bottom: 1.2rem; + } + + .mp-showcase-cells-demo__variant:last-of-type { + margin-bottom: 0; + } + .mp-showcase-cells-demo__legend { display: grid; - grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-bottom: 0.85rem; font-size: 0.72rem; @@ -245,25 +276,50 @@ text-align: center; } + .mp-showcase-cells-demo__legend--6 { + grid-template-columns: repeat(6, 1fr); + } + + .mp-showcase-cells-demo__legend--4 { + grid-template-columns: repeat(4, 1fr); + } + + .mp-showcase-cells-demo__legend--2 { + grid-template-columns: repeat(2, 1fr); + } + .mp-showcase-cells-demo__legend span { padding: 0.2rem 0; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--line) 35%, transparent); } - .mp-showcase-cells-demo__row { + .mp-showcase-cells-demo__row-label { + font-size: 0.82rem; + font-weight: 600; + color: var(--text); + margin: 0 0 0.55rem; + } + + .mp-showcase-cells-demo__grid { display: grid; - grid-template-columns: repeat(6, 1fr); gap: 0.5rem; margin-bottom: 0.55rem; } - .mp-showcase-cells-demo__row:last-of-type { - margin-bottom: 0; + .mp-showcase-cells-demo__grid--6 { + grid-template-columns: repeat(6, 1fr); + } + + .mp-showcase-cells-demo__grid--4 { + grid-template-columns: repeat(4, 1fr); + } + + .mp-showcase-cells-demo__grid--2 { + grid-template-columns: repeat(2, 1fr); } .mp-showcase-cells-demo__block { - grid-row: 1; min-height: 2.35rem; display: flex; align-items: center; @@ -288,6 +344,10 @@ grid-column: span 3; } + .mp-showcase-cells-demo__block--4 { + grid-column: span 4; + } + .mp-showcase-cells-demo__caption { margin: 0.85rem 0 0; font-size: 0.82rem; @@ -439,12 +499,13 @@
  • Типы карточек
  • Ширина в клетках
  • Живая сетка masonry
    • +
  • Фиксированная высота

    • Как пользоваться

    - Сначала выберите тип (stack, horizontal, compact, decor), затем data-mp-cells (1–3) и + Сначала выберите тип (stack, horizontal, compact, decor), затем data-mp-cells (1–4) и порядок li в списке. Карточки с data-mp-extra не влияют на высоту списка до кнопки «Показать все». Подробности — в docs/mini-projects-cards.md.

    @@ -674,35 +735,95 @@

    Ширина в клетках

    - Атрибут data-mp-cells на li.mini-projects-grid__item задаёт желаемую ширину от 1 до 3 клеток. + Атрибут 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 на узком. +

    -
    @@ -940,6 +1061,174 @@ + +
    +
    +

    Фиксированная высота

    +

    + Атрибут data-mp-height="…" на li.mini-projects-grid__item задаёт фиксированную высоту карточки в пикселях. Текст обрезается с многоточием, если не влезает. +

    +
      +
    1. + + +
      +

      + [4→4→2] height=600 · stack · ссылка + +

      +
        +
      • веб-сайт
        • +
      +

      4 → 4 → 2. data-mp-cells-sm="4" data-mp-cells-xs="2". Высота 600px.

      +
      +       +
      2. +
    2. + + +
      +

      + [2] height=600 · stack · ссылка + +

      +
        +
      • заметка
        • +
      +

      Две клетки, высота 600px.

      +
      +       +
      3. +
    3. + + +
      +

      + [2] height=400 · stack · ссылка + +

      +
        +
      • утилита
        • +
      +

      Две клетки, высота 400px.

      +
      +       +
      4. +
    4. + + +
      +

      + [2] height=400 · stack · ссылка + +

      +
        +
      • шаблон
        • +
      +

      Две клетки, высота 400px.

      +
      +       +
      5. +
    5. + + +
      +

      + [2] height=400 · stack · ссылка + +

      +
        +
      • плагин
        • +
      +

      Две клетки, высота 400px.

      +
      +       +
      6. +
    6. + +
      +

      + [3→2→1] · compact · ссылка + +

      +
        +
      • плагин
        • +
      +

      3 → 2 → 1. data-mp-cells-sm="2" data-mp-cells-xs="1". Авто-высота.

      +
      +       +
      7. +
    7. + +
      +

      + [3→2→1] · compact · ссылка + +

      +
        +
      • документ
        • +
      +

      3 → 2 → 1. data-mp-cells-sm="2" data-mp-cells-xs="1".

      +
      +       +
      8. +
    +
    +