Material Design

Bisa dibilang saya telat untuk mulai mengenali dan mengimplementasikan Material Design pada sebuah aplikasi. Sebelumnya saya punya pertanyaan sederhana, apa itu Material Design..? Di Internet, mungkin Anda menemukan banyak penjelasan tentang Material Design ini, tapi di postingan ini saya coba berbagi informasi dan merangkum pembahasan mengenai Material Design agar lebih mudah di pahami, so… keep calm and stay tune.

Pengen tau gimana Material Design ini dibuat? Click & Play ..

Kita baca dulu pengertian dasar Material Design dari Google Design ini:

Google: “We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design”

Taukah Anda bahwa Material Design ini merupakan filosofi design yang sangat popler saat ini. Menurut saya sih wajar, soalnya designya clear banget dan juga panduan design nya juga lengkap. Desain dasarnya adalah “tampilan yang berlapis“, yang terdiri dari susunan beberapa elemen seperti tumpukan kartu (dinamakan layout) dan setiap layoutnya memiliki bayangan.

Tombol Material Design

Awalnya Material Design ini ditargetkan untuk Mobile saja, tapi perlahan meluas ke platform lainnya. Material Design memiliki tiga prinsip, yaitu:

Teori yang didesin dari kondisi nyata, yang inspirasinya dari tumpukan kertas dan tinga lalu diimplementasikan menggunakan teknologi sehingga dibuat se-asli mungkin Unsur desain yang didasari dari desain yang telah di cetak/print, lau unsur seperti huruf, warna, gambar dan lainnnya dianut kedalam Material Design ini. Animasi adalah kunci dari sebuah desain, tapi animasi tidak berarti hanya sekedar bisa bergerak, karena animasi harus memiliki arti dan mencerminkan kondisi fisik di dunia nyatanya.

 

tabs_b1Surface & Shadows

Didalam Material Design, permukaan dan bayangan memegang peran
penting dalam menyampaikan struktur dari aplikasi. Maksudnya adalah tampilan yang membuat pemisah tiap lapisan dari tumpukan agar terlihat berbeda, contohnya tumpukan kertas. Konsep ini bisa disebut juga dengan “sentuhan dari sebuah permukaan“. Terlihat seperti iterasi berikut:

Kenapa hal ini menjadi penting karena Flat Design yang memiliki shadow membuat konsep Tactile Surface menjadi nyata. Sehingga layout terlihat terpisah dan user bisa dengan mudah mengetahui mana layout utama dan mana yang tidak. Contohnya pada aplikasi Reddit berikut:

whatismaterial_3d_elevation_component04

 

Material Design = Responsive Design

Tampilan berlapis ini dibuat mengikuti konsep dari responsive design. Ukuran dan tata letak dibuat se-resposive mungkin agar user experience dari Material Design ini optimal. Oleh karena itu Google Design memiliki poin-point penting yang perlu diketahui designer terkait ukuran layout yang dimulai dari: 480, 600, 840, 960, 1280, 1440, dan 1600dp.

layout_adaptive_breakpoints_01

Point-point ini membantu designer agar tetap di jalan yang benar, hehe :D. Maksdunya, design dari layout tidak hanya responsive di smartphone, tapi juga desktop dan tablet.

 

Material Design & Flat Design

Taukah Anda bahwa Material Design ini banyak meminjam konsep-konsep design lainnya, terutama Flat Design. Memang tidak bisa di pungkiri bahwa ini adalah eranya flat design, karena hampir semua mobile design mengimplementasikanya.

Android Flat Design copy

Yang menarik disini adalah Google menyediakan pilihan warna sendiri dalam mendesign aplikasi Android. Typography, Google menyarankan penggunaan Font Roboto sebagai font yang dominan selama kita mendesign aplikasi Android. Tetap update perkembangan Material Design disini.

 

Tips

Jika Anda orang yang malas dalam memilih warna tapi tetap ingin implementasi material design, maka Anda patut mengunjungi situs ini: http://www.materialpalette.com/. Karena didalamnya sudah ada simulasi warna aplikadi dari pilihan warna material design. Well, selamat mencoba.

mate
Material Palette

 

Material Design Lite

Selain itu ada berita menarik juga, Google merilis Guidelines Design baru yang dinamakan dengan Material Design Lite, sehingga tidak Android saja yang bisa menggunakan konsep design ini tapi web dan desktop juga bisa mengimplementasikannya. Cari tau lebih detail tentang Material Design Lite disini.

Material Design Lite


 

Referensi :

Iklan

4 pemikiran pada “Material Design

  1. keren blog nya kang (y)
    dibanding flat design, efek shadow dan layering nya bikin tampilannya serasa 3d yaa.
    cuma pendapat saya sih untuk beberapa tipe user baik di flat maupun di material, button nya kurang terlihat “clickable” walaupun sudah dibedakan size/color nya dengan text biasa hehehe

    Suka

Good People write good comments ..

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s