Все работып
2024BrandGraphicCase

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

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

Результаты

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 точка сливалась. Убрал точку внутрь щита в виде вырезки.

Галерея

Ключевые кадры

1 — Знак и его конструкция
2 — Motion-язык
3 — 4 варианта кнопки
4 — Паттерн для баннеров

Результат

Итог

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

Следующий проект

Reels-серия «Кэшбек-охота» с CTR-hook в первые 2 сек

Т-Банк · концепт 8 роликов