Dapp.Expert — криптомедіа-платформа

Контекст

Dapp.Expert — криптомедіа-платформа: новини, аналітика й рейтинги монет, dApps, NFT і бірж. Вона працювала паралельно з DeFight, браузерною RPG від тієї ж команди.

Моя роль

Я вів дизайн Dapp.Expert як Design Lead у команді з трьох дизайнерів: від брендбука й дизайн-системи до кожного екрана продукту. На мені були рішення про структуру платформи, правила бібліотеки й те, як дизайн доходить до розробки.

Ми працювали як одна система, а не як три окремі пари рук. Усі макети збиралися з однієї бібліотеки, кожен екран проходив рев’ю, а до розробки потрапляв зі всіма станами, анотаціями логіки й позначкою готовності. Частину рутини, від аудиту бібліотеки до підготовки макетів до передачі, ми прискорили власними ШІ-інструментами: команда витрачала час на рішення, а не на перевірки.

Айдентика

Перш ніж малювати інтерфейси, ми зібрали брендбук. Знак «dp» у кутових дужках нагадує видошукач: платформа наводить фокус на крипторинок. Логотип має двоколірну й монохромну версії для темного та світлого фону, а охоронне поле й мінімальний розмір не дають знаку загубитися ні в хедері, ні на банері.

Палітра тримається на одному яскравому акценті, Special Crimson #F81A44, і шкалі глибоких темних відтінків. Знак отримав власний градієнт від акценту до прозорості, а вся типографіка побудована на Inter. Брендбук і дизайн-система живуть на одних кольорах, тому сайт, банери й соцмережі виглядають як один продукт.

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

Продукт живе на даних: таблиці з десятком колонок, ціни, що оновлюються щосекунди, стрічки новин і рекламні блоки. Щоб усе це трималося разом, ми зібрали одну бібліотеку для всієї платформи: від кнопок і полів до таблиць рейтингів, карток новин і готових шаблонів сторінок.

Темна тема з одним яскравим акцентом: червоний A1 веде погляд до головних дій, а нейтральна шкала з 19 кроків розводить фон, картки й таблиці за глибиною. Зелений і червоний показують зростання й падіння курсу, а це головна мова інтерфейсу для криптоаудиторії. Типографіка на Inter: від великих Display для заголовків до дрібних Caption для щільних таблиць.

Кожен компонент має всі стани: hover, pressed, disabled і завантаження, а таблиці й картки отримали скелетони на час підвантаження даних. Шаблони сторінок зібрані у трьох брейкпоінтах (1440, 768 і 360), тож сайт однаково тримається на десктопі, планшеті й телефоні.

Головна

Головна збирає все, заради чого приходять на платформу, на одному екрані: свіжі новини, рейтинг ринку, статті й підписку. Над усім сайтом іде смуга з живою статистикою: кількість dApps, блокчейнів, активних користувачів і обсяги за 30 днів. Гість і залогінений користувач бачать різні версії сторінки, а кожен блок ми розклали на десктоп, планшет і телефон.

Перший екран — це редакційна вітрина з головними новинами, а під нею короткий рейтинг ринку з табами Dapps, Cryptocurrency, DEX, CEX і NFT.

Новин буває різна кількість, тому хіро ми зробили гнучким: чотири, три або дві картки, і сітка щоразу виглядає завершеною.

Рейтинги

Рейтинг — найбільш «важка» сторінка платформи і серце аналітики. П’ять табів (Dapps, Cryptocurrency, DEX, CEX і NFT) працюють як п’ять окремих таблиць: у кожного типу активу свої метрики, від ціни й капіталізації монет до floor price NFT-колекцій. Таблиця показує до сотні рядків, а коли колонок більше, ніж вміщує екран, вона скролиться горизонтально із закріпленими першими колонками.

Один каркас для п’яти різних таблиць: таби, фільтр за блокчейном, кількість рядків і Customize завжди на своїх місцях. Перемикання між типами активів не змушує заново орієнтуватися.

Кожен збирає таблицю під себе. У Customize можна вибрати до 12 метрик із бібліотеки, перетягнути їх у потрібному порядку й повернути все до стандартного вигляду однією кнопкою. Ми продумали й межі: ліміт метрик і заборону вимкнути останню колонку.

Сторінка монети

Сторінка монети збирає все про актив на одному екрані: ціну й ключові метрики зліва, графік з порівнянням і періодами в центрі, нижче біржі, новини й опис. На мобільному ті самі блоки розкладені табами Overview, Markets, News і About.

Markets відкривається на весь екран, коли потрібні деталі. Spot, Perpetual і Futures мають власні колонки, від глибини ринку до дати експірації, а фільтри CEX/DEX і пар працюють однаково для всіх.

Дрібниці теж продумані: теги активу зібрані в окремий попап за групами, а ціною можна поділитися в один дотик.

Сторінка NFT

Сторінка NFT тримає в центрі сам токен: велике зображення зліва, праворуч колекція, ціна й технічні дані, нижче трейти та історія ціни. На мобільному той самий порядок у колонку.

Картка ціни змінюється разом зі статусом токена: найкраща пропозиція, коли NFT не продається, Buy now у продажу й таймер до кінця аукціону.

Пошук і сповіщення

Пошук відкривається з будь-якої сторінки й одразу підказує: до введення запиту показує трендові монети й недавні пошуки. Результати групуються за типом: монети, DEX-пари й біржі, по три в кожній групі з переходом до повного списку.

На мобільному пошук займає весь екран і проходить ті самі стани: тренди, недавні запити, повний список групи й порожній результат із підказкою, що робити далі.

Сповіщення відкриваються боковою панеллю й не відводять зі сторінки. Нові події стоять зверху, решта йде в «Earlier». Тип видно з іконки: алерт ціни, новина чи анонс. Для порожнього списку є власний стан, а на мобільному панель відкривається на весь екран.

Новини й статті

Новини й статті живуть на одному шаблоні: стрічка з рекомендованим і свіжим, таби категорій і однакова картка матеріалу. Так редакція публікує обидва формати без окремого дизайну, а читач не відчуває різниці між розділами.

Сторінка матеріалу зроблена для довгого читання: зміст для навігації довгим текстом, кнопка Share і меню додаткових дій під рукою на десктопі й мобільному.

На мобільному кожен розділ живе своїм життям, а не стиснутою копією десктопу: таблиці отримали власну навігацію, сторінки активів розкладені табами, а форми розбиті на короткі кроки.

Реклама

Рекламний розділ продає аудиторію платформи: перший екран з одним закликом, далі цифри аудиторії, демографія й формати співпраці.

Кожен формат веде до своєї форми: розміщення новини, статті або DAPP. Для нестандартних запитів є окремий блок партнерств.

Форма замовлення сама рахує ціну: вибрані опції одразу з’являються в закріпленому блоці Price details, і рекламодавець бачить підсумок до відправки.

Профіль і внесок спільноти

Особистий кабінет зібраний навколо бокового меню: налаштування профілю, безпека акаунта з email, гаманцем і двофакторною перевіркою, сповіщення й розділ Contribute. На мобільному ті самі пункти живуть в одному меню під аватаром.

Через Contribute користувачі самі додають на платформу DAPP-и. Форма збирає логотип, категорію, блокчейн, посилання й мови, а список показує статус кожної заявки: New, Updated, Published або Rejected.

Модерація прозора для автора: у картці заявки видно статус, а якщо її відхилили, то й причину відмови.

Так само спільнота пише статті: обкладинка, мова, заголовок і текст в одній формі.

Вхід і реєстрація

Аудиторія криптомедіа неоднорідна: хтось звик до пошти й пароля, хтось заходить лише через гаманець. Тому ми зробили три рівноправні способи входу: email, Google і криптогаманець. Перший екран вітає новачка, а для тих, хто повертається, є компактна модалка без зайвого.

Відновлення пароля пройде без підтримки: лист з інструкцією, новий пароль із перевіркою на збіг і підтвердження, що все збережено. Кожна помилка пояснює, що сталося і що робити далі.

Найцікавіша частина — гаманці. Після підключення TrustWallet, MetaMask чи WalletConnect користувач обирає: прив’язати гаманець до наявного акаунта чи створити новий. Ми передбачили й крайні випадки: якщо гаманець порожній, платформа пояснює, що потрібен активний гаманець із активами від $1.

Вхід через гаманець

1. 01Підключення TrustWallet, MetaMask чи WalletConnect
2. 02Гаманець уже прив'язаний до акаунта?

   ТакВхід одразу

   НіПрив'язати до наявного email-акаунтаАбо створити новий акаунт: потрібні активи від $1
3. 03Підтвердження й готовий профіль

Реєстрація закінчується не на паролі: пошту підтверджують кодом, потім користувач додає аватар та ім’я.

Якщо ім’я збігається із захищеним брендом, наприклад назвою біржі, акаунт іде на верифікацію. Так ніхто не видасть себе за відомий бренд і не обдурить спільноту.

Результати

Dapp.Expert пройшов шлях від бренду до повного продукту, що працював у проді поруч із DeFight.

За два роки ми зібрали платформу, у якій редакція, спільнота й рекламодавці працюють в одному інтерфейсі.

• 01 Один бренд Брендбук, дизайн-система й продукт живуть на одних кольорах і шрифтах, тому сайт, банери й соцмережі виглядають як одне ціле.
• 02 Система, а не набір екранів 172 набори й 1 085 варіантів компонентів зі станами та скелетонами: нові сторінки збираються з готових деталей.
• 03 Увесь продукт 12 розділів, від рейтингів і сторінок активів до реклами й входу через гаманці, у трьох брейкпоінтах.

Що я виніс

Dapp.Expert навчив мене проєктувати продукт, що живе на даних: щільні таблиці, ціни в реальному часі й десятки станів, які мають залишатися читабельними на телефоні. Я вкотре переконався, що сильна дизайн-система окуповується на другому ж розділі: ми витрачали час на рішення, а не на перемальовування кнопок. І ще одне: у крипті довіра важить більше за красу, тому прозора модерація, зрозумілі помилки й захист від підробних акаунтів були для нас такими ж важливими, як і візуал.