UI/UX Awareness: Memahami Design Guideline dan Implementasinya

Hema Mitta Kalyani
LEARNFAZZ
Published in
2 min readApr 15, 2019
Sumber: mockflow.com

Jika dahulu kata ‘design’ identik dengan interior atau pakaian, maka sekarang kita telah tiba pada masa di mana kata ini juga identik dengan teknologi. Desain mendefinisikan keberhasilan sebagian besar produk perangkat lunak.

Design Guideline

Design guideline merupakan sebuah panduan yang mengatur ketentuan desain dari suatu aplikasi seperti color palette, assets, icons, dan lain sebagainya. Panduan ini harus diikuti oleh seluruh anggota tim developer suatu aplikasi. Design guidelines memiliki beberapa kegunaan seperti membuat standarisasi tampilan aplikasi, mempertahankan konsistensi, serta sebagai pedoman bagi tim developer untuk menyusun layout aplikasi. Sebuah desain UI/UX yang baik harus dapat memfasilitasi alur kerja yang rumit, membuat pengguna memahami dan mengelola data yang kompleks, serta mengakomodasi beragam roles, kebutuhan, dan proses.

UX Designer vs UX Designer

UX designer dapat diibaratkan seperti seorang arsitek. Ia memahami perilaku pengguna dan faktor-faktor psikologi. Seorang UX designer bertugas merancang user flow berdasarkan kebutuhan bisnis. Di sisi lain, UI designer dapat diibaratkan sebagai penghias (decorator). Ia merancang agar interface suatu produk dapat merefleksikan brand terkait. Seorang UI designer bertugas untuk memahami brand dan menjadikannya dalam bentuk elemen-elemen UI.

Design pada Aplikasi LEARNFAZZ

Pada proyek kali ini, kami menggunakan Flutter, sebuah mobile UI framework yang ditawarkan oleh Google. Flutter memungkinkan developer untuk membangun sebuah aplikasi lintas-platform sehingga aplikasi dapat dijalankan di Android maupun iOS. Flutter menyediakan MaterialApp Widget yang merangkum sekelompok widgets yang dimaksudkan untuk digunakan sebagai Material Design.

Penerapan Mobile App Design Trends pada Aplikasi LEARNFAZZ

Berdasarkan prinsip-prinsip mobile UX design, dalam beberapa tahun terakhir, terdapat beberapa tren desain. Berikut adalah beberapa tren desain yang sudah kami terapkan dalam aplikasi LEARNFAZZ.

Interaksi dengan swiping
Berdasarkan penelitian Steven Hoober, 49% pengguna ponsel bergantung pada satu ibu jari untuk melakukan sesuatu pada ponsel mereka. Oleh karena itu, tren ini muncul agar pengguna dapat dengan mudah melakukan navigasi dengan ibu jari mereka.

Interaksi dengan swiping pada halaman course list

Menambahkan lebih banyak opsi navigasi
Berikut adalah contoh opsi navigasi saat pengguna hendak mendaftar ke sistem aplikasi LEARNFAZZ. Selain menjadi opsi navigasi, fitur ini juga berguna agar desain yang ada dalam satu layar tidak terlalu penuh.

Opsi navigasi

Referensi:

  1. Korkishko, I. 2017. UI/UX Design. https://syndicode.com/uiux-design/
  2. Korkishko, I. 2019. 8 key principles of mobile UX design. https://syndicode.com/2019/02/12/8-key-principles-of-mobile-ux-design/
  3. Minhas, S. 2018. Why You Need UI Guidelines?. https://uxplanet.org/why-you-need-ui-guidelines-d380e407b759

--

--