Menjadi seorang insinyur perangkat lunak dan menavigasi melintasi figma mengejek mendengar kata-kata seperti desain material membuat saya bertanya-tanya apa itu?

Googling sederhana memberikan definisi berikut

Material adalah sistem desain yang dibuat oleh Google untuk membantu tim membangun pengalaman digital berkualitas tinggi untuk Android, iOS, Flutter, dan web .

Ya, saya tahu itu dibuat oleh google dan Anda mengatakan itu adalah sistem desain, tetapi apa sebenarnya sistem desain itu.

Menggulir situs web materi secara membabi buta membuat saya pusing, oleh karena itu saya berpikir untuk memulai pencarian ini dengan memahami sistem desain secara sederhana dengan mengajukan pertanyaan sederhana.

Semoga bacaan kecil ini membantu Anda mengungkap sistem desain sehingga Anda tidak kesulitan memahami jargon yang dipublikasikan di materi atau situs web lain.

Apa itu sistem desain?

Sistem desain adalah kumpulan komponen, dan standar yang memandu komponen ini tentang bagaimana mereka harus bekerja sama dalam lingkungan yang konsisten.

Dengan kata sederhana, itu adalah kumpulan komponen UI bersama dengan aturan yang menentukan bagaimana mereka harus digunakan saat mendesain produk Anda.

Tetapi mengapa menggunakan sistem desain?

Menggunakan sistem desain memiliki keuntungan sebagai berikut:

Konsistensi :
Menggunakan sistem desain memungkinkan kita untuk mencapai konsistensi berikut:

• Konsistensi visual: Meningkatkan kemampuan pengguna untuk mempelajari suatu produk.
• Konsistensi fungsional: Memastikan pengguna mendapatkan hasil yang diharapkan saat menggunakan aplikasi.
• Konsistensi internal: Penambahan komponen baru konsisten dengan komponen yang ada.
• Konsistensi eksternal: Produk ini konsisten di berbagai platform

Komponen yang digabungkan dengan pedoman mendorong penggunaan kembali dan menghemat waktu pengembangan karena pengembang tidak perlu membuat komponen dari awal.

Apa struktur sistem desain?

Sebuah sistem desain terdiri dari 2 komponen:

Perpustakaan Pola

1. Memegang berbagai elemen yang tersedia untuk digunakan dalam lingkungan sistem desain. Contoh: tombol, kolom input, menu, dll
2. Setiap komponen berisi bidang-bidang berikut:
3. Judul : Nama komponen
4. Description : Penjelasan tentang apa yang dilakukan oleh komponen tersebut
5. Penggunaan dan Prinsip: Aturan yang menentukan kapan dan bagaimana menggunakan komponen tertentu dan dalam konteks apa.
6. Variasi : Variasi komponen dalam hal tata letak, ukuran, dll
7. Kode : Potongan kode
1. Kebijakan yang mengatur bagaimana setiap bagian dari sistem desain harus berperilaku sendiri, dan sesuai dengan elemen sistem lainnya.
2. Ini termasuk yang berikut:
3. Prinsip desain
4. Pedoman merek
5. Warna
6. Tipografi
7. Ikonografi