• UI & UX

Panduan Langkah-demi-Langkah untuk Membuat Sistem Desain

  • Felix Rose-Collins
  • 8 min read
Panduan Langkah-demi-Langkah untuk Membuat Sistem Desain

Intro

Di era yang dapat diakses di mana saja dan kapan saja ini, keberadaan di mana-mana telah menjadi sebuah norma. Namun, sudah menjadi rahasia umum bahwa konsistensi adalah kredibilitas. Pengguna sekarang lebih sadar. Pengalaman yang cepat dan lancar adalah harapan dasar, apa pun antarmukanya.

Selain itu, waktu adalah aset yang tidak boleh Anda sia-siakan. Semua ini seharusnya cukup untuk membuat Anda berebut untuk melakukan lebih banyak hal dengan situs web atau antarmuka Anda. Namun, mencoba untuk konsisten dengan 50 komponen yang berbeda dalam desain tanpa kesalahan adalah hal yang sulit.

Isyarat pada gulungan drum untuk "Design System" hadir untuk memudahkan hidup Anda.

Apa yang dimaksud dengan Sistem Desain?

Sistem desain adalah arsip ekstensif dari komponen yang dapat digunakan kembali yang didokumentasikan dengan jelas yang dapat dimanfaatkan oleh tim produk untuk menciptakan pengalaman digital. Dengan kata lain, pertimbangkan sistem desain sebagai sumber kebenaran tunggal bagi perusahaan dalam hal desain.

Lebih dari sekadar Panduan Gaya atau Pustaka Pola, sistem desain terus berkembang. Ekosistem pedoman yang terkait dengan berbagai entitas, termasuk desain UX, dapat digunakan sebagai kerangka kerja blok bangunan untuk proyek apa pun untuk memastikan semua komponen konsisten dan sesuai dengan merek.

Meskipun sangat membantu bagi perusahaan rintisan, bisnis yang sedang berkembang, dan perusahaan besar, sistem desain menjadi aset penting yang tidak dapat dinegosiasikan seiring dengan berkembangnya sebuah produk. Sistem ini juga dapat secara positif memengaruhi tujuan bisnis, alur kerja, kerja sama tim, pengalaman pengguna, dan pengalaman merek secara keseluruhan.

alt_text

Apa Saja Manfaat dari Sistem Desain?

Beberapa manfaat dari penerapan desain sistem adalah

  1. Meningkatkan efisiensi sekaligus mengurangi waktu - Manfaat utama dari setiap sistem desain adalah kemampuan untuk membuat dan menciptakan kembali pekerjaan desain dan pengembangan dengan cepat. Tim dapat menggunakan elemen yang telah dibuat sebelumnya untuk mengurangi kebutuhan untuk terus-menerus menciptakan ulang dan mengurangi risiko inkonsistensi.
  2. Meningkatkan konsistensi visual di seluruh halaman dan saluran - Kurangnya sistem desain di seluruh organisasi dapat menyebabkan visual yang tidak konsisten, pengalaman pengguna yang terfragmentasi, atau terisolasi dari merek. Seperangkat standar yang kohesif juga membantu mengelola desain ulang atau perubahan merek visual dalam skala besar.
  3. Mempromosikan bahasa terpadu - Bahasa desain bersama mengurangi kemungkinan terbuangnya waktu desain atau pengembangan karena miskomunikasi di dalam dan di antara tim lintas fungsi.
  4. Memungkinkan fokus yang lebih baik pada masalah yang lebih kompleks - Tim dapat memperbaiki masalah yang kompleks dengan lebih baik, seperti penentuan prioritas informasi, manajemen perjalanan, dll., ketika komponen UI yang sederhana dibuat dan tegas.
  5. Berfungsi sebagai referensi dan alat pendidikan bagi kontributor - Sistem desain memperlancar proses orientasi jika terjadi perubahan personel. Sistem ini juga membantu memudahkan kontributor individu baru untuk masuk ke dalam desain UI UX atau pembuatan konten.
  6. Berkontribusi terhadap merek yang kuat dan abadi - Tujuan sistem desain adalah untuk mengkomunikasikan identitas dan desain tertentu di balik produk yang ditumpanginya. Hal ini membantu menciptakan merek yang berdampak dan membantu orang dalam mengingat pengalaman merek. Hal ini membuat orang merasa lebih terhubung dengan sebuah merek dan lebih mempercayainya.

Panduan Sepuluh Langkah untuk Membangun Sistem Desain

Kami telah menguraikan proses sepuluh langkah untuk membantu perusahaan Anda membuat sistem desain.

1. Menganalisis secara menyeluruh Proses Desain yang ada.

Langkah pertama untuk menyusun strategi dan memulai proses apa pun adalah memahami posisi Anda saat ini. Meninjau dan menganalisis proses desain organisasi Anda saat ini dapat membantu Anda lebih memahami desain sistem yang paling sesuai untuk merek Anda. Tanyakan pada diri Anda pertanyaan-pertanyaan berikut ini:

  • Apa pendekatan desain organisasi Anda saat ini?
  • Apa saja alat bantu yang ada yang digunakan oleh organisasi Anda?

Pastikan Anda mengevaluasi tingkat kematangan desain tim produk. Hal ini akan membantu Anda dalam mengakses secara kasar waktu yang dibutuhkan untuk mengimplementasikan sistem baru dalam organisasi Anda.

2. Tentukan Abjad Merek Anda

Determine your Brand's Alphabet

Perkenalkan Ranktracker

Platform Lengkap untuk SEO yang Efektif

Di balik setiap bisnis yang sukses adalah kampanye SEO yang kuat. Namun dengan banyaknya alat dan teknik pengoptimalan yang dapat dipilih, mungkin sulit untuk mengetahui dari mana harus memulai. Nah, jangan takut lagi, karena saya punya hal yang tepat untuk membantu. Menghadirkan platform lengkap Ranktracker untuk SEO yang efektif

Kami akhirnya membuka pendaftaran ke Ranktracker secara gratis!

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Abjad sebuah merek akan mengarah pada identitas merek, yaitu merek dan nilai produk serta bahasa merek. Bahasa merek terdiri dari bentuk, jenis huruf, warna, animasi, suara, dan nada.

Desainer akan menggunakan bahasa visual yang ditentukan oleh alfabet merek. Meninjau pedoman merek dan berbicara dengan para pemangku kepentingan dapat membantu Anda memahami identitas dan bahasa merek.

3. Melakukan Audit untuk AI Produk Saat Ini

Melakukan audit UI pada produk saat ini akan membantu Anda mengatasi tantangan desain produk utama: duplikasi desain. Audit ini bertujuan untuk mencapai dua tujuan -

  • Berikan perhatian pada area di dalam produk yang memiliki ketidakkonsistenan yang signifikan.
  • Pahami elemen yang paling sering digunakan dan esensial dari produk.

Audit UI adalah proses multi-langkah. Mengidentifikasi dan menganalisis properti UI utama dan pemanfaatannya dalam komponen sangat penting. Anda bisa menggunakan alat bantu yang tersedia untuk melihat jumlah warna dan jenis huruf yang unik dalam style sheet Anda. Anda kemudian dapat memecah lebih lanjut setiap desain situs web menjadi beberapa elemen.

4. Menetapkan Prinsip Desain Sistem Anda

Untuk menciptakan pengalaman pengguna yang luar biasa, sangat penting untuk memahami alasan di balik keputusan desain. Selain itu, seperangkat tujuan yang jelas akan mempermudah dalam menentukan prinsip-prinsip desain dan berkoordinasi dengan tim.

Ingin memiliki proses sistem desain? Mulailah dengan pertanyaan-pertanyaan ini:

  • Apa yang Anda buat
  • Mengapa Anda membuatnya
  • Bagaimana Anda akan membangunnya

Prinsip-prinsip desain harus mencerminkan nilai-nilai dan visi merek Anda.

5. Membangun Perpustakaan Komponen

Juga dikenal sebagai Perpustakaan Pola, ini harus mencakup semua elemen fungsional dan dekoratif UI Anda. Evaluasi komponen sesuai dengan proyek, kebutuhan pengguna, dan tujuan bisnis, dan pertahankan komponen yang Anda perlukan.

Build a Component Library

6. Menetapkan Aturan

Sistem desain tidak dibuat untuk membatasi desainer pada arah desain tertentu. Sebaliknya, sistem ini hanya seharusnya menyediakan kerangka kerja mendasar bagi para desainer dan pengembang yang memperluas arah kreatif dan memungkinkan ruang untuk inovasi.

Mereka adalah dua pendekatan untuk aturan Sistem Desain, seperti yang disebutkan dalam buku Alla Kholmatova:

  • Aturan Ketat - Desainer dan pengembang mengikuti proses yang ketat untuk memperkenalkan pola atau komponen baru.
  • AturanLonggar - Aturan ini memungkinkan desainer dan pengembang untuk berkreasi tanpa mengikuti batasan yang ketat jika mereka yakin bahwa hal tersebut akan menghasilkan desain yang lebih baik.

Seperti banyak aspek kehidupan lainnya, sangat penting untuk menemukan keseimbangan yang tepat di antara aturan-aturan ini sehingga produk dapat konsisten sekaligus kreatif.

7. Pilih Model Tata Kelola Anda

Sistem desain yang dinamis dan terus berkembang membutuhkan proses yang mudah untuk menyetujui dan menerapkan perubahan. Ada tiga model tata kelola:

  • Model soliter - Seorang individu atau sekelompok individu secara langsung "mengatur" proses sistem desain.
  • Model terpusat - Satu tim bertanggung jawab dan memandu evolusi sistem.
  • Model federasi - Beberapa orang dari beberapa kelompok memimpin proses desain sistem.

Meskipun masing-masing model ini memiliki kelebihan dan kekurangan, model soliter khususnya dapat menyebabkan satu individu yang bertanggung jawab menjadi penghambat pelaksanaan banyak tugas. Pilihan terbaik adalah menggunakan kombinasi model yang berbeda sesuai dengan kebutuhan Anda.

8. Menentukan Struktur Komponen

Duplikasi komponen fungsional merupakan tantangan yang signifikan dalam sistem desain. Hal ini menghasilkan sistem yang tidak fleksibel dan mengharuskan perancang (dan pengembang) untuk membuat elemen baru setiap kali ada skenario baru.

Desain sistem yang sukses sangat dapat digunakan kembali dan memungkinkan pengguna untuk menggunakannya sebagai fondasi produk mereka. Oleh karena itu, disarankan untuk mengembangkan elemen yang dapat digunakan kembali dalam konten yang berbeda.

Perkenalkan Ranktracker

Platform Lengkap untuk SEO yang Efektif

Di balik setiap bisnis yang sukses adalah kampanye SEO yang kuat. Namun dengan banyaknya alat dan teknik pengoptimalan yang dapat dipilih, mungkin sulit untuk mengetahui dari mana harus memulai. Nah, jangan takut lagi, karena saya punya hal yang tepat untuk membantu. Menghadirkan platform lengkap Ranktracker untuk SEO yang efektif

Kami akhirnya membuka pendaftaran ke Ranktracker secara gratis!

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Kriteria untuk komponen yang dapat digunakan kembali dan dapat diskalakan:

  • Modular - Komponen independen dan elemen yang dapat dipertukarkan.
  • Dapat digabungkan- Memadukan komponen yang ada untuk membuat komponen baru
  • Dapat disesuaikan- Komponen yang dapat disesuaikan yang berfungsi dalam banyak konteks.

9. Pastikan Semua Tim Menggunakan Bahasa yang Sama

Tujuan sistem desain termasuk memfasilitasi kerja tim yang mulus. Oleh karena itu, mengintegrasikan sistem ke dalam alur kerja tim sangatlah penting. Hal ini meningkatkan produktivitas sekaligus memberikan nilai kepada anggota tim.

Memperoleh pemahaman yang lebih baik tentang bagaimana berbagai orang menggunakan sistem desain dalam proses integrasi awal dapat membantu Anda memodifikasi sistem yang sesuai.

10. Sampaikan Perubahan Secara Teratur

Proses sistem desain berkembang bersama organisasi dan tidak bisa statis. Oleh karena itu, setelah memperkenalkan sistem ke organisasi Anda, sangat penting untuk mengkomunikasikan semua perubahan dan membuat organisasi tetap diperbarui.

Catatan perubahan yang ringkas dan dipelihara dengan baik dapat membantu pengguna memahami berbagai peningkatan dan bagaimana hal itu akan berdampak pada pekerjaan mereka.

Tiga Contoh Teladan untuk Memulai

Sistem Desain Atlassian

Atlassian Design System (https://atlassian.design/)

Atlassian Design System, sebuah perusahaan perangkat lunak perusahaan Australia yang terkenal, bertujuan untuk menyediakan kolaborasi tanpa batas di antara tim-tim yang lincah dan tersebar di seluruh dunia.

Trello dan Jira, dua alat kolaborasi Atlassian yang banyak digunakan, sepenuhnya menangkap filosofi desain perusahaan. Filosofi ini adalah tentang memanfaatkan pengalaman digital untuk meningkatkan produktivitas dan potensi keseluruhan tim dan anggota tim secara individu.

Karena itu, Sistem Desain Atlassian menawarkan teknik yang gesit dan pelacakan yang efektif untuk setiap tahap proyek, mulai dari perencanaan produk hingga pengiriman. Hal ini pada akhirnya menghasilkan hasil yang bermanfaat dari pembuatan dan pengiriman produk. Sistem desain mereka terutama mencakup:

  1. Panduan Desain
  2. Standar Merek
  3. Produk
  4. Ilustrasi
  5. Pembuatan prototipe
  6. Pemasaran
  7. Kepribadian

Sistem Desain IBM

IBM Design System (https://carbondesignsystem.com/migrating/guide/design)

IBM adalah contoh utama dari perusahaan TI besar yang beroperasi secara global dan mengikuti sistem desainnya sendiri.

Kemampuan mereka mencakup segala hal, mulai dari konsultasi bisnis dan pembiayaan hingga pembuatan perangkat lunak, hosting/manajemen TI, dan solusi yang menghubungkan perangkat lunak dengan perangkat keras.

Prinsip dasar IBM adalah untuk terus mendorong kemajuan, baik itu masyarakat atau merek, dengan menggunakan ilmu pengetahuan, nalar, dan kecerdasan.

Menurut IBM, memiliki desain yang bagus bukan hanya sebuah kebutuhan tetapi juga komitmen kepada pengguna. Berikut ini adalah beberapa fitur unggulan Carbon Design System mereka, yang menyediakan banyak alat dan sumber daya bagi para pengembang dan perancang yang bekerja dengan Adobe, Axure, dan Sketch:

  1. Visualisasi Data
  2. Pola
  3. Komponen
  4. Pedoman
  5. Tutorial

Sistem Desain Uber

Uber Design System (https://baseweb.design/)

Kita semua pasti pernah menggunakan Uber setidaknya sekali. Perusahaan teknologi asal Amerika Serikat ini mengandalkan layanan pengantaran makanan, pemesanan kendaraan, berbagi tumpangan antar rekan, dan mobilitas mikro dengan skuter dan sepeda listrik.

Uber membutuhkan desain sistem yang efisien agar jenis layanan ini dapat berfungsi dengan sempurna di semua sub-merek, merek internal, produk, dan proyek.

Atribut utama Sistem Desain Uber adalah:

  1. Arsitektur Merek
  2. Komposisi
  3. Nada Suara
  4. Gerak
  5. Ilustrasi
  6. Fotografi
  7. Ikonografi
  8. Warna
  9. Logo
  10. Tipografi

Petunjuk yang Perlu Diketahui Sebelum Membuat Sistem Desain Pertama Anda

1. Komunikasi yang Dini dan Jelas adalah sahabat baru Anda

Melibatkan konsumen internal Anda secara langsung bisa jadi rumit. Bahkan, umpan balik mereka dapat menghambat proses jika tidak jelas, diberikan terlalu dini dalam siklus rilis alfa atau beta, atau tidak membantu.

Beritahukan kepada pelanggan Anda, pengguna sistem desain, apa yang Anda butuhkan untuk memastikan bahwa Anda menerima umpan balik yang konstruktif. Jika Anda berada dalam siklus pra-rilis awal, jujur dan jelaslah tentang masukan yang Anda inginkan. Hal ini menunjukkan bahwa Anda mencari kekurangan produk yang paling signifikan dan bukan kritik yang terlalu tinggi.

Berhati-hatilah terhadap pemikiran yang berlebihan, lepaskan pikiran Anda tetapi jangan ragu untuk berkomunikasi secara berlebihan.

2. Langkah kaki Anda bukan satu-satunya hal yang perlu Anda lacak

Bagian penting yang hilang dari penentuan prioritas sering kali adalah melacak penggunaan sistem desain. Sangat penting untuk memahami di mana sistem digunakan, oleh siapa, seberapa sering, dan frekuensi pembaruan.

Menerapkan beberapa pengumpulan statistik harian tentang tim mana yang menggunakan versi perpustakaan mana yang tepat memungkinkan pemahaman yang adil tentang tingkat adopsi, peningkatan, dan penurunan.

Ketika Anda mengidentifikasi tim yang jarang melakukan pembaruan, Anda bisa bergerak untuk mengetahui masalah yang menghalangi peningkatan dan kemudian memperbaikinya.

3. Mekanisme Umpan Balik sama diremehkannya dengan Rhaeghal dari GOT

Untuk memastikan bahwa sistem Anda tidak hanya berharga bagi penggunanya, tetapi juga sesuatu yang membuat mereka merasa menjadi bagian dari sistem tersebut dan secara aktif berkontribusi, menyediakan cara yang sederhana dan mudah bagi orang-orang untuk memberikan umpan balik (Slack, email, dll.) dan berkontribusi pada sistem akan menjadi bagian penting.

Selalu berikan petunjuk tentang bagaimana dan di mana memberikan umpan balik di sebanyak mungkin area, dan jangan pernah berasumsi apa pun, terutama bahwa pengguna akan menemukannya di lokasi yang menurut Anda paling jelas.

Sistem Desain adalah Bintang Utara yang Dibutuhkan Organisasi Anda

A Design System is the North Star Your Organization Needs

Sistem desain yang sukses dan dibuat dengan baik menjadi bagian dari tulang punggung perusahaan, menghasilkan pengalaman yang konsisten dan diperkuat. Selain itu, desainer dan pengembang mendapatkan kesempatan untuk mengkomunikasikan tujuan produk dengan lebih baik daripada terjebak dalam menyusun blok bangunan dasar.

Semua orang umum dapat menjadi mitra Anda dalam memberikan desain, tetapi hanya spesialis desain yang dapat mengidentifikasi masalah, tantangan, dan aspirasi saat ini untuk membuat sistem desain, terutama untuk Anda. Sekarang bukan waktunya untuk menunggu. Dengan panduan ekstensif tentang cara membuat sistem desain ini, Anda hanya tinggal mengambil inisiatif untuk melakukan transformasi total pada proses produksi Anda.

Referensi

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

Perkenalkan Ranktracker

Platform Lengkap untuk SEO yang Efektif

Di balik setiap bisnis yang sukses adalah kampanye SEO yang kuat. Namun dengan banyaknya alat dan teknik pengoptimalan yang dapat dipilih, mungkin sulit untuk mengetahui dari mana harus memulai. Nah, jangan takut lagi, karena saya punya hal yang tepat untuk membantu. Menghadirkan platform lengkap Ranktracker untuk SEO yang efektif

Kami akhirnya membuka pendaftaran ke Ranktracker secara gratis!

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081

Felix Rose-Collins

Felix Rose-Collins

Co-founder

is the Co-founder of Ranktracker, With over 10 years SEO Experience. He's in charge of all content on the SEO Guide & Blog, you will also find him managing the support chat on the Ranktracker App.

Mulai gunakan Ranktracker... Gratis!

Cari tahu apa yang menghambat situs web Anda untuk mendapatkan peringkat.

Buat akun gratis

Atau Masuk menggunakan kredensial Anda

Different views of Ranktracker app