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».