Jun 6, 2021
Design guidelines dalam Proyek Perangkat Lunak
Design Guideline
Design guidelines are sets of recommendations on how to apply design principles to provide a positive user experience. Designers use such guidelines to judge how to adopt principles such as intuitiveness, learnability, efficiency and consistency so they can create compelling designs and meet and exceed user needs.
Design guideline merupakan sebuah panduan yang mengatur ketentuan desain dari suatu aplikasi seperti color palette, assets, icons, dan lain sebagainya. Design guideline ini bisa dibilang sebuah pedoman mengenai desain yang dibuat pada awal-awal pembuatan produk. Jika suatu ketika tim desainer atau developer tiba-tiba menemukan ada desain yang tidak konsisten, dengan adanya design guideline yang sudah dibuat di awal ini, mereka bisa kembali cek dan mengetahui desain mana yang benar.
Design guidelines memiliki beberapa kegunaan seperti membuat standarisasi tampilan aplikasi, mempertahankan konsistensi, serta sebagai pedoman bagi tim developer untuk menyusun layout aplikasi.
Mengapa design guidelines penting?
Berikut adalah beberapa alasan mengapa design guidelines itu penting.
- Menerapkan konsistensi di seluruh produk Anda.
- Selain menggambarkan spesifikasi komponen UI, guidelines juga menjelaskan best practice.
- Membuat lebih mudah bagi pembaca untuk memutuskan tentang pilihan yang tepat.
- Desainer tidak perlu membuat spesifikasi setiap kali mereka mendesain fitur.
- Akan lebih mudah untuk memperbarui design berdasarkan standar dan tren baru atau dengan kata lain lebih fleksibel terhadap perubahan.
Oleh karena itu, jika Anda ingin merancang produk yang kohesif dan konsisten pada fitur-fiturnya, maka Anda harus memiliki seperangkat pedoman.
Tipe-tipe design guidelines
Design guidelines dapat dikategorikan sebagai berikut.
- Style, beberapa di antaranya yaitu mengenai pemilihan warna yang baik, pemilihan logo yang sesuai, pemilihan ukuran dan jenis icon, dan tipografi.
- Layout, yaitu tentang keseluruhan struktur dan interface. Seperti ditampilkan dalam bentuk grid layout atau list layout.
- UI Components, yaitu seperti menu, tombol-tombol dan yang lainnya.
- Text, yaitu seperti pemilihan font, tone, label pada tulisan yang akan digunakan.
- Accessibility, merancang sistem yang dapat diakses memerlukan seperangkat pedoman khusus untuk berbagai jenis pengguna yang disabilitas, sehingga mereka dapat mengakses desain seperti pengguna normal.
- Design Patterns, terdapat pola design yang reusable , beberapa contoh adalah navigasi, pencarian, form, format data, status, dan pagination.
Contoh Implementasi Design Guideline
Dalam pembuatan design guideline, saat ini sudah banyak tools yang memudahkan untuk membuat desain seperti Adobe, SketchApp, Figma, MarvelApp, dan lain-lain. Namun pada PPL kali ini kami menggunakan Flutter sebagai frameworknya dan Figma untuk design tools-nya. Figma cukup mudah digunakan dan memberikan layanan kepada penggunanya untuk mendesain secara kolaborasi tim dengan mudah di mana saja dan kapan saja. Selain itu juga Figma menyediakan plugin yang dapat dengan mudah merubah website menjadi design pada Figma sehingga dapat memudahkan apabila mencari referensi design yang ingin dibuat.
Style
Pada proyek kali ini kami telah disediakan logo dan icon, namun pada lainnya kami menggunakan design aplikasi utama sebagai referensi. Warna kami juga telah menggunakan beberapa dalam aplikasinya di antaranya adalah biru, biru tua, hijau, merah, dan oranye.
Kami menyimpan semua warna yang diperlukan pada style.dart agar dapat dengan mudah diingat dan digunakan.
Layout
Layout yang digunakan terdapat grid layout dan juga list layout. Digunakan untuk beberapa halaman pada list layout, namun untuk grid digunakan pada halaman utama aplikasi yaitu pada homepage.
UI Components
Untuk komponen yang digunakan, kami tidak menggunakan navbar dikarenakan aplikasi kami sederhana dan dapat dengan mudah menjangkau fitur dengan cepat, seperti pada halaman homepage, yang menyediakan semua fitur yang ada.
Text
Font yang kami gunakan adalah Open Sans dengan ketebalan yaitu normal, semi bold dan bold. Selain itu juga terdapat pewarnaan berbeda pada tiap tipe kata, seperti biru untuk nama dan id pada data yang diambil. Biru tua untuk penamaan fitur, dan beberapa warna berbeda untuk tiap status.
Design Pattern
Salah satu implementasinya yaitu pada fitur pencarian yang menggunakan search bar dan juga filter untuk mencari suatu hal entah itu agen, produk, transaksi, atau hadiah. Berikut adalah contoh search bar pada design yang kami buat.
Kemudian pada fitur filter yang cukup mudah penggunaannya.
Sekian artikel tentang design guidelines pada kali ini, semoga dapat bermanfaat bagi kita semua dan dapat menerapkannya pada proses design aplikasi. Terima kasih :)
