Punya selera desain (design sense) itu bukan bakat dari lahir, tapi skill yang bisa dilatih. Bayangin cara orang belajar masak. Dia mencicipi banyak masakan dan bertanya kenapa rasanya enak, mencatat resep yang dia suka, lalu memasak ulang resep orang sampai tangannya hafal. Dan koki yang bagus tahu kapan berhenti menambah garam. Desain juga begitu: kumpulkan contoh, latih mata, bangun ulang desain yang bagus, dan jangan berlebihan.
🧪 Tebakan cepat: Halaman Homestay Kabut versi keponakan Bu Sri pakai 5 warna aksen, 3 font, dan border tebal di semua kotak. Biar tombol pesan paling menonjol, kamu tambah warna ke-6 yang lebih terang, atau buang sesuatu? Jawabannya ada di bagian "Subtlety: buang, bukan tambah".
Kumpulkan referensi: swipe file
Designer profesional punya swipe file (disebut juga design inspiration library): koleksi screenshot desain yang menurut mereka bagus.
- Simpan screenshot halaman, app, atau komponen yang menarik perhatianmu.
- Kelompokkan per jenis: "halaman booking", "tombol", "form", "kartu harga". Folder biasa, Figma, atau Pinterest sama-sama boleh.
- Tulis satu kalimat kenapa itu bagus. Ini bagian yang bikin swipe file jadi alat belajar, bukan galeri.
Contoh catatan yang berguna untuk halaman booking: "Total harga ditulis tebal 20px tepat di atas tombol, harga per malam abu-abu 14px. Mata langsung ke total." Catatan seperti "keren" gak mengajarkan apa-apa.
Sumbernya: Mobbin (tangkapan layar dari app yang beneran dipakai), Awwwards (website), Dribbble dan Behance (karya designer, banyak yang konsep dan belum pernah jadi produk), dan app yang kamu pakai tiap hari.
Latih mata kritis: empat pertanyaan
Tiap buka website atau app, biasakan bertanya empat hal, dan cek jawabannya dengan cara yang bisa dihitung:
| Pertanyaan | Cara mengecek |
|---|---|
| Hierarki: apa yang pertama terlihat? | Sipitkan mata atau buramkan halamannya (squint test). Yang masih jelas adalah yang paling menonjol. Harusnya itu hal terpenting. |
| Spacing konsisten? | Ukur jaraknya di DevTools. Rapi kalau nilainya itu-itu saja (8, 16, 24 px), berantakan kalau acak (7, 13, 22 px). |
| Warna punya tugas? | Hitung warna aksen. Tiap warna harus punya alasan. |
| Typography mudah dibaca? | Hitung font family dan ukuran yang dipakai. |
Copy dan rebuild
Cara tercepat melatih mata: bangun ulang (rebuild) desain yang sudah bagus dari nol. Ambil satu halaman, misalnya landing page Stripe, Linear, atau Vercel, atau kartu kamar dari app booking yang kamu suka. Bangun ulang pakai HTML dan CSS, lalu taruh berdampingan dengan aslinya.
Bedanya hampir selalu di tempat yang sama: jarak antar elemen, ukuran font, dan warna teks sekunder. Tiap beda yang kamu temukan adalah satu pelajaran yang gak akan kamu dapat dari membaca teori. Ini untuk latihan: jangan menerbitkan hasil tiruannya sebagai karyamu sendiri.
Subtlety: buang, bukan tambah
Kesalahan designer pemula yang paling umum: terlalu banyak. Terlalu banyak warna, font, animasi, dan border. Ini CSS halaman keponakan Bu Sri, sebelum dan sesudah dirapikan:
/* Sebelum: semuanya minta perhatian */
.kabut { font-family: "Comic Sans MS", cursive; border: 3px solid #7c3aed; }
h1 { font-family: Impact, sans-serif; color: #db2777; }
.price { font-family: Georgia, serif; color: #ea580c; }
.nights button { border: 3px solid #0891b2; }
.book { background: #dc2626; color: #fff; }
/* Sesudah: satu warna aksen, satu font, bayangan halus */
.kabut { font-family: system-ui, sans-serif; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
h1 { color: #1f2937; }
.price { color: #475569; }
.nights button { border: 1px solid #cbd5e1; }
.book { background: #15803d; color: #fff; }
- Sebelum: 5 warna aksen (ungu, pink, oranye, biru toska, merah), 3 font family, border 3px. Lima elemen bersaing, jadi mata gak tahu harus ke mana.
- Sesudah: judul dan harga pakai abu-abu gelap, bingkai pakai garis tipis dan bayangan lembut. Warna hijau cuma ada di tombol pesan, jadi dia satu-satunya yang menonjol.
h1dan.pricegak perlufont-familylagi: keduanya mewarisi font dari.kabut.
Jadi jawaban tebakannya: buang. Warna ke-6 cuma menambah satu saingan lagi. Tombol jadi paling menonjol justru karena yang lain berhenti berteriak. Itu yang disebut subtlety: perbedaan kecil sudah cukup kalau sisanya tenang. Dieter Rams menulisnya di prinsip desainnya yang terakhir: "Good design is as little design as possible."
⚠️ Jebakan yang sering ketemu
- Swipe file tanpa catatan. Seratus screenshot tanpa alasan cuma galeri. Satu kalimat "kenapa" per screenshot yang bikin kamu belajar.
- Menyalin konsep Dribbble mentah-mentah. Banyak shot cuma berisi data ideal: nama pendek, foto sempurna, gak ada error. Cek dulu dengan isi yang asli.
- Menambah warna biar sesuatu menonjol. Biasanya yang perlu dilakukan adalah membuang warna dari elemen lain.
- Menerbitkan hasil rebuild sebagai karya sendiri. Rebuild itu latihan, bukan portofolio.
TL;DR: Design sense bisa dilatih. Kumpulkan swipe file (koleksi referensi desain) dengan satu kalimat alasan per screenshot. Latih mata dengan empat pertanyaan yang bisa dicek: hierarki (squint test), spacing, warna, typography. Cara tercepat belajar adalah rebuild desain yang sudah bagus, lalu bandingkan berdampingan. Kebalikan dari kebanyakan warna, font, dan animasi adalah subtlety: halaman Homestay Kabut turun dari 5 warna aksen, 3 font, dan border 3px ke 1 warna, 1 font, dan bayangan halus, dan tombol pesannya justru jadi paling menonjol.
