HATA ONLINE - мобільний інтерфейс

Хто ми?
Hata Online — онлайн-гра на телефони з картою, створеною на основі українських міст. За відчуттями вона дуже схожа на GTA: великий відкритий світ, свобода пересування, своя економіка та можливість грати роль свого персонажа (RP).

Мета конкурсу:

Ми прагнемо знайти спеціалістів, які здатні відтворювати в першу чергу зрозумілий, стильний і функціональний UI/UX внутрішньо-ігрових інтерфейсів Hata Online. Цей конкурс – це не просто одноразова пропозиція, а й шанс почати працювати разом з нами й отримати постійний потік замовлень, з подальшою можливістю приєднатися до нашої команди (outsource), або ж переїхати й працювати з нашого офісу в Києві (за власним бажанням)

Кого ми шукаємо?

Middle+ UI/UX дизайнер

Вимоги до виконавця

• понад 2 роки досвіду на позиції UI/UX дизайнера (у геймдеві або складних цифрових продуктах);

• впевнене володіння Figma та Adobe Photoshop;

• розуміння базових принципів геймдизайну;

• досвід створення або розвитку дизайн-систем.

Завдання для учасника:

Інтерфейс – “Лоббі” 

Це перший екран, який бачить гравець після авторизації. Він відбувається на фоні самої гри, тобто в майбутньому там буде реальна 3D-сцена з нашої локації, а по центру стоїть персонаж (якщо він уже створений).

Поверх накладається напівпрозорий HUD, де розташовані всі кнопки.

Якщо персонаж не створений:

1. Великий силует у центрі:

• Напівпрозорий силует персонажа.

• Після створення тут з’являється справжній персонаж.

• Текст: “Натисніть, щоб створити персонажа” або окрема кнопка “Створити персонажа” під силуетом.

2.  Кнопка “Грати” (неактивна до створення персонажа):

• Найбільший акцент на ній.

• Вона має виглядати головною дією, але бути заблокованою.

• Після створення персонажа — стає активною.

3.  Вибір серверу:

• Блок у правій частині:

• Назва сервера (Server #1).

• Онлайн.

• Можливість показу акцій (Х2, бонуси, івенти — на майбутнє).

• При натисканні відкривається меню зі списком усіх серверів і можливістю вибрати інший.

4.  Налаштування:

• Веде у повне меню налаштувань гри.

5.  Інформація про акаунт:

• У лівому верхньому куті:

• Аватар за замовчуванням.

• Логін (наприклад: dsgnerui).

• Натискається → відкривається меню зі всією статистикою акаунту та персонажів.

6.  Логотип “Hata Online”:

• У лівому нижньому куті.

• Має бути добре видно на фоні.

7.  Донат:

• (Додати, бо на прототипі немає)

• Маленький блок з кількістю донат-валюти.

• Кнопка поповнення (іконка "+", або кнопка “Поповнити”).

• Розташування: правий верхній кут біля соцкнопок / або під акаунтом — на вибір.

8.  Кнопки соцмереж:

• Telegram / Discord / Instagram

• Лаконічно в одному рядку

Малюнок 1. Прототип з не створеним персонажем

Якщо персонаж створений:

1. Кнопка “Грати” (неактивна до створення персонажа):

• Найбільший акцент на ній.

• Вона має виглядати головною дією, але бути заблокованою.

• Після створення персонажа — стає активною.

2.  Інформація про персонажа:

• Показує коротку статистику:

• Nick Name / Ім’я та Прізвище

• Рівень персонажа

• Готівка

• Банківський рахунок

• Це допомагає гравцю швидко зрозуміти, який саме персонаж завантажений.

Та усе інше як у не створеного

Малюнок 2. Прототип з створеним персонажем

Кольорова палітра:

Primary Color: #A6DC45 (Lime Green)

Base Color: #0E0E0E (Off-black)

Text Primary: #FFFFF (White)

Text Secondary: #737373 (Grey)

Очікуємо в результаті:

У межах конкурсу вам потрібно підготувати лише один інтерфейс — “Лоббі”, у двох його станах:

1. Коли персонаж ще не створений

2. Коли персонаж вже існує

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

Жодних додаткових меню, переходів, повної дизайн-системи чи великої кількості сторінок робити не потрібно.

Наші макети — це лише загальна структура, щоб показати, які елементи мають бути на екрані.

Ми, навпаки, будемо звертати увагу на унікальні та продумані рішення, які роблять інтерфейс зручнішим, логічнішим і сучаснішим. Якщо ваше UX-рішення кращe за наші наблиски — це тільки плюс.

Приклади кількох існуючих екранів нашого дизайну ми додамо у вкладення.

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

Наш сайт: https://hata.online/

Референси та додаткові вкладення: hata example

Інші роботи, на які можна звертати увагу, на їх стиль і т.д