Dasar Desain untuk Developer

Kenapa ini penting

Kamu tidak harus menjadi desainer, tetapi kamu akan bekerja dengan desainer, membaca file desain, dan sering harus membuat sendiri tampilan yang "cukup bagus" untuk proyek pribadi. Website dengan kode sempurna tetapi teks abu-abu tipis di atas latar putih, jarak acak, dan lima jenis font akan terasa murahan dan sulit dipakai. Kabar baiknya: sebagian besar tampilan yang rapi berasal dari beberapa prinsip sederhana yang bisa dipelajari, bukan bakat misterius. MDN memasukkan topik ini ke kurikulum inti karena developer yang paham bahasa desain bisa berkomunikasi lebih baik dengan desainer dan menerjemahkan desain menjadi kode dengan lebih tepat.

Konsep inti

Hierarki visual

Hierarki visual adalah cara mengarahkan mata pengunjung: apa yang dilihat pertama, kedua, dan seterusnya. Alatnya: ukuran (yang besar dilihat duluan), ketebalan (bold), warna dan kontras (warna mencolok menarik perhatian), posisi (atas dan kiri dibaca lebih dulu dalam bahasa Latin), dan ruang kosong di sekitarnya. Analogi: halaman koran. Judul utama besar dan tebal, subjudul lebih kecil, isi berita paling kecil. Tes sederhana: buka desainmu, sipitkan mata. Elemen yang masih terlihat jelas adalah yang paling dominan. Apakah itu memang yang ingin kamu tonjolkan, misalnya tombol "Daftar"?

Hanya boleh ada satu aksi utama per layar. Kalau semua tombol berwarna mencolok, tidak ada yang menonjol.

Tipografi

• Batasi jenis font: satu atau dua keluarga font sudah cukup (misalnya satu untuk judul, satu untuk isi).
• Ukuran isi: untuk teks bacaan di web, sekitar 16px adalah titik awal yang umum (ukuran default browser).
• Skala ukuran: pakai beberapa ukuran tetap yang konsisten (misalnya 14, 16, 20, 24, 32, 48px), jangan ukuran acak seperti 17px, 23px, 31px.
• Tinggi baris (line-height) untuk paragraf sekitar 1.5 sampai 1.7 supaya nyaman dibaca.
• Panjang baris ideal sekitar 45 sampai 75 karakter. Paragraf selebar layar monitor melelahkan mata; batasi dengan max-width sekitar 65ch.
• Hindari teks rata kanan-kiri (justify) di web karena menimbulkan celah aneh antar kata.

Warna dan kontras

• Mulai dari palet kecil: satu warna utama (brand), satu warna aksen untuk aksi, beberapa tingkat abu-abu untuk teks dan latar, plus warna status (hijau sukses, merah error).
• Kontras adalah perbandingan terang antara teks dan latar. Standar aksesibilitas WCAG level AA mewajibkan rasio minimal 4.5:1 untuk teks biasa dan 3:1 untuk teks besar (sekitar 18pt, atau 14pt tebal). Level AAA lebih ketat: 7:1 dan 4.5:1.
• Cek kontras dengan DevTools: pilih elemen teks, klik kotak warna di panel Styles, lihat nilai "Contrast ratio".
• Jangan menyampaikan informasi hanya lewat warna. Error form sebaiknya berwarna merah dan ada teks penjelasan, karena sebagian orang buta warna.
• Mode gelap (dark mode) bukan sekadar membalik warna; teks putih murni di atas hitam pekat bisa menyilaukan, jadi pakai abu-abu sangat gelap untuk latar.

Spacing dan ruang kosong

Ruang kosong (whitespace) bukan ruang terbuang. Ruang memberi napas dan menunjukkan hubungan: elemen yang berdekatan dianggap satu kelompok (prinsip proximity). Jarak antara label dan input-nya harus lebih kecil daripada jarak antar kelompok form. Pakai skala spacing yang konsisten, misalnya kelipatan 4 atau 8 (4, 8, 16, 24, 32, 48, 64px). Kalau ragu, beri ruang lebih banyak.

Grid dan perataan

• Alignment (perataan): setiap elemen sebaiknya sejajar dengan sesuatu. Teks rata kiri yang tepinya segaris terlihat jauh lebih rapi daripada elemen yang posisinya sedikit-sedikit melenceng.
• Grid adalah kerangka kolom tak terlihat, sering 12 kolom untuk desktop dan 4 kolom untuk HP, dengan jarak antar kolom (gutter) tetap. Di kode, ini diterjemahkan menjadi CSS Grid atau Flexbox (dipelajari di fase HTML/CSS).
• Skala: elemen penting diberi ukuran lebih besar; perbandingan ukuran yang jelas (misalnya judul dua kali isi) lebih tegas daripada perbedaan tipis.

Desain berpusat pada pengguna dan pola umum

Semua keputusan desain dibuat untuk pengguna, bukan selera pribadi. Pikirkan siapa pengunjungnya (pelajar, lansia, pengguna HP dengan sinyal lemah) dan kebutuhan aksesibilitas sejak awal. Ada design pattern yang sudah dikenal pengguna, jadi pakai saja daripada menciptakan ulang: kartu (card), breadcrumb, modal dialog, indikator langkah pada form, keranjang belanja, mode gelap, dan progressive disclosure (menampilkan detail hanya saat dibutuhkan).

Membaca desain di Figma

Figma adalah alat desain berbasis browser yang paling banyak dipakai tim produk. Sebagai developer, kamu biasanya mendapat akses "view" atau mode Dev Mode. Yang perlu kamu cari:

Ingat bahwa desain Figma biasanya hanya menunjukkan satu atau dua ukuran layar dan keadaan "ideal". Tanyakan ke desainer soal keadaan lain: teks yang sangat panjang, daftar kosong, tombol saat di-hover atau dinonaktifkan, pesan error, dan tampilan tablet. Bertanya di awal jauh lebih murah daripada membongkar kode di akhir.

Contoh kode

Satu kartu produk yang menerapkan semua prinsip di atas: skala spacing kelipatan 8, dua ukuran font yang jelas berbeda, kontras aman, satu aksi utama, dan variabel warna.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Kartu Kelas</title>
  <style>
    :root {
      /* Palet kecil: utama, teks, teks redup, latar */
      --warna-utama: #1d4ed8;   /* biru tua, kontras dengan putih sekitar 6.7:1 */
      --teks: #111827;          /* hampir hitam */
      --teks-redup: #4b5563;    /* abu-abu gelap, masih lolos 4.5:1 di atas putih */
      --latar: #f3f4f6;
      /* Skala spacing kelipatan 8 */
      --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
    }
    body {
      font-family: system-ui, sans-serif;
      font-size: 16px;
      line-height: 1.6;
      color: var(--teks);
      background: var(--latar);
      padding: var(--s4) var(--s2);
    }
    .kartu {
      max-width: 22rem;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      padding: var(--s3);
      box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
    }
    .label  { font-size: 14px; color: var(--teks-redup); margin: 0 0 var(--s1); }
    .judul  { font-size: 24px; line-height: 1.25; margin: 0 0 var(--s2); }
    .isi    { color: var(--teks-redup); margin: 0 0 var(--s3); max-width: 65ch; }
    .tombol {
      display: block; text-align: center;
      background: var(--warna-utama); color: white;
      padding: var(--s1) var(--s2); border-radius: 8px;
      font-weight: 600; text-decoration: none;
    }
    .link-kedua { display: block; text-align: center; margin-top: var(--s2); color: var(--warna-utama); }
  </style>
</head>
<body>
  <article class="kartu">
    <p class="label">Kelas pemula · 4 minggu</p>
    <h2 class="judul">Dasar Web Development</h2>
    <p class="isi">Belajar HTML, CSS, dan Git dari nol sampai bisa menerbitkan portofolio pertamamu.</p>
    <a class="tombol" href="#daftar">Daftar sekarang</a>  <!-- satu aksi utama -->
    <a class="link-kedua" href="#silabus">Lihat silabus</a> <!-- aksi kedua tampil lebih ringan -->
  </article>
</body>
</html>
<!-- → Kartu putih di tengah, label kecil abu-abu, judul besar, satu tombol biru menonjol -->

Cek kontras langsung dari Console DevTools dengan fungsi kecil berdasarkan rumus WCAG:

// Hitung rasio kontras dua warna hex sesuai rumus WCAG 2.x
function luminance(hex) {
  const rgb = hex.match(/\w\w/g).map((h) => parseInt(h, 16) / 255);
  const lin = rgb.map((c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4));
  return 0.2126 * lin[0] + 0.7152 * lin[1] + 0.0722 * lin[2];
}
function contrast(a, b) {
  const [l1, l2] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return ((l1 + 0.05) / (l2 + 0.05)).toFixed(2);
}
console.log(contrast("#4b5563", "#ffffff")); // → 7.56  (lolos AA dan AAA)
console.log(contrast("#9ca3af", "#ffffff")); // → 2.54  (GAGAL untuk teks biasa)
console.log(contrast("#1d4ed8", "#ffffff")); // → 6.70  (aman untuk tombol)

Kesalahan umum

• Terlalu banyak font dan warna. Hasilnya ramai dan tidak profesional. Batasi dua font dan palet kecil.
• Teks abu-abu muda di atas putih. Terlihat "elegan" di monitor bagus, tetapi tidak terbaca di HP di bawah matahari. Selalu cek rasio kontras minimal 4.5:1.
• Spacing acak. 13px di sini, 22px di sana. Pakai skala tetap (kelipatan 8) supaya ritmenya konsisten.
• Semua hal ditonjolkan. Kalau semua tebal dan berwarna, tidak ada yang menonjol. Tentukan satu fokus utama per layar.
• Mengikuti Figma secara buta tanpa bertanya keadaan lain. Tanyakan versi HP, teks panjang, error, dan state kosong sebelum ngoding.

Latihan

1. Mudah, Buka tiga situs yang kamu sukai, sipitkan mata, dan catat elemen apa yang paling menonjol di masing-masing. Apakah itu aksi utamanya?
2. Sedang, Ubah contoh kartu di atas supaya memakai warna utama hijau. Pilih kode hex hijau yang kontrasnya dengan putih minimal 4.5:1, buktikan dengan fungsi contrast().
3. Menantang, Buat halaman profil sederhana (foto, nama, deskripsi, tiga kartu proyek, satu tombol "Hubungi saya") dengan aturan: maksimal 2 font, skala spacing 8/16/24/32/48, satu warna aksen, semua teks lolos kontras AA.

console.log(contrast("#15803d", "#ffffff")); // → 5.02  (lolos AA untuk teks biasa)
console.log(contrast("#22c55e", "#ffffff")); // → 2.28  (terlalu terang, gagal)

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Profil Budi</title>
  <style>
    :root { --aksen: #1d4ed8; --teks: #111827; --redup: #4b5563; }
    body { font-family: system-ui, sans-serif; color: var(--teks); max-width: 48rem;
           margin: 0 auto; padding: 48px 16px; line-height: 1.6; }
    header { text-align: center; margin-bottom: 48px; }
    header img { width: 96px; height: 96px; border-radius: 50%; }
    h1 { font-size: 32px; margin: 16px 0 8px; }
    .proyek { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
    .proyek article { border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; }
    .proyek p { color: var(--redup); margin: 8px 0 0; }
    .tombol { display: inline-block; margin-top: 32px; background: var(--aksen); color: #fff;
              padding: 8px 24px; border-radius: 8px; text-decoration: none; font-weight: 600; }
  </style>
</head>
<body>
  <header>
    <img src="images/foto-profil.jpg" alt="Foto Budi tersenyum">
    <h1>Budi Santoso</h1>
    <p>Calon front-end developer yang suka membuat halaman cepat dan mudah dibaca.</p>
    <a class="tombol" href="mailto:budi@contoh.id">Hubungi saya</a>
  </header>
  <section class="proyek">
    <article><h2>Kalkulator</h2><p>Latihan JavaScript dasar.</p></article>
    <article><h2>Landing page kopi</h2><p>Latihan Flexbox dan Grid.</p></article>
    <article><h2>Portofolio</h2><p>Di-host dengan GitHub Pages.</p></article>
  </section>
</body>
</html>
<!-- → Satu tombol biru sebagai fokus, kartu proyek rapi dalam grid -->

Ringkasan

• Hierarki visual mengarahkan mata lewat ukuran, ketebalan, warna, posisi, dan ruang; satu aksi utama per layar.
• Tipografi: maksimal dua font, skala ukuran tetap, line-height sekitar 1.5, panjang baris 45 sampai 75 karakter.
• Kontras WCAG AA: 4.5:1 untuk teks biasa, 3:1 untuk teks besar; jangan andalkan warna saja.
• Pakai skala spacing konsisten (kelipatan 8) dan sejajarkan elemen pada grid.
• Desain untuk pengguna; pakai design pattern yang sudah dikenal.
• Di Figma, baca auto layout, text styles, color styles, dan tanyakan state yang tidak digambar.