Розробка UX/UI дизайну NFT-маркетплейса
OpenSea втрачає долю ринку Blur не тому що у Blur краща токеноміка. Blur переміг на UX для професійних трейдерів: bidding pool, sweep функція, реал-тайм floor tracking — все в одному екрані без зайвих кліків. OpenSea проектувався для колекціонерів, Blur — для трейдерів. Це різні продукти з різними паттернами використання. До початку дизайну потрібно розуміти: хто саме користувач та як він торгує.
Ключові екрани та їх проектування
Галерея колекцій та discovery
Головна задача gallery сторінки — дати користувачу швидко оцінити колекцію без входження в кожен токен. Ключові метрики над галереєю: 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 конверсією), 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, інтерактивний прототип для trading flow.
Handoff розробникам. Figma tokens для кольорів, типографіки та spacing. Документація компонентів з станами (hover, active, disabled, loading). Специфікація анімацій (Framer Motion параметри).
Орієнтири за часом
Дизайн для MVP маркетплейса (галерея, сторінка токена, профіль, mint flow) — 1-2 тижні. Повний дизайн з trading dashboard, mobile та дизайн-системою — 3-4 тижні.
Вартість розраховується після уточнення кількості екранів та вимог до дизайн-системи.