Pahami Apa Itu Design System dan Komponen Utamanya di Sini!
Isi Artikel
Sebagai orang yang sedang menggeluti dunia desain produk, mungkin, design system adalah istilah yang sering kamu dengar. Akan tetapi, sudahkah kamu memahami apa itu design system?
Tenang saja, artikel ini hadir untuk mengajakmu menyelami seluk-beluk design system.
Disarikan dari Adobe XD Ideas, UX Collective, dan UX Planet, ini dia penjelasan lengkapnya untukmu!
Apa Itu Design System?
© Freepik.com
Sebelum masuk ke penjelasan detail, kita pahami dulu definisi dari istilah ini, yuk!
Alla Kholmatova, seorang konsultan UX, mendefinisikan design system sebagai kumpulan pola yang saling berhubungan.
Tak sekadar pola saja, pola ini diatur dan digunakan secara bersama-sama, serta diciptakan agar harmonis dan konsisten. Pada akhirnya, pola-pola ini bisa digunakan untuk mencapai tujuan dari produk digital.
Sementara itu, Forum One, sebuah perusahaan konsultan desain, memiliki definisi yang sedikit berbeda.
Menurut mereka, design system adalah kumpulan komponen desain yang bisa digunakan secara berulang-ulang.
Lewat dua definisi tadi, bisa disimpulkan bahwa design system merupakan kumpulan komponen desain yang konsisten.
Ia harus bersifat bisa digunakan berulang-ulang, serta bisa digunakan oleh berbagai anggota tim produk digital.
Salah satu contoh dari penerapan design system adalah gambar di bawah ini.
© Haltive.com
Kamu bisa melihat bahwa komponen yang ada bersifat konsisten dan senada. Bahkan, beberapa unsur hanyalah hasil copy dan paste dengan sedikit penyesuaian.
Pada praktiknya, design system ternyata tidak hanya digunakan di produk digital, lho! Desain produk industri juga bisa menggunakannya.
© Standardsmanual.com
Gambar di atas merupakan desain petunjuk untuk penumpang kereta di New York. Pada ilustrasi itu, elemen-elemen penunjuk bersifat senada dan “bisa digunakan kembali”.
Mengapa Design System Penting?
© Freepik.com
Setelah mengetahui apa itu design system, saatnya mengetahui manfaatnya. Agar lebih jelas, mari kita buat perumpamaan.
Coba kamu bayangkan, kamu tengah mendaftar ke suatu acara. Untuk menjadi pesertanya, kamu harus mengisi sebuah formulir.
Formulir itu hanya satu jenis dan terdiri dari satu halaman. Akan tetapi, kamu harus menyerahkan sepuluh lembar formulir yang sama.
Ada dua cara untuk mengisi dan mengumpulkan formulir itu. Cara pertama adalah mengambil sepuluh formulir kosong, lalu menuliskannya satu per satu.
Cara kedua adalah mengambil satu formulir, menuliskannya dengan lengkap dan sebaik mungkin, lalu menggunakan mesin fotokopi untuk menjadikannya sepuluh formulir yang sama.
Nah, lewat perumpamaan tadi, design system adalah mesin fotokopi yang membantumu memperbanyak formulir.
Kamu tidak perlu membangun dan memikirkan sepuluh isi formulir dari nol. Selain membuang waktu, peluang kamu salah mengisi informasi menjadi lebih besar.
Akan menjadi lebih baik jika energi digunakan untuk memikirkan satu formulir dengan baik dan matang saja.
Hal ini sama dengan apa yang terjadi di design system. Jika ada kumpulan komponen sudah dibuat dengan baik dan matang, desainer produk tidak perlu menciptakan desain dari nol.
Ketika ingin menciptakan produk baru, ia tinggal mengambil komponen yang sudah ada di dalam design system.
Orang-orang yang diuntungkan oleh design system bukan hanya desainer produk, lho! Tim developer juga terbantu olehnya.
Pasalnya, design system tidak hanya terdiri dari elemen visual dan gambar, tetapi juga berbagai GIT alias kumpulan kode dari gambar itu.
Komponen Design System
© Freepik.com
Setelah memahami definisi dan manfaat, Apakah kamu bertanya, seperti apa teknis penerapan dari design system itu sendiri?
Nah, praktik design system sejatinya berbeda-beda di tiap organisasi atau perusahaan. Akan tetapi, tetap ada unsur yang wajib terkandung di dalamnya.
Komponen-komponen utama dari design system adalah:
1. Tempat khusus untuk dokumen
Tentu saja, komponen utamanya adalah tempat digital khusus. Biasanya, perusahaan menggunakan tempat penyimpanan online seperti Google Drive atau Dropbox.
Ada perusahaan yang membuka akses dokumen ini secara publik. Akan tetapi, ada juga yang hanya mengizinkan akses bagi pekerja produknya saja.
2. Komponen desain yang bisa digunakan kembali
Komponen utama design system selanjutnya adalah karya desain itu sendiri. Misalnya, dokumen desain dalam bentuk file Adobe XD, Figma, ilustrasi, dan lain-lain.
Unsur ini nantinya bisa diambil dan disesuaikan dengan kebutuhan saat mendesain produk.
3. Komponen development yang bisa digunakan kembali
Nah, selain unsur dari desain, ada juga unsur pemrograman dalam design system. Misalnya, berbagai kode dalam banyak bahasa.
Kode juga bisa berbeda-beda untuk produk aplikasi, produk website, atau produk-produk lainnya.
Hal yang Perlu Diperhatikan
© Freepik.com
Sebelum membuat kumpulan komponen ini, ada beberapa hal yang wajib kamu perhatikan, lho! Hal-hal yang wajib diingat dalam membuat design system adalah:
1. Tujuan dan nilai produk
© ASH Teams / invisionapp.com
Mungkin kamu bertanya, apa pentingnya memasukkan hal abstrak seperti tujuan dan nilai dalam design system?
Jawabannya adalah, karena desain dapat menyampaikan pesan alias mengomunikasikan sesuatu. Oleh karena itu, pikirkan pesan ini baik-baik.
Apa yang ingin kamu tawarkan kepada pengguna? Nilai dan tujuan ini bisa kamu turunkan dan sesuaikan dengan brand dari tim marketing.
2. Gaya desain
© Shopify / Uxdesign.cc
Tentu saja, kamu harus mendesain suatu produk yang selaras dengan brand dari perusahaan. Ini akan menuntutmu memiliki gaya desain yang konsisten.
Bukankah konsistensi memang salah satu tujuan dari adanya design system?
3. Prinsip desain
Prinsip desain adalah kalimat atau frasa singkat yang menggambarkan tujuan besar dari suatu produk.
Agar kamu tidak bingung dengan konsep ini, Glints akan memberikanmu contoh.
© Uxdesign.cc
Produk manajemen konten, Medium, memiliki prinsip “direction over choice” alias mengutamakan arah dan tujuan, bukan pilihan.
Dengan begitu, lahirlah text editor dengan desain yang sederhana dan bersih. Tujuannya adalah membuat pengguna fokus pada tujuannya, alih-alih teralihkan perhatiannya pada warna dan pilihan yang terlalu banyak.
Demikian penjelasan dari Glints soal apa itu design system. Semoga artikel ini bisa menjawab semua kebingunganmu soal design system, ya!
Apabila kamu memang masih memiliki banyak pertanyaan soal dunia desain dan produk, kamu bisa ikut Glints ExpertClass, lho!
Glints ExpertClass adalah seminar soal dunia produk, desain, dan industri-industri lainnya. Pengisinya bukan sembarang orang, lho! Mereka adalah ahli berpengalaman di bidangnya.
Jadi, apa lagi yang kamu tunggu? Ikut kelasnya sekarang, yuk!
