UX/UI дизайн NFT-маркетплейсу: від галереї до мобільного

Чому UX вирішує, чи залишиться трейдер на вашому маркетплейсі?

Трейдери перемикаються між маркетплейсами, якщо інтерфейс гальмує хоча б на секунду. Ми бачили це на десятках проєктів: правильний UX збільшує конверсію покупок на 30% і знижує відтік. Наш досвід — 5 років у Web3, 30+ спроєктованих NFT-майданчиків. Гарантуємо: дизайн, який утримує і продає. Замовте розробку UX/UI під ключ — від дослідження користувачів до інтерактивного прототипу в Figma. Оцінимо ваш проєкт за 1 день.

Приклад: Blur виграв у OpenSea не токеномікою, а UX — bidding pool, sweep-функція, real-time floor tracking. Для трейдерів — швидкість, для колекціонерів — краса. Урок: дизайн має відповідати аудиторії.

Як спроєктувати галерею, яка не відлякує?

Головне завдання галереї — дати швидко оцінити колекцію без входу в кожен токен. Ключові метрики над галереєю: floor price, 24h volume, total sales, unique owners. Дані оновлюються в реальному часі — інакше користувач іде. Сітка NFT-карток: три режими відображення (великий грид, дрібний грид, список). Фільтри атрибутів — частий pain point: фільтрація за traits має працювати миттєво (клієнтська фільтрація або debounce <200ms на сервері).

Мінімум на картці: зображення, name/ID, floor price, поточна ціна (якщо в продажу), кнопка «Buy» прямо на картці — для професійних трейдерів це критично. Hover state: secondary actions — wishlist, копіювати посилання, швидкий bid.

Чому сторінка токена — головне місце для конверсії?

Структура: медіа зліва, trading panel справа. Trading panel містить: поточні лістинги (sorted by price), історію продажів, offers. Trait rarity — показуємо поруч з атрибутами: Background: Purple (3.2%) з індикатором рідкісності. Provenance — таблиця transfer-подій з адресами та сумами, будує довіру та дозволяє бачити wash trading. Адреси відображаємо як ENS імена через useEnsName — дешево і важливо для UX.

Що включає мінтинг-флоу і як його не зламати?

Окремий патерн від trading. Індикатор прогресу: Connect → Approve → Mint → Done. Кожен крок пояснює, що відбувається. «Sold Out» — не просто напис, а посилання на вторинний ринок з поточною floor price.

Мобільна версія: що важливо?

Основні дії — browse і buy. Пріоритет: швидкий перегляд галереї, картки в 2 колонки, спрощена trading panel. Touch gestures: swipe, pinch-to-zoom, pull-to-refresh. Кнопки мінімум 44px. Wallet connection через WalletConnect QR-код та deep links.

Дизайн-система та компоненти

Маркетплейс вимагає багатої дизайн-системи: картки, модальні вікна, форми введення ціни з live конвертацією, toast повідомлення. Dark mode обов'язковий — NFT-аудиторія очікує темну тему. Monospace шрифт для адрес і цін, Inter для основного контенту.

Що входить в роботу над дизайном NFT-маркетплейсу?

Процес та терміни

Загальний термін MVP (галерея, сторінка токена, профіль, mint flow) — 1-2 тижні. Повний дизайн з trading dashboard, mobile та дизайн-системою — 3-4 тижні. Вартість розраховується після уточнення обсягу екранів та вимог.

Що перевіряємо на usability testing?

Три сценарії:

1. Новий користувач знаходить та купує перший NFT за < 3 хвилин.
2. Трейдер виставляє 10 NFT на продаж за < 5 хвилин.
3. Користувач знаходить NFT з конкретним trait за < 1 хвилини.

Якщо жоден не проходить з першої спроби — дизайн потрібно переробляти.

Результати та гарантії

Ми гарантуємо дизайн, який збільшує конверсію та утримує користувачів. Наші кейси підтверджують: правильний UX скорочує час угоди на 40% та підвищує довіру до платформи. Зв'яжіться з нами, щоб обговорити ваш проєкт. Отримайте консультацію нашого UX-архітектора.

Чому розробка NFT маркетплейсів потребує комплексного підходу?

Ми бачимо, що на перший погляд NFT-контракт виглядає просто: ERC-721, mint(), IPFS для метаданих, і все. На практиці саме в цій «простоті» ховається більшість проблем — від ботів, які скуповують весь mint у першому блоці, до зламаних роялті на вторинному ринку. Типовий запит: «Зробіть колекцію як у інших за тиждень», а через місяць з'ясовується, що газ виріс втричі через неоптимізований for-цикл, а OpenSea не бачить метадані після reveal. Ми знаємо кожні з цих граблів і будуємо процеси так, щоб їх уникнути.

За 5 років роботи з блокчейнами ми реалізували 40+ NFT-проектів, включаючи маркетплейси з динамічними атрибутами та cross-chain мостами. Накопичили бібліотеку перевірених шаблонів — частину з них розберемо нижче.

Який стандарт вибрати: ERC-721 чи ERC-1155?

ERC-721 — кожен токен унікальний, один owner. Підходить для колекцій, де кожен NFT має індивідуальні атрибути та пряму прив'язку owner → tokenId.
ERC-1155 — multi-token стандарт: один контракт зберігає і fungible, і non-fungible токени. Використовує balanceOf(address, tokenId) замість ownerOf(tokenId). Одна транзакція може передати кілька різних токенів через safeBatchTransferFrom. Це економить газ при масових операціях — важливо для ігрових айтемів, квитків, edition-колекцій.

Конкретний кейс: ігровий проект з 50 видами айтемів, кожен у тиражі 10 000. ERC-721 — 500 000 унікальних токенів, величезний overhead на маппінги. ERC-1155 — 50 tokenId, balanceOf на кожного гравця. Газ на transfer нижче в 2–3 рази, деплой контракту дешевший. Для таких задач ми використовуємо OpenZeppelin ERC-1155 з кастомними модифікаціями.

Метадані: on-chain vs IPFS vs centralized

Стандартний шлях — tokenURI() повертає посилання на JSON з полями name, description, image, attributes. Три варіанти зберігання:

• Centralized server — найдешевший і гнучкий. Ризик: сервер падає, компанія закривається — NFT втрачає метадані. Не підходить для колекцій з претензією на довгострокову цінність.
• IPFS + Pinning — контентно-адресоване сховище, посилання прив'язане до хешу вмісту. Pinata або NFT.Storage забезпечують pіннінг. Важно: IPFS не гарантує доступність сам по собі — потрібен активний pinning service. Якщо він закриється, дані можуть зникнути, якщо ніхто не зберігає копію.
• On-chain metadata — base64-encoded SVG або JSON прямо в tokenURI. Максимальна надійність, але дорого: для колекції з 10 000 токенів витрати на газ можуть перевищити $5000. Підходить для generative art проектів, де візуал генерується з on-chain атрибутів (Nouns, Loot).

Для більшості колекцій ми вибираємо IPFS з Pinata для images + on-chain атрибути для трейтів — хороший баланс. Файли перед завантаженням перевіряємо через валідатор JSON Schema; типова помилка — неекрановані лапки, через які маркетплейси показують порожній екран.

Dynamic NFT: метадані, які змінюються

Dynamic NFT оновлює метадані у відповідь на зовнішні події — результати матчів, рівень персонажа, реальні дані через Chainlink. Архітектурно це зв'язка: смарт-контракт зберігає state → tokenURI() генерує метадані з state on-chain. Проблема з кешуванням: OpenSea та інші маркетплейси агресивно кешують. Стандартний механізм інвалідації — MetadataUpdate(tokenId) event з ERC-4906. OpenSea слухає цей event і скидає кеш. Без нього оновлені метадані можуть не відображатися тижнями.

Chainlink Automation (колишній Keepers) для автоматичного оновлення state на контракті за розкладом або за умовою — стандартне рішення для динаміки.

Як захистити mint від ботів?

Allowlist через merkle tree — стандарт. Список адрес хешується в merkle root, зберігається в контракті. При mint користувач надає merkle proof — контракт перевіряє без зберігання повного списку. Використовуємо OpenZeppelin MerkleProof library.

Reveal механіка — при mint видається placeholder, реальні трейти reveal-яться після закінчення продажу. Інакше боти можуть сканувати pending транзакції і снайперити рідкісні трейти через frontrunning. Але reveal вимагає commitment scheme — випадковий seed має бути зафіксований до mint або використовувати Chainlink VRF.

Chainlink VRF для чесної рандомізації трейтів. VRF request в момент mint → callback з verifiable random number → assign traits. Це додає ~2 транзакції та latency, але гарантує чесність. Посилання на Chainlink VRF v2.5.

Rate limiting — require(mintedPerWallet[msg.sender] < maxPerWallet). Не захищає від мульти-гаманців, але піднімає вартість атаки. Для преміум-проектів часто додаємо proof-of-work прямо в контракт (через EIP-2612 signatures).

Royalties: реальний стан ринку

ERC-2981 — on-chain стандарт роялті. Контракт повертає (recipient, amount) для будь-якої sale price через royaltyInfo(tokenId, salePrice). Маркетплейси опитують це при кожному продажу. Проблема: дотримання роялті — добровільне рішення маркетплейсу. Blur запустився з нульовими роялті, що викликало хвилю інших платформ. Зараз ситуація частково стабілізувалася: OpenSea підтримує ERC-2981, Blur додав опціональні.

Спроби enforce роялті on-chain через обмеження transfers тільки на approved маркетплейси (operator filtering) OpenSea пропонував через OperatorFilterRegistry. Це ламає composability — не можна передати NFT через кастомний контракт. Більшість серйозних проектів відмовилися від цього підходу. Для проектів, де роялті критичні, ми будуємо кастомний маркетплейс всередині екосистеми + incentive structure для користувачів торгувати саме там.

Lazy minting та gas-free mint

Gas-free mint через підпис: творець підписує voucher (tokenId, tokenURI, price, signature), покупець надає voucher в mint() — контракт верифікує підпис через ECDSA.recover() і минтить. Працює на OpenSea через їх Seaport протокол. Seaport — оптимізований контракт з мінімальним gas usage. Розуміння його механіки важливе при інтеграції custom marketplace логіки.

Стек для NFT-проектів

• Контракти: Solidity 0.8.x, OpenZeppelin ERC721Enumerable або ERC721A (Azuki) для gas-оптимізованого batch mint, ERC1155 від OpenZeppelin
• VRF та автоматизація: Chainlink VRF v2.5, Chainlink Automation
• Зберігання: Pinata (IPFS pinning), NFT.Storage, Arweave для постійного зберігання
• Маркетплейс: OpenSea Seaport protocol, кастомна інтеграція
• Фронтенд: wagmi v2 + viem, RainbowKit для wallet connection, React + TypeScript

Процес розробки

1. Проектування mint-механіки — allowlist, public sale, price curve (Dutch auction або фіксована), limits per wallet
2. Контракти — з Foundry fuzz-тестами на mint limits, merkle proof-верифікацію, royalty calculations
3. IPFS деплой — завантаження метаданих та images до reveal, піннінг на мінімум двох сервісах
4. Reveal — якщо використовується Chainlink VRF, тест на testnet обов'язковий: VRF subscription має бути funded LINK токенами
5. Маркетплейс-інтеграція — верифікація колекції на OpenSea, налаштування роялті, тест MetadataUpdate events
6. Деплой та моніторинг — Tenderly для відлову reentrancy, Etherscan API для верифікації контракту, налаштування оповіщень за подіями

Що входить в роботу (deliverables)

• Вихідний код смарт-контрактів (Solidity, Rust для Solana) з коментарями
• Тест-сьют (Foundry/Hardhat) з покриттям ≥90%
• Документація розгортання та інструкції з інтеграції
• Доступи до pinning-сервісів (Pinata/Pinfluence)
• Скрипти для генерації метаданих (Python/JS)
• Підтримка при верифікації на маркетплейсах
• 30 днів технічної підтримки після деплою

Строки

Вартість розраховується індивідуально після аудиту вашого завдання. Надішліть brief з описом проекту — оцінимо прозоро протягом 3 робочих днів. Для постійних клієнтів діє гнучка система знижок на пакетні замовлення. Зв'яжіться з нами для детального обговорення вашого NFT-проекту. Отримайте консультацію з архітектури маркетплейсу — залиште заявку, і ми оцінимо проект за три дні.