Design Guideline untuk Kamu yang Ingin Membuat Aplikasi Baru!

Pada tulisan sebelumnya, saya telah memberitahukan “Bagaimana Membuat Desain Aplikasi yang Baik?”. Yang dimana dalam artikel tersebut kita menekankan bagaimana mengimplementasikan Nielsen’s 10 Usability Heuristics. Namun pada kesempatan ini, saya akan menjelaskan beberapa design guideline yang dapat anda gunakan untuk membuat desain dari aplikasi yang ingin anda buat.

Design guidelines adalah kumpulan rekomendasi cara untu menuju desain yang lebih baik. Disini kita akan memberikan panduan yang baik agar proses design dapat terlaksanakan dengan baik.

Asal Ide?

Gambar 1, Sumber Gambar: https://play.google.com/store/apps/details?id=co.talenta

Bagaimana cara menetukan ide dari desain UI yang akan kita tetapkan? Untuk menentukan hal itu kalian dapat melihat aplikasi-aplikasi serupa yang sudah ada atau aplikasi favorit anda. Jika kalian mengerjakan proyek untuk membuat suatu aplikasi dari suatu perusahaan yang sebelumnya sudah pernah merilis aplikasi lainnya. Kalian dapat melihat desain dari aplikasi-aplikasi mereka yang lainnya. Pada umumnya, perusahaan akan merasa senang jika aplikasi mereka satu dan lainnya saling berhubungan (konsisten)

Pada proyek ini, kelompok kami melakukan research. Kami menemukan bahwa Talenta Mobile sudah pernah dirilis oleh Mekaridalam bentuk mobile. Kami pun mengikuti aplikasi yang sudah ada tersebut. Selain itu, Mekari memberikan salah satu teman kami akses untuk melihat daftar ikon dan desain yang sudah mereka miliki sebelumnya. Hal tersebut sangat membantu kami dalam penentuan mockup dan keseluruhan desain.

Warna

Saat membuat mockup yang baik, kita harus menentukan warna apa saja yang akan digunakan di keseluruhan aplikasi. Diharapkan warna yang digunakan tidak terlalu beragam dan konsisten.

Pada kelompok kami membagi warna menjadi 3 bagian, yaitu:

1. Primary

Pada bagian ini biasanya kita memilih warna yang akan mendominasi aplikasi. Warna yang dipilih akan menjadi identitas dari aplikasi dan memberikan persepsi singkat pengguna saat pertama kali menggunakan. Biasanya suatu aplikasi akan menggunakan warna primary mereka untuk seterusnya dan tidak terjadi perubahan.

Contohnya adalah pada beberapa aplikasi berikut:

Gambar 2, Sumber Gambar: https://www.blibli.com/, https://www.bukalapak.com/, https://shopee.co.id/, https://www.tokopedia.com/

Dapat dilihat bahwa aplikasi diatas sudah memiliki warna primary mereka masing-masing. Sebagai pengguna, kita sudah familiar Blibli dengan warna biru, Bukalapak dengan warna merah, Shoope dengan warna orange, dan Tokopedia dengan warna hijau. Penentuan warna ini sangat penting karena setiap warna memiliki makna mereka masing. Untuk melihat makna dari setiap warna dapat klik disini.

Maka dari itu, kelompok kami membuat daftar warna primary sebagai berikut:

Gambar 3, Daftar Warna Primary Talenta Mobile Kiosk

Kami hanya memiliki 3 buah warna primary:

1. Warna merah disini mengikuti warna background talenta yang diberikan oleh klien.
2. Warna putih menjadi warna card yang dimana akan banyak berisikan konten-konten dari aplikasi. Selain itu, warna ini juga digunakan untuk judul fitur yang sedang digunakan.
3. Warna biru menjadi warna untuk seluruh tombol yang ada dan tulisan yang cukup besar.

Gambar 4, Contoh Penerapan Warna Primary di Talenta Mobile Kiosk

2. Secondary

Warna di bagian ini digunakan untuk pelengkap dari komponen-komponen produk yang sedang dibuat. Berikut daftar warna secondary yang digunakan kelompok kami dan salah satu contoh penerapannya.

Gambar 5, Daftar dan Contoh Penerapan Warna Secondary di Talenta Mobile Kiosk

3. Tertiary

Warna pada bagian ini biasanya adalah daftar warna dari ikon yang anda miliki. Berikut daftar warna tertiary yang digunakan kelompok kami dan salah satu cara penerapannya:

Gambar 6,Daftar dan Contoh Penerapan Warna Tertiary di Talenta Mobile Kiosk

Typography

Typography adalah salah satu komponen penting dalam pembuatan aplikasi. Font juga akan menggambar aplikasi yang diberikan, seperti font memberikan makna bahwa aplikasi yang dibuat untuk bisnis atau hiburan. Anda harus menentukan type, size, dan ketebalan dari font yang anda gunakan.

Pada proyek Talenta Mobile Kiosk, kami menggunakan font bertipe Roboto. Untuk ukuran dan ketebalan dari font disesuaikan dengan penempatan teks tetapi umumnya kami memberikan ketebalan font menjadi bold.

Berikut adalah contoh code dalam penerapan typography:

Gambar 7, Contoh kode untuk menerapkan typography

Button

Dalam pembentukkan button, diharapkan kita memiliki button dengan tipe dan behaviors dari button tersebut. Diharapkan tipe button dalam 1 aplikasi tidak terlalu beragam. Setiap fungsi dari button akan dijelaskan dari teks yang tertera di button tersebut.

Kelompok kami memiliki 3 tipe button dalam aplikasi, yaitu:

Gambar 8, Tipe Button di Talenta Mobile Kiosk

Untuk penggunaan button, kami membuat folder reusables yang berisikan komponen-komponen yang dapat digunakan berulang kali di berbagai halaman. Seperti gambar dibawah, untuk blue button dan home button dapat hanya memanggil saja.

Gambar 9, Penerapan reusables

Ringkasan:

Dengan adanya panduan, diharapkan UI dari produk akan lebih tertata dan tidak terjadi perubahan yang besar selama proses pengembangan. Panduan ini akan membantu tim pengembang untuk tetap memberikan konsistensi di setiap halaman dari aplikasi.

Referensi:

1. https://www.interaction-design.org/literature/topics/design-guidelines
2. https://medium.com/basic-people/ui-ux-awareness-pemahaman-design-guideline-lapor-dan-implementasinya-28c8c4820859