Design Guidelines: How to Make it?
Ketika mendesain suatu produk, hal yang terpenting adalah konsistensi. Dengan menerapkan aspek konsistensi, pengguna akan mengenali produk kita dengan lebih baik. Untuk membuat sebuah desain yang konsisten, prosesnya tidaklah mudah. Ada banyak hal yang perlu dipertimbangkan, mulai dari pilihan warna, font beserta ukurannya, padding, dll. Belum lagi kalau proses desainnya dilakukan dengan berkolaborasi, dimana hal tersebut sudah sangat umum di dunia produksi yang bergerak secara agile. Setiap desainer memiliki gaya mendesain yang berbeda-beda. Lantas dengan perbedaan tersebut, bagaimana cara kita tetap mempertahankan aspek konsistensi dari produk yang kita desain? Jawabannya adalah dengan design guidelines.
Menurut interaction-design.org, Design guidelines merupakan kumpulan rekomendasi tentang bagaimana desainer menerapkan prinsip desain dengan tujuan untuk memberikan pengalaman positif bagi pengguna. Desainer dapat menggunakan desain guidelines sebagai panduan dalam mendesain produk. Sangat penting bagi desainer untuk membuat design guidelines terlebih dahulu sebelum mendesain sebuah produk. Tujuannya adalah agar desain yang dibuat, baik itu secara individu maupun kolaboratif sesuai dengan prinsip-prinsip desain dari produk tersebut.
Design guidelines mencakup beberapa hal, beberapa diantaranya:
1. Warna-warna yang dapat digunakan dalam desain.
2. Typography (jenis font beserta ukurannya).
3. Komponen-komponen UI, seperti menu dan tombol.
4. Logo produk.
5. Layout, seperti ukuran grid dan list structure.
6. Form element, seperti input field, checkbox, dropdown, dsb.
Bagaimana cara membuat Design Guidelines?
Berikut ini, saya akan menjelaskan bagaimana saya dan tim membuat design guideline yang simple pada proyek yang sedang kami kerjakan. FYI, proyek yang sedang saya kerjakan merupakan sebuah aplikasi yang dapat menghubungkan pedagang kaki lima dengan pembeli sehingga mempermudah proses jual beli.
Warna
Warna adalah hal pertama yang kami pertimbangkan. Karena produk yang kami desain basically berhubungan dengan makanan, maka kami memilih warna primer kuning. Kami memilih warna kuning karena warna tersebut merupakan warna makanan utama. Warna tersebut bisa membangkitkan selera makan dan merangsang nafsu makan. Selain itu, warna tersebut juga efektif untuk menarik perhatian.
Kami mencari warna kuning yang kira-kira sesuai untuk produk kami pada http://www.flatcolorsui.com. Setelah menemukan warna yang sesuai, kami menyalin hex dari warna tersebut untuk ditampilkan pada figma.
Karena warna kuning merupakan warna utama, kami menggunakan warna tersebut di setiap halaman dan beberapa button seperti lihat detail, konfirmasi, dan button-button lainnya yang mengarah pada “yes decision”. Kemudian, kami juga memilih beberapa warna lain untuk dikombinasikan dengan warna utama. Warna hitam kami gunakan sebagai warna pada setiap font maupun button yang berada diatas background berwarna kuning. Warna abu-abu kami gunakan sebagai warna teks pada setiap value pada input field. Terakhir, warna merah kami gunakan sebagai warna pada tombol-tombol yang menjadi warning untuk pengguna, misalnya tombol mengakhiri pesanan.
Typography
Untuk proyek ini, kami menggunakan font “Nunito” pada setiap teks yang ada di dalam tampilan aplikasi yang kami desain. Font tersebut juga sudah disetujui oleh client untuk dijadikan sebagai font aplikasi. Untuk menentukan size dan ketebalan dari font tersebut, kami melakukannya dengan cara mencobanya terlebih dahulu pada beberapa halaman untuk menentukan kira-kira berapa ukuran yang sesuai.
Dari percobaan-percobaan tersebut, kami menemukan ada banyak variasi ukuran dan ketebalan font yang bisa digunakan. Untuk itu, kami memisahkan masing-masing variasi tersebut dengan design dan mengumpulkannya pada suatu tempat.
Setelah itu, kami memberikan penamaan pada tiap variasi tersebut untuk dijadikan petunjuk bagi desainer dalam memilih tipe/variasi font.
Komponen
Selanjutnya, kami membuat guidelines untuk komponen-komponen yang digunakan pada desain produk kami, diantaranya button, input field pada form, dan dropdown.
Kami membuat beberapa variasi tombol berdasarkan ukuran. Pertama, untuk tombol dengan ukuran terbesar, kami membuatnya dengan 9px border radius dan ukuran 328 x 42 pixel. Kemudian, untuk tombol dengan ukuran kedua terbesar, kami membuatnya dengan 13px border radius dan ukuran 270 x 42 pixel. Untuk tombol dengan ukuran terbesar ketiga, kami membuatnya dengan 9px border radius dan ukuran 270 x 42 pixel. Lalu, sisanya kami membuat tombol-tombol dengan 9px border radius dan ukuran 80 x 30 pixel. Terakhir, kami membuat setiap state dari tombol, yakni normal, hover, dan pressed.
Inilah hasil akhir dari design guidelines yang kami buat untuk produk kami.
Dengan membuat design guidelines, proses desain yang dilakukan secara kolaboratif akan berjalan dengan baik. Design guidelines dapat digunakan sebagai rules bagi desainer dalam mendesain produk. Dengan adanya design guidelines, produk anda akan memiliki desain yang konsisten meskipun di desain oleh lebih dari 1 desainer dengan gaya mendesain yang berbeda. Selain itu, penggunaan design guidelines dapat menghemat waktu desain. Dengan banyaknya jumlah desainer yang mendesain produk Anda sesuai panduan, proses desain produk Anda akan semakin cepat selesai.
