--- title: Arah UI produk digital intro: Bagaimana prinsip visual diterapkan ke layar produk digital XSERIES. Mencakup layout, komponen inti, state, dan contoh per halaman utama. updated: 1 Nov 2026 status: Hipotesis --- > [!NOTE] > Halaman ini mengikuti fase dan fitur di [Fitur & prioritas](/strategy/fitur-dan-prioritas/) dan struktur di [Information architecture](/strategy/arsitektur-informasi/). Ini arah, bukan desain final. Wireframe dan mockup dibuat di tahap design (15–30 Nov, lihat [Roadmap](/strategy/roadmap/)). ## Fondasi | Aspek | Keputusan | |---|---| | Platform | Mobile-first web (PWA). Kanal utama XSERIES adalah IG (story, bio link), jadi mayoritas kunjungan diasumsikan dari ponsel. Cek dengan data analytics setelah launch | | Mode | Gelap sebagai default ([Prinsip 1](/visual-direction/prinsip-visual/)) | | Grid | 4 kolom (mobile), 8 (tablet), 12 (desktop). Gutter 16 / 24 / 32px | | Radius | 4px untuk kontrol, 12px untuk kartu. Sudut tajam (0px) untuk elemen bergaya X | | Spasi | Kelipatan 4px | | Elevasi | Bukan bayangan, melainkan cahaya: glow merah atau teal tipis di belakang elemen aktif | ## Navigasi Struktur mengikuti Baller League ([ballerleague.uk](https://ballerleague.uk/en/)), dengan menu yang disesuaikan untuk event 2 hari. Di desktop: ```text [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. ```viz-wire ## Sebelum event sub: Header + bottom bar - X SERIES-3 · Beli tiket | nav | Tombol merah `xs-red-strong`, selalu terlihat - Konten halaman | block - Home · Jadwal · Kartu · Tiket | bottom | Bottom bar 4 item ## Saat event sub: Tombol tiket diganti - X SERIES-3 · Tonton live | nav | Beli tiket diganti Tonton live - Konten halaman | block - Home · Jadwal · Kartu · Tiket | bottom | Bottom bar tetap ``` - 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 | Komponen | Isi | Catatan | |---|---|---| | **Player card** | Rank, foto, nama, tim, statistik, slot sponsor | Rasio 5:7, bisa di-flip. Lihat [Motif & ikonografi](/visual-direction/motif-dan-ikonografi/) | | **Game card** | Ikon, nama kartu, efek, kapan bisa dipakai (Q1–Q2 atau Q4) | Mint untuk X Cards, emas untuk President Cards | | **Match tile** | Dua tim, skor, status (upcoming / live / FT), kartu yang dipakai | Status live memakai titik merah berdenyut dan label "LIVE" putih di atas pill `xs-red-strong` (5,22:1). Jangan pakai teks `xs-red` di atas `xs-graphite` (3,91:1, gagal untuk teks kecil) | | **Bracket** | SF1, SF2, perebutan juara 3, final | Cukup satu komponen, karena hanya ada 4 laga per edisi | | **Team header** | Warna tim, logo, kapten, riwayat juara | `--team-color` sebagai variabel | | **Ticket tier** | Nama tier, harga, warna section, CTA GOERS | Warna mengikuti seat plan resmi | | **Countdown** | Hari, jam, menit menuju kickoff | Angka tabular, font display | | **Sponsor slot** | "presented by" + logo | Ada 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". ```viz-wire ## Home, bagian atas sub: Layar pertama sampai "Apa itu XSERIES?" - X SERIES-3 · Beli tiket | nav - Hero: arena malam + wordmark XS-3 | hero | Countdown hari · jam · menit menuju kickoff - Beli tiket | cta | Ke GOERS - Strip pemain bintang | strip | Kartu horizontal, bisa digeser - Apa itu XSERIES? | cards3 | 5v5 · 24 detik · Kartu - Home · Jadwal · Kartu · Tiket | bottom ## Home, bagian bawah sub: Setelah digulir - Explainer kartu | block | Interaktif, kartu bisa dibalik - Tim | cards4 | 4 kartu tim - Tiket | block | Tier + seat map - Beli tiket | cta - Arsip | block | XS-1 juara Lynx Hunters · XS-2 juara Grim Reaper - Home · Jadwal · Kartu · Tiket | bottom ``` ### Pendamping laga live (hari-H) Kiri adalah kerangka layarnya, kanan adalah contoh saat laga berjalan. Perhatikan bahwa skor tetap di atas dan setiap kartu muncul di timeline. ```viz-wire ## Pendamping laga live sub: Kerangka - Skor · waktu · kuarter | score | Sticky, selalu menempel di atas - Ringkasan · Timeline · Statistik | tabs - Timeline kartu | timeline | Kartu kecil dengan efek dan menit - Tonton di YouTube | cta | Live GOS, gratis vs member ``` ```viz-companion home: Lynx Hunters away: Grim Reaper score: 14 – 15 quarter: Q4 clock: 03:41 live: LIVE cta: Tonton di YouTube note: **Data contoh.** Tim dan skor hanya ilustrasi. Timeline kartu ini unik untuk XSERIES ([Benchmark](/research/benchmark-produk-digital/)), karena kompetitor tidak menampilkan kartu yang dipakai per menit. Mint = X Card, emas = President Card, putih = gol. Merah tidak dipakai untuk gol karena merah sudah berarti efek negatif atau serangan lawan ([Warna fungsi kartu](/visual-direction/palet-warna/#warna-fungsi-kartu)). - Q4 03' | Triple Goal | Grim Reaper | Semua gol dihitung 3x sampai laga selesai | pres - Q4 01' | Gol | Lynx Hunters | Skor jadi 14–12 | goal - Q2 07' | Golden Boy | Lynx Hunters | Gol 1 pemain bernilai 3, atau 6 dari second line | x - Q1 05' | Freeze Goal | Grim Reaper | Gawang tidak bisa kebobolan 2 menit | x ``` - 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](/research/benchmark-produk-digital/)). - 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. ```viz-wire ## 1. Tertutup sub: Satu layar per kartu - Kartu | nav - X Cards · President Cards | tabs - Kartu tertutup | block | Tap untuk membalik - Home · Jadwal · Kartu · Tiket | bottom ## 2. Dibalik sub: Nama, ikon, efek - Kartu | nav - Freeze Goal | block | Ikon, nama kartu, efek - Kapan bisa dipakai | tabs | Diagram 4 kuarter. Q1–Q2 menyala untuk X Cards - Lihat efeknya | cta ## 3. Efek sub: Animasi 3–5 detik - Kartu | nav - Lapangan mini | hero | Animasi pendek yang menunjukkan efek kartu - Kartu berikutnya | cta ``` - 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](/research/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. Semua durasi animasi ada di satu tabel di [Foto & motion](/visual-direction/foto-dan-motion/#karakter-gerak). ```viz-wire ## Loading sub: Bukan spinner generik - X SERIES-3 | nav - X terisi dari mint ke merah | hero | Loop sampai selesai ## Kosong sub: Data belum ada - Pemain | nav - Kartu tertutup | cards3 | "Segera diumumkan" ## Live sub: Titik merah + label - ● LIVE · Q2 06:12 | score | Titik merah berdenyut tiap 1,2 detik, label "LIVE" putih di pill `xs-red-strong` - Timeline kartu | timeline ## Kartu aktif sub: Flash, lalu sorotan tetap - Skor · waktu | score - Kartu aktif | block | Flash warna kartu 900ms, lalu glow tipis yang menetap selama kartu masih aktif ## Error sub: Tanpa animasi - Jadwal | nav - Pesan error | block | Teks jelas dalam bahasa Indonesia - Coba lagi | cta ``` ## Aksesibilitas Empat catatan ini berlaku untuk semua layar. Pakai sebagai cek saat review. ```viz-notes ## Wajib di semua layar tone: mint - Kontras mengikuti tabel di [Color palette](/visual-direction/palet-warna/#cek-kontras-wcag-22) - 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 - Struktur dan match centre: [Baller League](https://ballerleague.uk/en/), [Match Centre](https://ballerleague.uk/en/game/214), [Stats](https://ballerleague.uk/en/statistics) - Halaman aturan berilustrasi: [Kings League rules](https://pages.kingsleague.pro/rules) - Daftar lengkap ada di [Moodboard & referensi](/visual-direction/moodboard-dan-referensi/) ## Dasar riset - IG adalah kanal utama XSERIES, dengan story dan link bio: [Touchpoint digital](/research/touchpoint-digital/#peta-touchpoint). Bahwa mayoritas kunjungan dari ponsel masih asumsi ([D3](/research/pertanyaan-terbuka/#q-d3)). - Empat laga per edisi: [Format & aturan](/research/format-dan-aturan/#format-turnamen), dari [GOERS](https://www.goersapp.com/events/xseries-3--xseries3) - Juara XS-1 Lynx Hunters dan juara XS-2 Grim Reaper: [Tim franchise](/research/tim/#sekilas), dari [Lapangbola](https://live.lapangbola.com/tournaments/fixtures/klasemen-x-series-2025) dan [Merdeka](https://www.merdeka.com/peristiwa/grim-reaper-taklukkan-nova-titans-lewat-adu-penalti-sabet-gelar-juara-x-series-2-2026-523184-mvk.html) - Efek kartu di contoh pendamping laga live: [Format & aturan](/research/format-dan-aturan/#x-cards-kuarter-1-dan-2), dari [Bola.com](https://www.bola.com/indonesia/read/6258652/xseries-2-sajikan-sportainment-5v5-dengan-aturan-unik-dimeriahkan-bintang-nasional-hingga-dunia) - Warna section tiket mengikuti seat plan resmi: [Tiket XSERIES-3](/research/tiket-xseries-3/#seat-plan), dari [GOERS](https://www.goersapp.com/events/xseries-3--xseries3) - Live di YouTube GOS dengan full match khusus member: [Angka media sosial](/research/angka-media-sosial/#views-highlight-xs-2-di-youtube)