Hari ini adalah HARI KEDUAA DARI SEKIAN HARI YANG TERLEWAT HAHAHAA perjalanan membuat CRM untuk target startup dan UMKM, yang akan hadir dalam bentuk responsive web (desktop & mobile). Setelah kemarin fokus inisiasi dan moodboard, hari ini aku masuk ke tahap UI Kit — pondasi visual yang akan dipakai di seluruh desain.
Kenapa UI Kit penting?
Karena UI Kit itu semacam “peralatan dapur” kita. Sebelum masak, kita siapin bumbu dasar dulu. Kalau sudah siap, nanti semua masakan (baca: halaman web) akan punya rasa yang konsisten.
🎯 Fokus Belajar Hari Ini
- Typography — memilih font utama dan pendukung
- Color Styles — menentukan palet warna utama
- Buttons — membuat gaya tombol yang konsisten
- Form Inputs — menyiapkan gaya input form
- Auto Layout & Component di Figma — supaya desain fleksibel dan mudah diatur
1️⃣ Typography — Maksimal Tiga Font Saja
Aku memutuskan untuk memakai dua font utama:
- Noto Sans Javanese → primary font, tegas tapi ramah, cocok untuk heading
- Work Sans → secondary font, simpel dan nyaman dibaca untuk body text
Kenapa cuma dua?
Menurut prinsip desain, terlalu banyak font akan membuat pengguna bingung dan menciptakan kesan desain tidak konsisten. Banyak panduan profesional menyarankan maksimal tiga font dalam satu desain—termasuk font di logo—untuk menjaga keterbacaan dan keselarasan visual (UX Planet, UX StackExchange).
🎓 Tips: Kalau ingin variasi, gunakan berat font (font-weight) yang berbeda, bukan ganti font-nya.
2️⃣ Color Styles — Satu Rasa, Bukan Satu Warna
Untuk palet warna, aku ingin harmonis dan “satu rasa”, supaya antarmuka nyaman dilihat dan tidak melelahkan mata.
- Primary: Biru (#1B4CD3) → warna utama, untuk aksi penting
- Secondary: Hijau (#7ECB93) → penunjang, memberi aksen segar
- Danger: Merah (#EA3838) → khusus peringatan atau aksi destruktif
- Neutral: Putih (#F4F6FA) & Hitam (#22262B) → dasar dan teks
Menurut teori Color Harmony, warna yang selaras membuat desain tampak seimbang dan profesional (Interaction Design Foundation, CareerFoundry).
Desainer juga sering membatasi palet menjadi ±5 warna utama agar mudah dikelola dan tetap rapi (GraphicDesign.SE).
3️⃣ Buttons & Form Inputs — Komponen Seragam
Di UI Kit ini, aku membuat:
- Tombol Primary (aksi utama), Secondary, dan Danger
- Variasi tombol dengan warna netral (putih, hitam)
- Form Inputs untuk normal state, focus state, dan error state
Kenapa dibuat dari awal?
Supaya nanti setiap tombol & input di seluruh halaman terlihat seragam, tanpa harus mendesain ulang dari nol.
4️⃣ Auto Layout & Component di Figma
Hari ini aku juga belajar (dan langsung praktik) fitur Auto Layout di Figma.
Manfaatnya:
- Elemen otomatis menyesuaikan ukuran ketika teks berubah
- Spacing antar elemen konsisten tanpa hitung manual
- Perubahan di satu component akan otomatis update di semua instance
🎓 Tips: Biasakan membuat semua tombol, card, dan form sebagai component sejak awal. Ini akan menghemat waktu luar biasa saat revisi.
📸 Screenshot UI Kit Hari Ini
📝 Insight Hari Ini
- Font maksimal tiga jenis → lebih dari itu, visual jadi tidak fokus
- Palet warna terbatas → lebih terkontrol, harmonis, dan nyaman dilihat
- Komponen seragam → membuat pengalaman pengguna lebih konsisten
- Auto Layout & Component → kunci desain yang scalable di Figma
Top comments (0)