An Exploration-Based Approach to Improving UI Skills
Read the English version here
Pernah ga sih kalian ngerasa kalo desain kalian gitu-gitu aja? atau terkadang suka minder ngeliat desain orang lain yang lebih cakep?
Semua orang pasti pernah mengalami masa itu, tapi gimana caranya agar desain kita bisa upgrade to another level?
Cara mudahnya adalah dengan melakukan eksplorasi desain menggunakan metode ATM (Amati, Tiru , Modifikasi)
Berikut langkah-langkah yang biasa aku lakukan ketika melakukan eksplorasi desain
1. Menentukan layout
Ketika kita melihat beberapa referensi layout dari UI Design yang ada di luar sana, hal tersebut akan memberikan kita inspirasi untuk menuangkan ide dan apa saja yang dapat kita tingkatkan pada desain orang lain. Sehingga, penentuan layout menjadi bagian penting di awal saat kita ingin mulai melakukan eksplorasi desain.
2. Menentukan tema
Setelah kita memiliki gambaran dari bentuk layout yang ingin kita buat, langkah selanjutnya adalah menentukan tema atau konten apa yang cocok untuk layout yang telah ditentukan. Misalnya tentang Home Visualizer, kita dapat mencari referensi aplikasi atau desain yang sejenis agar dapat kita analisa data dan konten apa saja yang sudah ada dan apa saja yang dapat kita tingkatkan.
Kita dapat mencari referensi dari website chamjo.design untuk live apps, atau dribbble untuk referensi visual.
3. Membuat sketsa desain
Langkah selanjutnya adalah membuat sketsa di kertas untuk mulai menentukan layout final dan informasi apa saja yang akan kita masukkan
4. Wireframing
Dari sketsa yang telah kita buat sebelumnya, maka langkah selanjutnya adalah mengubah sketsa menjadi bentuk digital (wireframe). Pada tahap ini kita belum memasukkan asset desain (gambar, icon, dll) untuk memastikan bahwa layout dan informasi telah rapi.
5. Eksplorasi warna dan komponen
Dari wireframe yang telah kita buat, langkah selanjutnya adalah menentukan dan mengeksplor warna yang pas dan cocok untuk desainnya. Untuk warnanya sendiri kita dapat mengambil referensi dari desain orang lain ataupun dengan me-generate warna dari website coolors.co
Dan kita juga perlu untuk menentukan bentuk komponen final dari desain yang kita buat, sehingga lebih mudah ketika memasukkan asset desain (gambar, icon, illustrasi, dll)
6. Tambahkan asset desain
Setelah menentukan warna, mulailah untuk mencari gambar yang cocok dengan warna desainnya, dan juga dapat menambahkan icon ataupun ilustrasi berdasarkan warna yang telah ditentukan. Hal ini menjadi salah satu trik agar desain kita terlihat harmonis.
💡 Tip: Carilah assets desain dengan lisensi free commercials agar tidak terkena penaly atas assets yang digunakan. Assets gratis juga memiliki aturan berbeda-beda, alangkah baiknya kita memahami aturan dan menggunakan dengan bijak.
7. Buat presentasi final
Langkah terakhir adalah membuat presentasi atas desain yang telah dibuat. Best practice nya adalah dengan membuat beberapa alternatif untuk dapat membandingkan mana presentasi terbaik.
Dalam peningkatan sebuah skill UI tidak dapat berubah dengan instan, perlu adanya latihan dan waktu yang dikorbankan. Sehingga tidak perlu merasa cemas jika desain yang dihasilkan tidak bagus, karena itu adalah bagian dari proses 🎯
Langkah-langkah di atas terinspirasi dari webinar yang dibawakan oleh Mas Riko mengenai ‘Belajar Bikin Preview Dribbble Sambil Ngabuburit’, jika kamu tertarik untuk mempelajarinya bisa play video di bawah ya👋
