Дизайн сайта Roblox трейд-платформы - Bloxswaps

Bloxswaps — платформа для трейда предметов в Roblox. На сайте игроки меняются ножами, пушками и питомцами из Murder Mystery 2, проверяют стоимость предметов, ищут партнёров для P2P-обмена и проводят мгновенные сделки с ботами. Мы сделали для Bloxswaps дизайн новой главной страницы, отдельного хаба под Murder Mystery 2 и единой навигации для всего сайта, на десктопе и в мобильной версии.

Ниже рассказываем, как устроен дизайн сайта для Роблокс-трейдинга, почему навигация стала двухуровневой и как мы собирали интерфейс, который понятен и опытному трейдеру, и школьнику, впервые зашедшему поменять свой первый годли.

Что такое Bloxswaps и зачем понадобился редизайн

Сайт вырос вокруг одной игры. Murder Mystery 2, или ММ2, как её называют сами игроки, одна из самых популярных игр Роблокса с огромной экономикой предметов: ножи и пушки разной редкости, от Common до Godly и Ancient, у каждого своя рыночная стоимость. Bloxswaps дал этой аудитории безопасный обмен через ботов, таблицу значений, проверку трейдов и трекер инвентаря.

Потом платформа начала добавлять другие игры: Adopt Me, Pet Simulator 99, Blox Fruits, Grow a Garden, Steal a Brainrot, Rivals. Старая структура, где всё было про ММ2, перестала работать. Новому игроку из Adopt Me негде было найти свою игру, а постоянной аудитории ММ2 нельзя было потерять привычные разделы. Нужно было превратить сайт про одну игру в платформу для всего Roblox и при этом не сломать то, что уже приносит трафик.

Задача: из сайта про одну игру в платформу для всего Роблокса

По техническому заданию заказчика мы проектировали три вещи:

• глобальную навигацию, одинаковую на всех страницах сайта;

• новую главную страницу, которая представляет Bloxswaps как мультиигровую платформу;

• MM2 Hub, отдельную главную для Murder Mystery 2 со всеми сервисами этой игры.

Каждый экран мы делали в двух версиях: десктоп и мобильная ширина 402 px. Аудитория Roblox в основном сидит с телефона, поэтому мобильную версию мы рассматривали как основную, а не как урезанный вариант десктопа.

Отдельное условие: у Bloxswaps уже был свой визуальный стиль и UI-кит. Мы не придумывали новый бренд, а развивали существующий. Все новые блоки собраны на тех же цветах, шрифтах, радиусах и карточках, что и остальные страницы сайта.

Глобальная навигация: два уровня вместо одной строки

Главная проблема мультиигровой платформы в том, что у каждой игры свой набор сервисов. В ММ2 есть мгновенный трейд, проверка сделки и торговые серверы, в другой игре этого может не быть. Одна строка меню под все игры сразу превращается в свалку из двадцати пунктов.

Мы разделили навигацию на два уровня.

Верхний уровень: всё про сайт

Логотип, Creator Code, Help Centre, кнопка Discord, переключатель языка и главная кнопка Start Trading. Эта строка не меняется, на какой бы странице ни был пользователь. Красная кнопка трейда всегда на одном месте, и её видно с первого экрана.

Нижний уровень: контекст выбранной игры

Слева чип с выбранной игрой, например Murder Mystery 2. По клику открывается список игр с поиском: Adopt Me, Pet Simulator 99, Steal a Brainrot, Blox Fruits, Grow a Garden, Rivals. Справа от чипа идут сервисы именно этой игры: Trading, Values, Giveaways, Wiki.

Пункт Trading раскрывается в аккуратное меню: Instant Trade, Trade Checker, Trading Servers и ссылка на весь торговый хаб. Активный раздел подсвечен красной линией под табом, этот же приём используется на всём сайте.

Так навигация растёт вместе с платформой. Когда Bloxswaps добавит новую игру, она просто появится в списке, а её сервисы встанут во вторую строку. Перерисовывать шапку не придётся.

Мы отрисовали все состояния: закрытая шапка, открытый список игр, открытое меню раздела. Разработчику не нужно ничего додумывать.

Главная страница: витрина Роблокс-трейдинга

Главная отвечает на три вопроса нового посетителя: что это за сайт, можно ли ему доверять и с чего начать.

Первый экран. Крупный заголовок о безопасном и мгновенном трейде предметов ММ2, короткое пояснение и кнопка Start Trading. Справа 3D-композиция из узнаваемых предметов Murder Mystery 2. Игрок за секунду видит, что попал по адресу.

Цифры доверия. Сразу под первым экраном четыре карточки: число завершённых трейдов, проведённых сделок, пользователей и доступных предметов. Для трейдинговой площадки доверие важнее всего, поэтому цифры стоят выше любого другого контента.

Популярные игры. Сетка обложек Roblox-игр: Murder Mystery 2, Adopt Me, Creatures of Sonaria, Pet Simulator 99, Wild Horse Islands, Steal a Brainrot, Grow a Garden. Нижний ряд уходит в размытие с кнопкой «показать ещё». Так видно, что игр много, но страница не превращается в каталог.

Сервисы. Восемь карточек: Instant Trading, P2P Trading, Item Values, Trade Checker, Inventory Tracker, Trading Servers, Free Items и Wiki. Главный сервис, мгновенный трейд, выделен красной карточкой. Остальные сделаны из тёмного стекла с иконкой и коротким описанием.

Отзывы и креаторы. Блок отзывов с рейтингом и блок «Trusted by creators» с 3D-аватарами ютуберов и стримеров, которые продвигают площадку. Для детской и подростковой аудитории Roblox слово любимого ютубера весит больше любых гарантий.

FAQ и финальный призыв. Аккордеон с частыми вопросами и красный баннер «Ready to trade your Roblox items?» с кнопкой. Футер собран по колонкам: о компании, сайт, инструменты, документы.

MM2 Hub: отдельная главная для Murder Mystery 2

ММ2 остаётся самой важной игрой Bloxswaps, и у неё теперь своя главная. Это страница, на которую попадает игрок, выбравший Murder Mystery 2 в навигации.

Первый экран. Заголовок «Murder Mystery 2 Trading Hub» и композиция из предметов игры: леденцовая трость, кристальный арбалет, оружие в форме полумесяца, пряничная снайперка. Короткое описание перечисляет всё, что можно делать с предметами ММ2 на сайте.

Популярные предметы ММ2. Горизонтальная лента карточек с ценой в коинах, количеством владельцев и цветной полосой редкости. По цвету игрок сразу отличает годли от винтажа, даже не читая подпись.

Трейд в три шага. Подключить аккаунт Roblox, выбрать предметы, получить обмен. Рядом превью личного кабинета с графиком стоимости инвентаря. Блок снимает главный страх новичка: что сделка сложная и можно потерять предметы.

Сервисы ММ2, креаторы, статьи. Сетка сервисов игры, карусель спонсируемых креаторов с крупными рендерами персонажей, лента свежих статей о ценах и трейдах в Murder Mystery 2. Статьи дают странице постоянно обновляемый контент, это важно для поисковиков.

FAQ. Вопросы именно про ММ2: откуда берутся значения предметов, как проверить трейд, безопасно ли меняться на Bloxswaps.

Мобильная версия: 402 px, одна рука, один палец

Большая часть игроков Роблокса заходит с телефона, часто прямо между раундами. Поэтому мобильную версию всех страниц мы делали так же подробно, как десктоп.

Шапка в мобильной версии стала компактной: логотип, бургер и две вкладки, Games и Help Centre. Всё остальное спрятано в меню, но меню устроено не как длинный список ссылок, а как отдельный экран:

• шторка выбора игры с поиском и списком игр;

• сервисы выбранной игры крупными карточками в две колонки, их удобно нажимать большим пальцем;

• промо-баннер новой игры, например запуск трейдинга Adopt Me;

• разделы сайта, соцсети и выбор языка внизу.

На страницах длинные сетки превратились в карусели: отзывы, креаторы, популярные предметы ММ2 листаются по горизонтали. Карточки сервисов стоят в две колонки, первый экран умещает заголовок, описание и кнопку без прокрутки.

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

Весь интерфейс собран в Figma на компонентах и auto layout. Одна и та же карточка, кнопка или таб используется на главной, в MM2 Hub, в трекере инвентаря и в P2P-разделе.

Стекло, свет и 3D

Карточки сервисов, выпадающие меню и навигация сделаны из тёмного стекла: полупрозрачная заливка, размытие фона, светлый кант по верхней грани. За ключевыми блоками стоит мягкое красное свечение. Предметы и персонажи показаны объёмными 3D-рендерами, а не плоскими иконками. Сайт выглядит как продолжение игры, а не как биржевой терминал.

Как дизайн помогает SEO и конверсии

Красивый сайт для трейдинга ничего не стоит, если его не находят. Поэтому часть решений мы принимали с оглядкой на поиск:

• у каждой игры появилась своя посадочная страница, MM2 Hub стал первой из них, а такие страницы ранжируются по запросам вроде «трейд ММ2» или «стоимость предметов Murder Mystery 2»;

• блок статей на хабе даёт регулярный свежий контент по игре;

• FAQ на главной и в хабе подходит под разметку FAQPage и расширенные сниппеты;

• навигация с понятной иерархией игра → сервис помогает поисковикам понять структуру сайта;

• главное действие, кнопка трейда, видно на первом экране на любом устройстве, а значит, больше посетителей из поиска доходят до сделки.

Что в итоге

Bloxswaps получил дизайн платформы, которая готова расти дальше одной игры. Новая игра добавляется в навигацию без переделки шапки, у каждой игры может быть свой хаб по шаблону MM2 Hub, а главная показывает весь Роблокс-трейдинг сразу. Мобильная версия проработана на всех экранах, а UI-кит позволяет команде заказчика собирать новые страницы из готовых компонентов.

Нужен дизайн сайта для игрового проекта?

Если вы делаете платформу для Roblox, маркетплейс игровых предметов или сайт для геймеров, напишите нам. Разберём задачу, предложим структуру и покажем, как ваш проект может выглядеть.