Sistem desain: apa itu, mengapa, dan bagaimana cara membuatnya

Topik sistem desain, tampaknya, telah dipertimbangkan dari semua sisi: Anda dapat menemukan banyak artikel, postingan, laporan, dan materi lain tentang menciptakan sistem desain. Meskipun demikian, setiap orang yang menemukan istilah ini memiliki banyak pertanyaan. Kami akan mencoba menjawab secara detail yang utama:

• Apa itu sistem desain?
• Apa ini?

Apa itu sistem desain?

Sistem desain adalah struktur yang mencakup komponen visual, pustaka kode, dan pedoman penggunaan.

Seringkali, desainer pemula membuat kesalahan dengan menyederhanakan konsep dengan menganggap sistem desain hanya sebagai perangkat UI – sebuah dokumen yang berisi elemen antarmuka grafis, tipografi, dan warna.

Sistem desain terdiri dari tiga tingkatan:

A paket UI adalah bahasa visual suatu produk yang sistem desainnya dibuat. Ini adalah warna, font, ikon, tombol, poin, sakelar sakelar, bilah geser, gambar, animasi. Unsur-unsurnya bervariasi dan bergantung pada spesifikasi produk digital. Semuanya membantu menciptakan bagian antarmuka yang terlihat saat pengguna berinteraksi.

Kerangka kerja adalah pustaka kode yang ditulis untuk masing-masing elemen ini, serta plugin untuk animasi, tag, dan label untuk navigasi.

Panduan adalah seperangkat templat dan aturan untuk menggunakan elemen yang mengatur proses kerja. Berkat pedoman, seorang desainer tidak terlibat dalam tugas-tugas sederhana, tetapi seorang pengembang langsung terlibat.

Misalnya, pedoman menentukan parameter jendela pop-up di situs web: indentasi dari teks, lokasi dan ukuran judul dan isi teks, tempat untuk tombol, dan tampilan jendela dengan ukuran lebih kecil atau lebih kecil. lebih banyak teks.

Jenis sistem desain

Tidak ada klasifikasi tunggal, namun para ahli membedakan dua jenis sistem desain – sumber terbuka dan tertutup.

Dalam sistem sumber terbuka, perusahaan mana pun dapat menggunakan materi dan mengadaptasinya untuk proyek mereka – mengubah warna tombol, font, dan ikon. Misalnya saja pada Ant Design, Human Interface Guidelines, dan sistem Material Design.

Sistem desain sumber tertutup biasanya dibuat untuk perusahaan atau produk tertentu. Ini adalah materi yang sepenuhnya tertutup, hanya dapat diakses oleh karyawan, atau terbuka sebagian.

Cara membuat sistem desain

Pengembangan sistem desain didasarkan pada prinsip desain atom. Desain atom adalah teknik yang mencakup lima tingkat elemen desain: atom, molekul, organisme, pola, dan halaman.

Struktur sistem desain:

• Atom adalah komponen terkecil: tombol, ikon, kolom input, dan font.
• Molekul adalah kombinasi beberapa elemen sederhana: dua tombol, judul dan baris masukan, bilah notifikasi, kotak centang, dan teks.
• Organisme adalah komponen lengkap: header situs, formulir otorisasi, kartu produk, dan spanduk notifikasi.
• template – tata letak halaman tanpa konten: menu, tampilan situs.
• Pages adalah halaman yang berisi konten.

Algoritma umumnya terlihat seperti ini:

• Pilih warna, dan font, atur grid modular, dan pilih animasi, gambar, dan suara.
• Buat elemen antarmuka dasar.
• Kombinasi dan tata letak elemen desain.
• Buat daftar elemen beserta aturannya. Dalam pedoman, tentukan elemen apa, di mana elemen tersebut digunakan, dan tugas apa yang diselesaikannya.

Biasanya, sistem desain tidak dibuat dari awal, tetapi dibangun berdasarkan materi yang sudah dikembangkan: perangkat UI, pedoman, atau buku merek.

Mengapa Anda memerlukan sistem desain?

Seperti halnya setiap produk TI, penting untuk menjawab pertanyaan, “Untuk apa sistem desain?” Atau, seperti komentar beberapa rekan di toko, “terus kenapa”?

Jawaban atas pertanyaan ini akan membantu Anda memahami nilai produk. Sebagian sudah terlihat dari apa yang kami uraikan di atas. Namun mari kita uraikan dan lihat lebih dalam.

Otomatisasi

Otomatisasi memberikan manfaat yang paling nyata. Sistem desain akan membantu Anda mengotomatiskan operasi, memberi Anda waktu untuk melakukan tugas lain.

Iteratif

Mampu mewarisi dan secara otomatis menerapkan modifikasi pada elemen sistem desain adalah alat yang berharga bagi tim produk. Anda dapat dengan cepat membuat perubahan kosmetik atau bahkan perubahan besar di satu lokasi. Dengan cara ini, Anda selalu dapat menyempurnakan produk.

Konsistensi

Konsistensi menyatakan bahwa objek dan entitas dalam suatu produk yang menjalankan fungsi yang sama harus bertujuan pada kesatuan dan kesamaan.

Saat kami memanfaatkan fitur-fitur serupa dalam suatu produk, fitur-fitur tersebut menjadi familier dan nyaman: kami secara naluriah memahami cara kerja dan tampilan tombol, serta di mana posisinya.

Kami berharap semua orang mempelajari sesuatu yang berharga dari artikel ini. Dan kami sekali lagi yakin bahwa mengerjakan sebuah artikel menyusun pengetahuan dan memotivasi studi tambahan.