Web
ОБЗОР
Проект — разработка интерфейса для VR-шутера нового поколения. Основная задача — создать атмосферу боевого погружения уже на сайте: от первого экрана с героем в броне до кастомизации оружейных сетов и аналитики статистики матчей.
Все страницы выдержаны в едином sci-fi стиле: тёмный фон, бирюзовые акценты, крупная типографика, чёткие контейнеры. Дизайн построен так, чтобы пользователь сразу чувствовал себя частью игры: авторизация напоминает военный терминал, каталог оружия и скинов работает как виртуальный арсенал, а статистика оформлена как HUD.
КОНТЕКСТ ПРОЕКТА
Игроки VR-шутеров привыкли к насыщенной среде: яркие интерфейсы, динамика и глубокая кастомизация. Но за пределами самой игры им часто не хватает удобного инструмента для управления инвентарём и скинами. LamGuard решает эту задачу, превращая веб-хаб в продолжение игрового опыта.
Моя роль
Я выступил дизайнером интерфейсов и отвечал за:
  • Проектирование пользовательских сценариев — от регистрации и входа до оплаты и настройки loadout.
  • Разработку UX-архитектуры, которая объединяет каталог, корзину, профиль, чат и статистику в одном логичном пространстве.
  • Визуальную систему: подбор шрифтов, цветовых акцентов, иконографики и логики карточек.
  • Поддержку единой стилистики sci-fi, чтобы интерфейс ощущался частью VR-мира, а не отдельным сайтом.
Моя цель была сделать так, чтобы даже при сложной бизнес-логике взаимодействие оставалось лёгким и интуитивным.
Дизайн задачи
Передать атмосферу VR-шутера уже на первом экране.
Hero-секция встречает игрока персонажем в броне, слоганом и кнопкой входа через QR.
Создать удобный каталог и инвентарь.
Фильтры по типам оружия, сетка карточек, 3D-рендеры скинов, подробные карточки с параметрами (AMMO, RPM, MAG SIZE).
Разработать систему loadout.
Возможность создавать пресеты, выбирать оружие и менять скины через интерактивные карточки.
Продумать процесс покупки.
Корзина, промокоды, варианты оплаты, статусы транзакций — всё оформлено в логике “геймерского терминала”.
Персонализация и статистика.
Профиль с данными, привязкой карт и Telegram, а также отдельный блок с точностью, временем в игре и рангом в стиле игрового HUD.
Главная страница
Главная страница VR-шутера Lamguard построена как динамичный интерфейс с акцентом на погружение. Уже на первом экране пользователь получает эмоциональный импульс: герой в тактической броне, сильный слоган и атмосфера будущего боя. Далее раскрывается функциональность — магазин с DLC-контентом (скины, оружие, экипировка), возможность быстрого входа по QR-коду и персональный инвентарь, который всегда «с тобой».

Визуально страница выдержана в sci-fi эстетике: тёмный фон, акцентные неоновые элементы, крупная типографика. В блоках чередуются игровые персонажи, оружие и арены — всё это создаёт ощущение реальной подготовки к бою. Такой дизайн не только демонстрирует механику игры, но и формирует у пользователя чувство вовлечённости ещё до входа в сам VR-мир.
Каталог оружия / Inventory
Раздел «Inventory» оформлен как полноценный каталог, где игрок может быстро ориентироваться среди всего арсенала. Навигация построена через фильтры по категориям (Rifle, Pistol, SMG, Knife и др.) и строку поиска, а карточки оружия собраны в удобную сетку с названием и принадлежностью к фракции («CrouchingTiger»).

Дизайн подчёркивает коллекционный характер скинов: тёмный фон, чёткие карточки и визуальный акцент на самих моделях оружия. Благодаря фильтрации и поиску пользователь получает простой доступ к полной коллекции и может без лишних шагов сформировать свой инвентарь или добавить предметы в корзину.
Страница «Cart / Корзина»
Раздел «Корзина» реализован в минималистичном геймерском стиле: все элементы собраны в чёткие контейнеры, что поддерживает эстетику интерфейса и облегчает восприятие. Пользователь может управлять количеством товаров, вводить промокод с автоматическим пересчётом суммы и подтверждать согласие с условиями.

Ключевой акцент сделан на блоке «Total» — он выделен фирменной бирюзовой зоной и направляет внимание к действию. Завершающий шаг — кнопка перехода к оплате, расположенная максимально удобно. Дополнительно предусмотрена форма связи, где игрок может задать вопросы или получить поддержку.
Карточка оружия / Detail view
При выборе оружия открывается детализированное окно, которое акцентирует внимание на модели. Центральный элемент — крупный 3D-рендер, позволяющий рассмотреть скин и текстуру во всех деталях. Справа расположены ключевые данные: название, принадлежность, технические характеристики (AMMO, RPM, MAG SIZE) и краткое описание, раскрывающее особенности поведения оружия в VR.

Такой формат карточки сочетает визуальное впечатление и функциональность: игрок сразу видит уникальность скина и получает объективные параметры для сравнения и выбора.
Пресет оружия / Loadout (Set)
Раздел «Set» повторяет механику популярных шутеров, позволяя игроку кастомизировать свой боевой комплект. Пользователь может создавать несколько сетов (Set 1, Set 2 и т. д.), выбирая оружие, дополнительное снаряжение (Deagle, Kanto, Granata) и менять скины через интерактивные карточки.

Интерфейс построен на принципе быстрого выбора: всё необходимое собрано в одном экране — список оружия, доступные скины, характеристики и описание. Завершает настройку кнопка «Save», закрепляющая выбранный loadout. Такой подход делает кастомизацию удобной и привычной для игроков, знакомых с Warzone, Apex и другими шутерами.
Авторизация / Регистрация
Формы входа, регистрации и восстановления пароля выдержаны в минималистичном стиле, напоминающем военный терминал. Чёрный фон и бирюзовые акценты подчёркивают функциональность, а лаконичная типографика делает интерфейс простым и удобным.

Пользователь может быстро войти в систему, создать новый аккаунт или восстановить пароль. Дополнительно предусмотрена авторизация через сторонние сервисы (Google). Внизу каждой страницы сохраняется контактная форма и фирменный визуальный блок с персонажем, что поддерживает общую атмосферу будущего боя и цельность всего интерфейса.
Настройки профиля
Экран «Settings» собран в единой стилистике интерфейса и позволяет пользователю управлять основными данными. Здесь можно изменить имя, e-mail, пароль и Telegram-аккаунт, а также подключить платёжные карты — текущую («First Card») или добавить новую.

Визуальное решение поддерживает общий UI-код: чёткие контейнеры, тёмный фон, бирюзовые акценты и крупная типографика. Всё выстроено так, чтобы редактирование профиля оставалось простым и привычным, без отвлекающих элементов.
Статистика игрока / Statistics
Раздел «Statistics» оформлен как игровой HUD и показывает ключевые показатели прогресса: точность стрельбы, общее время в игре, количество боёв, ранг и любимое оружие. Данные подаются крупными цифрами и графикой, что создаёт динамику и ощущение настоящего боевого отчёта.

Ниже представлен список матчей в формате таблицы — с отображением убийств, хедшотов, точности, смертей, MVP и итогового результата (Win/Lose). Такой подход позволяет игроку анализировать свою эффективность и прогресс, а также возвращает атмосферу киберспортивной статистики прямо в интерфейсе.
Результат разработки
В результате была создана цельная цифровая экосистема для VR-шутера Lamguard, где сайт работает не просто как витрина, а как часть игрового опыта. Дизайн транслирует эстетику sci-fi и атмосферу боевого погружения через тёмные фоны, акцентные бирюзовые элементы и типографику в стиле военных интерфейсов.

Я выстроил чёткую архитектуру страниц: от первого эмоционального контакта на Hero-экране до глубокой функциональности в каталоге оружия, пресетах (Loadout), корзине и статистике игрока. Каждый раздел продуман так, чтобы пользователь ощущал логику и ритм: эмоция → выбор → кастомизация → результат.
Ключевым вызовом стало объединить разные сценарии — витрину контента, магазин, аналитику и личный профиль — в едином UI-коде. Решением стало использование модульной системы контейнеров и акцентных блоков, что дало визуальное единство и упростило навигацию.

Итоговый интерфейс решает сразу несколько задач: усиливает атмосферу продукта, обеспечивает интуитивное взаимодействие и формирует у игрока чувство сопричастности ещё до входа в сам VR-мир.
Made on
Tilda