DESIGN-FOR-DEVELOPER DOCS

PRINSIP-DASAR

Kontras (Contrast)
Description: Membuat perbedaan mencolok antar elemen untuk menarik perhatian dan menciptakan hierarki visual.
Example: 
Tombol utama berwarna terang di latar belakang gelap; judul besar vs. isi teks kecil.
Output: Fokus pengguna langsung tertuju pada elemen kontras.
Pengulangan (Repetition)
Description: Mengulang elemen desain (warna, tipografi, bentuk) di seluruh antarmuka untuk konsistensi.
Example: 
Semua tombol primer memiliki warna dan padding yang sama; semua heading menggunakan font yang sama.
Output: Antarmuka terasa kohesif dan mudah dipelajari.
Penjajaran (Alignment)
Description: Elemen harus memiliki koneksi visual dengan elemen lain (rata kiri, kanan, tengah).
Example: 
Teks dalam form selalu rata kiri; ikon di dalam button sejajar vertikal.
Output: Tatanan rapi dan profesional, mengurangi beban kognitif.
Kedekatan (Proximity)
Description: Elemen yang berhubungan dikelompokkan berdekatan. Elemen yang tidak berhubungan dipisahkan.
Example: 
Label di atas input; gambar profil dekat nama pengguna; bagian form yang berbeda dipisahkan whitespace.
Output: Hubungan antar informasi langsung terlihat.
Whitespace (Ruang Kosong)
Description: Ruang negatif di antara elemen. Memberi ruang bernapas, meningkatkan keterbacaan, dan menonjolkan elemen penting.
Example: 
Padding di dalam card, margin antar section, line-height teks.
Output: Desain tidak sumpek, elemen penting menonjol.
Hirarki Visual (Visual Hierarchy)
Description: Mengatur elemen sehingga pengguna melihat yang paling penting dulu. Bisa lewat ukuran, warna, kontras, posisi.
Example: 
Judul besar > subjudul > body text. Tombol CTA warna mencolok.
Output: Panduan alami bagi mata pengguna.

TIPOGRAFI

Font Size (Ukuran Font)
Description: Ukuran teks dalam piksel (px) atau rem. Gunakan skala modular untuk konsistensi (12, 14, 16, 18, 20, 24, 32, 48).
Example: 
Body text: 16px, Heading H1: 32px, Caption: 12px.
Output: Hirarki teks yang jelas dan mudah dibaca.
Line Height (Tinggi Baris)
Description: Jarak vertikal antar baris teks. Idealnya 1.5 (150%) untuk body text, lebih kecil untuk heading (1.2 - 1.3).
Example: 
Body: line-height: 1.6; Heading: line-height: 1.2;
Output: Teks mengalir nyaman, tidak terlalu rapat atau renggang.
Font Weight (Ketebalan)
Description: Ketebalan karakter (100 = Thin, 400 = Regular, 700 = Bold, 900 = Black).
Example: 
Heading: font-weight: 700; Body: font-weight: 400;
Output: Kontras antar elemen teks, heading terlihat lebih dominan.
Font Pairing
Description: Menggabungkan dua font yang saling melengkapi (biasanya satu untuk heading, satu untuk body).
Example: 
Heading: 'Poppins' (sans-serif) + Body: 'Merriweather' (serif).
Output: Kombinasi harmonis dan tidak membosankan.
Letter Spacing
Description: Jarak antar huruf. Biasanya negatif untuk heading besar, sedikit positif untuk teks uppercase kecil.
Example: 
Heading: letter-spacing: -0.5px; Button: letter-spacing: 0.5px;
Output: Menjaga keterbacaan pada ukuran dan konteks yang berbeda.
Text Align (Rata Teks)
Description: Posisi horizontal teks: left, right, center, justify. Left paling umum untuk readability.
Example: 
Paragraf: text-align: left; Judul halaman: text-align: center;
Output: Konsistensi membaca; justify sering menghasilka ruang antar kata aneh.

WARNA

Color Wheel / Teori Warna
Description: Roda warna untuk melihat hubungan: komplementer (berlawanan), analogous (bersebelahan), triadik (segitiga).
Example: 
Komplementer: Biru + Oranye. Analogous: Biru + Ungu.
Output: Palet warna yang harmonis.
Primary, Secondary, Accent
Description: Primary: warna utama brand. Secondary: pendukung. Accent: untuk aksi/CTA (biasanya kontras).
Example: 
Primary: #6C5CE7, Secondary: #A29BFE, Accent: #FF7675 (untuk tombol penting).
Output: Peran warna jelas dalam UI.
Neutral Colors
Description: Abu-abu, putih, hitam untuk latar belakang, teks, border.
Example: 
Background: #F8F9FA, Text: #212529, Border: #DEE2E6.
Output: Fleksibel untuk elemen non-aksi.
Semantic Colors
Description: Warna dengan makna: Merah untuk error/hapus, Hijau untuk sukses, Kuning untuk peringatan.
Example: 
Error: #E74C3C, Success: #2ECC71, Warning: #F39C12.
Output: Pengguna langsung memahami konteks.
Color Contrast (Aksesibilitas)
Description: Rasio kontras teks terhadap latar belakang minimal 4.5:1 (AA) untuk teks normal, 3:1 untuk teks besar.
Example: 
Teks #333 pada latar #FFF (rasio 12.6:1) lulus AAA. #999 pada #FFF (2.85:1) gagal.
Output: Konten bisa dibaca semua orang, termasuk low vision.
CSS Variables untuk Warna
Description: Menggunakan variabel CSS untuk mengelola palet dan tema (dark mode).
Example: 
:root { --primary: #6C5CE7; } .dark { --primary: #A29BFE; }
Output: Tema mudah diganti secara dinamis.

SPACING-SIZING

8px Grid System
Description: Semua ukuran dan jarak menggunakan kelipatan 8 (4, 8, 12, 16, 24, 32, 48, 64, 96).
Example: 
padding: 16px (2x8); margin: 24px (3x8); width: 320px (40x8).
Output: Ritme vertikal dan horizontal konsisten di seluruh aplikasi.
Padding vs Margin
Description: Padding: ruang di dalam elemen (border ke konten). Margin: ruang di luar elemen (jarak antar elemen).
Example: 
Card: padding: 24px; Jarak antar dua card: margin-bottom: 16px;
Output: Pemisahan tanggung jawab spasi.
Max-Width untuk Keterbacaan
Description: Lebar teks sebaiknya dibatasi 65-75 karakter per baris (sekitar 600-720px).
Example: 
Artikel: max-width: 680px; margin: 0 auto;
Output: Mata tidak cepat lelah saat membaca teks panjang.
Responsive Spacing
Description: Gunakan unit relatif (%, vw, clamp) atau Tailwind responsive prefixes untuk spacing di berbagai layar.
Example: 
Tailwind: p-4 md:p-8 lg:p-12. CSS: padding: clamp(16px, 5vw, 64px);
Output: Spasi menyesuaikan ukuran layar tanpa patah.

IKONOGRAFI

Konsistensi Gaya Ikon
Description: Semua ikon harus dari set yang sama (outline/filled, stroke width, sudut membulat).
Example: 
Gunakan Lucide (stroke-width: 2, width: 24, height: 24) untuk semua ikon.
Output: Tidak ada ikon yang terlihat asing.
Ukuran Ikon
Description: Umumnya 16px (inline dgn teks), 20px (tombol kecil), 24px (standar UI), 32px+ (dekoratif).
Example: 
Ikon di dalam tombol: size={16}; Ikon di navbar: size={24};
Output: Proporsional dengan elemen sekitarnya.
Label pada Ikon
Description: Ikon tanpa teks harus memiliki label untuk aksesibilitas (aria-label) atau tooltip.
Example: 
<button aria-label="Tutup"><XIcon /></button>
Output: Bisa diakses oleh screen reader.
SVG vs Icon Font
Description: Sebaiknya gunakan SVG inline atau sebagai komponen (React) untuk kontrol penuh dan performa. Hindari icon font.
Example: 
import { SearchIcon } from 'lucide-react'; <SearchIcon className="w-5 h-5" />
Output: Tajam di semua resolusi, mudah diwarnai dan dianimasikan.

RESPONSIVE-LAYOUT

Mobile-First Design
Description: Desain untuk layar kecil dulu, lalu tambahkan kompleksitas untuk layar lebih besar dengan min-width media queries.
Example: 
/* Mobile */ .grid { cols: 1 } /* Tablet */ @media (min-width: 768px) { .grid { cols: 2 } }
Output: Konten prioritas ditampilkan baik di semua perangkat.
Breakpoints Umum (Tailwind)
Description: sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px.
Example: 
class="w-full md:w-1/2 lg:w-1/3"
Output: Layout beradaptasi secara halus.
Container Queries
Description: Mengatur gaya berdasarkan ukuran container, bukan viewport.
Example: 
@container (min-width: 300px) { .card { display: flex; } }
Output: Komponen yang benar-benar reusable di berbagai konteks.
Flexbox & Grid
Description: Flexbox: 1 dimensi (baris/kolom). Grid: 2 dimensi (baris dan kolom). Gunakan sesuai kebutuhan.
Example: 
Navbar: flex; Halaman dengan sidebar dan konten: grid-template-columns: 250px 1fr;
Output: Kontrol tata letak yang presisi.

DESIGN-TOOLS

Figma (UI/UX Design)
Description: Tools desain berbasis web untuk membuat UI, prototype, dan kolaborasi real-time.
Example: 
Akses mode 'Dev Mode' untuk melihat spesifikasi CSS (warna, spacing, font).
Output: Pengembang mendapatkan kode yang siap diimplementasikan.
Canva (Grafis Cepat)
Description: Untuk membuat aset pemasaran, posting media sosial, presentasi dengan template siap pakai.
Example: 
Mendesain banner blog atau thumbnail YouTube dengan drag-and-drop.
Output: Cepat menghasilkan visual tanpa keahlian desain.
Excalidraw / tldraw
Description: Whiteboarding untuk wireframe kasar atau diagram alur.
Example: 
Buat sketsa layout halaman sebelum coding.
Output: Ide tervisualisasi dengan cepat.
Color Pickers & Palettes
Description: Coolors.co, Adobe Color: untuk membangun dan mengeksplorasi palet warna.
Example: 
Generate palet dari satu warna primer, kunci palet, lalu ekspor sebagai CSS variables.
Output: Palet siap pakai yang harmonis.
Stock Photos & Illustrations
Description: Unsplash, Pexels, Freepik, unDraw: sumber gambar dan ilustrasi bebas royalti.
Example: 
Gunakan ilustrasi dari unDraw (format SVG) untuk halaman error atau onboarding.
Output: UI lebih hidup tanpa melanggar hak cipta.

UX-DASAR

User-Centered Design (UCD)
Description: Proses desain yang berfokus pada kebutuhan, keinginan, dan keterbatasan pengguna akhir.
Example: 
Lakukan user interview sebelum mendesain fitur, uji coba prototype.
Output: Produk yang benar-benar memecahkan masalah pengguna.
Law of Proximity (Hukum Kedekatan)
Description: Objek yang berdekatan dianggap memiliki hubungan. (Prinsip Gestalt)
Example: 
Group label dengan input di dalam fieldset, pisahkan section dengan whitespace.
Output: Hubungan elemen mudah dipahami.
Fitts's Law
Description: Waktu untuk mencapai target (tombol) dipengaruhi oleh jarak dan ukuran target. Tombol penting dibuat besar dan dekat.
Example: 
Tombol 'Kirim' besar dan diletakkan di bawah form, jangan di pojok jauh.
Output: Interaksi lebih cepat dan minim kesalahan klik.
Hick's Law
Description: Semakin banyak pilihan, semakin lama waktu pengambilan keputusan. Kurangi opsi yang tidak perlu.
Example: 
Jangan tampilkan 10 CTA sekaligus; gunakan satu primary CTA dan satu secondary.
Output: Pengguna tidak kebingungan.
User Feedback
Description: Beritahu pengguna tentang hasil aksi mereka (loading spinner, toast sukses, pesan error).
Example: 
Setelah menyimpan data, tampilkan toast 'Data berhasil disimpan'.
Output: Pengguna yakin aksinya berhasil.

BEST-PRACTICES

Jangan Hanya Mengandalkan Warna
Description: Informasi penting harus disampaikan dengan ikon atau teks tambahan, bukan hanya warna (untuk aksesibilitas buta warna).
Example: 
Error state: border merah + ikon 'X' + teks 'Email tidak valid'.
Output: Semua pengguna memahami informasi penting.
Hindari Lorem Ipsum
Description: Gunakan konten nyata atau semi-nyata sedini mungkin untuk melihat apakah desain berfungsi.
Example: 
Ganti 'Lorem ipsum dolor sit amet' dengan deskripsi produk asli.
Output: Masalah spacing atau overflow bisa terdeteksi.
Responsif Sejak Awal
Description: Jangan desain desktop dulu lalu dipaksakan ke mobile. Mulai dari mobile (mobile-first).
Example: 
Mulai dengan single column layout, perluas ke multi-column jika perlu.
Output: Tidak perlu redesign besar di akhir.
Gunakan System Font Stack
Description: Font bawaan sistem (San Francisco, Segoe UI, Roboto) memuat cepat tanpa request tambahan.
Example: 
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
Output: Performa optimal, tampilan konsisten dengan OS.