Cara Menyusun Sistem Spasi pada Antarmuka agar Konsisten

Dua tombol di halaman yang sama bisa berjarak 12 piksel di satu tempat dan 16 piksel di tempat lain tanpa ada yang menyadarinya. Selama pengembangan, selisih empat piksel itu tidak terasa. Setelah puluhan komponen terkumpul, tampilan mulai terlihat berantakan tanpa bisa ditunjuk penyebabnya. Sistem spasi menyelesaikan masalah ini dengan satu keputusan yang dipakai berulang.

Sistem spasi adalah daftar nilai jarak tetap yang dipakai seluruh antarmuka, dari padding tombol sampai jarak antarseksi. Alih-alih menulis angka bebas setiap kali menata elemen, kamu memilih dari daftar yang sudah disepakati. Hasilnya tampilan lebih rapi, dan keputusan desain tidak lagi bergantung pada selera orang yang sedang menulis kode.

Mulai dari satu nilai dasar

Langkah pertama adalah memilih satu nilai dasar sebagai batu bata. Banyak sistem memakai 4 atau 8 piksel karena angka itu mudah dibagi dan dikalikan, sehingga jarak antar komponen selalu berhubungan. Nilai dasar bukan aturan mati, tetapi memilih angka yang ganjil seperti 5 atau 7 membuat perhitungan cepat berubah menjadi deretan angka acak.

Setelah dasar ditetapkan, susun skala bertingkat. Skala yang terlalu rapat membuat perbedaan antar level nyaris tak terlihat, sedangkan skala yang melompat jauh menyulitkan penyesuaian kecil. Skala dengan pertambahan bertahap biasanya cukup untuk kebutuhan antarmuka sehari-hari.

Token	Nilai	Pemakaian umum
space-1	4px	Jarak ikon dengan teks
space-2	8px	Padding dalam label dan badge
space-3	12px	Jarak antar elemen dalam satu grup
space-4	16px	Padding tombol dan input
space-6	24px	Jarak antarkartu
space-8	32px	Jarak antarseksi kecil
space-12	48px	Jarak antarseksi besar

Nama token sebaiknya menyebut tingkatannya, bukan nilainya. Saat kamu memutuskan menaikkan nilai space-4 dari 16 menjadi 18 piksel, seluruh kode yang memakai token itu ikut berubah tanpa perlu mencari satu per satu.

Jarak berdasarkan hubungan antarelemen

Spasi punya fungsi komunikasi. Elemen yang berhubungan erat sebaiknya berdekatan, sedangkan elemen yang berbeda kelompok diberi jarak lebih lebar. Label dan kolom input yang berjarak 24 piksel terlihat seperti dua hal terpisah, sementara jarak 8 piksel membuat keduanya terbaca sebagai satu kesatuan. Prinsip kedekatan ini sudah lama dipakai dalam desain formulir, dan cara yang sama berlaku untuk hampir semua tata letak.

Cara praktisnya, tentukan tiga tingkat kedekatan untuk setiap halaman: dalam satu komponen, antar komponen dalam satu grup, dan antargrup. Setiap tingkat memakai satu nilai dari skala. Ketika aturan ini diterapkan konsisten, mata pengguna bisa menebak struktur halaman sebelum membaca satu kata pun.

Halaman yang mengandalkan banyak kartu dan tautan perlu perhatian khusus. Jika jarak antarkartu terlalu kecil, pengguna sulit membedakan batas tiap kartu, dan kesalahan klik meningkat. Daftar tautan yang panjang juga lebih nyaman dibaca bila setiap baris diberi jarak vertikal yang cukup, terutama di layar ponsel yang ruangnya sempit.

Menerapkan sistem spasi di CSS

Terjemahkan skala ke dalam custom property agar bisa dipakai di mana saja. Simpan semuanya di satu tempat, biasanya di file variabel global.

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
}

.card {
  padding: var(--space-4);
  border-radius: 8px;
}

.card + .card {
  margin-top: var(--space-6);
}

.card__title {
  margin-bottom: var(--space-2);
}

Kalau proyekmu memakai JavaScript untuk memanipulasi kelas atau menyisipkan elemen, nilai yang sama bisa dibaca dari CSS supaya tidak ada dua sumber kebenaran. Pendekatan serupa juga berguna saat kamu memilih elemen dengan selector tertentu untuk menerapkan kelas spasi secara dinamis, misalnya lewat cara memilih elemen dengan selector jQuery pada kode lama yang belum sepenuhnya pindah ke framework modern.

Hindari menulis margin dan padding dengan angka langsung di komponen baru. Kebiasaan menulis margin-top: 15px akan perlahan merusak skala yang sudah disusun. Kalau nilai yang dibutuhkan tidak ada di skala, ubah skalanya dengan sadar, bukan menambahkan pengecualian diam-diam.

Spasi pada data berhalaman

Komponen berpindah halaman seperti tabel dan daftar sering terlupakan. Jarak antara kontrol halaman dan isi daftar sebaiknya mengikuti skala yang sama dengan jarak antarseksi lain, agar pengguna melihat kontrol itu sebagai bagian dari kesatuan. Kalau kamu membangun navigasi halaman sendiri, atur jarak tombol dan nomor halaman memakai token yang sudah ada, seperti yang dibahas pada panduan cara membuat pagination PHP tanpa library tambahan.

Perhatikan juga jarak di dalam kontrol itu sendiri. Tombol nomor halaman yang terlalu rapat menyulitkan pengguna menyentuh angka yang benar di layar kecil, sementara jarak berlebih membuat kontrol tampak terpisah dari tabel yang dikendalikannya.

Penyesuaian spasi untuk ukuran layar

Skala yang sama bisa dipakai di semua ukuran layar, tetapi nilainya tidak harus identik. Jarak antarseksi 48 piksel terasa pas di layar lebar, sementara di ponsel angka itu memakan terlalu banyak ruang vertikal. Solusinya, buat dua tingkat skala: satu untuk layar kecil dan satu untuk layar besar, dengan nama token tetap sama.

Alih-alih menulis media query di setiap komponen, ubah nilai variabelnya sekali di tingkat akar. Semua komponen yang memakai token ikut menyesuaikan. Cara ini mengurangi jumlah aturan yang harus dirawat dan membuat ketidakcocokan antar halaman lebih mudah dilacak.

Tanda sistem spasi mulai gagal

Ada beberapa gejala yang muncul ketika sistem tidak lagi diikuti. Perhatikan daftar berikut saat meninjau antarmuka.

• Nilai jarak yang ditulis langsung di komponen, seperti 13px atau 18px, muncul di lebih dari satu file.
• Dua halaman dengan pola serupa memakai jarak antarseksi yang berbeda tanpa alasan.
• Padding tombol berubah ukuran ketika teksnya diganti, karena tingginya bergantung pada baris teks.
• Pengembang menghabiskan waktu berdebat soal jarak yang seharusnya sudah diputuskan di skala.

Kalau tanda-tanda ini muncul, luangkan waktu untuk audit singkat. Kumpulkan semua nilai jarak yang dipakai, kelompokkan, lalu petakan ke skala. Langkah ini biasanya menemukan beberapa nilai nyasar yang bisa diseragamkan tanpa mengubah tampilan secara berarti.

Menguji hasilnya bersama pengguna

Sistem spasi yang rapi belum tentu mudah dipakai. Jarak yang konsisten membantu keterbacaan, tetapi pengguna tetap perlu diuji, terutama pada formulir dan menu yang padat. Saat menyiapkan pengujian, siapkan tugas yang memaksa pengguna berpindah antar bagian halaman, lalu perhatikan apakah mereka salah mengelompokkan elemen. Temuan seperti itu menunjukkan spasi perlu disesuaikan, bukan hanya dirapikan. Untuk prosedur lengkapnya, lihat panduan usability testing untuk pemula.

Catat juga keluhan tentang elemen yang terasa “menempel” atau “melayang”. Keduanya menandakan hubungan visual antar elemen tidak sesuai dengan hubungan logisnya. Perbaikan biasanya cukup dengan memindahkan satu tingkat pada skala, bukan merombak tata letak.

Ringkasan

Sistem spasi dibangun dari satu nilai dasar, skala bertingkat, dan token yang dipakai berulang di seluruh antarmuka. Jarak ditentukan oleh kedekatan hubungan antar elemen, bukan selera saat menulis kode. Terapkan lewat custom property, sesuaikan nilainya per ukuran layar di satu tempat, dan tinjau secara berkala untuk menangkap nilai yang menyimpang.

Pertanyaan yang Sering Diajukan

Apakah sistem spasi wajib memakai kelipatan 8 piksel?

Tidak wajib. Kelipatan 4 atau 8 populer karena mudah dibagi, tetapi yang lebih penting adalah konsistensi dan hubungan antar nilai. Skala yang memakai kelipatan 5 juga bisa bekerja asalkan seluruh tim memakainya dan perhitungannya tetap sederhana.

Bagaimana kalau desainer memberi jarak yang tidak ada di skala?

Minta desainer memilih nilai terdekat dari skala, atau perbarui skala jika kebutuhan itu berulang. Menambahkan nilai baru untuk satu kasus membuat skala membengkak dan sulit diingat. Diskusikan bersama agar keputusan tercatat di dokumentasi sistem desain.

Apakah sistem spasi berlaku untuk jarak di dalam teks?

Untuk line-height dan jarak antarkata, aturannya biasanya terpisah karena bergantung pada ukuran huruf. Sistem spasi lebih cocok mengatur padding, margin, dan gap antarelemen. Tetap jaga agar nilai line-height mengikuti skala tipografi yang juga sudah ditetapkan.