UI/UX design dla projektu internetowego 2D–2.5D z wyścigami samochodów

Potrzebne jest opracowanie projektu interfejsu dla projektu internetowego w formacie 2D–2.5D sceny z samochodami i krótkimi wyścigami. To nie jest strona marketingowa ani klasyczny landing, lecz interaktywny interfejs gry, w którym użytkownik większość czasu spędza na jednym ekranie, podejmuje decyzje i obserwuje proces wyścigu.

Projekt jest cykliczny. Użytkownik wchodzi na stronę, widzi tor, samochody, stoper do startu oraz interfejs do wyboru. Po rozpoczęciu wyścigu interfejs zostaje uproszczony, a fokus przechodzi na sam wyścig. Po zakończeniu wyścigu krótko pokazany jest wynik i natychmiast rozpoczyna się nowy cykl.

Potrzebny jest dokładnie projekt sceny i interfejsu. Realizacja logiki, animacji i frontendu nie wchodzi w zakres zadań.

Ekrany i stany

Przy pierwszym wejściu przewidziano osobny ekran z informacją o zastrzeżeniach z potwierdzeniem przed kontynuowaniem.

Po tym używany jest uniwersalny ekran ładowania, który może pojawiać się przy pierwszym wejściu, przed startem wyścigu oraz między cyklami gry.

Główny ekran przed startem wyścigu. Na nim widoczny jest aktualny tor, rozmieszczenie samochodów, stoper do startu, strefa zakładów na konkretne auto z automatycznym obliczeniem potencjalnej wygranej, a także krótka lista wyników ostatnich 5–10 wyścigów (które auto wygrało). Na ekranie stale obecne są przypięte elementy: logo projektu, przycisk podłączenia portfela (po podłączeniu — stale widoczny portfel), saldo użytkownika oraz stopka z linkami do ToS, Polityki Prywatności i Twittera.

Do podłączenia portfela, pracy z saldem, przeglądania zasad gry, ToS, Polityki Prywatności oraz komunikatów systemowych używane są wyskakujące okna modalne.

Osobno przewidziano ekran lub dużą modalkę dla systemu poleceń.

Stan rozpoczęcia wyścigu. W tym momencie interfejs zostaje oczyszczony z pomocniczych elementów: strefa zakładów oraz historia wyników znikają lub są zwijane, scena z wyścigiem staje się większa. Wyścig wyświetlany jest w głównym oknie z możliwością powiększenia go na cały ekran. Z boku lub nad sceną wyświetlane są minimalne informacje o aktualnych pozycjach samochodów bez czasów i statystyk.

Po zakończeniu wyścigu używany jest krótki stan po wyścigu bez osobnego ekranu wyników. Wyróżnione jest auto zwycięzcy, pojawia się krótkie powiadomienie o zakończeniu wyścigu, po czym automatycznie rozpoczyna się nowy cykl.

Tory i samochody

Dla każdego toru projektant ma określić kierunek ruchu oraz umowną trasę (guideline), odpowiednią do dalszej animacji ruchu samochodów na frontendzie.

Potrzebne jest opracowanie projektu trzech różnych torów. Muszą być one proste, czytelne, o różnej orientacji lub konfiguracji, bez przeciążenia szczegółami. Na każdym torze zawsze widoczne jest startowe rozmieszczenie samochodów.

Samochody mają być narysowane jako oddzielne obiekty w jednolitym stylu. Wszystkie samochody są równe pod względem logiki, bez ulepszeń i charakterystyk, różnią się jedynie wizualnie.

Tory i samochody powinny być przygotowane jako oddzielne zasoby, a nie połączone w jeden układ. Oczekuje się przekazania w postaci komponentów Figma lub oddzielnych SVG/PNG z przezroczystym tłem, odpowiednich do dalszego wykorzystania na frontendzie.

Animacje

Końcowa animacja ruchu samochodów realizowana jest na frontendzie. Od projektanta nie oczekuje się tworzenia pełnoprawnych animacji. Na życzenie projektant może pokazać przykład lub logikę ruchu w formie prototypu, ale głównym zadaniem jest przygotowanie sceny i obiektów.

Nie powinno być stałej animacji tła. Ruch pojawia się tylko w momencie wyścigu.

Styl i prezentacja

Interfejs ma być nowoczesny i kontrastowy, z wyraźnym naciskiem na działanie i timing. Bez przeciążenia tekstem, cyframi czy elementami dekoracyjnymi.

Paleta kolorów powinna być dobierana świadomie, na podstawie zasad neuromarketingu i psychologii behawioralnej. Oczekuje się, że projektant będzie w stanie uzasadnić wybór kluczowych kolorów i akcentów: co dokładnie podkreślają (działanie, napięcie, oczekiwanie, pozytywny wynik) i jak wpływają na postrzeganie i decyzje użytkownika. Ważna jest nie sama paleta, ale logika jej zastosowania w interfejsie.

Panel administracyjny (projekt)

Również konieczne jest przewidzenie projektu minimalnego panelu administracyjnego do użytku wewnętrznego. Panel administracyjny nie jest publicznym interfejsem i ma być utilitarny oraz funkcjonalny, bez elementów dekoracyjnych.

Panel administracyjny przeznaczony jest do monitorowania i operacyjnej kontroli platformy i powinien zawierać następujące sekcje:

– przeglądowy dashboard z aktualnym statusem gry, stoperem cyklu, ogólnym saldem platformy oraz krótkim podsumowaniem finansowym za dzień;– lista wyścigów z podstawowymi informacjami o każdym cyklu;– zebrane informacje o zakładach w wyścigach;– lista użytkowników z minimalnymi danymi (portfel, saldo, status);– depozyty i wypłaty ze statusami;– system poleceń z naliczeniami i holdami;– blok zarządzania z możliwością wstrzymania zakładów, depozytów oraz przełączenia platformy w tryby awaryjne.

Projekt panelu administracyjnego oczekiwany jest na poziomie wireframe / podstawowego UI bez głębokiej analizy i bez opracowania logiki biznesowej.

Wynik pracy

Oczekiwany jest plik Figma z projektem dla desktopu i mobile, głównymi stanami ekranów, przygotowanymi zasobami torów i samochodów, a także podstawowym zestawem UI. Kodowanie i kod nie są potrzebne.

Projekt rozpatrywany jest jako interaktywna scena, dlatego ważne jest, aby projektant myślał nie jak autor landingów, lecz jako specjalista od gier lub dynamicznych interfejsów.

LogoRównież konieczne jest opracowanie prostego minimalistycznego rozwiązania logo dla platformy (wordmark lub prosty znak), które będzie używane w nagłówku interfejsu oraz na ekranie ładowania.