Design guidelines dalam Proyek Perangkat Lunak

https://www.interaction-design.org/literature/topics/design-guidelines

Design Guideline

Mengapa design guidelines penting?

Berikut adalah beberapa alasan mengapa design guidelines itu penting.

  • 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.

Tipe-tipe design guidelines

Design guidelines dapat dikategorikan sebagai berikut.

  • 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.

https://definite.co.id/blogs/apa-itu-figma-dan-apa-bedanya-dengan-ui-ux-tools-lain/

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.

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.

Reference

--

--

Mahasiswa Fasilkom UI angkatan 2018

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store