Tips Membuat dan Mempublish UI Design kamu di Dribbble #1
Hello all, Pada artikel kali ini saya ingin membagikan sedikit tips dan langkah-langkah bagaimana saya membuat dan mempublish UI Design di Dribbble. So, langsung aja berikut beberapa tipsnya.
1. Define Niche & Super Niche
First step yang biasa saya lakukan adalah mendefine niche dan super niche, apa sih yang dimaksud dengan niche? simplenya kita mengerucutkan sebuah kategori pada bidang tertentu yang biasa disebut niche, Misalnya niche dibidang edukasi, untuk super nichenya jadi lebih spesifik lagi seperti online edukasi platform untuk siswa dan guru, platform management sekolah dan lain sebagainya yang terkait dengan edukasi.
Oh ya setelah sudah mendapatkan niche dan super niche, jangan lupa untuk menentukan platform yang akan kita gunakan, seperti Platform Mobile, Desktop atau yang sedang trend pada Dribbble.
2. Define a Problem & Solution
Selanjutnya kita mulai mendefinisikan problem & solution apa yang akan kita solve dan selesaikan pada design kita. Biasanya untuk shot kita bisa mengambil beberapa problem dan step flow seperti flow checkout, booking, onboarding dan lainnya. Namun tergantung juga problem yang akan kita solve nantinya, semakin komplek problemnya semakin banyak flow yang kita gunakan untuk diselesaikan dan semakin komplek semakin kuat dan bagus untuk dijadikan sebuah portfolio.
3. Collects Design Moodboard
After that, kita mulai membuat Design Moodboard, Tujuannya adalah untuk memberikan kita insight dan ide ketika kita sedang melakukan styling design. Untuk design moodboard sendiri, saran saya gak perlu terlalu banyak cukup 4–5 referensi saja. Why? agar kita tidak kebingungan ketika sedang mengexplore style design. Komposisi moodboard saya biasaya dibagi menjadi beberapa kategori seperti layout, color, typography dan image.
Tools moodboard yang biasa saya gunakan cukup simple seperti:
- Artboard/Frame pada design tools kita, tujuan untuk mempercepat mengumpulkan design moodboard kita pada satu tempat.
- Platform online seperti http://www.gomoodboard.com/ dan lain sebagainya yg memudahkan untuk mengumpulkan referensi design kita.
4. Create Simple Design Guidelines
Next, biasanya saya membuat Simple Design Guidelines yang tujuannya untuk membiasakan kita berlatih konsisten dalam sebuah design dan memudahkan proses design yang nantinya akan lebih cepat. Oh ya, salah satu manfaatnya adalah ketika kita mendapatkan suatu real project yang membutuhkan design guideline, kita sudah terbiasa dan mudah dalam membuat design guideline yang dibutuhkan dalam project tersebut. Design guideline yang biasanya saya define untuk berlatih atau explore, hanya menggunakan beberapa komponen seperti Fonts, Color, Button & Icons.
5. Wireframing your Superb Idea
Selanjutnya pada proses Wireframe atau yang biasa disebut Low Fidelity kita bisa memulai mengimplementasikan solusi dan ide kita. Wireframe secara simplenya adalah sebuah kerangka atau coretan kasar untuk menyampaikan susunan, elemen-elemen, layout, navigasi dan organisir konten agar memudahkan dalam proses selanjutnya yaitu High Fidelity Design. Oleh sebab itu, wireframe sendiri biasanya dibuat dengan warna hitam putih. Dalam membuat wireframe bisa menggunakan manual sketch paper atau tools khusus wireframing seperti Balsamiq, Whimsical atau langsung di design tools seperti Figma & Sketch tergantung kebutuhan kita.
6. Start your High Fidelity Design
Pada proses Low Fidelity sebelumnya kita hanya mendesign kerangka atau blueprint berwarna hitam putih, Sedangkan High Fidelity merupakan tahap visual design yang dibuat dengan kompleksitas yang tinggi dan sudah memilik warna, ukuran , jarak dan komponen yang sangat detail, bisa dibilang ini tahap final untuk proses design sebelum melakukan test atau review. Design tools yang biasa saya gunakan untuk proses High Fidelity adalah Figma dan Sketch.
- Figma (Recommended) menurut saya keunggulannya banyak banget, salah satunya fitur kolaborasinya. Bisa digunakan untuk review design baik dengan client atau internal team. Oh ya anyway Figma ini berbasis web based ya, jadi kita bisa ngejalanin di platform mana aja dan Figma Free untuk Starter plan.
- Sketch Tool design satu ini khusus untuk pengguna mac saja, untuk fiturnya gak kalah menarik dengan Figma, sayangnya Sketch tidak free alias berbayar. hehe
7. Review your Design to Expert or Friends
Selanjutnya, jangan lupa selalu melakukan iterasi dan meminta review pada expert atau teman kita untuk memberikan masukan pada design kita. Tujuannya adalah untuk memberikan insight atau saran dan menvalidasi problem & solution yang sudah kita solved pada proses sebelumnya.
Untuk melakukan review bisa offline atau online ya. Untuk Offline biasanya bisa meminta tolong pada lead/senior atau teman yang sudah berpengalaman, bisa ditempat kerja atau komunitas. Untuk Online bisa gabung beberapa grup atau channel yang khusus membahas tentang review design ya.
8. Create Dribbble Shot Preview
Step terakhir pada artikel kali ini, sebelum kita publish shot kita ke Dribbble, jangan lupa untuk membuat preview yang semenarik mungkin, tujuannya sendiri untuk mendapatkan engagement audience pada shot kita nantinya. Untuk Size artboard yang biasa saya gunakan pada shot di Dribbble adalah 1600x1200 px.
Oh ya jangan lupa untuk mencoba preview kita di Dribbble, tujuannya untuk mengetahui apakah preview kita sudah stand out atau menarik dibanding shot lainnya yg ada di Dribbble. Caranya simple, cukup Screen Capture Web Dribbble kita dan letakkan shot kita di salah satu shot, seperti dibawah ini.
What’s Next?
Pada artikel bagian #2 Saya akan mencoba memberikan beberapa tips yang sering saya gunakan setelah melakukan hal pada artikel ini. Terutama Things to do After Shot on Dribbble.
Terimakasih telah membaca tulisan saya. Jika di rasa bermanfaat silahkan 👏 & share. Tulisan ini ditulis berdasarkan pengalaman dan opini pribadi.
