--- title: Prinsip visual intro: Lima prinsip yang dipakai untuk memutuskan setiap layar, grafis, dan animasi XSERIES. Masing-masing diturunkan dari riset dan strategi. updated: 1 Nov 2026 status: Hipotesis --- Prinsip ini menerjemahkan [positioning](/strategy/positioning-dan-framing/) ("legenda dunia, pemain pro, dan kreator di satu lapangan, dengan aturan yang bisa membalik skor kapan saja") menjadi aturan visual. Kalau ada dua opsi desain yang sama bagusnya, pilih yang paling sesuai dengan prinsip ini. Lima prinsip dalam satu baris. Detail dan contoh lakukan/hindari ada di bawah. ```viz-flow ## Arena malam kicker: 1 tone: visual - Selalu terasa di dalam arena saat lampu menyala ## Kartu adalah bahasa kicker: 2 tone: visual - Kalau bisa jadi kartu, jadikan kartu ## Bintang sebesar layar kicker: 3 tone: visual - Wajah dan nama pemain paling besar ## Kekacauan yang terbaca kicker: 4 tone: visual - Boleh meledak, tetap jelas dalam 2 detik ## Satu brand, banyak edisi kicker: 5 tone: visual - Brand tetap, edisi adalah musim ``` ## 1. Arena malam **XSERIES selalu terasa seperti di dalam arena saat lampu menyala.** - Latar gelap, cahaya terarah (merah dari atas, teal dari bawah), dan subjek yang menyala. - Dasarnya: semua materi XS-3 dibangun di atas hitam pekat dengan dua sumber cahaya ([Audit identitas](/visual-direction/audit-identitas/)). - Dalam praktik: dark mode adalah mode utama, bukan opsi tambahan. Mode terang hanya dipakai untuk halaman dokumen (aturan versi cetak, syarat & ketentuan). Bandingkan dua hero di bawah: yang kiri terasa seperti arena, yang kanan seperti halaman korporat. ```viz-compare ## Lakukan tone: do - Latar | Hitam pekat (`xs-black`), dark mode sebagai default - Cahaya | Merah dari atas, teal dari bawah atau samping - Subjek | Pemain dan skor yang "menyala" di tengah gelap - Mode terang | Hanya untuk dokumen: aturan versi cetak, syarat & ketentuan ## Hindari tone: dont - Latar | Putih atau abu-abu datar di halaman utama - Cahaya | Rata di seluruh layar, tanpa arah - Subjek | Foto kecil di tengah banyak teks - Mode terang | Sebagai mode utama, dengan dark mode sebagai opsi ``` ![Arena XS-3](/assets/evidence/xs3-ticket-keyvisual.jpg "Key visual XS-3: arena, cahaya merah dan teal, teks putih. Sumber: highlight TICKET IG @xseries___.") ## 2. Kartu adalah bahasa **Kalau sesuatu bisa jadi kartu, jadikan kartu.** - Pemain, kartu permainan, tiket, dan achievement memakai satu keluarga komponen kartu dengan rasio 5:7. Sponsor tidak punya kartu sendiri, tetapi tampil sebagai slot "presented by" di dalam kartu tersebut. Komponen data seperti match tile, bracket, dan countdown tidak memakai format kartu 5:7. - Dasarnya: format XSERIES dibangun di atas X Cards dan President Cards, dan player card XS-3 sudah memakai tata letak kartu remi. Arah utama strategi adalah "jadikan kartu sebagai produk" ([Ringkasan strategi](/strategy/ringkasan-strategi/)). - Dalam praktik: kartu bisa dibalik (flip), dikoleksi, dibagikan sebagai gambar ke story, dan punya slot "presented by". Lihat kolom kiri: pemain, kartu permainan, tiket, dan achievement memakai satu keluarga komponen, dan sponsor menempel di dalamnya. ```viz-compare ## Lakukan tone: do - Pemain | Player card 5:7 dengan rank, foto, nama, statistik - Kartu permainan | Game card yang bisa dibalik untuk melihat efeknya - Tiket dan achievement | Kartu yang bisa dikoleksi dan dibagikan ke story - Sponsor | Slot "presented by" di dalam kartu ## Hindari tone: dont - Pemain | Daftar nama dalam tabel - Kartu permainan | Paragraf aturan tanpa gambar - Tiket dan achievement | Banner dan list biasa dengan gaya berbeda-beda - Sponsor | Logo terpisah di footer ``` ## 3. Bintang sebesar layar **Wajah dan nama pemain adalah elemen terbesar.** - Foto pemain dan nama dalam font display mendominasi komposisi. UI mengalah. - Dasarnya: views tertinggi di YouTube XS-2 datang dari laga yang melibatkan Falcão dan Ricardinho ([Angka media sosial](/research/angka-media-sosial/#views-highlight-xs-2-di-youtube)). Reveal pemain satu per satu adalah salah satu pola konten IG yang paling berhasil ([Audit konten Instagram](/research/audit-konten-instagram/#pola-konten-yang-berhasil)). - Dalam praktik: halaman pemain dan tim dimulai dengan potret full-bleed, bukan tabel. Perhatikan apa yang paling besar di layar. ```viz-compare ## Lakukan tone: do - Halaman pemain | Dibuka dengan potret full-bleed dan nama dalam font display - Hierarki | Wajah dan nama dulu, UI mengalah - Daftar pemain | Kartu besar yang bisa digeser ## Hindari tone: dont - Halaman pemain | Dibuka dengan tabel statistik - Hierarki | Navigasi, filter, dan tombol lebih menonjol dari pemain - Daftar pemain | Thumbnail kecil dalam grid padat ``` ## 4. Kekacauan yang terbaca **Momen chaos boleh meledak, tapi informasi harus tetap jelas dalam 2 detik.** - Animasi kartu aktif boleh dramatis (flash, glitch, zoom). Tapi skor, waktu, dan kartu apa yang aktif harus selalu terbaca. - Dasarnya: penonton baru tidak paham aturan kartu ([Format & aturan](/research/format-dan-aturan/)). Kompetitor juga belum menjelaskannya dengan baik secara digital ([Benchmark](/research/benchmark-produk-digital/)). - Dalam praktik: setiap animasi punya "keadaan akhir" yang statis dan terbaca. Kontras teks mengikuti WCAG AA ([Color palette](/visual-direction/palet-warna/)). Animasi boleh meledak, asal keadaan akhirnya terbaca. ```viz-compare ## Lakukan tone: do - Saat kartu aktif | Flash, glitch, atau zoom singkat, lalu kembali ke keadaan statis - Yang selalu terlihat | Skor, waktu, dan nama kartu yang aktif - Penanda | Warna ditambah label teks - Kontras | WCAG AA untuk semua teks ## Hindari tone: dont - Saat kartu aktif | Animasi panjang yang menutupi skor - Yang selalu terlihat | Skor dan waktu tertutup overlay atau efek - Penanda | Hanya warna, tanpa teks - Kontras | Teks kecil di atas cahaya atau foto ramai ``` ## 5. Satu brand, banyak edisi **XSERIES adalah brand. Edisi adalah musim.** - Hitam, merah, mint, wordmark, dan sistem kartu tetap. Tiap edisi boleh membawa tema, aksen warna, dan key visual sendiri. - Dasarnya: warna aksen berganti tiap edisi tanpa warna inti ([Audit identitas](/visual-direction/audit-identitas/)), padahal produk digital harus hidup di antara edisi ([Competitor landscape](/research/competitor-landscape/), takeaway 3). - Dalam praktik: komponen menerima `--edition-accent` dan `--team-color` sebagai variabel. Arsip XS-1 dan XS-2 tetap memakai warna edisinya di dalam bingkai brand yang sama. Kiri adalah yang tetap, kanan adalah yang boleh berganti tiap edisi. ```viz-compare ## Tetap (brand) tone: do - Warna inti | Hitam, merah, mint - Wordmark | X SERIES dengan angka edisi - Sistem kartu | Player card dan game card 5:7 - Komponen | Sama di semua edisi, menerima variabel ## Berganti (edisi) tone: neutral - Aksen warna | Lewat `--edition-accent`, mis. biru XS-1, biru-ungu XS-2 - Tema | "Game Without Limits", "Battle of the Century", "The Unorthodox" - Key visual | Milik tiap edisi - Warna tim | Lewat `--team-color` ``` ## Cek cepat Tempel lima catatan ini di samping layar saat review desain. Kalau jawabannya "tidak", lakukan yang tertulis di bawahnya. ```viz-notes why: Kalau tidak: ask: Dasar: ## Cek sebelum kirim tone: yellow - Apakah ini terasa seperti di arena? | Gelapkan latar, tambah cahaya terarah | Prinsip 1 · Arena malam - Bisakah ini jadi kartu? | Pertimbangkan komponen kartu | Prinsip 2 · Kartu adalah bahasa - Apakah pemain jadi pusat perhatian? | Perbesar foto dan nama, kecilkan UI | Prinsip 3 · Bintang sebesar layar - Bisakah dipahami dalam 2 detik? | Sederhanakan, beri keadaan akhir yang statis | Prinsip 4 · Kekacauan yang terbaca - Apakah masih terasa XSERIES di edisi berikutnya? | Pindahkan elemen edisi ke variabel | Prinsip 5 · Satu brand, banyak edisi ``` ## Dasar riset - Materi XS-3 dibangun di atas latar hitam dengan cahaya merah dan teal: [Audit konten Instagram](/research/audit-konten-instagram/#xs3-players), dari [Instagram @xseries___](https://www.instagram.com/xseries___/) - X Cards dan President Cards: [Format & aturan](/research/format-dan-aturan/#satu-laga-tiga-lapis-aturan), dari [Bola.com](https://www.bola.com/indonesia/read/6258652/xseries-2-sajikan-sportainment-5v5-dengan-aturan-unik-dimeriahkan-bintang-nasional-hingga-dunia). Player card XS-3 dengan rank kartu remi: [Audit konten Instagram](/research/audit-konten-instagram/#xs3-players) - Views highlight XS-2 tertinggi (Nova vs Fury 167K, Grim vs Nova 98K): [Angka media sosial](/research/angka-media-sosial/#views-highlight-xs-2-di-youtube), dari [YouTube @gamesofsociety](https://www.youtube.com/@gamesofsociety) - Post IG dengan likes tertinggi adalah teaser 30 Sep 2026 (11K) dan pengumuman presale (7,2K). Reveal pemain satu per satu adalah salah satu pola yang berhasil: [Angka media sosial](/research/angka-media-sosial/#engagement-instagram) dan [Audit konten Instagram](/research/audit-konten-instagram/#pola-konten-yang-berhasil) - Kompetitor belum menjelaskan aturan kartu secara interaktif: [Competitor landscape](/research/competitor-landscape/#takeaways-untuk-xseries), takeaway 1, dan [Benchmark produk digital](/research/benchmark-produk-digital/#tiru-vs-hindari) - Kings League kehilangan 54% audiens: [Competitor landscape](/research/competitor-landscape/#takeaways-untuk-xseries), takeaway 3, dari [Xataka](https://www.xataka.com/magnet/kings-league-nacio-2023-para-acabar-futbol-tradicional-tres-anos-despues-ha-declarado-ere) - Tema tiap edisi: "Game Without Limits" di [XS-1](/research/timeline-edisi/#xseries-1-2025), "Battle of the Century" di [XS-2](/research/timeline-edisi/#xseries-2-januari-2026), "The Unorthodox" di [XS-3](/research/timeline-edisi/#xseries-3-the-unorthodox-januari-2027), dari highlight [Instagram @xseries___](https://www.instagram.com/xseries___/) - Bahwa penonton baru tidak paham aturan kartu adalah dugaan tim. Belum ada data dari fan, perlu diuji.