Semoga kalian pernah mendengar tentang UI Kit sebelumnya, atau kalau tidak membaca sekilas soal itu di website ini (kadang suka di mention di beberapa artikel). Kalau diartikan ke bahasa Indonesia kit bisa berarti kotak atau peti. Jadi simpel-nya UI Kit bisa diartikan sekumpulan UI yang dikumpulkan menjadi satu dan diletakkan disatu tempat.
UI Kit biasa digunakan oleh UI Designer dan bahkan oleh web designer untuk mempermudah dan mempercepat pekerjaan mereka. Bahkan UI Kit juga digunakan oleh mobile operating system seperti Android dan iOS untuk mempermudah designer untuk mendesain aplikasi sesuai dengan panduan mereka.
Jadi Apa Itu UI Kit?
UI Kit adalah sekumpulan element UI yang dikumpulkan menjadi satu tempat. Element UI disini meliputi hal-hal yang akan sering kalian gunakan. Contohnya warna, tulisan (jenis, ukuran, bold, italic, dll), icon, dan beberapa element yang mungkin akan kalian gunakan lebih dari satu kali (button, input, card design, etc).
”A UI kit is a set of files that contains critical UI components like fonts, layered design files, icons, documentation, and HTML/CSS files.
Invision
Dengan membuat UI Kit, kalian bisa mempercepat pekerjaan kalian karena semua element yang akan kalian pakai berulang-ulang sudah dibuat sebelumnya. Jadi anggap seperti kalian sudah punya template sebelumnya dan dalam pembuatan halaman baru, kalian tinggal drag and drop saja dan selesai.
Salah satu kegunaan UI Kit lainnya adalah untuk mempermudah designer baru melanjutnya design yang sudah ada sebelumnya. Ini membantu untuk mempertahankan konsistensi dan juga kembali lagi mempercepat pekerjaan mereka.
Selain itu, di opening gw ada mention soal mobile operating system seperti Android dan iOS juga membuat UI Kit mereka sendiri, nah idenya adalah supaya UI Designer atau programmer yang ingin membuat aplikasi bisa menggikuti guideline mereka dengan UI Kit mereka. Kalian bisa cek atau download UI Kit mereka dibawah ini:
Gimana Cara Bikin UI Kit?
Membuat UI Kit bisa dilakukan diawal atau di akhir pada saat produk kalian sudah selesai dibuat, ini kembali seberapa cepat kalian butuh UI Kit. Kalau deadline produk kalian agak mepet, kalian bisa buat UI Kit diakhir setelah semua design produk kalian selesai. Tapi jika kalian punya waktu cukup panjang, kalian bisa sembari membuat UI Kit secara parallel bersamaan dengan produk kalian. Angep saja UI Kit seperti investasi kecil yang memang agak lama dibuat diawal, tapi akan sangat berguna dikemudian hari.
Untuk pembuatan UI Kit kalian bisa menggunakan aplikasi apapun untuk membuat UI Design seperti Skecth, XD atau Figma. Karena mereka semua memiliki sistem symbol yang bisa membantu kalain membuat UI Kit langsung di file yang sama dengan design kalian. Cuma ada bagusnya kalau kalian punya satu file sendiri untuk UI Kit yang dapat kalian pakai di file-file lainnya (linked symbol).
Keuntungan memiliki UI Kit
Menghemat waktu
Seperti yang sudah dibilang dari awal kalau dengan membuat UI Kit kalian bisa menghemat waktu kalian. Memang saat pembuatan UI Kit agak lama, tapi punya UI Kit yang lengkap dan rapi bisa menjadi investasi yang berbuahkan hasil diakhir. Apalagi jika project ini adalah project jangka panjang. Karena ketika UI Kit sudah selesai, kalian tingal gunakan element yang sudah ada untuk tambahan design. Selain itu element-element seperti warna dan tulisan membantu kalian tidak perlu mengingat kode warna atau ukuran font yang kalian pakai berulang-ulang, dan tentunya mengurangi kemungkinan adanya inkonsistensi design di produk kalian.
Selain itu kalian juga bisa download UI Kit seperti UI Kit dari Android dan iOS atau beberapa UI Kit gratis atau bahkan berbayar di internet. Lumayan untuk latihan atau untuk mempercepat sebuah project.
Mempermudah pengantian design
Salah satu hal paling menguntungkan dengan membuat UI Kit dan membuat mereka menjadi symbol (kalau biasa aja ga gitu guna). Bayangkan ketika tiba-tiba client atau head kita berubah pikiran dan merubah semua warna design kita dari merah menjadi hijau (kondisinya sudah lebih dari 50 halaman website yang kalian design). Maka dengan UI Kit kalian tidak butuh menganti semua warna di 50+ halaman kalian, cukup buka UI Kit warna utama, button dan element-element lainnya. Dalam sekejab 50+ halaman kalian berubah warna menjadi hijau.
Atau ada perubahan bentuk input dari box input menjadi line input dan contoh-contoh lainnya. Perubahan ini jauh… jauh lebih mudah dengan UI Kit dibanding menganti satu-satu design kalian.
Konsitensi Design
Salah satu kegunaan UI Kit yang digunakan ketika kalian bekerja dalam tim adalah menjaga konsistensi design. Dengan adanya UI Kit yang dipakai rame-rame, maka tidak akan ada satu designer yang tiba-tiba menggunakan warna atau element yang berbeda dari yang sudah ada. Terlebih untuk designer yang baru bergabung dan belum tahu apa-apa. Ketika bekerja didalam tim, UI Kit bukan saja menjadi template tapi sudah menjadi design guidlines.
Kesimpulan
Jadi kesimpulan! UI Kit memang membuang waktu dalam pembuatannya, tapi untuk project long term (misal kalian berkerja di sebuah perusahaan yang hanya memiliki satu produk) atau ketika kalian bekerja didalam tim, membuat UI Kit sangat berguna seberjalannya waktu.
Lalu kalian bisa download UI Kit dari orang lain yang bertebaran diluar sana. Dan kalian pun bisa mendapatkan uang dengan menjual UI Kit kalian sendiri.
By the way, untuk gambar cover gw pakai design dari project lama (sekitar 2017?) yang bahkan sekarang udah ga online website-nya. Cuma kalau mau kalian bisa cek protoype-nya di invision
See you until next time (￣▽￣)ノ
Credit:
