15 Kerangka Desain Material Gratis untuk Pengembang 2021

Desain Material Google telah melampaui apa yang diperkirakan banyak desainer pada awalnya dan sekarang menjadi standar desain yang umum digunakan untuk mengembangkan situs web seluler, aplikasi Android, dan juga perangkat lunak desktop. Google bahkan melangkah lebih jauh dengan mengimplementasikan aplikasi desain material asli ke dalam pembuat situs webnya sendiri; yang dulu terlihat cukup jelek dan lamban baru-baru ini, tetapi sekarang mampu menghasilkan situs web yang sangat indah.

Anda tidak boleh membabi buta mengikuti pedoman karena seseorang mengatakan itu adalah hal yang benar untuk dilakukan. Penilaian Anda sendiri sebagai seorang desainer adalah aset terbaik Anda untuk membuat proyek nyata dan unik yang menonjol. Ambil dari desain material apa yang Anda rasa akan melengkapi ideologi Anda, lalu buat peningkatan dari sana. Anda dapat menggunakan pilihan pribadi Anda sendiri untuk lebih menyempurnakan pengalaman desain. Google tentu memiliki kemampuan untuk mendiskusikan dan meneliti elemen Pengalaman Pengguna dan Antarmuka Pengguna kelas dunia, tetapi ketika Anda memikirkannya — proyek Anda unik, demografi dan jenis audiens Anda unik, dan terkadang Anda harus mengikuti langkah-langkah itu untuk buat desain yang menonjolkan nilai terbaik dari bisnis atau proyek yang sedang Anda bangun.

Kerangka kerja yang akan Anda pelajari lebih lanjut adalah solusi sempurna untuk mencoba Desain Material. Mungkin cara terbaik untuk melakukannya adalah dengan membuat proyek sampingan yang dapat Anda retas selama akhir pekan, cara ini tidak mengganggu Anda dari alur kerja utama Anda, dan kemudian jika Anda merasa ada beberapa koneksi di sana, mulailah membuat peta jalan tentang bagaimana Anda dapat menerapkan desain material di aplikasi/situs web Anda di masa mendatang. Jika kami melewatkan kerangka kerja penting/berguna untuk pengumpulan ini, beri tahu kami di komentar dan kami akan menanganinya.

Mewujudkan

Materialize adalah kerangka kerja pengembangan web front-end lengkap berdasarkan spesifikasi desain material, ini adalah salah satu kerangka kerja desain material terkemuka karena menyediakan inti yang cepat, terpusat, dan mudah dinavigasi untuk membuat prototipe situs web modern dengan cepat. Kerangka ini mengambil apa yang ditawarkan desain material dan dengan rapi menyatukannya ke dalam satu kerangka kerja yang membuat semua elemen dapat diakses dengan cepat dan tanpa keributan. Komponen berbasis umpan balik akan meningkatkan pengalaman pengguna Anda secara drastis karena pengguna dapat memahami makna elemen desain individual dengan lebih baik.

Dan karena ini adalah kerangka kerja, Anda akan mengharapkan untuk melihat beberapa fungsionalitas CSS seperti kisi-kisi yang tergabung, dan itu benar dalam kasus ini, Materialize memberi Anda warna, kisi, pembantu, manajemen media, file sass, manajemen tabel, pengoptimalan tipografi dan pengoptimalan bayangan elemen sehingga Anda dapat dengan cepat membuat kerangka dari apa yang ingin Anda bangun, lalu menggunakan komponen MD yang dioptimalkan untuk menghidupkan desain Anda.

Bahan Cepat

Apakah Anda seorang pengembang Swift yang aktif, tetapi tidak yakin bagaimana Anda dapat menerapkan desain material di aplikasi Swift Anda? Materi dari CosmicMind menangani semua itu, dengan mudah. Dengan kerangka/pustaka Bahan Swift ini Anda dapat menggunakan komponen MD dan memiliki konfigurasi penuh untuk mengaksesnya, tersedia tata letak kisi yang biasanya diperlukan oleh antarmuka aplikasi seluler yang kompleks, Anda mendapatkan lapisan dan tampilan standar yang dapat digunakan untuk membuat UI unik komponen. Fitur lain termasuk kemampuan untuk mengontrol navigasi, ikon desain material, tombol, kartu, sakelar, dan sistem menu untuk membuat menu navigasi animasi. Swift Material sebenarnya menyebut dirinya sebagai kerangka kerja animasi selain sebagai kerangka kerja aplikasi seluler tradisional, dan ia melakukan pekerjaan yang luar biasa dalam memungkinkan pengembang untuk membangun tata letak yang bergantung pada animasi yang halus untuk memperkaya pengalaman pengguna.

Kerangka Bahan

Kerangka Material membuatnya sangat mudah untuk memasukkan desain material ke dalam desain Anda yang sudah ada. Ini adalah kerangka kerja yang sepenuhnya responsif berdasarkan CSS murni. Yang perlu Anda lakukan hanyalah melampirkan file stylesheet CSS ke folder gaya situs web utama Anda dan Anda siap untuk pergi. Kerangka kerja ini menawarkan pilihan skema warna gelap dan terang yang dapat Anda terapkan melalui kelas CSS tertentu, atau juga menggunakan JavaScript untuk mengatur tema yang ingin Anda gunakan.

Efek animasi yang berbeda dapat digunakan seperti menambahkan riak ke formulir yang ada untuk menciptakan pengalaman pengguna yang lebih bermakna. Tata letak tipografi dapat disesuaikan dengan keinginan Anda, dan Anda dapat menyesuaikan tampilan konten karena paling sesuai dengan elemen desain Anda yang lain. Anda dapat mengubah gaya yang ada untuk menggunakan spesifikasi desain untuk tombol, input, bilah alat, ikon, daftar, menu, desain kartu, dan hal-hal seperti sakelar. Tidak sulit untuk menjalankannya, dan berpotensi menjadi cara yang bagus bagi Anda untuk menguji apakah pengguna Anda akan menghargai desain material sama sekali.

Esensi

Essence menggabungkan dua hal: Desain Material & React.js — jika Anda mencari kinerja web yang cepat dengan spesifikasi desain yang optimal, akan sulit untuk mencocokkan apa yang ditawarkan Essence untuk semua pengembang. Semua komponen UI yang ditawarkan oleh desain material dibangun kembali melalui React.js jika Anda memutuskan untuk memilih Essence! Hasil akhirnya adalah pilihan elemen antarmuka pengguna yang menakjubkan yang akan menciptakan pengalaman pengguna yang unik. Essence sudah tersedia di NPM sehingga Anda dapat menginstal dan memulai dengan perintah instal sederhana. Komponen perlu diinstal dan digunakan secara terpisah, tetapi semuanya berjalan di bawah folder yang sama.

UI Onsen

Onsen UI memiliki banyak reputasi sebagai salah satu kerangka kerja hybrid terbaik untuk membangun aplikasi seluler menggunakan HTML5. Platform open-source ini benar-benar gratis dan selalu, pemahaman modern tentang desain yang baik telah membantu pengembang Onsen UI untuk membuat elemen antarmuka pengguna yang pada akhirnya membangun pengalaman pengguna yang tak tertandingi. Sebagai kerangka kerja agnostik, Anda dapat menggunakan Onsen dengan kerangka kerja lain di luar sana dan tidak khawatir tentang tabrakan kode atau masalah apa pun. Ini juga yang terjadi di Onsen UI V2 yang baru — komponen-komponen Desain Material, Angular 2, dan React terintegrasi untuk lebih memperkaya pengalaman. Saat ini masih menjadi kandidat rilis, tetapi sudah digunakan oleh ribuan orang. Jika Anda bermaksud meluncurkan produk seluler atau masuk ke pengembangan perangkat lunak seluler, mempelajari cara menggunakan UI Onsen dapat menambah daya ungkit ekstra pada resume Anda.

Bahan CSS

Material CSS adalah alternatif ringan yang menggunakan atribut untuk mendefinisikan gaya, alih-alih menggunakan kelas. Ini membuat alur kerja pengembangan lebih mudah dan tentu saja, membuatnya lebih sederhana. Karena sifatnya yang minimal, Anda benar-benar akan bermain dengan komponen itu sendiri sebagian besar, termasuk warna, tipografi, bayangan, riak, ikon, input, formulir, tombol, media, kartu, panel, bilah alat, daftar, halaman, dan pembantu. Material CSS secara menyeluruh menjelaskan setiap komponen spesifik dalam dokumentasi tentang bagaimana Anda dapat menggunakannya.

Desain Bahan Lite

Material Design Lite satu lagi solusi ringan untuk mengoptimalkan desain Anda dengan spesifikasi material. Mudah bekerja di situs web yang mengandalkan konten statis, tetapi juga tidak akan menjadi masalah untuk diterapkan di situs dinamis. Ini adalah pustaka CSS independen yang tidak memerlukan sumber daya eksternal apa pun untuk berfungsi. Dengan pengoptimalan multi-perangkat bawaan, itu secara alami akan menurunkan versi jika versi browser yang lebih lama mencoba mengakses situs. Anda dapat memilih antara templat seperti templat blog untuk memulai blog Anda atau menggunakan tema versi ringan yang digunakan situs web resmi Android, ada juga templat untuk dasbor untuk diterapkan di belakang situs web Anda, portofolio modern untuk menunjukkan karya terbaik Anda, dan template teks yang dioptimalkan untuk halaman konten. Semua hal lain seperti komponen dan gaya adalah apa yang sudah Anda harapkan dari kerangka kerja yang menggunakan desain material.

Permukaan

Tampaknya banyak pengembang menggunakan kemampuan mereka untuk membuat kerangka kerja sendiri, Surface adalah kerangka kerja ringan lainnya (dalam hal ini sangat ringan) yang akhirnya berukuran sekitar 6kb ketika diperkecil. Ini juga didasarkan pada CSS murni sehingga Anda tidak perlu menggunakan JavaScript sama sekali. Mulailah dengan masuk ke dokumentasi Surface dan pelajari tentang cara kerja grid Surface, sehingga Anda memiliki waktu yang lebih mudah untuk mendapatkan semua komponen di papan tulis. Komponen seperti animasi, peringatan, ubin, elemen yang dapat dilipat, footer, modals, media, utilitas, dan tooltips. Pengembang membuat ini semua terorganisir dengan rapi dan lebih mudah diatur daripada menghitung hingga 1 dari 100 mundur.

Bahan-UI

Material-UI memberi Anda pilihan Komponen React.js yang telah dikustomisasi dari spesifikasi Desain Material. Ada satu hal terpenting tentang Material-UI dan ide untuk menggunakannya. Pertama-tama Anda harus belajar sedikit lebih banyak tentang React.js dan bagaimana ia berinteraksi dengan web dan seluler secara umum. Karena komponennya didasarkan pada React, akan lebih bijaksana untuk memahami bagaimana React terlihat dalam pengembangan web dan jenis peran yang dimainkannya di dalamnya. Tim Material-UI telah berbaik hati untuk menyediakan pilihan template juga, gelap dan terang, dan keduanya memberikan contoh bagaimana komponen dan elemen yang berbeda masuk ke dalam grid.

Beberapa komponen yang sebelumnya tidak terlihat termasuk bilah aplikasi, pelengkapan otomatis untuk formulir, avatar, lencana, chip, datepicker, kotak dialog, pembagi, laci menu, daftar kisi, bidang teks, pemilih waktu, dan berbagai jenis bilah alat; dan ini hanya beberapa komponen yang tersedia dalam kerangka kerja ini.

MUI

MUI adalah kerangka kerja CSS ringan yang kaya yang membumbui desain Anda dengan desain material Google. Ini memberi penggunanya berbagai jenis tata letak demo: blog, halaman arahan, menu slider, dan kotak berlangganan buletin HTML. Dari demo ini saja, pengembang dapat mempelajari seberapa efisien desain material, dan betapa mudahnya menerapkannya. MUI juga bekerja dengan kerangka kerja React.js dan Angular.js sehingga Anda dapat menghubungkan aplikasi Anda dengan materi tanpa kerumitan. Ada juga komponen web individual yang berbeda, semuanya siap digunakan.

Bahan Sudut

Angular Material adalah rilis resmi Material UI untuk proyek Angular 2. Anda memiliki halaman dokumentasi yang menyeluruh dan ringkas. Ini dapat menunjukkan kepada Anda betapa indahnya tampilan aplikasi Anda saat dilengkapi dengan antarmuka pengguna Material. Semua komponen dilengkapi dengan contoh mendalam dan opsi tambahan. Dengan ini, Anda bisa mendapatkan hasil maksimal dari apa yang ditawarkan kerangka kerja ini. Dokumentasi API disediakan untuk pengembang berpengalaman yang ingin membawa materi ke tingkat berikutnya.

Desain Material untuk Bootstrap

Bootstrap tidak diragukan lagi menjadi favorit bagi banyak pengembang front-end dunia. Bootstrap memberdayakan jutaan situs web hari ini, dan jutaan lainnya akan datang. Desain Material untuk Bootstrap adalah tema Bootstrap efisien yang menggunakan desain material untuk menciptakan pengalaman desain yang spektakuler. Anda dapat memilih dari semua elemen Bootstrap yang ada dan paling favorit Anda. Juga, Anda dapat mengoptimalkannya dengan UI desain material, seberapa hebat itu? Mungkin perlu sedikit mengutak-atik untuk menjalankannya bagi mereka yang belum pernah menggunakan NPM sebelumnya. Dokumentasi tampaknya menjelaskan proses start-up dengan cukup baik.

LumX

LumX adalah kerangka kerja front-end responsif pertama berdasarkan spesifikasi AngularJS & Google Material Design. Ini menyediakan Kerangka CSS lengkap yang dibangun dengan Sass dan banyak komponen AngularJS. Untuk menggunakan LumX, Anda perlu mengetahui cara menggunakan Bower untuk menginstal perpustakaan. Jika Anda tidak terbiasa dengan Bower, alternatif Anda yang lain adalah mengunduh semua dependensi satu per satu. Itu termasuk Angular, jQuery, Velocity, Moment, Bourbon, dan Material Icons. LumX juga menggunakan Flexbox untuk membuat sistem grid standar dan responsif menggunakan properti Flexbox. Komponen LumX mencakup semua area dan bagian dari desain tata letak situs web tradisional.

Bahan Ionik

Ionic adalah kerangka kerja hybrid terbaik untuk membangun aplikasi seluler HTML5. Dan sekarang semua kekuatan luar biasa itu mungkin untuk dibawa ke aplikasi Anda dengan infus Desain Material! Ionic memberi Anda tata letak yang sudah dibuat untuk aplikasi Anda, termasuk umpan aktivitas, dan kategori. Ini juga dapat membantu Anda dengan daftar fitur, galeri, daftar umum, halaman login, dan halaman profil. Anda dapat dengan cepat mem-bootstrap demo antarmuka aplikasi umum Anda dan kemudian membangun perangkat lunak Anda di atasnya. Ionic Material dapat ditema dengan mulus. Bahan Ionic terutama merupakan perpustakaan perilaku dan menggunakan konvensi penamaan warna dan kelas elemen Ionic. Dirinci hingga piksel spesifikasi, Ionic Material bertujuan mengikuti pedoman Google untuk gerakan, tinta, dan kedalaman. Saat komponen dan tata letak baru ditambahkan ke pustaka, Anda telah memastikan kualitas perhatian pada spesifikasi desain material.

phonon

Phonon Framework memberikan solusi ringkas untuk membangun aplikasi seluler HTML5 menggunakan teknologi kerangka kerja hybrid. Sisi kuat Phono adalah intuisinya yang bagus untuk menskalakan aplikasi Anda dengan cepat di tempat yang Anda inginkan. Ini juga merupakan perpustakaan antarmuka pengguna yang memberi Anda alat cepat untuk membuat antarmuka dengan cepat. Phonon berukuran kira-kira 24kb saat diperkecil dan dioptimalkan sepenuhnya. Ini adalah salah satu alasan utama pengembang seluler menggunakan Phonon. Itu jauh di bawah apa yang Anda lihat dalam kerangka kerja seperti Ionic atau Onsen!