Material Design 2

Di-posting pada 2018-09-22 19:25:32
Oleh Joseph Salimin dan Ahmad Fahmi Pratama, Category : Web

Vice President of Design di Google, Matías Duarte, merilis Material Design versi pertama pada Google I/O 2014. Bagi yang belum tahu, Material Design adalah bahasa desain yang dirilis oleh Google yang berfokus kepada tampilan seperti kertas dan kartu yang memberikan kesan realistik nan modern di mata pengguna. Gaya desain ini memberikan tampilan dan warna baru bagi pengguna, apalagi bagi Android yang kala itu desainnya sudah dirasa jadul dan kurang modern. Sejak saat itu, Material Design dipakai di seluruh produk Google dan menjadi bahasa desain resmi yang dipakai oleh Google. Nah, pada Google I/O 2018, Google akhirnya merilis kembali Material Design namun dengan versi dan gaya desain yang agak berbeda, disebut juga Materal Design 2. Apa sih bedanya Material Design 2 dengan Material Design versi awal?

 

Jika kita buka website https://material.io/. Terdapat tiga poin utama yang dikumandangkan, yaitu desain secara fleksibel, pengembangan aplikasi untuk berbagai macam platform, dan berkolaborasi secara lancar. Secara prinsip, Material Design 2 tidak berbeda jauh dengan Material Design 1, yaitu untuk memberikan design guideline dalam membangun suatu aplikasi. Tidak terdapat juga perbedaan yang mencolok antara Material Design 1 dan 2. Meskipun demikian, terdapat beberapa perbedaan yang membedakan yang menyebabkan kita membedakan antara Material Design 1 dan 2.

 

1. Whitespace

Whitespace yang dimaksud merupakan daerah ruang kosong yang tidak diisi oleh konten atau objek apapun. Pada Material Design 2, whitespace merupakan salah satu perubahan yang signifikan. Pada Material Design 2, whitespace yang digunakan semakin banyak. Salah satu alasan penggunaan whitespace yang banyak ini sesuai dengan prinsip Material Design, yaitu “Bold, graphic and intentional”. Akhir-akhir ini, tren “Complexity Reduction” (url = https://medium.com/amazing-stuff/complexion-reduction-a-new-trend-in-mobile-design-cef033a0b978) sedang ditekankan dalam pengembangan aplikasi mobile. Tujuannya yaitu agar aplikasi lebih simpel dan memastikan bahwa penggunaan warna dan animasi tidak menutupi maksud isi dan aksi yang dilakukan pada aplikasi. Salah satu cara yaitu dengan memperbanyak whitespace dan hal ini yang diterapkan pada Material Design 2.

 

2. Rounded Corners

Pada Material Design 2, salah satu hal yang ditekankan yaitu dengan membuat sudut-sudut persegi menjadi bulat, atau istilah kerennya sebagai “rounded corner”. Pengguna rounded corner ini banyak digunakan pada Material Design 2, seperti pada search bar Google saat ini. Contoh lain yaitu, Indikator tab pada Material Design 2 juga sudah mulai menggunakan rounded corners. Penggunaan rounded corners ini banyak sekali dijumpai pada material design

 

3. BottomAppBar

Penggunaan BottomAppBar juga menjadi faktor utama  pada Material Design. BottomAppBar akan menampilkan navigasi dan aksi-aksi pada bagian bawah layar. Penggunaan BottomAppBar akan menjadi komponen yang akan sering digunakan. Alasannya karena kebanyakan smartphone sekarang semakin tinggi dengan rasio besar tinggi terhadap lebar 2:1. Karena smartphone sekarang dibuat semakin tinggi, maka tentunya akan lebih baik jika aksi-aksi pada aplikasi ditentukan di bagian bawah aplikasi saja. Tentunya hal ini akan memudahkan penggunaan dengan satu tangan saja.

 

4. Floating Action Button

Floating action button (FAB) melakukan aksi-aksi utama / yang paling sering muncul pada layar. Tombol ini muncul di bagian paling depan layar, umumnya berbentuk lingkaran berbayang dengan icon di tengahnya. FAB tersedia dalam tiga jenis tipe: regular, mini, dan extended.

 

Di atas tadi adalah sebagian kecil dari komponen-komponen umum yang ada di Material Design 2. Masih banyak lagi komponen yang tidak dibahas disini, karena sangat banyak dan bervariasi. Akhir kata, selamat bereksplorasi dengan Material Design 2!

 

 

<p dir="ltr" style="line-height: 1.38;