Разработка UX/UI дизайна NFT-маркетплейса
OpenSea теряет долю рынка Blur-у не потому что у Blur лучше токеномика. Blur выиграл на UX для профессиональных трейдеров: bidding pool, sweep функция, real-time floor tracking — всё в одном экране без лишних кликов. OpenSea проектировался для коллекционеров, Blur — для трейдеров. Это разные продукты с разными паттернами использования. До начала дизайна нужно понять: кто именно пользователь и как он торгует.
Ключевые экраны и их проектирование
Галерея коллекций и discovery
Главная задача galery страницы — дать пользователю быстро оценить коллекцию без входа в каждый токен. Ключевые метрики над галереей: floor price, 24h volume, total sales, unique owners. Эти данные должны обновляться в реальном времени или близко к нему — без них пользователь открывает другую вкладку.
Сетка NFT-карточек: три режима отображения (крупный грид, мелкий грид, список) — разные пользователи предпочитают разные. Фильтры атрибутов — самый частый pain point плохих маркетплейсов: медленная фильтрация по traits превращает discovery в пытку. Фильтры должны работать мгновенно (клиентская фильтрация по загруженным данным) или через дебаунс <200ms на сервере.
NFT-карточка
Минимально необходимое на карточке: изображение (или 3D/видео превью), name/ID, floor price коллекции, текущая цена если выставлен на продажу, кнопка покупки. Кнопка «Buy» прямо на карточке — критически важна для профессиональных трейдеров. Переход на страницу токена для покупки — лишний клик, который режет конверсию.
Hover state на карточке — место для secondary actions: добавить в wishlist, копировать ссылку, быстрый bid.
Страница токена
Структура: медиа (полный размер) слева, trading panel справа. Trading panel — самый критичный элемент. Содержит: текущие листинги (sorted by price), история продаж, offers от buyers.
Trait рарность — показываем сразу рядом с атрибутами. Background: Purple (3.2%) — рядом с «3.2%» должен быть индикатор насколько это редко относительно коллекции. Трейдеры принимают решения на основе rarity.
Provenance (история владения) — таблица transfer событий с адресами, суммами и timestamp-ами. Это строит доверие и позволяет видеть wash trading (круговые переводы между адресами).
Минтинг-флоу
Отдельный паттерн от trading. Пользователь впервые подключает кошелёк — прогресс-индикатор этапов: Connect → Approve → Mint → Done. Каждый шаг должен объяснять что происходит. «Approve transaction in MetaMask» с иконкой MetaMask — пользователь понимает что делать. «Processing...» без контекста — нет.
Состояние «Sold Out» — не просто надпись. Показываем: вторичный рынок, текущую floor price, ссылку на OpenSea/Blur.
Профиль коллекционера
Два режима: «my collection» и «public profile». В public profile скрываем sensitive данные (pending transactions, unlisted items). Отображаем: portfolio value (в ETH и USD с live conversion), owned NFTs grid, activity feed (recent buys/sells/bids), offers received.
ENS resolution. Адреса везде отображаем как ENS имена если они есть (vitalik.eth вместо 0xd8dA...). wagmi/viem делают это через useEnsName хук — дёшево и важно для UX.
Мобильная версия
Специфика мобильного NFT UX: основные действия — browse и buy, trading через mobile — реже. Приоритет: быстрый просмотр галереи, читабельные карточки (2 колонки на mobile vs 4-5 на desktop), упрощённый trading panel.
Touch gestures: swipe по карточкам в carousel, pinch-to-zoom на медиа, pull-to-refresh на галерее. Кнопки минимум 44px высотой для комфортного тапа.
Wallet connection на mobile: WalletConnect QR code — стандарт. Дополнительно: deep links для открытия в MetaMask Mobile, Coinbase Wallet. ethereum: URI scheme поддерживается большинством мобильных кошельков.
Дизайн-система и компоненты
Маркетплейс требует богатой дизайн-системы: карточки, модальные окна (confirm purchase, place bid, list for sale), формы ввода цены в ETH/USD с live конвертацией, toast уведомления о статусе транзакций.
Dark mode обязателен. NFT-аудитория ожидает dark theme как default. Торговые интерфейсы (думай Bloomberg terminal, не веб-сайт) традиционно тёмные — меньше усталость глаз при долгом мониторинге.
Типографика и сетки. Monospace шрифт для адресов и цен — мгновенно даёт «крипто» контекст и облегчает чтение хэшей. Inter или аналог для основного контента.
Что проверяем на usability testing
Три ключевых сценария для тестирования:
- Новый пользователь находит и покупает первый NFT за < 3 минут
- Трейдер выставляет 10 NFT на продажу за < 5 минут
- Пользователь находит NFT с конкретным trait в коллекции за < 1 минуты
Если ни один из трёх не проходит с первой попытки без подсказок — дизайн нужно переделывать.
Процесс разработки
Research и wireframes (3-5 дней). Аудит конкурентов (Blur, OpenSea, Magic Eden), user flows для ключевых сценариев, low-fi wireframes.
UI дизайн (5-7 дней). Figma: дизайн-система, все ключевые экраны в desktop и mobile, interactive prototype для trading flow.
Handoff разработчикам. Figma tokens для цветов, типографики и spacing. Документация компонентов с состояниями (hover, active, disabled, loading). Спецификация анимаций (Framer Motion параметры).
Ориентиры по срокам
Дизайн для MVP маркетплейса (галерея, страница токена, профиль, mint flow) — 1-2 недели. Полный дизайн с trading dashboard, mobile и дизайн-системой — 3-4 недели.
Стоимость рассчитывается после уточнения объёма экранов и требований к дизайн-системе.