Філософія дизайну: Готична темрява
Технічне завдання для візуального дизайну VvW було простим: готичний, читабельний, швидкий. Готичне темне фентезі — жанр; читабельність — обов'язкова умова для гри, в яку грають короткими сесіями; а швидкий означає відсутність 2МБ заголовків зображень, що уповільнюють перше завантаження.
Ми рано вирішили перейти на текстовий стиль з багатим CSS замість піксельних спрайтів. Це рішення було практичним і обдуманим. Текст масштабується на будь-який екран без розмиття. CSS-анімації коштують нічого порівняно зі спрайт-листами. А сучасний CSS справді виразний — весь інтерфейс VvW побудований на власних властивостях CSS, JavaScript для тематизації не потрібен.
Система кольорів та CSS-змінні
Вся колірна палітра знаходиться в одному файлі: static/css/variables.css. Кожен компонент посилається на ці змінні — нічого не прописано жорстко. Це означає, що для повної зміни теми потрібно змінити ~30 рядків.
--color-surface: #111118; /* Поверхні карток */
--color-border: #1e1e28; /* Ледве помітні межі */
--color-gold: #c8a84b; /* Золото VvW — заголовки, акценти */
--color-text: #e8e6e0; /* Основний текст */
--color-text-muted: #9a9898; /* Другорядний текст */
--color-text-faint: #5c5c6e; /* Мітки, метадані */
--color-danger: #e85d5d; /* Помилки, попередження */
Лише темний режим: ми свідомо вирішили не реалізовувати світлий режим. Гравці браузерних MMO переважно грають увечері або вночі. Світла тема суперечила б готичній естетиці. Одна добре виконана темна тема краща за дві посередніх.
Типографіка: Cinzel + Crimson Pro
Заголовки використовують Cinzel — відображальний шрифт із римськими засічками, який читається як "давній і авторитетний". У малих розмірах із міжбуквенним інтервалом 0.1em він стає голосом бренду VvW. Назви гри, заголовки розділів, імена NPC, назви умінь — все Cinzel.
Основний текст використовує Crimson Pro — гуманістичний шрифт із засічками, теплий і читабельний при 16px. Для гри зі значним текстом лору та описами предметів шрифт основного тексту, що не спричиняє напруження очей, має значення. Курсивний варіант Crimson Pro особливо гарний для внутрішньоігрових цитат та діалогів.
Система кольорів рідкісності
Рідкісність предметів слідує впізнаваній конвенції, запозиченій із десятиліть традицій RPG, з нашими власними значеннями кольорів, налаштованими для темного фону:
Легендарні предмети використовують золото VvW — те саме золото, що й акцентний колір сайту. Це створює візуальну наскрізну лінію: найцінніші речі в грі мають найпомітніший колір бренду. Карти легендарних героїв пульсують із золотим ефектом свічення (CSS keyframes, без JavaScript).
Бібліотека іконок-емодзі
Одне з наших найкращих недорогих рішень: використання Unicode-емодзі як іконок по всьому інтерфейсу. Жодного іконкового шрифту для завантаження, жодного спрайт-листа SVG для підтримки. для атаки, для захисту, для HP, для сили умінь, для золота.
Мінус — непослідовність рендерингу на різних платформах: емодзі виглядають трохи по-різному на Windows, Mac та Android. Ми приймаємо цей компроміс. Переваги нульової вартості для бандла значно переважують незначні відмінності рендерингу для аудиторії браузерних RPG.
Огляд бібліотеки компонентів
Кожен UI-елемент походить із спільної бібліотеки компонентів у static/css/components/:
| Компонент | Використання |
|---|---|
| buttons.css | Основні, ghost, небезпечні варіанти кнопок зі станами наведення |
| cards.css | Арт-картки для блогу, картки статистики для сторінки персонажа, картки предметів |
| badges.css | Таблетки категорій, значки рідкісності, індикатори стану |
| layout.css | Бічна панель, ігрова сітка, адаптивні точки зупину, мобільне меню гамбургера |
Плани на майбутній UI
Заплановано кілька покращень UI для наступного циклу розробки:
- Анімований журнал бою — результати битви в реальному часі з числами шкоди, що з'являються/зникають через CSS-анімації, без JavaScript-фреймворку
- Дзвіночок сповіщень у реальному часі — вже підготовлено, опитування /api/v1/notifications/unread-count кожні 30 секунд
- Міграція на WebSocket — заміна опитування на Socket.IO для чату, оновлень таблиці лідерів у реальному часі та стану кланської війни
- Аудит доступності — повна перевірка навігації клавіатурою, ARIA-мітки на всіх інтерактивних елементах, перевірка коефіцієнта контрасту за WCAG 2.1 AA
Кожне рішення UI ставить запитання: "Чи полегшує це розуміння гри або чи легше жити в цьому світі?" Краса заради краси з'являється останньою. Чіткість — першою.
Відчуйте дизайн
Найкращий спосіб оцінити UI VvW — пограти в неї. Створіть безкоштовний обліковий запис і побачте готичний темний інтерфейс в дії.
Грати безкоштовно →