Кейс · Криптокошелёк · 2026

Lush.

Меньше шума, больше сигнала: мультичейн-криптокошелёк, очищенный до сути, — каждое состояние продумано, каждый переход выверен по времени.

Собственный концепт: сделал его один с ИИ примерно за семь часов.

UI / UX-концептИнтерактивный прототипМоушнДизайн-система

Открыть прототип Все кейсы

Экран обмена: ETH на USDC с маршрутом, проскальзыванием и комиссией

Экран доходности с живым счётчиком и пулами стейкинга

Главная портфеля: общий баланс $87,432.91, график и четыре действия

0,4 с

на чтениебаланса, пока ждёшь
такси

Один кислотный акцент#C6FF00

30экранов, все состояния продуманы

10экранов связаны в один прототип

6моушн-паттернов, один ритм

1кислотный акцент — и всё

0декора

~7 чсоло + ИИ, Claude Code

Суть за 20 секундКонцепт

Что: Мультичейн-криптокошелёк без лишнего: iOS-концепт с живым прототипом.
Зачем: Кошельки соревнуются цветом, а людям нужно число: сколько у меня и в безопасности ли это?
Моя роль: UI/UX от и до, моушн и дизайн-система, соло с ИИ (собственная инициатива).
Результат: 30 экранов · 10 в одном прототипе · ~7 ч соло + ИИ

Смотреть кейс ↓

Обзор

Криптокошельки соревнуются цветом. Lush соревнуется цифрой — сколько у меня денег и в безопасности ли они? Чёрный, белый, один кислотный акцент и моноширинные цифры везде.

ФинтехОтрасль2026Год30ЭкрановКонцепт iOSПлатформа

РольUI / UX · концепт от начала до конца

Объём30 экранов · 10 интерактивных · 6 моушн-паттернов · дизайн-система

СтекHTML · CSS · JS — один готовый артефакт

КомандаОдин с ИИ · ~7 часов · Claude Code

СтатусСобственный проект Lab · спекулятивный

Коротко

Тридцать экранов. Один акцент. Ноль шума.

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

экрановОнбординг · Отправка · Обмен · Доход
Рынки · Настройки · Пограничные

Подход

Деньги — это серьёзно. Меньше шума — больше доверия.

Проблема

Криптокошельки соревнуются цветом.

Градиенты, маскоты, бейджи. А пользователю нужны два ответа: сколько у меня денег и в безопасности ли они.

ТезисЦифра — это и есть продукт.

Убрать всё, что не цифра. Считывается за 0,4 секунды.

Три правила без исключений

01Один акцент на экран — активное, или позитивное, или в фокусе, но никогда всё сразу.
02Моноширинные цифры в каждом балансе — крипта тикает, а вёрстка не прыгает.
03Глубина через прозрачность, а не через тени или обводки.

Что не вошло

Голографические градиенты · маскоты и 3D-монеты · бейджи-достижения · разноцветная кодировка активов · театр с pull-to-refresh.

Читать всю историю

Проблема. Криптокошельки соревнуются цветом. Градиенты, маскоты, геймифицированные бейджи. Пользователю не нужно шоу — ему нужны две вещи: сколько у меня денег и в безопасности ли они.

Тезис. Цифра — это и есть продукт. Убрать всё, что не цифра. Чёрный, белый, один кислотный акцент. Моноширинные цифры везде, чтобы вёрстка никогда не сдвигалась. Считывается за 0,4 секунды — столько уходит на то, чтобы глянуть баланс, пока ждёшь такси.

Принципы. Один акцент на экран — активное, или позитивное, или в фокусе, но никогда всё сразу. Моноширинные цифры в каждом балансе — крипта тикает, а вёрстка не прыгает. Глубина через прозрачность, а не через тени или обводки — поверхности дышат, а не громоздятся друг на друга.

Отказались. Многоступенчатые голографические градиенты; иллюстрации с маскотами и 3D-рендеры монет; геймифицированные бейджи-достижения; разноцветная кодировка категорий активов; тактильный театр с pull-to-refresh.

Процесс

Семь часов. Пять этапов, строго по порядку.

Исследование, флоу, вайрфреймы, хай-фай, прототип — от публичных болей до одного готового HTML-артефакта.

Час 0–1Исследование + бриф4 кошелька, 90 отзывов в App Store, треды на Reddit.

Час 1–2UX-флоу4 сценария, 30 узлов. Одна стрелка — одно решение.

Час 2–3Вайрфреймы30 серых фреймов, 0 цветов.

Час 3–5Хай-фай экраны30 экранов по 4 состояния, за один проход.

Час 5–7Прототип + моушн11 связанных экранов, 6 моушн-паттернов.

Нажать «Отправить»›Выбрать получателя›Ввести сумму›Проверить›Готово

Флоу отправки · UX-карта — успешный путь, 5 узлов, 4 решения пользователя.

Этап за этапом

Час 0–1 · Исследование + бриф. Разбор публичных болей: отзывы на 4 кошелька в App Store (90 отзывов), треды на Reddit о том, как люди теряются в онбординге. Бриф поставил себе сам: самый простой путь от $0 до первой транзакции.
Час 1–2 · UX-флоу. Четыре сценария — онбординг, отправка, обмен, доходность. Каждая развилка расписана (успех, ошибка, пусто, загрузка). Одна стрелка — одно решение пользователя. 4 флоу · 30 узлов.
Час 2–3 · Вайрфреймы. Серый лоу-фай: без шрифтов, без иконок, без реальных цифр — только иерархия и плотность информации. Если работает в пунктирных прямоугольниках — работает.
Час 3–5 · Хай-фай экраны. Применены токены (1 акцент, 2 смысловых, 5 нейтральных), типографика из 3 семейств, все состояния за один проход — пусто, загрузка, ошибка, успех.
Час 5–7 · Прототип + моушн. 11 экранов связаны клик за кликом, описаны 6 моушн-паттернов (счётчик, пульс, скелетон, успех, шторка, переход), всё собрано в один HTML-артефакт.

Флоу отправки: нажать «Отправить» в портфеле → выбрать получателя (контакт / вставить / QR) → ввести сумму (цифровая клавиатура + чипы) → проверить (сумма · комиссия · итого) → готово (хеш · квитанция).

Лоу-фай — сначала формаХай-фай — один акцент

Лоу-фай вайрфрейм портфеля: баланс, график, четыре действия, строки активов

Лоу-фай вайрфрейм ввода суммы: цифровая клавиатура и чипы с процентами

Ввод суммы отправки в хай-фай, с цифровой клавиатурой

Если работает в пунктирных прямоугольниках — работает. 4 фрейма, ещё без цвета и шрифтов.

Прототип

Кликайте куда угодно.

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

ПортфельБаланс — главный герой; четыре действия в одном касании.

ПолучательВставить адрес, сканировать QR или выбрать контакт.

СуммаСначала клавиатура, чипы с %, переключение в фиат.

ПодтверждениеСумма, комиссия, итого — вся правда.

УспехРисованная галочка, хеш, два следующих шага.

Обмен · покойДве карточки и вращающаяся кнопка; маршрут, проскальзывание и влияние на цену — над кнопкой действия.

Выбор токенаНижняя шторка: поиск, быстрый выбор, отсортированный список.

Обменяно.Та же рисованная галочка, а пара токенов — как доказательство.

Попробоватьживой прототип
откроется в новой вкладке

Все экраны прототипа

Портфель · главная — баланс в центре внимания, график считывается с одного взгляда, четыре основных действия в одном касании.
Актив · Bitcoin — сфокусированный график, ключевые показатели в две колонки, транзакции ниже.
Отправка · получатель — вставить адрес, сканировать QR или выбрать контакт; проверка срабатывает до того, как можно продолжить.
Отправка · сумма — ввод с цифровой клавиатуры, быстрые чипы с процентами и пересчёт в фиат, который переключается касанием.
Отправка · подтверждение — получатель, сумма, комиссия сети, итого — вся правда на одном экране.
Отправка · успех — рисованная галочка, хеш транзакции, два следующих действия.
Получение · QR — выбор сети сверху, адрес с кнопками «Копировать» и «Поделиться» ниже.
Обмен · покой — две карточки друг над другом, между ними вращающаяся кнопка; маршрут, проскальзывание и влияние на цену — над кнопкой действия.
Обмен · выбор токена — нижняя шторка с поиском, чипами быстрого выбора и полным отсортированным списком.
Обмен · успех — та же рисованная галочка, на этот раз с парой обмена как доказательством.
Доход · обзор — живой счётчик превращает доходность в пульс; сначала избранные пулы, потом ваши активные позиции.

Все состояния · онбординг

Каждый экран, каждое состояние.

Не только заглавные экраны, но и стыки между флоу — начиная с пяти экранов онбординга, от приветствия до код-пароля.

01 · Приветствие

02 · Создать или импортировать

Выбор старта: создать или импортировать кошелёк

03 · Сид-фраза

Секретная фраза восстановления из 12 слов

04 · Проверка

Проверка сид-фразы: нажмите слова по порядку

05 · Код-пароль

Состояния и пограничные случаи

Пусто, загрузка, ошибка, не хватает средств. Продумано, а не брошено.

Предупреждение о нехватке баланса при обмене

Лента активности с транзакциями и оповещениями

06 · Пустой кошелёк07 · Загрузка09 · Ошибка транзакции10 · Недостаточно средств08 · Активность

Обмен, доходность, рынки

Детали за каждым главным экраном.

Транзакции в ожидании, проскальзывание, стейкинг, сети — а дальше рынки, карточка токена, настройки и безопасность.

11 · TX в ожидании

12 · Проскальзывание

Настройки транзакции: проскальзывание, срок, газ

13 · Пул

Карточка пула: стейкинг ETH 2.0, 4.5% APY

14 · Стейкинг

15 · Застейкано

16 · Сеть

17 · Рынки

18 · Токен

19 · Настройки

20 · Безопасность

Безопасность: кошелёк защищён, 3 из 4 мер

Моушн

Шесть паттернов, один ритм.

У каждой анимации есть функция: подтвердить, сориентировать, связать, предсказать. 200–320 мс на cubic-bezier(0.4, 0, 0.2, 1).

80 мс

Табличный счётчик

Цифры меняются — вёрстка нет.

2 с

Живой пульс

Два кольца отмечают всё, что в реальном времени.

1,6 с

Мерцание скелетона

Держит место, пока приходят данные.

700 + 400

Рисованная галочка

Сначала кольцо, потом галочка. Заслуженно, а не даром.

320 мс

Нижняя шторка

Кривая iOS для каждой модалки.

8 px

Растворение + сдвиг

Между каждым шагом флоу.

Спецификация моушна

01 · Счётчик — табличный тикер. Моноширинные цифры + обновление каждые 80 мс. Цифры меняются, вёрстка нет. Используется в каждом балансе и на всех экранах доходности.
02 · Пульс — индикатор «вживую». Два кольца со сдвигом, цикл 2 с. Отмечает всё, что обновляется в реальном времени, — баланс, доходность, газ.
03 · Скелетон — мерцание загрузки. Градиентная волна 1,6 с по surface-1. Держит место, чтобы вёрстка оставалась спокойной, пока приходят данные.
04 · Успех — рисованная галочка. Сначала рисуется кольцо (700 мс), за ним галочка (400 мс, задержка 0,6 с). Заслуженно, а не даром.
05 · Нижняя шторка — модалка снизу вверх. 320 мс cubic-bezier(0.4, 0, 0.2, 1) — кривая iOS. Выбор токена, выбор сети, настройки — всё на ней.
06 · Переход между страницами — растворение + сдвиг. Уходящий экран смещается на 8 px влево до 0% прозрачности, входящий — наоборот. 320 мс. Используется между каждым шагом флоу.

Дизайн-система

Система, доведённая до строгости.

Один акцент, два функциональных цвета, нейтральные, три шрифтовых семейства. Собираешь один экран — получаешь сотню согласованных.

Цветовые токены · 1 + 2 + 5

Фон#0A0A0B

Поверхность 14% белого

Поверхность 27% белого

Обводка16% белого

Текст#FFFFFF

Акцент#C6FF00

Успех#5BD68A

Опасность#F2566B

Шрифты · 3 семейства

$87k

.91

Space Grotesk для акцидентных цифр и заголовков, Inter 14/22 для основного текста, JetBrains Mono для живого тикера.

Кнопки · 4 варианта

Confirm SwapConnect WalletView HistoryAdd Network

Основная · акцент, вторичная · поверхность, контурная · моно, призрачная · пунктир.

Поверхности · 3 уровня глубины

1Базовая карточкафон · нейтральный
2Стеклянная карточкаblur(20) · 7% белого
3Акцентная панельизбранное · внимание

Образец типографики

Display · Space Grotesk 500 · −0.03em — «$87,432.91».
Заголовок · Space Grotesk 600 — «Less noise. More signal.»
Основной текст · Inter 400 · 14/22 — считывается с одного взгляда, всегда моноширинные цифры, никакого декора — рассчитано на 0,4 секунды, пока ждёшь такси.
Моно · JetBrains Mono · тикер — «+$0.0084 / sec · LIVE».

30 экранов · 1 акцент · 0 декора.