#BelajarBarengAI — Bagian 2:Apa sih itu design system?
Halo Semuanya 👋🏻
Balik lagi dengan aku salah satu UI/UX Designer dari Kretya Studio. Mungkin di antara kalian ada yang udah tau apa sih itu design system dan ada juga yang belum tau sama sekali tentang design system. Nah, di episode kali ini kita akan belajar bareng tentang design system. Kita akan tau apa itu design system, apa tujuan dari design system, apa aja elemen yang ada di design system, contoh design system, dan kenapa harus membuat design system. Kita juga akan dapet tips dan trik dari AI chat, tentang design system. Jadi, mari kita mulai belajar bareng AI!
1. Apa sih itu design system?
Design system itu kayak kumpulan baju yang udah disiapin buat dipake di berbagai acara. Misalnya, kamu punya baju formal buat kerja, baju santai buat nongkrong, baju olahraga buat fitnes, dan lain-lain. Baju-baju ini udah disesuaikan sama gaya, warna, ukuran, dan motif yang kamu suka. Jadi, kamu gak perlu repot-repot nyari atau beli baju baru setiap kali mau pergi ke acara yang beda-beda.
Nah, design system itu juga kayak gitu. Design system itu kumpulan komponen desain yang udah disiapin buat dipake di berbagai produk digital. Misalnya, kamu punya tombol, menu, form, kartu, dan lain-lain. Komponen-komponen ini udah disesuaikan sama gaya, warna, ukuran, dan motif yang sesuai sama produk kamu. Jadi, kamu gak perlu repot-repot bikin atau ngubah komponen desain baru setiap kali mau bikin produk digital yang beda-beda.
2. Apa tujuan dari design system?
Tujuan dari design system itu kayak tujuan dari punya kumpulan baju yang udah disiapin tadi. Yaitu biar kamu bisa hemat waktu, tenaga, dan uang dalam berpakaian. Kamu gak perlu lagi mikirin mau pake baju apa atau beli baju baru setiap kali mau pergi ke acara yang beda-beda. Kamu tinggal ambil baju yang udah ada di kumpulan baju kamu dan pake aja.
Nah, tujuan dari design system itu juga kayak gitu. Yaitu biar kamu bisa hemat waktu, tenaga, dan uang dalam mendesain produk digital. Kamu gak perlu lagi mikirin mau bikin komponen desain apa atau ngubah komponen desain lama setiap kali mau bikin produk digital yang beda-beda. Kamu tinggal ambil komponen desain yang udah ada di design system kamu dan pake aja.
3. Apa aja elemen yang ada di design system?
Elemen yang ada di design system itu kayak elemen yang ada di kumpulan baju kamu tadi. Ada beberapa elemen utama yang harus ada di design system, yaitu:
- Style guide: Ini kayak buku panduan yang berisi semua aturan dan pedoman tentang gaya desain yang harus kamu ikuti. Misalnya, warna apa aja yang boleh dipake, font apa aja yang boleh dipake, ikon apa aja yang boleh dipake, dan lain-lain.
- Component library: Ini kayak lemari yang berisi semua komponen desain yang bisa kamu pake. Misalnya, tombol, menu, form, kartu, dan lain-lain. Komponen-komponen ini udah dibuat sesuai sama style guide yang udah ditentukan.
- Documentation: Ini kayak buku petunjuk yang berisi semua informasi dan penjelasan tentang design system kamu. Misalnya, apa tujuan dan nilai dari design system kamu, bagaimana cara menggunakan komponen-komponen yang ada di component library, bagaimana cara mengupdate dan mengembangkan design system kamu, dan lain-lain.
4. Contoh design system
Contoh design system itu kayak contoh kumpulan baju dari merek-merek terkenal yang udah punya gaya tersendiri. Misalnya, Zara, H&M, Uniqlo, dan lain-lain. Merek-merek ini udah punya style guide sendiri-sendiri yang bikin produk-produk mereka punya ciri khas dan beda dari merek lain.
Nah, contoh design system itu juga kayak gitu. Contoh design system itu adalah kumpulan komponen desain dari produk-produk digital terkenal yang udah punya gaya tersendiri. Misalnya, Google, Apple, Facebook, dan lain-lain. Produk-produk digital ini udah punya style guide sendiri-sendiri yang bikin produk-produk mereka punya ciri khas dan beda dari produk lain
5. Kenapa harus membuat design system?
Kenapa harus membuat design system itu kayak kenapa harus punya kumpulan baju yang udah disiapin tadi. Yaitu biar kamu bisa mendapatkan banyak manfaat, seperti:
- Konsistensi: Dengan design system, kamu bisa bikin produk-produk digital yang punya gaya desain yang sama dan sesuai sama tujuan dan nilai produk kamu. Kamu gak perlu khawatir ada produk yang nyeleneh atau gak cocok sama produk lainnya.
- Efisiensi: Dengan design system, kamu bisa bikin produk-produk digital dengan lebih cepat dan mudah. Kamu gak perlu buang-buang waktu dan tenaga untuk bikin atau ngubah komponen desain dari awal setiap kali mau bikin produk baru. Kamu tinggal pake komponen desain yang udah ada di design system kamu.
- Kolaborasi: Dengan design system, kamu bisa kerja sama dengan tim lain dengan lebih baik. Kamu gak perlu ribet untuk ngasih tau atau ngasih lihat komponen desain yang kamu pake ke tim lain. Kamu tinggal kasih tau mereka untuk pake design system yang udah kamu buat. Tim lain juga bisa ngasih feedback atau saran untuk memperbaiki atau memperkaya design system kamu.
Design system itu kayak jembatan, menghubungkan dan memudahkan.
- Mas mas AI
6. Tips dari mas AI sebelum membuat design system
Sebelum membuat design system, ada beberapa hal yang perlu kamu lakukan agar hasilnya bisa maksimal dan sesuai dengan kebutuhan produk kamu. Ini dia beberapa tips dan trik yang bisa kamu coba:
- Pahami apa itu design system dan manfaatnya. Sebelum bikin design system, kamu harus tau dulu apa sih itu design system dan kenapa kamu harus bikin design system. Jadi, kamu gak perlu repot-repot bikin atau ngubah komponen desain baru setiap kali mau bikin produk digital yang beda-beda. Dengan design system, kamu bisa mendapatkan banyak manfaat, seperti konsistensi, efisiensi, dan kolaborasi.
- Lakukan riset tentang produk dan pengguna kamu. Sebelum bikin design system, kamu harus tau dulu apa sih tujuan dan nilai dari produk kamu dan siapa sih pengguna dari produk kamu. Kamu harus tau apa aja kebutuhan, masalah, harapan, dan preferensi dari pengguna kamu. Kamu juga harus tau apa aja fitur, fungsi, dan benefit dari produk kamu. Kamu bisa melakukan riset dengan berbagai cara, seperti wawancara, survei, observasi, analisis data, dan lain-lain.
- Lakukan audit terhadap desain yang sudah ada. Sebelum bikin design system, kamu harus tau dulu apa aja komponen desain yang sudah ada di produk-produk digital kamu sekarang. Kamu harus tau apa aja kelebihan dan kekurangan dari komponen desain yang sudah ada. Kamu juga harus tau apa aja kesamaan dan perbedaan dari komponen desain yang sudah ada. Kamu bisa melakukan audit dengan cara mengumpulkan semua screenshot atau file desain yang sudah ada dan mengelompokkan atau mengkategorikan mereka berdasarkan jenis atau fungsi mereka.
- Buat sketsa atau prototipe dari design system yang ingin kamu buat. Sebelum bikin design system, kamu harus punya gambaran kasar tentang design system yang ingin kamu buat. Kamu harus tau apa aja elemen utama yang harus ada di design system kamu, seperti style guide, component library, dan documentation. Kamu juga harus tau apa aja aturan atau pedoman yang harus kamu ikuti dalam membuat design system kamu. Kamu bisa membuat sketsa atau prototipe dari design system kamu dengan cara menggunakan kertas dan pensil atau menggunakan tools digital seperti Figma.
Referensi:
- Apa itu Design System? — School of Information Systems — BINUS UNIVERSITY. https://sis.binus.ac.id/2022/06/23/apa-itu-design-system/
- Apa Itu Design System dan Seluk-beluknya — Glints Blog. https://glints.com/id/lowongan/design-system-adalah/
- System Design: Pengertian, Apa itu Desain Sistem dan Documents? Tujuan … https://rifqimulyawan.com/blog/pengertian-system-design/
- Apa itu Design System dalam Produk Digital? — Sekawan Studio. https://sekawanstudio.com/blog/design-system-adalah/
- Manfaat dan Cara Membuat Design System untuk Startup — Tech in Asia … https://id.techinasia.com/manfaat-design-system-startup
- Cara memulai dan membuat Design System — heysalsal. https://heysalsal.com/ina/tutorial-membuat-design-system/
- HaloFigma — Tutorial Membuat Design System dari NOL — HaloDesigners. https://www.halodesigners.com/halofigma
- Membuat Design System | Udemy. https://www.udemy.com/course/membuat-design-system/
- Image. https://unsplash.com/
