Proses Pembuatan UI Guideline dan Penerapannya pada User Interface Design

“UI Guideline itu apa sih? Isinya ada apa aja? Terus kegunaannya untuk apa?“ Pertanyaan-pertanyaan seperti itu sering banget nih muncul waktu kita membahas soal UI Guideline dan hal-hal terkait dokumentasi pada sebuah komponen UI. Kali ini kita bakal membahas tentang UI Guidline mulai dari definisinya, lalu apa aja sih yang ada didalamnya hingga apa saja alasan yang mengharuskan kita menggunakan UI Guidline ini. Tidak cuma sampai situ, kita akan bahas sampai proses pembuatan UI Guidline tersebut dan implementasinya ke dalam UI Design kita, mungkin artikel ini akan lumayan panjang ya, tapi semoga bisa bermanfaat ehehe. Oke mari kita mulai.

Diawali dari Permasalahan

Pernahkan kalian mengerjakan sebuah projek desain yang melibatkan banyak desainer di dalamnya? Intinya bukan kamu aja nih yang ngedesain di projek itu dan sering terjadi salah paham dengan desainer lain seperti masalah style desain, komposisi dan sebagainya? Atau mungkin pernahkah kamu menjadi seorang desainer tunggal yang mengerjakan sebuah project yang scoope nya gede banget, dengan jumlah page dan komponen yang banyak nya ngalahin cintamu pada doi? Kalo kalian pernah merasakan semua hal itu, maka kalian emang cocok banget untuk membaca artikel ini lebih lanjut.

1. Banyak Desainer akan jadi banyak keuntungan atau sebaliknya?

Terkadang dalam menjadi seorang desainer kita dituntut untuk mempunyai sebuah skill kolaborasi, karena bisa aja kita bekerja sama dengan banyak desainer dalam sebuah project, apalagi scoope project yang gede banget dan membutuhkan banyak orang, waktu dan usaha di dalamnya. Nah ada sebuah permasalahan yang sering dialami ketika kita berkolaborasi, konsistensi dalam project yang sedang kita kerjakan. Ya, bayangkan saja jika ada 3 desainer pada sebuah project yang punya ide kreatif dan juga style desain yang berbeda. tentunya dalam sebuah project akan ditemukan berbagai gaya dan jenis desain yang beda-beda pula jika tidak disepakati sebelumnya. imbas nya apa? Hal ini bisa saja berdampak pada user. Bisa saja hal ini menyebabkan adanya kebingungan ketika menggunakan sebuah sistem, dan masih banyak lagi hal — hal yang tidak disangka-sangka.

2. Udah jadi desainer tunggal, revisi banyak banget lagi.

Nah ketika kamu jadi desainer tunggal di sebuah project pastinya kamu akan mudah untuk memanage semua halaman desain di project tersebut, terkait komponen, konsistensi dan sebagainya. tapi pernah kebayang ga? kalau kamu tiba — tiba udah ngerjain ratusan halaman desain dan ternyata ada sebuah revisi yang mengakibatkan kamu harus mengubah sebuah komponen, dimana komponen itu dipakai di semua halaman yang udah kamu buat? Kebayang ga gimana jadinya? Mau diubah secara manual satu persatu? Mana sempat keburu telat…

Lalu gimana solusinya?

UI Guideline lah jawabannya. Ya, bener banget. UI guideline yang bakal bantu kamu untuk menyelesaikan 2 permasalahan diatas. Lalu sebenarnya apakah UIG itu? UIG itu merupakan sebuah dokumen yang berisi aturan dan juga komponen yang berfungsi dalam merancang sebuah desain produk digital. UIG juga sangat identik dengan Kolaborasi dan juga konsistensi. Kalau masih ada yang bingung seperti apa bentuk dari UI Guideline bisa cek contohnya di bawah ini ya 👇

https://dribbble.com/shots/5928708-Copofi-UI-Guide

https://dribbble.com/shots/2955458-DXP-Guideline

Itu merupakan sebagian contoh dari UI Guideline, ada beberapa komponen yang terdapat di dalam sebuah UI Guideline diantaranya :

1. Warna
2. Font
3. Button
4. Spacing
5. Text field
6. dan masih banyak lagi

Nah itu mungkin sekilas tentang UI Guideline , selanjutnya apa saja sih keuntungan dari penggunaan UI Guideline di project kita? Nah ada beberapa keuntungan yang kita dapatkan nih kalau kita menggunakan UI Guideline diantaranyaa…

1. Menjaga konsistensi halaman yang kita buat
2. Dapat mempercepat waktu pengerjaan project
3. Mempermudah developer dalam proses slicing (Konversi desain ke kode program)

Proses Pembuatan UI Guideline

Karena kita udah bahas soal isi dari UIG terus juga udah disebutkan dari keuntungan yang didapat dari UIG, masa iya kita ga coba bikin. Nah sebelumnya saya sendiri udah coba eksplorasi tentang beberapa komponen dan juga proses dari pembuatan UI Guideline, dan seperti ini hasil akhirnya 👇

Nah itu merupakan beberapa komponen yang saya define disini. Untuk beberapa komponen yang saya buat disini, saya hanya memasukkan beberapa komponen yang paling sering digunakan saja ya. Selanjutnya saya akan menjelaskan beberapa komponen yang udah saya cantumkan di UI Guideline yang telah saya buat ini

1. Warna

Pada UI Guideline yang saya buat saya mendefine beberapa warna untuk saya cantumkan di dokumentasi UI Guideline saya, saya menggunakan berbagai macam warna turunan monochrome sebagai Primary color dan juga sebuah Secondary Color yaitu warna biru untuk pemanis saja 😁

Color Component

Nah penggunaan warna pada UIG ini perannya sangat penting untuk mempermudah pekerjaan kita sebagai desainer, ketika kita telah menantukan komposisi warna pada UIG akan menjaga konsistensi dari segi visual. Dengan adanya color component pada UIG juga dapat mempermudah developer pada saat proses slicing nya nanti. Keuntungan lainnya ketika mendesain UI kita tidak perlu mengingat kode heksa tiap warna karena kita bisa mendefine dengan mengatur sendiri color component di berbagai tools UIUX contohnya pada fitur “Color Styles” yang ada di figma seperti ini 👇

Penggunaan Color Styles di Figma

2. Font dan typography

Nah untuk font gunakan font yang memiliki kategori font family yang lengkap seperti Black, Bold, Semibold, Regular bahkan Thin. Hal ini dilakukan agar kita bisa memilih karakteristik yang tepat untuk masin-masing bagian yang berbeda. Kali ini saya memilih font kesayangan saya, “Source sans pro”. Saya sangat suka dengan font ini karena memiliki jenis typeface yang lengkap.

Typography Component

Nah setelah kita menentukan jenis font yang akan kita gunakan dalam project design kita jangan lupa juga untuk mendefine typography untuk tiap konten paragrafnya dan disesuaikan dengan kebutuhan ya tentunya. nah ini merupakan typography yang telah saya define dalam UIG

Contoh penggunaan typography sesuai font pada UIG

Mendefinisikan typography seperti contoh diatas juga sangat penting untuk menjaga konsistensi pada sebuah halaman UI kita. terlebih jika project kita memiliki jumlah halaman dan konten yang sangat banyak juga. Dari segi handover kita juga bisa membantu developer pada proses slicing, karena nanti developer akan menjadi lebih mudah mengenali bahwa untuk bagian tertentu harus menggunakan style typography yang mana. Nah saat menggunakan figma biasanya saya menggunakan fitur “Text Styles” yang ada figma dan hasilnya seperti ini 👇

Local style pada figma

3. Icon

Biasanya dalam sebuah desain icon memiliki peran yang cukup penting sebagai informasi pendukung dari sebuah konten pada website ataupun aplikasi berbasis mobile, misalnya pada menu di sidebar, dan yang lainnya. Disini saya juga mendefine beberapa icon pada UIG yang saya buat.

Icon Component

4. Button

Button atau tombol merupakan salah satu komponen yang sangat penting dalam sebuah website atau aplikasi. Button berperan penting dalam sebuah action pada produk digital. Dalam pembuatan UI Component atau UI Guideline biasanya button di bagi dalam berbagai style sesuai state atau kondisi. Misalnya seperti button ketika dihover oleh kursor ataupun button dengan style border tanpa fill dan sebagainya. Selain dibagi berdasarkan state, button juga dibagi dengan berbagai ukuran seperti button dengan ukuran large, medium, small dan berbagai ukuran lainnya. Emang ada kegunaannya define berbagai jenis button seperti itu? Jelas ada dong, selain menjaga konsistensi dari segi visual, hal ini akan sangat membantu tim developer kita dalam proses slicing desain ke kode program nanti. Nah di UIG saya, saya juga tidak lupa untuk mendefine beberapa jenis komponen. karena ini sifatnya hanya untuk eksplorasi. jadi saya tidak terlalu mendefine komponen button secara detail ya hehe. Pada UIG yg saya buat, saya hanya membuat beberapa jenis style button saja. Saya membuat button dengan border tanpa fill, border dengan fill dan juga button tanpa shape. dan seperti ini lah hasilnya … 👇

Button Component

5. Spacing

Menjaga konsistensi dapat dilakukan dengan cara menjaga ukuran spacing, biasanya dalam menjaga spacing kita dapat memberikan kelipatan untuk ukuran spacingnya, bisa kelipatan 4, 6 ataupun 8. Saya pribadi biasanya menggunakan kelipatan 4 untuk ukuran spacing.

Nah dari beberapa komponen yang telah saya definisikan di dokumen UI Guideline. saya juga telah mengimplementasikan di beberapa halaman UI saya dan berikut ini adalah sedikit preview nya 👇😁👍

Apa kesimpulan yang dapat kita ambil?

UI Guideline merupakan salah satu dokumen yang dapat membantu kita dalam berbagai hal. UI Guideline sangat membantu dalam hal konsistensi dan juga kolaborasi, bisa kolaborasi antar desainer maupun developer dalam proses slicing nya nanti. Dengan adanya UI Guideline akan sangat membantu proses kerja kita menjadi lebih cepat namun juga menjaga konsistensi. Tidak peduli ada berapa banyak desainer yang terlibat dalam project, semua style desain sudah tercover dalam UI Guideline tersebut. Tidak ada ketentuan khusus mengenai komponen apa saja yang kita define di dokumen UI guideline kita, semua bisa disesuaikan dengan kebutuhan project. beberapa komponen yang saya define di atas mungkin hanya sebagian kecil dan paling sering digunakan. Tapi tentunya semakin lengkap kita mendefine komponen, tentunya akan semakin baik. UI Guideline juga selalu bisa diupdate ketika project sedang berjalan.

Terima kasih untuk yang sudah membaca sampai sini, nanti kita ketemu lagi di tulisan saya berikutnya.. Cheerss 😁🥂