Product Designer · Middle

5 лет в дизайне, два года в продукте

Мобильный вебВеб-приложения
Решения сверяю с рынком117 российских приложений, 7 360 сценариев и 36 880 экранов разложены по шагам и лежат под рукой.
Лента для ассистента Для ассистента

Один адрес со всем: анкета, опыт, навыки, кейсы, договорённости. Скопируйте и вставьте в ChatGPT или Claude, ставить ничего не нужно.

prokhor.me/llms.txt
Знак ПрохораПрохор
РезюмеCV Telegram

Спросите что угодно о Прохоре

Отвечает модель по материалам сайта. Чего нет в кейсах, того она не знает.

Отвечает модель и может ошибаться. Проверяйте важное у самого Прохора.

Кейс, Sber ID

Одна кнопка Sber ID вместо 6 разных у партнёров

( А )

Знак + 4 варианта кнопки + motion-язык + библиотека паттернов. Партнёрские сайты получают plug-and-play кит.

( Б )

Sber ID · графическая айдентика

( В )

Brand, Graphic, Motion
2024
Самостоятельный концепт

рис. 1, Sber ID · графическая айдентика

Результаты

4
варианта кнопки закрывают все партнёрские темы
12 → 320px
диапазон читаемости знака
30
Figma-компонентов в библиотеке

Референсы

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

Крутите мышью

Проблема бизнеса

Что было сломано.

Sber ID = базовая инфраструктурная услуга. Партнёрские сайты (Delivery Club, СберМегаМаркет, Rutube) ставят кнопку «Войти через Sber ID» в 6+ разных стилях. Пользователь не узнаёт бренд.

Гипотезы

Что я предположил.

  • H1Одна form-language форма-щит с точкой ID должна читаться от 12px до 320px.
  • H24 варианта кнопки (тёмная / светлая / контурная / текстовая) закрывают 98% партнёрских тем.
  • H3Motion при hover как «сборка ID из точки» строит story-hook и запоминаемость.

Ограничения

С чем работал.

  • ·Fitting в существующий Sber brand-book (палитра, скругления).
  • ·Lottie-совместимость (React / iOS / Android).
  • ·Vector, все размеры, от favicon до баннер 3000×.

Дизайн-решения

Как я это сделал.

  1. 01

    Иконка: полукруг-щит + микро-точка. Одна форма для всех размеров.

  2. 02

    Motion: щит собирается из точки при hover, 400ms cubic-bezier, Lottie JSON.

  3. 03

    Кнопка: 4 варианта. Guidelines когда какой брать.

  4. 04

    Айдентика-паттерн: тайлы полукругов, для баннеров и push-ов.

  5. 05

    Style guide в PDF на 24 страницы + Figma-библиотека 30 компонентов.

Пользовательский сценарий

Линейный flow.

  1. 01
    Партнёр открывает kit
    Figma-file
  2. 02
    Выбирает тему сайта
    тёмная / светлая
  3. 03
    Импортирует нужный вариант
    copy component
  4. 04
    Устанавливает Lottie
    motion работает out-of-box

Что не получилось сразу

Пришлось переделывать.

  • Первая иконка, щит + точка сверху → на 12px точка сливалась. Убрал точку внутрь щита в виде вырезки.

Результат

Итог

Case study для brand-portfolio. Показывает работу вне цифрового UI.

Следующий кейс

Запись к врачу за 22 секунды вместо 4:20

СберЗдоровье · концепт-редизайн iOS

2026