Dalam acara I / O 2014 lalu, Google kembali dengan kejutan-kejutan baru. Selain secara resmi merilis pembaruan Android baru dengan codename Lollipop, Google juga memperkenalkan bahasa desain baru yang segar, Material Design . Ini adalah sistem desain yang tidak hanya ditujukan untuk peningkatan antarmuka pengguna Lollipop baru, tetapi juga untuk seluruh perangkat dan lingkungan.
Desain Material memiliki beberapa fitur utama yang membedakannya antara tren desain lainnya dengan cara uniknya sendiri. Sama seperti namanya, itu terinspirasi oleh bahan nyata dan menggabungkannya menjadi satu sistem desain untuk menciptakan pengalaman pengguna yang ramping, intuitif, indah dan paling interaktif. Dalam posting ini, kita akan melihat apa yang ada di dalam Desain Material dan memberi Anda panduan cepat tentang bagaimana mengimplementasikannya. Dengan mengutip blog Google, saya akan mengatakan, "Ini Desain Material".
Pengantar
Desain Material adalah sistem desain terpadu, artinya dibuat untuk bekerja dengan semua perangkat dan platform saat ini. Dari tablet, smartphone ke desktop dan dari Android, iOs, Windows ke platform Web. Semua desain terlihat dan terasa harus sama di mana pun berada.
Prinsip Utama
Ada tiga prinsip utama yang membangun Desain Material. Ini adalah bagian paling mendasar dari apa yang ditawarkan Material secara umum.
- Materi adalah metafora . Pengembangan Bahan terinspirasi oleh studi tentang elemen sentuhan yang kita gunakan sehari-hari, kertas dan tinta . Itu membuat objek cahaya, permukaan dan gerakan lebih baik ketika berinteraksi satu sama lain.
- Berani, grafis, dan disengaja . Tipografi, kisi, ruang, skala, warna, dan penggunaan citra yang digunakan dalam dasar desain berbasis cetak membuat konten Material lebih baik.
- Gerak memberikan makna . Ini adalah salah satu hal yang paling terkenal. Dalam Materi, Anda harus memiliki gerakan yang bermakna dan sesuai, umpan balik halus & jelas dan transisi yang efisien & koheren.
Komponen
Desain Material memperhatikan setiap detail komponennya sehingga mereka dapat digunakan secara universal. Komponen-komponen ini akan membantu Anda membangun aplikasi dan situs yang luar biasa. Ada begitu banyak komponen yang disediakan oleh Material seperti tombol, sakelar, kartu, input teks, fab (tombol aksi mengambang), dialog, roti panggang, submenu, tab, dan banyak lagi. Masing-masing dari mereka memiliki aturan dan panduan mereka sendiri tentang cara membangunnya sehingga Anda tidak akan memiliki elemen yang tidak penting.
Pola Hal
Selain komponen, Material juga memberi Anda beberapa pola dasar untuk UI tambahan. Pola-pola ini akan meningkatkan UI yang Anda buat dengan komponen Material. Pola termasuk format data, laci navigasi, kesalahan, gerakan, teknik gulir, pencarian, pengaturan, memuat gambar, gesek untuk menyegarkan dan banyak lagi.
Warna Desain Bahan
Warna-warna dalam Material telah didesain sedemikian rupa sehingga tidak akan membuat Anda merasa tidak nyaman, aneh dan datar. Mengambil inspirasi dari lingkungan kita sehari-hari seperti rambu-rambu jalan, arsitektur kontemporer, pita tanda trotoar dan lapangan olahraga, Material Design menghadirkan warna-warna yang tak terduga dan bersemangat tinggi. Ada begitu banyak palet warna untuk dipilih yang memberi Anda kenyamanan lebih saat mengembangkan aplikasi atau situs. Anda juga dapat mengunduh contoh warna untuk penggunaan lokal seperti untuk koleksi Photoshop Anda.
Ikon Material
Jika Anda seorang pengembang Android, maka Anda harus terbiasa dengan beberapa paket ikon gratis yang disediakan Google. Mereka biasanya digunakan hanya untuk elemen utama dan actionbar. Sedangkan untuk sumber lain, kita harus mencari ikon lain seperti untuk folder, file, salin dan tempel, dll secara manual. Dalam Desain Material Google telah memperbaiki masalah dengan banyak paket ikon yang dapat Anda gunakan.
Masing-masing ikon telah melalui beberapa pendekatan desain yang juga menggunakan studi bahan taktil. Mereka mempertahankan prinsip Material juga, itu konsisten. Anda dapat mengunduh ikon-ikon ini di GitHub, mereka dilengkapi dengan beberapa opsi untuk penggunaan yang berbeda seperti untuk iOs, web, Android atau svg. Jika Anda menginginkan opsi yang lebih luas untuk penyesuaian yang mudah, Anda mungkin ingin melihat paket ikon Desain Bahan pada FlatIcon. Di dalam paket, Anda akan mendapatkan ikon ikon (SVG & EPS), versi PSD dan PNG.
Animasi Material
Ini adalah fitur Material yang paling saya sukai. Animasi dalam Materi sangat nyata dan intuitif. Setiap animasi memiliki transisi pewaktuan yang bermakna, konsisten, dan tepat. Demo gif yang ditunjukkan di bawah ini hanyalah salah satu dari animasi Material yang indah. Untuk memberikan interaksi yang menarik dan responsif, tim Google juga membuat animasi seperti riak air untuk efek input pengguna. Sebagian besar digunakan pada tombol dan kartu.
Fitur-fitur yang saya jelaskan hanyalah sebagian kecil dari apa yang ditawarkan Material Design. Untuk mempelajari lebih lanjut tentang dunia Material, cukup buka halaman dokumentasi.
Pelaksanaan
Secara default, Material Design hadir sebagai pembaruan UI baru untuk Android Lollipop. Semua pedoman yang telah diterapkan Material di dalamnya. Karena Material ditujukan untuk semua jenis lingkungan, mengimplementasikannya ke sistem lain tidak akan sulit. Dan terima kasih kepada komunitas, bahkan lebih mudah dengan beberapa alat yang mereka buat.
Ini adalah beberapa cara yang bisa Anda capai untuk mendapatkan Material Design di luar Android, web misalnya.
Menggunakan Kerangka CSS
Ini adalah cara termudah jika Anda ingin mengimplementasikan Desain Material di platform web. Dengan kerangka kerja, yang perlu Anda lakukan adalah menginisialisasi lalu menulis elemen yang Anda butuhkan. Ada banyak kerangka kerja yang bisa Anda gunakan seperti Materialize, Material UI atau Polymer. Pilihan pribadi saya jatuh pada Terwujud. Lebih mudah untuk menggunakan dan memahami dan memiliki dokumentasi yang bagus dengan demo yang bagus.
Mengikuti Pedoman
Jika Anda ingin mengimplementasikan Materi tanpa bantuan kerangka kerja dan lebih memilih untuk mengacaukan kode, maka Anda harus mengikuti panduan Material. Di sana, Anda akan menemukan semua yang harus dan tidak boleh dilakukan yang harus Anda perhatikan untuk mencapai prinsip Material. Anda akan melihat semua panduan dasar untuk membuat komponen, tata letak, animasi, warna, pola, dan lainnya. Anda mungkin ingin melihat beberapa daftar periksa Bahan untuk pengembangan yang lebih mudah.
Kesimpulan
Desain material adalah sistem desain yang hebat dan telah menjadi salah satu tren paling ditunggu tahun ini. Dalam beberapa bulan ke depan, kita dapat melihatnya di mana-mana. Lebih banyak aplikasi dan situs akan dipoles dengan pembaruan desain Google yang baru ini.
Dan dengan Material Design, Google telah membuktikan keunggulannya sebagai salah satu perusahaan teknologi terbesar. Itu membuat Google tidak hanya memimpin di bidang mesin pencari dan OS mobile tetapi juga di bidang desain. Sampai sekarang, belum ada perusahaan lain yang mengembangkan hal sebesar ini seperti yang dilakukan Google. Tapi pengalaman mengatakan, itu tidak akan bertahan lama. Kita tunggu saja perusahaan lain merespons Desain Material Google.
