Design direction (arah desain) adalah satu set keputusan visual yang dipilih bersama: huruf, warna, sudut, garis, shadow, jarak. Semuanya mendukung satu kesan yang cocok untuk penggunanya. Tren adalah gaya yang dipakai banyak produk di waktu yang sama. Bayangin dua warung yang menjual nasi goreng yang sama persis. Yang satu warung kayu dengan lampu kuning redup dan papan nama kecil; yang lain gerobak dengan spanduk merah besar bertuliskan "DISKON!". Makanannya sama, kesannya beda. Itulah arah desain: isinya sama, keputusannya beda.
🧪 Tebakan cepat: Bu Sri minta versi promo Desember untuk kartu Kamar Teras. Kamu coba dua tren di caption foto: kaca buram (glassmorphism) dan garis hitam tebal (neubrutalism). Mana yang bikin nama kamar putih di atas foto gagal kontras? Jawabannya ada di bagian "Tren, dibaca dari CSS-nya".
Arah desain: satu set keputusan
Arah desain bukan satu warna favorit. Dia adalah aturan yang dipakai di semua komponen sekaligus: kalau kartunya bersudut 12px, tombolnya juga membulat; kalau garisnya tipis 1px, gak ada garis 3px yang tiba-tiba muncul. Karena itu arah desain paling enak ditulis sebagai CSS variable, dan satu arah = satu set nilai.
.kabut {
--radius: 12px;
--card-bg: #ffffff;
--card-border: 1px solid #e2e8f0;
--card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--total-size: 1rem;
--total-weight: 600;
}
- Tiap komponen membaca variable yang sama:
.kabutmemakai--radius,.bookjuga. - Mengganti arah berarti mengganti nilai variable-nya, bukan menulis ulang HTML.
Dua arah, isi yang sama
Ini kartu Kamar Teras dengan isi yang persis sama (foto, 1, 2, 3 malam, "2 malam × Rp 350.000 = Rp 700.000", "Pesan kamar, bayar di tempat", catatan batal gratis), dalam dua arah:
| Keputusan | Tenang, alami | Promo, berani |
|---|---|---|
| Latar kartu | putih, garis 1px solid #e2e8f0 |
hijau #15803d penuh |
| Sudut | 12px |
4px |
| Total | 16px, tebal 600 | 28px, tebal 800 |
| Tombol pesan | hijau, teks putih (5,02:1) | putih, teks hijau (5,02:1), huruf kapital |
| Catatan | #475569 di putih (7,58:1) |
#e9fbf0 di hijau (4,66:1) |
| Shadow | 0 1px 3px rgba(0, 0, 0, 0.1) |
tidak ada |
Dua-duanya lolos kontras. Bedanya ada di kesan. Di arah tenang, hijau cuma muncul di dua tempat (malam terpilih dan tombol pesan), jadi mata langsung tahu harus ke mana. Di arah promo, hijau jadi latar seluruh kartu, dan yang menonjol justru tombol putihnya. Arah promo juga punya aturan: kalau semuanya hijau, aksennya pindah ke warna lain, di sini putih.
Memilih arah: tamu dan tujuannya
Pilih arah dari dua pertanyaan: siapa penggunanya dan apa satu hal yang harus dia lakukan.
- Halaman pesan utama dibuka tamu seperti Pak Hadi (58) yang mau memesan kamar tenang di Dieng. Tugasnya satu, dan dia butuh yakin. Arah tenang: latar terang, hijau hemat, banyak ruang.
- Kampanye "Promo Desember" berjalan dua minggu dan harus mencuri perhatian di antara postingan lain. Arah promo: warna penuh, huruf besar dan tebal.
Arah yang sama dipakai di seluruh produk, supaya halaman pesan, dasbor Bu Sri, dan email konfirmasi terasa dari tempat yang sama. Arah promo dipakai terbatas, untuk kampanye, lalu kembali ke arah utama.
Tren, dibaca dari CSS-nya
Jangan ikut tren karena "lagi musim". Baca tren dari apa yang dilakukannya di CSS, lalu hitung harganya:
| Tren | Yang dilakukan di CSS | Harganya |
|---|---|---|
| Skeuomorphism | meniru benda nyata: gradient, highlight inset, shadow, gambar tekstur |
banyak lapisan untuk digambar; di tombol gradient #2fa45a ke #15803d, teks putih cuma 3,56:1 di titik paling terang di bawahnya |
| Flat design | warna solid, tanpa shadow dan gradient | ringan, tapi tombol bisa terlihat seperti teks biasa |
| Material Design | permukaan datar, shadow untuk menunjukkan lapisan | hierarki jelas, butuh aturan elevasi yang konsisten |
| Glassmorphism | background: rgba(255, 255, 255, 0.15) + backdrop-filter: blur(12px), efek kaca buram |
kontras teks bergantung pada apa yang ada di belakang kaca; blur dihitung ulang tiap kali isi di belakangnya bergerak |
| Neubrutalism | border: 3px solid #1f2937, box-shadow: 4px 4px 0 #1f2937 tanpa blur, warna datar |
kontras tinggi, tapi kalau semuanya bergaris tebal, gak ada yang menonjol |
Sedikit sejarahnya: iOS sampai versi 6 (2012) penuh tekstur kulit dan kayu, lalu iOS 7 (2013) membuangnya dan beralih ke flat. Google memperkenalkan Material Design tahun 2014. Tren sering muncul sebagai reaksi terhadap tren sebelumnya.
Sekarang jawaban tebakannya. Kaca 15% putih di atas langit oranye malah menerangkan latarnya. Titik paling terang di bawah nama kamar jadi #e6a841, dan teks putih di atasnya cuma 2,09:1 (harga 1,93:1). Blur meratakan warna tetangga, tapi langit oranye yang lebar tetap oranye: di Chrome hasilnya sekitar 2,2:1, tetap gagal. Neubrutalism memakai teks #1f2937 di latar hijau muda #e9fbf0, 13,65:1, lolos. Jadi yang gagal adalah glassmorphism. Itu jawaban tebakannya.
⚠️ Jebakan yang sering ketemu
- Mencampur arah. Kartu bersudut 12px dengan tombol neubrutalism bergaris 3px terlihat seperti dua situs yang ditempel.
- Kaca di atas foto terang.
backdrop-filtergak menggelapkan apa pun. Ukur kontras di titik paling terang di belakang kaca, atau pakai scrim. - Semua menonjol. Di neubrutalism dan arah promo, kalau semua kotak bergaris tebal dan ber-shadow, tombol pesan gak lagi lebih kuat dari tombol malam. Pilih satu yang paling menonjol.
- Ganti arah dengan ganti isi. Arah desain mengubah CSS. Kalau teks dan urutan berubah, itu keputusan UX yang lain, dan harus diuji lagi.
TL;DR: Design direction adalah satu set keputusan visual (huruf, warna, sudut, garis, shadow, jarak) yang dipakai di semua komponen; tulis sebagai CSS variable supaya ganti arah = ganti nilai. Kartu Kamar Teras bisa tenang (putih, garis #e2e8f0, sudut 12px, hijau cuma di dua tombol) atau promo (hijau penuh, total 28px tebal 800, tombol putih) dengan isi yang sama; pilih dari pengguna dan tugasnya. Baca tren dari CSS-nya dan hitung harganya: skeuomorphism meniru benda nyata (gradient, highlight, tekstur), glassmorphism adalah kaca buram (rgba(255, 255, 255, 0.15) + backdrop-filter: blur()), dan neubrutalism memakai garis hitam tebal, kontras tinggi, dan shadow offset tanpa blur. Teks putih di atas kaca di depan langit terang cuma sekitar 2:1, jadi selalu ukur di titik paling terang.
