Penggunaan Material UI Pada Design Web Dan Aplikasi

Pengertian Material UI

Material UI merupakan bahasa desain berorientasi pada website maupun aplikasi yang dibuat untuk mendukung pengalaman pengguna pada layar melalui fitur kaya isyarat dan gerakan alami yang meniru objek dunia nyata.Desainer mengoptimalkan pengalaman pengguna dengan efek 3D,pencahayaan realistis dan fitur animasi dalam GUI yang mendalam dan konsisten.

Tujuan Pembuatan Material UI

• Untuk Membuat : Material UI dibuat melalui bahasa visual yang menggabungkan beberapa prinsip desain yang sesuai sehingga menghasilkan inovasi.
• Untuk Menyatukan : Membuat pengembangan sistem yang bermaksud untuk menyatukan user experience (UX) yang ada diseluruh platform maupun perangkat.
• Untuk Menyesuaikan : Tidak hanya berorientasi pada satu bahasa visual material UI digunakan untuk memperluas bahasa visual dan memberikan kefleksibelan dalam mengembangkan inovasi dan ekspresi.

Magical Dan Predictable Paradox Yang Diperlukan

Untuk menerapkan material user interface secara efektif,kalian perlu memahami prinsip berikut ini :

Material Metafora

Mengambil konsep pada taktik realitas dan sesuai user experience :

• Desain menawarkan atribut kepada pengguna yang mereka kenal sebagai harga.Fitur real world yang langsung dapat dikenali seperti tombol harus secara instan membiarkan pengguna melihat apa yang harus dilakukan.
• Permukaan dan lapisan harus melengkapi ini dengan menawarkan petunjuk.Gunakan cahaya realistis/bayangan untuk membagi ruang desain dan mengungkapkan bagian yang bergerak.
• Gunakan desain adaptif memastikan hierarki,warna,ikon dan proporsi spasial konsisten disemua perangkat melalui pemilihan versi adaptif.

Elemen yang Dipilih Dengan Baik Menambah Makna

• Buat desain dengan berani sehingga pengguna dapat melihat hierarki secara instan dan fokus serta menggambar makna yang sesuai.
• Penggunaan warna dan ruang putih yang luar biasa,citra yang kuat dan tipografi besar di layar membantu pengguna menjadi tenggelam dalam pengalaman.
• Desain untuk mendorong pengguna untuk bertindak dan menunjukkan fungsionalitas dengan menekankan ikon dan permukaan sebagai isyarat.

Membuat Pesan Dengan Gerakan

• Taruh pengguna pada kontrol dengan menunjukkan perubahan yang dihasilkan langsung dari tindakan mereka.
• Buat animasi dimainkan dalam satu lingkungan atau panggung dalam gerakan yang mengalir terus menerus.
• Pastikan responsnya jelas,tetapi halus tidak ada gerakan yang tersentak atau tidak terduga.

Framework Material User Interface Pada Desain Web Dan Aplikasi

Banyak situs web dan aplikasi telah menganut pedoman material desain untuk web interface mereka dengan menggunakan framework material desain dan trennya terus meningkat.Google membawa keseragaman pada UI (user interface design) pada semua platform yang mencakup situs web,aplikasi dan platform android itu sendiri.Google memulai dengan proyek polimer yang mencakup material desain UI diseluruh komponen webnya.Project polymer memainkan peran penting dalam pengembangan material desain dan dalam memamerkan konsep itu untuk web.

Dalam upaya membawa material desain kepada user interface web,banyak framework web UI pihak ketiga (bukan dari google) juga muncul dan mendapatkan popularitas.Beberapa framework ini adalah tema berdasarkan framework web yang populer dan terkenal seperti bootstrap  dan foundation.Banyak lainnya dibangun untuk mendukung dan membawa tampilan materi kepada kerangka javascript populer seperti react,angular dan vuejs .

MD Bootsrap

MD Bootstrap  (MDB) : kit UI desain material yang luas yang tersedia untuk banyak versi JavaScript seperti React, VueJS, Angular, dan JQuery. Versi gratis dari kit UI ini menawarkan 400+ elemen UI material, 600+ ikon materi, 70+ animasi CSS beserta templat gratis untuk membangun situs web material.Setelah memutakhirkan ke versi premium,mendapatkan akses ke 2000+ komponen UI,templat premium serta dukungan premium dari pengembang.

Kit Material

Material kit : Kit UI bootstrap gratis yang dibuat oleh creative tim dengan desain yang terinspirasi oleh material desain google. Ini memiliki implementasi konsep material yang sangat baik dan menyediakan komponen desain material yang mudah digunakan dan indah.Bersamaan dengan penataan kembali elemen bootstrap dengan prinsip desain bahan,kalian akan menemukan tiga halaman contoh yang sepenuhnya dikodekan membantu dalam merancang proyek web kalian sendiri. 

Material Design Light

Material design light (MDL) : kerangka kerja CSS dikembangkan dan dikelola oleh google.MDL Memungkinkan kalian menambahkan tampilan dan nuansa desain material kepada situs web kalian tanpa bergantung pada framework JavaScript eksternal.

Ini bertujuan untuk mengoptimalkan penggunaan lintas perangkat dan dengan mudah menurunkan jika browser lambat.MDL menawarkan banyak komponen dan template yang siap digunakan untuk membantu kalian memulai dengan cepat.Serta dapat menggunakan utilitas penyesuai untuk memilih warna desain material pilihan.Kalian juga dapat menemukan MDL pada github.

Material Components For The Web

Material components for the web (MDC-Web) : MDC-Web dikembangkan oleh tim inti engineer dan perancang UX pada google.Komponen ini memungkinkan developer mengeksekusi material user interface desain dan membangun proyek web yang fungsional.Material components for the web adalah penerus material design lite (MDL) yang disebutkan diatas dan menawarkan komponen siap produksi,kinerja terbaik dikelasnya dan kepatuhan terhadap pedoman desain material bersama dengan integrasi tanpa batas dengan kerangka kerja JS dan perpustakaan lainnya.

Materialize

Materialize : kerangka front-end responsif modern yang didasarkan pada material user interface desain.Untuk digunakan dalam proyek web kalian,ini menyediakan opsi untuk CSS dan juga sumber file SCSS.Bersama dengan JavaScript,ikon desain Material dan font Roboto.Komponen yang disertakan yakni komponen dasar seperti kisi,formulir,tombol,navbar dan card.

Material UI

Material UI : kerangka CSS dan satu set komponen bereaksi yang mengimplementasikan material desain google.Material UI memberikan dukungan untuk komponen seperti tombol,dialog,menu dropwdown,tombol ikon,input,Switch,Toolbar dan banyak lagi.

BMD Desain Bootstrap + Material

BMD merupakan skin material design premium untuk bootstrap bersama dengan banyak komponen tambahan. Ia menawarkan palet warna dan komponen material desain seperti pemintal,floating action button (FAB),tab nav,material desain card layout, toast message dan menu sidebar. Ini juga memiliki material animasi dan integrasi dengan ikon material original.Ini juga termasuk template untuk pemula.

Material Foundation

Material Foundation : versi material desain UI foundation untuk situs oleh zurb.Merupakan proyek berlisensi MIT yang tersedia pada github dan menawarkan semua komponen foundation dalam material desain UI bersama dengan komponen material tambahan seperti FAB.

Material Angular

Material angular : menawarkan komponen material desain UI untuk aplikasi angular,yang berfungsi pada web,mobile dan desktop. Itu telah dibangun oleh tim angular untuk berintegrasi mulus dengan angular.

Vuetify.js

Vuetify.js : framework komponen material yang dibangun atas Vue.js 2,memanfaatkan pola material desain google untuk komponen UI-nya.Datang dengan 5 vue-cli templates pra-konfigurasi dengan vuetify untuk membantu kalian memulai dengan proyek web berbasis Vue.js.Vuetify menawarkan lebih dari 80 komponen desain bahan seperti breadcrumbs,cards,drop-down, navbar,sidebar,tab dan lainnya.

Keen UI

Keen UI : kumpulan komponen UI material desain penting yang ditulis dengan Vue.Dibuat oleh Josephus Paye II,fokus Keen UI adalah menciptakan komponen yang dapat digunakan kembali yang memiliki interaktivitas.Kalian akan menemukan banyak komponen seperti untuk alert, autocomplete,FAB,popover,snackbar, tab dan banyak lagi lainnya. Proyek ini tersedia dalam GitHub dan berlisensi MIT.

Framework CSS MUI

MUI : framework HTML,CSS dan JS yang ringan untuk membangun situs mengikuti pedoman material desain UI google.MUI dirancang dari bawah keatas agar cepat dan ramah bagi pengembang.Dengan desain itu hanya mencakup komponen dasar yang kalian butuhkan untuk membangun situs yang mengikuti pedoman desain bahan google.MUI CSS atau JS tidak memiliki dependensi eksternal.MUI juga tersedia diGitHub.

LumX

LumX : framework front end yang didasarkan pada material desain google.LumX didasarkan pada prepro Sass dan AngularJS. Ini adalah proyek berlisensi MIT yang tersedia di GitHub.

Proyek Polimer

Proyek polimer google : framework web dan perwujudan material desain mereka untuk web.Polimer bertujuan untuk mendukung semua browser modern besar seperti IE (10+), chrome,safari dan firefox.Kumpulan dokumentasi dan panduan persiapan yang luas tersedia dalam proyek polimer.Kalian dapat menggunakan perpustakaan polymer untuk membuat komponen web,fitur platform baru yang kuat untuk memperluas HTML dan membuat komponen aplikasi kalian.

Masa Depan Material UI Desain

Material UI desain merupakan tren yang sepenuhnya dianut oleh google pada seluruh aplikasi,situs web dan interface android, microsoft dan apple memiliki seperangkat bahasa desain sendiri.Sesuai tren google, “material UI” melihat kenaikan mendadak setelah pengumumannya dan dengan cepat melampaui tren desain datar.

Disimpulkan bahwa material UI sangatlah layak digunakan pada desain website maupun aplikasi.Terutama berguna untuk meningkatkan user experience (UX) dan minat pengguna.Sekian artikel ini,semoga dapat bermanfaat untuk kalian 🙂