Prinsip visual
Lima prinsip yang dipakai untuk memutuskan setiap layar, grafis, dan animasi XSERIES. Masing-masing diturunkan dari riset dan strategi.
Prinsip ini menerjemahkan positioning ("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.
1
Arena malam
- Selalu terasa di dalam arena saat lampu menyala
2
Kartu adalah bahasa
- Kalau bisa jadi kartu, jadikan kartu
3
Bintang sebesar layar
- Wajah dan nama pemain paling besar
4
Kekacauan yang terbaca
- Boleh meledak, tetap jelas dalam 2 detik
5
Satu brand, banyak edisi
- 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).
- 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.
- LatarHitam pekat (
xs-black), dark mode sebagai default - CahayaMerah dari atas, teal dari bawah atau samping
- SubjekPemain dan skor yang "menyala" di tengah gelap
- Mode terangHanya untuk dokumen: aturan versi cetak, syarat & ketentuan
- LatarPutih atau abu-abu datar di halaman utama
- CahayaRata di seluruh layar, tanpa arah
- SubjekFoto kecil di tengah banyak teks
- Mode terangSebagai mode utama, dengan dark mode sebagai opsi
2. Kartu adalah bahasa
Kalau sesuatu bisa jadi kartu, jadikan kartu.
- Pemain, kartu permainan, tiket, achievement, dan sponsor memakai satu keluarga komponen kartu dengan rasio 5:7.
- Dasarnya: format XSERIES dibangun di atas X Cards dan President Cards, dan player card XS-3 sudah memakai tata letak kartu remi. Bet strategi utamanya adalah "jadikan kartu sebagai produk" (Ringkasan strategi).
- Dalam praktik: kartu bisa dibalik (flip), dikoleksi, dibagikan sebagai gambar ke story, dan punya slot "presented by".
Lihat kolom kiri: semua entitas memakai satu keluarga komponen.
- PemainPlayer card 5:7 dengan rank, foto, nama, statistik
- Kartu permainanGame card yang bisa dibalik untuk melihat efeknya
- Tiket dan achievementKartu yang bisa dikoleksi dan dibagikan ke story
- SponsorSlot "presented by" di dalam kartu
- PemainDaftar nama dalam tabel
- Kartu permainanParagraf aturan tanpa gambar
- Tiket dan achievementBanner dan list biasa dengan gaya berbeda-beda
- SponsorLogo 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). Reveal pemain satu per satu adalah salah satu pola konten IG yang paling berhasil (Audit konten Instagram).
- Dalam praktik: halaman pemain dan tim dimulai dengan potret full-bleed, bukan tabel.
Perhatikan apa yang paling besar di layar.
- Halaman pemainDibuka dengan potret full-bleed dan nama dalam font display
- HierarkiWajah dan nama dulu, UI mengalah
- Daftar pemainKartu besar yang bisa digeser
- Halaman pemainDibuka dengan tabel statistik
- HierarkiNavigasi, filter, dan tombol lebih menonjol dari pemain
- Daftar pemainThumbnail 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). Kompetitor juga belum menjelaskannya dengan baik secara digital (Benchmark).
- Dalam praktik: setiap animasi punya "keadaan akhir" yang statis dan terbaca. Kontras teks mengikuti WCAG AA (Color palette).
Animasi boleh meledak, asal keadaan akhirnya terbaca.
- Saat kartu aktifFlash, glitch, atau zoom singkat, lalu kembali ke keadaan statis
- Yang selalu terlihatSkor, waktu, dan nama kartu yang aktif
- PenandaWarna ditambah label teks
- KontrasWCAG AA untuk semua teks
- Saat kartu aktifAnimasi panjang yang menutupi skor
- Yang selalu terlihatSkor dan waktu tertutup overlay atau efek
- PenandaHanya warna, tanpa teks
- KontrasTeks 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), padahal produk digital harus hidup di antara edisi (Competitor landscape, takeaway 3).
- Dalam praktik: komponen menerima
--edition-accentdan--team-colorsebagai 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.
- Warna intiHitam, merah, mint
- WordmarkX SERIES dengan angka edisi
- Sistem kartuPlayer card dan game card 5:7
- KomponenSama di semua edisi, menerima variabel
- Aksen warnaLewat
--edition-accent, mis. biru XS-1, biru-ungu XS-2 - Tema"Game Without Limits", "Battle of the Century", "The Unorthodox"
- Key visualMilik tiap edisi
- Warna timLewat
--team-color
Cek cepat
Tempel lima catatan ini di samping layar saat review desain. Kalau jawabannya "tidak", lakukan yang tertulis di bawahnya.
Apakah ini terasa seperti di arena?
Bisakah ini jadi kartu?
Apakah pemain jadi pusat perhatian?
Bisakah dipahami dalam 2 detik?
Apakah masih terasa XSERIES di edisi berikutnya?
Dasar riset
- Materi XS-3 dibangun di atas latar hitam dengan cahaya merah dan teal: Audit konten Instagram, dari Instagram @xseries___
- X Cards dan President Cards: Format & aturan, dari Bola.com. Player card XS-3 dengan rank kartu remi: Audit konten Instagram
- Views highlight XS-2 tertinggi (Nova vs Fury 167K, Grim vs Nova 98K): Angka media sosial, dari YouTube @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 dan Audit konten Instagram
- Kompetitor belum menjelaskan aturan kartu secara interaktif: Competitor landscape, takeaway 1, dan Benchmark produk digital
- Kings League kehilangan 54% audiens: Competitor landscape, takeaway 3, dari Xataka
- Tema tiap edisi: "Game Without Limits" di XS-1, "Battle of the Century" di XS-2, "The Unorthodox" di XS-3, dari highlight Instagram @xseries___
- Bahwa penonton baru tidak paham aturan kartu adalah dugaan tim. Belum ada data dari fan, perlu diuji.
Benang merah halaman ini
Halaman yang menjadi dasar halaman ini, dan halaman lain yang memakainya.