10 Cuplikan Kode Desain Material yang Berguna

Kegilaan desain material sedang melanda dunia web. Setiap bulan saya menemukan situs baru yang berjalan dengan gaya material menggunakan kerangka kerja atau kit UI khusus.

Tapi ini bukan hal yang buruk, justru sebaliknya! Ini adalah cara untuk menyederhanakan proses desain Anda dengan bekerja dengan tren terbukti yang diakui Google sebagai bahasa desain pilihan mereka sendiri.

Jika Anda menyukai gaya desain material, maka cuplikan kode ini cocok untuk Anda. Ini hanya 10 favorit saya yang menawarkan berbagai desain dan komponen untuk dipilih.

Tabel Responsif

Berikut cuplikan desain material dengan sentuhan unik. Tabel responsif yang dibuat oleh Sergey Kupletsky ini sebenarnya menampung tautan lain ke cuplikan desain material. Cukup keren!

Ini secara alami dibuat menggunakan teknik desain material juga sehingga tabel harus pas dengan tata letak Anda sendiri. Tetapi bagian terberat dari desain seluler adalah membuat tabel yang berfungsi pada layar yang lebih kecil.

Saya pikir metode ini adalah salah satu cara terbaik untuk menanganinya. Kode Anda juga tetap bersih yang membuatnya sangat mudah untuk dikodekan, dibersihkan, dan dikelola terlepas dari ukuran tabel Anda.

Transisi UI Kartu

Pengembang Ivan Villamil membuat desain UI kartu yang sangat unik ini dengan beberapa animasi yang cukup gila.

Lihat halaman dan coba klik salah satu kartu. Anda akan mendapatkan efek animasi unik di mana konten kartu bergerak di atas wadah dan muncul dalam tampilan. Ini seperti sesuatu yang Anda harapkan untuk ditemukan di aplikasi seluler, tetapi diangkut ke web!

Efek animasinya sempurna, dan menunjukkan seberapa banyak yang dapat Anda lakukan di web hari ini. Belum lagi gaya materialnya tepat untuk UI web/seluler kombo ini.

Login Ringkas

Saya telah melihat beberapa formulir login yang sangat keren selama bertahun-tahun sebagai seorang desainer. Tapi desain gila ini mungkin hanya mengambil kue untuk fitur interaktif dan gaya yang unik.

Saat Anda mengklik ikon merah muda cerah di sudut kanan atas, Anda akan mendapatkan bidang pendaftaran yang muncul di atas halaman. Ini sangat sangat unik, dan itu menciptakan antarmuka yang benar-benar dapat digunakan.

Jadi apa tangkapannya? Ini memang menggunakan banyak JavaScript, jadi ini bukan solusi paling rapi dari segi kode. Namun tetap merupakan contoh desain yang sangat baik dengan fitur yang ringkas.

Isi Animasi

Scott Kellum mengembangkan tata letak kartu materi menarik yang otomatis terisi setelah halaman dimuat. Ini berkembang dalam kisi di mana Anda dapat mengarahkan setiap kartu untuk melihat fitur desain material beraksi.

Saya tidak bisa mengatakan betapa bergunanya ini dalam proyek langsung atau seberapa banyak yang bisa Anda dapatkan darinya. Tapi ini adalah cuplikan menyenangkan yang menunjukkan desain off-grid untuk web, memadukan sentuhan rasa material dengan animasi melayang.

Tombol Bahan BS4

Dari sekian banyak template Bootstrap yang tersedia online, Anda sebaiknya percaya beberapa di antaranya menggunakan desain material. Dan pena ini menampilkan semua hal keren yang dapat Anda lakukan dengan desain material di Bootstrap 4.

Sungguh ini hanyalah kumpulan tombol yang dibenahi kembali ke dalam bahasa material Google. Tetapi semuanya berjalan pada kerangka kerja BS4 terbaru sehingga Anda dapat menambahkannya ke halaman mana pun yang didukung Bootstrap.

Jika Anda serius tentang Bootstrap, lihat rilis terbaru untuk mengetahui pendapat Anda. Ini berfungsi dengan baik sebagai dasar untuk apa pun, dan itu terutama berlaku untuk situs material.

Desain Bahan Pilih Menu

Menu pilihan dropdown adalah pokok dalam desain formulir. Mereka membiarkan pengguna memilih dari beberapa jawaban tentang topik yang relevan seperti negara bagian, negara, bahasa, dan sebagainya.

Pemilihan desain material ini meningkatkan menu pemilihan HTML umum ke tingkat yang sama sekali baru.

Itu tidak bergantung pada gaya dokumen khas untuk memilih opsi. Sebagai gantinya, ini menggunakan daftar tidak berurutan dengan jQuery yang menangani proses animasi & pemilihan. Dan saya harus mengatakan, hal ini memaku gaya material.

Bahan Bayangan

Google benar-benar mendorong bayangan untuk kedalaman dalam dokumentasi materi mereka. Itulah yang akan Anda lihat di pena ini di mana semua lingkaran memiliki efek bayangan jatuh yang berbeda.

Dengan bayangan, Anda dapat menetapkan hierarki ke elemen halaman sehingga beberapa muncul di atas, yang lain lebih rendah. Ini menciptakan ilusi ruang di layar yang sangat berguna pada layar sentuh.

Efek yang cukup keren dan tentu saja sesuatu yang dapat Anda salin dalam proyek Anda sendiri.

UI Kartu Cuaca

Pengembang Thomas Vallez membuat kartu cuaca yang luar biasa ini yang berjalan pada HTML dan CSS murni. Ini menggunakan efek fade-in sederhana pada pemuatan halaman tetapi keindahan sebenarnya di sini adalah gaya desain material.

Semuanya, mulai dari warna hingga font dan bahkan ikon cuaca, semuanya mengandalkan gaya material alami.

Anda dapat mengambil template ini dan menggunakannya untuk hampir semua jenis tata letak kartu. Ini fenomenal dan tentu saja salah satu proyek yang lebih mudah dalam daftar ini.

Tab Bahan

Inilah proyek menarik yang dibangun di atas ide tab desain material. Michael Richins membuat pena ini dengan beberapa JavaScript dasar dan beberapa pengetahuan tentang pedoman desain Google.

Tab berfungsi seperti yang Anda harapkan pada perangkat serupa lainnya seperti ponsel cerdas atau tablet Android. Belum lagi hal ini berjalan pada JavaScript vanilla biasa , jadi Anda tidak perlu khawatir tentang jQuery atau hal-hal itu.

Efek yang cukup keren jika Anda mencari tab di situs Anda. Pastikan Anda menguji gaya untuk melihat apakah mereka menyatu secara alami dengan halaman Anda.

Klik Respons Animasi

Pengembang Emmanuel Pilande membuat efek respons keren ini sebagai cara sederhana untuk mereplikasi interaksi mikro material Google.

Klik di mana saja pada kartu materi untuk melihat efeknya. Dan Anda dapat menerapkan ini ke hampir semua hal mulai dari tombol hingga wadah halaman atau bidang input.

Itu bergantung pada beberapa JavaScript, tetapi juga mudah untuk ditambahkan ke proyek apa pun. Jadi, jika Anda menginginkan tampilan material au naturale , ini adalah cuplikan yang bagus untuk disimpan.