Design system adalah hal besar dalam Proses Desain UX. Banyak postingan blog, video, atau tweet yang menyebutkan manfaat membuat sumber daya ini. Artikel ini mengisi kesenjangan dalam pengetahuan dan mencakup setiap aspek dari masalah ini. Mari kita rangkum apa itu Design System, ingatkan manfaatnya dan lihat contoh terbaik yang ada.

Design System lebih dari sekedar UI Style-guide. Itu adalah sumber kebenaran bagi seluruh tim. Ini berarti Library Komponen UI untuk Desainer, Elemen UI Siap Digunakan dalam kode untuk Developer dan Prinsip yang dijelaskan dalam dokumentasi. Pertama Design system membantu Anda menjaga konsistensi dan desain lebih cepat dan Membantu untuk berkomunikasi dengan anggota tim lainnya.

Oke, sekarang Anda memiliki ringkasan singkat. Mari baca cerita lengkapnya dengan lebih banyak informasi.

Apa itu Design System?

Design system adalah panduan komprehensif untuk desain proyek – kumpulan aturan, prinsip, batasan, dan praktik terbaik. Contohnya Elemen inti dari Design system sering kali adalah Library Komponen UI, elemen UI ini juga memiliki representasi yang mengimplementasikan dalam kode.

Design system sering terkenal sebagai sumber kebenaran tunggal bagi tim yang terlibat dalam pembuatan produk. Ini memungkinkan tim untuk merancang, mengembangkan, dan menjaga kualitas produk.

Haltive.com

Karena jumlah perangkat, browser, dan lingkungan terus meningkat dengan kecepatan yang mengejutkan, kebutuhan untuk membuat design system interface yang bijaksana dan sengaja menjadi lebih jelas dari sebelumnya. Sebelum menentukan Design System alangkah baiknya untuk merefleksikan kembali pertanyaan berikut:

• Berapa banyak orang yang akan menggunakan sistem ini?
• Bagaimana profil mereka dan apakah mereka cukup dewasa dalam hal ini?
• Berapa banyak produk yang harus kita selaraskan? Di berapa banyak platform? Berapa banyak teknologi yang berbeda (Angular, React, others…)?
• Tingkat konsistensi apa yang kita inginkan di seluruh produk kita?
• Semua jawaban ini akan membantu kita untuk menentukan jenis Sistem Desain yang paling tepat.

Manfaat Design System

Membuat sistem terdengar seperti banyak pekerjaan. Namun, ada banyak manfaat yang membuat sistem layak untuk disiapkan. Inilah yang utama: Konsistensi berkat Desain Sistem, Developer dapat menerapkan UI yang konsisten dengan lebih mudah. Mereka dapat menganggap halaman tertentu sebagai kumpulan komponen.

Contoh:

Developer tidak perlu berpikir bahwa ini adalah tombol dengan background # 0302fa, font Open Sans Bold 14pt, dan padding 8px. Teknisi mengetahui bahwa ini hanyalah Tombol Utama, dan dia menggunakan komponen ini di banyak halaman.

• Kualitas lebih tinggi

konsistensi membuat kesan berkualitas lebih tinggi. Spesialis QA akan dengan mudah memantau desain yang mengimplementasikan dengan dokumentasi Design System. Inkonsistensi jarang muncul.

• Komunikasi yang Lebih Baik dengan Tim Developer

Design system adalah satu-satunya sumber kebenaran – ini berarti sistem juga berisi kosakata yang terdapat dalam proyek. Saat Developer dan desainer membahas halaman, mereka akan menggunakan nama komponen yang sama. Berkat ini, Anda tidak akan berbicara tentang “tombol ungu kecil”, tetapi “Tombol kedua”. Banyak kesalahan karena kesalahpahaman, Design system memungkinkan Anda untuk berbicara dalam konvensi penamaan yang sama.

• Proses Desain Lebih Cepat

Anda telah membuat atau membeli KIT UI untuk mengimplementasikan UI. Sekarang Anda hanya menggunakannya ketika fitur baru membutuhkan untuk membuat halaman baru atau memodifikasi yang sudah ada.

• Lebih fokus pada UX, lebih sedikit pada visual

Menggunakan Perlibraryan UI berarti Anda tidak perlu mencari tahu apa yang seharusnya menjadi tampilan bidang input di halaman sudah ditentukan. Visual sebelumnya dijelaskan dalam sistem sekarang Anda dapat membuat halaman baru dengannya dan lebih fokus pada kegunaan yang lebih baik dan pengalaman yang menyenangkan.

Contoh Sistem

Sulit membayangkan berapa jam kerja untuk membuat design system. Untungnya, banyak tim hebat yang membuat sistem mereka menjadi publik. Berkat ini, Anda dapat mempelajari praktik yang baik dalam membuat Design system dari yang sudah ada. Saya merekomendasikan untuk menganalisis ini:

• Desain Material – Ini adalah salah satu sistem paling populer. Itu dibentuk selama bertahun-tahun tetapi sekarang digunakan tidak hanya oleh Tim Google tetapi juga oleh banyak pembuat Android dan Aplikasi Web.
• Atlassian Design System – Salah satu yang terlengkap di pasar yang digunakan dalam produk nyata yang dibuat oleh Atlassian.
• Polaris – Design system yang dibuat oleh Shopify
• Panduan Interface Manusia – Apple menyiapkan Design system untuk semua platform mereka
• Nachos – Disiapkan oleh Trello. Senang rasanya melihat bagaimana mereka menjelaskan prinsip ilustrasi dalam dokumentasi.
• Grommet – Design System oleh Hewlett-Packard dihadirkan dengan sangat bersahabat.

Apakah saya perlu membangun Design system? Jawabannya adalah Iya. Ini mungkin tampak tidak jelas terutama untuk proyek cepat, tetapi keputusan itu terbayar.

Pada awalnya, Anda dan tim Anda mungkin merasa terbebani oleh kendala. Anda mungkin berpikir bahwa itu membatasi Anda, tetapi pada akhirnya, solusi harus lebih cepat dengan kualitas yang lebih baik.

Cara memulai membuat Design System

Biasanya ada dua kasus:

Yang pertama saat Anda memulai proyek baru. Kedua, Anda bekerja dengan produk yang sudah ada. Dalam kedua kasus, jalurnya serupa, tetapi yang kedua membutuhkan beberapa langkah tambahan.

Untuk proyek baru, Anda secara alami mulai bermain-main dengan beberapa sampel visual. Ini mungkin beberapa elemen atau mockup UI awal. Buat berbagai konsep dan pilih yang paling menjanjikan. Ini harus menjadi bagian paling kreatif dari desain awal ketika Anda menemukan “Hal ini” yang membuat Anda (dan pemangku kepentingan) merasa puas mulai mempersiapkan sistem darinya.

Selanjutnya, gunakan Prinsip Desain Atom mulai dengan beberapa partikel seperti warna, font, bentuk. Kemudian pindah ke atom, tombol, masukan, kotak centang, tombol radio, dll. Akhirnya buat molekul – kotak telusur, pemetik tanggal dan organisme bilah navigasi, menu samping. Berkat ini, Anda akan dapat menyiapkan templat halaman koleksi sesuatu seperti kit UI untuk sistem Anda.

Melakukan audit visual

Langkah pertama dalam membangun design system adalah melakukan audit visual terhadap desain Anda saat ini, baik itu desain aplikasi, situs web, dan produk digital lainnya. Menginventarisir CSS yang Anda gunakan dan kualitas visual elemen dapat membantu Anda mengukur seberapa besar upaya yang dilakukan dalam proses ini.

Membuat bahasa desain visual Bahasa desain

Visual adalah inti dari design system . Ini terdiri dari komponen yang dapat yang akan Anda gunakan untuk membuat produk digital Anda. Bahasa desain visual Anda terdiri dari empat kategori utama, dan Anda harus mempertimbangkan peran masing-masing elemen desain ini di setiap komponen pada layar.

Warna

umum dalam design system mencakup 1–3 warna utama yang mewakili merek Anda. Anda mungkin ingin memasukkan berbagai macam warna — warna yang dicampur dengan putih — dan corak — warna yang dicampur dengan hitam — untuk memberi desainer Anda beberapa pilihan lagi.

Tipografi

Kebanyakan design system hanya menyertakan 2 font: 1 font untuk heading dan body copy, dan font monospace untuk kode. Buat tetap sederhana untuk menghindari kelebihan beban dan membingungkan pengguna Anda. Jaga jumlah font tetap rendah; ini bukan hanya praktik terbaik desain tipografi, dan juga mencegah masalah kinerja oleh penggunaan font web yang berlebihan.

Sizing and spacing

Sistem yang Anda gunakan untuk spacing dan sizing terlihat paling baik bila Anda memiliki ritme dan keseimbangan. Di sisi lain dalam Skala berbasis 4 semakin populer sebagai skala yang direkomendasikan karena penggunaannya dalam standar iOS dan Android, format ukuran ICO, dan bahkan ukuran font browser standar.

Citra

Kunci sukses dengan citra dalam bahasa desain visual Anda adalah memiliki rencana dan berpegang teguh pada itu. Tetapkan pedoman untuk ilustrasi dan ikon, dan gunakan format gambar terbaik untuk situasi tersebut.

Membuat library UI

Terakhir Tidak seperti audit visual yang telah Anda lakukan (yang melihat kualitas visual elemen desain Anda) dan langkah dalam proses ini melihat komponen sebenarnya dari UI Anda. Kumpulkan semua bagian dan bagian UI Anda yang sedang terproduksi. Itu berarti setiap tombol, bentuk, modal, dan gambar. Gabungkan dan hapus yang tidak Anda butuhkan.

Dokumentasikan apa masing-masing komponen dan kapan menggunakannya.

Langkah ini penting. Dokumentasi dan standar adalah yang memisahkan library pola dari design system yang sebenarnya .

Jika Anda sudah bekerja dengan proyek yang ada, dan Anda harus menginventarisasi semua elemen UI terlebih dahulu, dan Anda mungkin akan menemukan banyak komponen UI yang hampir identik dengan perbedaan kecil. Kumpulkan semua komponen, kenali yang serupa ini dan ketika Anda mengelompokkan elemen dalam kategorinya, Anda harus memutuskan mana yang akan bersatu dan mana yang dihapus. Sederhanakan dan kurangi jumlah komponen.

Ketika Anda akan mengakhiri dengan kumpulan elemen yang singkat, susun dan kelompokkan dengan tujuannya. Gunakan berbagai untuk menguraikannya dengan mempertimbangkan Filosofi Desain Atom. Sehingga Anda juga dapat menerapkan Kit Design system mempercepat proses.