Filozofia Designu: Gotycka Ciemność
Brief dla designu wizualnego VvW był prosty: gotycki, czytelny, szybki. Gotycka ciemna fantazja to gatunek; czytelność jest niezbędna dla gry, w którą grasz w krótkich sesjach; a szybkość oznacza brak 2MB nagłówków obrazów spowalniających pierwsze ładowanie.
Podjęliśmy wczesną decyzję o przejściu na styl tekstowy z bogatym CSS zamiast sprite'ów pixel art. Wybór ten był praktyczny i przemyślany. Tekst skaluje się do dowolnego ekranu bez rozmycia. Animacje CSS nie kosztują nic w porównaniu z arkuszami sprite'ów. A nowoczesny CSS jest naprawdę ekspresyjny — cały interfejs VvW jest zbudowany na niestandardowych właściwościach CSS, bez JavaScriptu wymaganego do motywowania.
System Kolorów i Zmienne CSS
Cała paleta kolorów mieszka w jednym pliku: static/css/variables.css. Każdy komponent odwołuje się do tych zmiennych — nic nie jest na stałe zakodowane. Oznacza to, że kompletna zmiana motywu wymaga zmiany ~30 linii.
--color-surface: #111118; /* Powierzchnie kart */
--color-border: #1e1e28; /* Delikatne obramowania */
--color-gold: #c8a84b; /* Złoto VvW — nagłówki, akcenty */
--color-text: #e8e6e0; /* Tekst podstawowy */
--color-text-muted: #9a9898; /* Tekst drugorzędny */
--color-text-faint: #5c5c6e; /* Etykiety, metadane */
--color-danger: #e85d5d; /* Błędy, ostrzeżenia */
Tylko tryb ciemny: celowo zdecydowaliśmy się nie implementować trybu jasnego. Gracze przeglądarkowych MMO zdecydowanie grają wieczorami lub w nocy. Jasny motyw walczyłby z gotycką estetyką. Jeden dobrze wykonany ciemny motyw bije dwa przeciętne.
Typografia: Cinzel + Crimson Pro
Nagłówki używają Cinzel — wyświetlaczowego fontu inspirowanego pismem romańskim z ostrymi szeryfami, który czytany jest jako „starożytny i autorytatywny". W małych rozmiarach z letter-spacing 0.1em staje się głosem marki VvW. Nazwy gier, nagłówki sekcji, imiona NPC, nazwy umiejętności — wszystko w Cinzel.
Tekst ciągły używa Crimson Pro — humanistycznego szeryfowego, który jest ciepły i czytelny przy 16px. Dla gry z dużą ilością tekstu lore i opisów przedmiotów, font tekstu głównego, który nie powoduje zmęczenia oczu, ma znaczenie. Wariant kursywy Crimson Pro jest szczególnie dobry dla cytatów w grze i dialogów.
System Kolorów Rzadkości
Rzadkość przedmiotów podąża za rozpoznawalną konwencją zapożyczoną z dziesięcioleci tradycji RPG, z naszymi własnymi wartościami kolorów dostrojonymi do ciemnego tła:
Legendarne przedmioty używają złota VvW — tego samego złota co kolor akcentu strony. Tworzy to wizualną ciągłość: najcenniejsze rzeczy w grze mają ten sam kolor co najważniejszy kolor marki. Legendarne karty bohaterów pulsują animacją złotego blasku (klatki CSS, bez JavaScriptu).
Biblioteka Ikon Emoji
Jedna z naszych najlepszych tanich decyzji: używanie Unicode emoji jako ikon w całym interfejsie. Brak fontu ikon do załadowania, brak arkusza SVG sprite do utrzymania. do ataku, do obrony, do HP, do mocy zdolności, do złota.
Wadą jest niespójność renderowania na różnych platformach — emoji wyglądają nieco inaczej na Windows, Mac i Androidzie. Akceptujemy ten kompromis. Korzyść z zerowych kosztów bundla zdecydowanie przeważa nad drobnymi różnicami renderowania dla odbiorców przeglądarkowych RPG.
Przegląd Biblioteki Komponentów
Każdy element UI pochodzi ze wspólnej biblioteki komponentów w static/css/components/:
| Komponent | Użycie |
|---|---|
| buttons.css | Warianty przycisków Primary, ghost, danger ze stanami hover |
| cards.css | Karty artykułów dla bloga, karty statystyk dla strony postaci, karty przedmiotów |
| badges.css | Pastylki kategorii, odznaki rzadkości, wskaźniki statusu |
| layout.css | Sidebar, siatka gry, responsywne punkty przerwania, hamburgowe menu mobilne |
Plany UI na Przyszłość
Kilka ulepszeń UI zaplanowanych na kolejny cykl rozwojowy:
- Animowany dziennik walki — wyniki bitew w czasie rzeczywistym z liczebnikami obrażeń pojawiającymi się/znikającymi za pomocą animacji CSS, bez frameworka JavaScript
- Dzwonek powiadomień w czasie rzeczywistym — już przygotowany, odpytujący /api/v1/notifications/unread-count co 30 sekund
- Migracja WebSocket — zastąpienie odpytywania przez Socket.IO dla czatu, aktualizacji rankingu na żywo i statusu wojen klanów
- Audyt dostępności — pełny audyt nawigacji klawiaturowej, etykiety ARIA na wszystkich elementach interaktywnych, sprawdzenie współczynnika kontrastu względem WCAG 2.1 AA
Każda decyzja UI pyta: „Czy to ułatwia zrozumienie gry lub ułatwia zamieszkanie w świecie?" Piękno dla samego siebie wysyłamy na końcu. Jasność wysyłamy jako pierwsze.
Doświadcz Designu
Najlepszym sposobem na ocenę UI VvW jest gra. Utwórz darmowe konto i zobacz gotycki ciemny interfejs w akcji.
Graj za darmo →