Aturan Dasar Desain UI: Spasi 8 Poin, Huruf, dan Kontras

Kamu sudah membuat layar aplikasi, tombolnya ada, teksnya ada, warnanya juga bagus. Tapi hasilnya tetap terasa "murahan" dan susah dipindai mata. Biasanya masalahnya bukan di selera, melainkan di keputusan kecil yang tidak konsisten: jarak antar elemen acak, ukuran huruf campur aduk, dan teks abu-abu yang nyaris hilang di latar putih. Kabar baiknya, semua itu bisa dibereskan dengan beberapa aturan sederhana.

Mulai dari spasi, bukan dari warna

Pemula sering langsung memilih warna. Padahal yang paling cepat memperbaiki tampilan adalah merapikan jarak. Pakai satu satuan dasar, lalu semua jarak adalah kelipatannya. Banyak desainer memakai kelipatan 8 piksel: 8, 16, 24, 32, 40, 48.

Alasannya praktis. Kamu tidak perlu lagi menimbang apakah jaraknya 13 atau 15. Pilihan dipersempit, keputusan jadi cepat, dan layar terlihat seirama.

Aturan jarak yang gampang diingat

• Elemen yang berhubungan didekatkan (8 atau 16 piksel).
• Kelompok yang berbeda dijauhkan (24 sampai 48 piksel).
• Jarak ke tepi layar sama di kiri dan kanan, misalnya 16 piksel di ponsel.
• Jarak di dalam kartu (padding) lebih kecil atau sama dengan jarak antar kartu.

Contoh: label "Nama Barang" dan kolom isiannya diberi jarak 8 piksel. Kolom itu dan label berikutnya diberi jarak 24 piksel. Mata langsung paham mana label milik kolom yang mana, tanpa garis pemisah sama sekali.

Skala huruf: sedikit ukuran, jelas tingkatannya

Jangan memakai sembilan ukuran huruf berbeda di satu layar. Cukup lima tingkat dengan peran yang jelas.

Untuk teks bacaan di layar ponsel, 16 piksel adalah titik awal yang aman. Jarak antar baris sekitar 1,4 sampai 1,5 kali ukuran huruf membuat paragraf tidak terasa sesak. Jadi teks 16 piksel punya tinggi baris sekitar 24 piksel, yang kebetulan kelipatan 8.

Ingin lebih dalam? Artikel ini baru membahas sebagian kecil. Di ebook Desain UI untuk Pemula, kamu akan mempelajari lebih jauh:

• Menyusun tata letak dengan grid dan sistem spasi 8 poin yang konsisten
• Memilih huruf dan skala ukuran agar teks mudah dibaca di layar
• Membangun palet warna dengan kontras yang lolos standar WCAG

Semua langkahnya disusun berurutan dan bisa langsung dipraktikkan. Lihat isi bukunya.

Kontras warna: teks harus terbaca, bukan sekadar cantik

Kontras adalah perbandingan terang-gelap antara teks dan latarnya. Pedoman aksesibilitas web (WCAG) menetapkan batas minimal rasio kontras:

• Teks biasa: minimal 4,5 banding 1.
• Teks besar (kira-kira 24 piksel ke atas, atau 19 piksel tebal): minimal 3 banding 1.

Teks hitam di atas putih punya rasio 21 banding 1, sedangkan abu-abu terang di atas putih sering jatuh di bawah 3 banding 1. Itu sebabnya keterangan kecil berwarna abu-abu muda terasa sulit dibaca, apalagi di bawah sinar matahari.

Cara cek mudah: gunakan alat pemeriksa kontras gratis di internet, masukkan kode warna teks dan latar, lalu lihat apakah rasionya lolos. Biasakan mengecek sebelum warna dipakai di banyak tempat.

Tombol yang jelas dan mudah ditekan

Tombol utama harus langsung terlihat sebagai tombol. Beberapa kebiasaan baik:

1. Hanya satu tombol utama per layar, dengan warna paling menonjol.
2. Tombol kedua dibuat lebih tenang, misalnya hanya garis tepi.
3. Tinggi tombol minimal sekitar 44 piksel supaya nyaman ditekan jempol.
4. Teks tombol berupa kata kerja: "Simpan Transaksi", bukan "OK".

Contoh kasus: layar kasir yang berantakan lalu dirapikan

Bayangkan layar kasir toko kelontong. Versi awalnya: judul 18 piksel, total belanja 18 piksel juga, tombol "Bayar" berwarna abu-abu, dan jarak antar baris barang berbeda-beda.

Perbaikannya, langkah demi langkah:

1. Daftar barang diberi jarak 16 piksel antar baris, teks 16 piksel.
2. Total belanja dinaikkan jadi 28 piksel tebal, karena itu informasi terpenting.
3. Tombol "Bayar Sekarang" dibuat penuh selebar layar, tinggi 48 piksel, warna paling pekat.
4. Teks harga abu-abu muda diganti abu-abu tua agar rasionya di atas 4,5 banding 1.

Tanpa menambah fitur apa pun, kasir kini bisa menemukan total dan tombol bayar dalam sekilas pandang.

Jangan lupa keadaan kosong dan galat

Layar tidak selalu berisi data. Rancang juga tiga keadaan ini:

• Kosong: daftar transaksi belum ada. Tampilkan kalimat ramah dan satu tombol, misalnya "Belum ada transaksi. Catat penjualan pertamamu."
• Galat: tulis apa yang salah dan cara memperbaikinya. "Harga harus berupa angka" lebih berguna daripada "Input tidak valid".
• Memuat: beri tanda bahwa aplikasi sedang bekerja agar pengguna tidak menekan berulang kali.

Pesan galat sebaiknya muncul dekat kolom yang bermasalah, bukan hanya di bagian atas layar.

Daftar periksa cepat sebelum kamu menyerahkan desain

Sebelum menganggap desain selesai, jalankan pemeriksaan lima menit ini:

• Apakah semua jarak kelipatan 8 (atau 4 untuk detail kecil)?
• Apakah ada paling banyak lima ukuran huruf?
• Apakah teks utama lolos rasio 4,5 banding 1?
• Apakah hanya ada satu tombol utama per layar?
• Apakah keadaan kosong dan galat sudah dirancang?

Kalau semuanya ya, layarmu sudah lebih rapi daripada kebanyakan tampilan buatan pemula.

Satu hal lagi: hierarki dan ruang kosong

Pemula cenderung takut ruang kosong dan mengisinya dengan elemen tambahan. Padahal ruang kosong membantu mata beristirahat dan menegaskan mana yang penting. Cobalah membuang satu elemen dari layar yang padat, lalu lihat apakah fungsinya tetap jalan. Sering kali jawabannya ya.

Atur juga hierarki dengan tiga alat saja: ukuran, ketebalan, dan warna. Elemen terpenting dibuat paling besar atau paling pekat, sedangkan elemen pendukung dibuat lebih tenang. Jika semua elemen sama menonjol, tidak ada yang menonjol.

Penutup

Desain antarmuka yang enak dipakai lahir dari konsistensi, bukan bakat bawaan. Mulailah dari satu layar saja. Terapkan jarak kelipatan 8, rapikan skala huruf, cek kontras, lalu bandingkan sebelum dan sesudahnya. Perbedaannya biasanya langsung terasa, dan kebiasaan ini bisa kamu bawa ke Figma, Penpot, atau alat desain apa pun.

Kalau artikel ini membantu, langkah berikutnya ada di ebook Desain UI untuk Pemula.