Halo semuanya!
Hari ini gue mulai perjalanan bikin proyek UI/UX pribadi yang udah lama banget tertunda — dan gue kasih nama series ini: #ProjekHarusJadi 💪
Kenapa?
Karena banyak dari kita (termasuk gue) sering nunda-nunda ide, padahal ide itu gak bakal jadi apa-apa kalau gak dikerjain.
Jadi kali ini, harus jadi titik awalnya. 🎯
💡 Apa Proyeknya?
Gue lagi bikin desain CRM Web App yang nantinya ditargetkan buat:
- Startup kecil
UMKM
Freelancer / perorangan
Desainnya akan responsive (bisa dipakai di desktop & mobile) dan fokus pada kebutuhan dasar CRM: kelola pelanggan, leads, aktivitas, dan user.
🧭 Apa yang Gue Lakuin Hari Ini?
Hari ini fokus gue adalah inisiasi proyek & struktur desain di Figma.
Gue gak langsung desain halaman, tapi belajar dulu gimana nyusun fondasi desain biar terarah dan konsisten.
Berikut beberapa hal penting yang gue pelajari dan kerjain:
📐 Struktur Halaman Figma
1. 🎨 Moodboard
Moodboard adalah tempat referensi visual.
Isinya:
- Palet warna yang bakal dipakai
- Font yang cocok dengan tone desain
- Screenshot inspirasi dari desain lain
- Style icon, ilustrasi, dan tone visual keseluruhan
Intinya: moodboard nunjukkin kira-kira "rasa" dari desain kita nanti.
2. 🧱 UI Kit
Ini adalah "kumpulan komponen dasar" dari desain yang bakal dipakai di semua halaman.
Isinya:
- Typography styles (heading, body, caption, dsb)
- Warna (primary, background, text, dsb)
- Komponen UI: button, input, card, navbar, dsb
Tujuannya? Biar desain konsisten dan efisien.
3. 🧾 Wireframe
Wireframe dibagi 2 jenis:
- Low Fidelity: Sketsa kasar layout, pakai warna abu-abu, tanpa style.
- High Fidelity: Sketsa yang udah dikasih warna, font, dan style visual.
Wireframe penting untuk fokus ke struktur konten sebelum mikirin estetika.
4. 📱 Final Screen
Ini versi desain full yang siap ditunjukkan ke stakeholder atau developer.
Udah pakai semua elemen dari UI Kit + layout final.
Biasanya gue pisahkan untuk:
- Web screen
- Mobile screen
5. 🎯 Prototype
Tahap ini bikin desain kita bisa diklik dan diuji alurnya.
Fitur utamanya:
- Simulasi interaksi antar halaman (klik, transisi)
- Cek user flow & experience
✍️ Catatan Akhir Hari Ini
Hari ini walaupun belum mulai desain UI-nya, gue belajar banyak soal struktur dan pondasi desain di Figma.
Dengan pondasi yang kuat, desain ke depannya bakal jauh lebih rapi dan scalable. Gak asal "bagus", tapi fungsional dan konsisten.
Kalau kamu juga lagi nunda-nunda bikin portofolio atau side project,
yuk bareng-bareng mulai dari sekarang!
“Projek gak harus sempurna di awal, tapi harus mulai dulu.”
Sampai jumpa di log berikutnya!
Top comments (0)