SOUQ

Souq називає себе фінансовим ринком для ігрових економік — платформою, яка має перетворити гравців у web3-ігри на власників, що отримують частку економічного зростання ігор, у які вони грають. Наш UX/UI-дизайн для платформи починається з менеджера портфеля. Сторінка гри, тут Star Atlas, відкривається банером-обкладинкою з вкладками «Portfolio», «Economy», «News & Social» і «About». Під ним п’ять KPI-карток — від «Collections Owned» до «Invested Capital» — над діаграмою з областями, де ціни можна показати в USD, SOL, ETH або BTC.

Гравці тримають предмети в кількох гаманцях, тож «Profile Settings» показує кожен підключений гаманець з окремою кнопкою «Disconnect». Сторінки предметів поєднують графік «Price over time» з точковою діаграмою «Price vs Rarity» поруч зі схожими лотами, відфільтрованими за ознакою.

Окрім трекінгу, Souq має стейкінг-сховища. Вкладники вносять стейблкоїни в сховище на кшталт ETH-Gaming, отримують частки сховища й заробляють винагороди в ігрових токенах, як-от ILV, APE та IMX. Кожна дія в цьому сценарії завершується модальним вікном підтвердження, і ми розробили їх як одну родину: «Select a Blockchain», «Confirm Deposit», «Buy and Sell Shares», «Add and Remove Liquidity», «Withdraw Rewards».

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

Набір компонентів створено для щільних фінансових даних на майже чорному тлі, і колір має значення. М’ятно-зелений, узятий із дуги в логотипі Souq, позначає прибутки й APY. Червоний позначає збитки, бурштиновий — незмінні значення, лавандовий — другорядні підписи й неактивні вкладки. Градієнт від синього до пурпурового залишено для елемента у фокусі: слайдера часток, вибраного часового діапазону, активної KPI-картки.

Ключові компоненти намальовано в кожному стані. Форма депозиту з’являється чотири рази, поки слайдер рухається від 0 до 75 відсотків і заповнюються оцінки винагород, а фільтр часу показано з кожним вибраним значенням: «24h», «3D», «1W», «1M», «1Y» і «ALL». Дві шапки публічного сайту стоять над каруселлю «Holdings», яка піднімає вибраний NFT на підсвічений п’єдестал.

Стейкінг із блокуванням на строк треба пояснити, перш ніж хтось внесе депозит, тож ми перетворили його на карусель із п’яти кроків: депозити внесено, створено застейкані позиції в токенах, вкладники отримують частки сховища, винагороди розподіляються, а частки погашаються, коли блокування закінчується. Усі кроки несе одна діаграма: у центрі — монограма S від Souq, від якої відгалужуються дві застейкані позиції та AMM-ліквідність. Її намальовано в дванадцяти станах — від монети, що залишає вкладника, до кільця, яке спалахує, коли випускаються частки.

Розділ дохідності на десктопі й мобільному використовує картки як вкладки: «Share Price», «APY Rewards» і «Combined Return» перемикають графік, а графіки APY і дохідності малюють по лінії на кожен період блокування. На телефоні сторінка сховища відкривається APY, смугою депозитів і «Historical Performance».

Для 3D-частини бренду ми побудували тунель метро з неонових рамок — синє й рожеве світло над рейками — з контурним вордмарком Souq на передньому плані. Він слугує вітальним екраном, де єдина дія — м’ятна кнопка «Connect your Wallet». Схожий неоновий тунель тягнеться за картками ринкової капіталізації в шапці сторінки гри, а десктопні рендери нахиляють ноутбук над блоками в градієнтних кольорах інтерфейсу.

Сторінка NFT-предмета виводить в один рядок блокчейн, автора, адресу контракту й стандарт ERC-1155, далі ціну купівлі й продажу зі зміною за 24 години, власників і пропозицію, а також кожен атрибут із частотою його появи поруч із кнопкою «Buy Now».