Select section:
/
Open questions44
In this article

Arah UI produk digital

Bagaimana prinsip visual diterapkan ke layar produk digital XSERIES. Mencakup layout, komponen inti, state, dan contoh per halaman utama.

Diperbarui 1 Nov 2026 · Hipotesis

Catatan

Halaman ini mengikuti fase dan fitur di Fitur & prioritas dan struktur di Information architecture. Ini arah, bukan desain final. Wireframe dan mockup dibuat di tahap design (15–30 Nov, lihat Roadmap).

Fondasi

AspekKeputusan
PlatformMobile-first web (PWA). Kanal utama XSERIES adalah IG (story, bio link), jadi mayoritas kunjungan diasumsikan dari ponsel. Cek dengan data analytics setelah launch
ModeGelap sebagai default (Prinsip 1)
Grid4 kolom (mobile), 8 (tablet), 12 (desktop). Gutter 16 / 24 / 32px
Radius4px untuk kontrol, 12px untuk kartu. Sudut tajam (0px) untuk elemen bergaya X
SpasiKelipatan 4px
ElevasiBukan bayangan, melainkan cahaya: glow merah atau teal tipis di belakang elemen aktif

Struktur mengikuti Baller League (ballerleague.uk), dengan menu yang disesuaikan untuk event 2 hari. Di desktop:

[X SERIES-3]   Jadwal   Tim   Pemain   Kartu   Arsip            [Beli tiket]

Di mobile, lihat dua hal: tombol tiket di header dan bottom bar empat item. Tombolnya berganti saat event berlangsung.

X SERIES-3 · Beli tiketTombol merah xs-red-strong, selalu terlihat
Konten halaman
Home · Jadwal · Kartu · TiketBottom bar 4 item
Sebelum eventHeader + bottom bar
X SERIES-3 · Tonton liveBeli tiket diganti Tonton live
Konten halaman
Home · Jadwal · Kartu · TiketBottom bar tetap
Saat eventTombol tiket diganti
  • Tombol Beli tiket selalu terlihat di header (merah, xs-red-strong). Saat event berlangsung, tombol ini diganti Tonton live.
  • Di mobile, bottom bar berisi 4 item: Home, Jadwal, Kartu, Tiket.

Komponen inti

KomponenIsiCatatan
Player cardRank, foto, nama, tim, statistik, slot sponsorRasio 5:7, bisa di-flip. Lihat Motif & ikonografi
Game cardIkon, nama kartu, efek, kapan bisa dipakai (Q1–Q2 atau Q4)Mint untuk X Cards, emas untuk President Cards
Match tileDua tim, skor, status (upcoming / live / FT), kartu yang dipakaiStatus live memakai titik merah berdenyut
BracketSF1, SF2, perebutan juara 3, finalCukup satu komponen, karena hanya ada 4 laga per edisi
Team headerWarna tim, logo, kapten, riwayat juara--team-color sebagai variabel
Ticket tierNama tier, harga, warna section, CTA GOERSWarna mengikuti seat plan resmi
CountdownHari, jam, menit menuju kickoffAngka tabular, font display
Sponsor slot"presented by" + logoAda di player card, game card, MVP

Halaman kunci

Home sebelum event

Baca dari atas ke bawah: urutan section mengikuti pertanyaan fan, dari "kapan dan di mana" ke "apa ini" lalu "beli tiket".

X SERIES-3 · Beli tiket
Hero: arena malam + wordmark XS-3Countdown hari · jam · menit menuju kickoff
Beli tiketKe GOERS
Strip pemain bintangKartu horizontal, bisa digeser
Apa itu XSERIES?5v5 · 24 detik · Kartu
Home · Jadwal · Kartu · Tiket
Home, bagian atasLayar pertama sampai "Apa itu XSERIES?"
Explainer kartuInteraktif, kartu bisa dibalik
Tim4 kartu tim
TiketTier + seat map
Beli tiket
ArsipXS-1 juara Lynx Hunters · XS-2 juara Grim Reaper
Home · Jadwal · Kartu · Tiket
Home, bagian bawahSetelah digulir

Live companion (hari-H)

Kiri adalah kerangka layarnya, kanan adalah contoh saat laga berjalan. Perhatikan bahwa skor tetap di atas dan setiap kartu muncul di timeline.

Skor · waktu · kuarterSticky, selalu menempel di atas
Ringkasan · Timeline · Statistik
Timeline kartuKartu kecil dengan efek dan menit
Tonton di YouTubeLive GOS, gratis vs member
Live companionKerangka
● LIVE
Lynx Hunters14 – 15Grim Reaper
Q4 · 03:41
  1. Q4 03'
    Triple GoalGrim ReaperSemua gol dihitung 3x sampai laga selesai
  2. Q4 01'
    GolLynx HuntersSkor jadi 14–12
  3. Q2 07'
    Golden BoyLynx HuntersGol 1 pemain bernilai 3, atau 6 dari second line
  4. Q1 05'
    Freeze GoalGrim ReaperGawang tidak bisa kebobolan 2 menit
Tonton di YouTube
Data contoh. Tim dan skor hanya ilustrasi. Timeline kartu ini unik untuk XSERIES (Benchmark), karena kompetitor tidak menampilkan kartu yang dipakai per menit. Mint = X Card, emas = President Card, merah = gol.
  • Skor dan waktu selalu menempel di atas (sticky).
  • Timeline kartu: setiap kartu yang dipakai muncul sebagai kartu kecil di timeline, dengan efek dan menit. Data ini unik untuk XSERIES (Benchmark).
  • Tombol "Tonton di YouTube" mengarah ke live GOS, dengan penjelasan gratis vs member.

Explainer kartu (fitur signature)

Tiga layar di bawah adalah satu alur: tap kartu, kartu dibalik, lalu efeknya diperagakan.

Kartu
X Cards · President Cards
Kartu tertutupTap untuk membalik
Home · Jadwal · Kartu · Tiket
1. TertutupSatu layar per kartu
Kartu
Freeze GoalIkon, nama kartu, efek
Kapan bisa dipakaiDiagram 4 kuarter. Q1–Q2 menyala untuk X Cards
Lihat efeknya
2. DibalikNama, ikon, efek
Kartu
Lapangan miniAnimasi pendek yang menunjukkan efek kartu
Kartu berikutnya
3. EfekAnimasi 3–5 detik
  • Satu layar per kartu: kartu tertutup, lalu di-tap untuk dibalik, lalu animasi pendek (3–5 detik) di lapangan mini yang menunjukkan efeknya.
  • Label "Kapan bisa dipakai" dengan diagram 4 kuarter.
  • Ini menjawab celah utama di Competitor landscape: halaman aturan Kings League dan Baller League masih statis.

State

Lima keadaan yang harus didesain untuk setiap layar. Perhatikan bahwa tidak ada yang memakai spinner generik, dan error tidak dianimasikan.

X SERIES-3
X terisi dari mint ke merahLoop sampai selesai
LoadingBukan spinner generik
Pemain
Kartu tertutup"Segera diumumkan"
KosongData belum ada
● LIVE · Q2 06:12Titik merah berdenyut 1,2 detik, label "LIVE"
Timeline kartu
LiveTitik merah + label
Skor · waktu
Kartu aktifGlow warna kartu, kembali ke keadaan statis setelah 2 detik
Kartu aktifGlow, lalu statis
Jadwal
Pesan errorTeks jelas dalam bahasa Indonesia
Coba lagi
ErrorTanpa animasi

Aksesibilitas

Empat catatan ini berlaku untuk semua layar. Pakai sebagai cek saat review.

Wajib di semua layar4
Animasi menghormati prefers-reduced-motion. Efek kartu diganti fade sederhana
Status live dan kartu aktif tidak hanya ditandai warna, tapi juga label teks
Target sentuh minimal 44 × 44px

Referensi pembanding

Dasar riset

Benang merah halaman ini

Halaman yang menjadi dasar halaman ini, dan halaman lain yang memakainya.

Berdasarkan 15

Dipakai di 10