399. Catatan Google Developer Summit: Material Design!

397. Catatan Google Developer Summit: Material Design! ini dia nih suasana Google Developer Summit 2015 di Jakarta. Rame yah?

Pada tanggal 24 Maret 2015, Saya mengikuti acara Google Developer summit pertama di Indonesia. Acara ini merupakan acara yang membahas hal teknis untuk para developer Google baik itu Android, Chrome, AdMob(iklannya Google) dan berbagai produk lainnya. Acara yang di selenggarakan di Museum Gajah ini memperkenalkan banyak hal update terbaru dari Google.

Hal yang paling saya incar adalah pembahasan tentang Material Design. Berikut Ini hal yang Saya pelajari dari Google Developer Summit tentang Material Design.

397. Catatan Google Developer Summit: Material Design! 4 prinsip Material Design

1.Tangible Surface:

Apa itu Material Design?

Material design adalah gaya desain terbaru dari Google yang memiliki prinsip desain itu harus seperti kertas pada kenyataannya. Harus mempunyai efek kalau di sentuh, punya kedalaman(layer-layer) dan punya bayangan. Bedanya material design dengan kertas adalah material design merupakan kertas ajaib yang bisa membesar, mengecil, membelah diri, berubah warna dan bertransformasi menjadi berbagai bentuk. Sifat seperti inilah yang disebut Tangible Surface.

397. Catatan Google Developer Summit: Material Design! 4 prinsip Material Design. Struktur kedalaman pada material design.

Pada prinsip ini desain pada material design bertujuan untuk memberikan fokus yang jelas kepada pengguna dengan menyediakan struktur. Struktur disini lebih kepada menampilkan apa yang penting berada di depan daripada yang tidak penting.

2. Print like design:

Material design meniru gaya layout, tipografi dan penyajian gambar ala majalah. Dimana setiap huruf harus di tata dan di pilih dengan jelas mana yang Judul, sub-judul, qoutes dan huruf untuk isi artikelnya. Layout tiap aplikasi dengan gaya material design inipun haruslah menggunakan grid dan keylines.

397. Catatan Google Developer Summit: Material Design! Struktur layout dan tipografi dari Material design

Untuk font, Google menyarankan untuk menggunakan font yang berjenis .UTF. Hasil dari riset Google menyatakan bahwa font yang berjenis .UTF lebih cepat di render(ditampilkan di layar device) dibandingkan dengan jenis .TTF (True Type Font).

397. Catatan Google Developer Summit: Material Design! Contoh layout dan penyajian warna pada material Design. Dalam hal ini Saya mengambil contoh Google Wallet!

Secara warna, Material design sebenarnya hanya menggunakan 3 jenis warna.

1. Warna back ground yaitu light/dark ( putih atau hitam).
2. Warna Primer yaitu warna utama aplikasi Anda. Misalnya Twitter warna biru muda dan Path warna merah. Warna Primer biasanya digunakan untuk bagian header(atas) aplikasi. Warna Primer juga digunakan pada huruf untuk menunjukan Judul atau nama Tab di aplikasi.
3. Warna Aksen yaitu warna kedua dari aplikasi Anda yang biasanya bertabrakan atau komplementer (terserah desainernya). Kalau Saya lihat sendiri Google menggunakan warna-warna yang komplementer (saling melengkapi) contohnya Ungu gelap dengan warna pink nge-jreng (atau tabrakan kayak contoh diatas). Warna Aksen biasanya digunakan untuk tombol bulet dikanan layar dan digunakan pada huruf untuk menunjukan hal yang penting di Dialogue Box ( sebelum pengguna mengambil keputusan).

Warna yang di pilih untuk material Designpun adalah warna-warna yang nge-jreng dan kontras. Saya belum menemukan aplikasi dengan gaya material design tapi warnanya soft. Warna yang nge-jreng ini harus dipilih secara hati-hati oleh para desainer, jangan sampai pengguna pusing melihatnya dan muntah pelangi.

3. Animasi:

397. Catatan Google Developer Summit: Material Design! Contoh animasi pada material design.

Setiap pixel yang di sentuh dalam material design memiliki efek di tekan (ripple). Selain ada efek ditekannya material design juga menyajikan animasi supaya pengguna tidak kaget berpindah dari menu A ke B. Dari A ke B harus ada transisinya. Animasi juga bertujuan supaya pengguna tau dia berada di tab mana dan dari tab mana.

“Google hanya memberikan contoh dan prinsip animasi transisi dari material desain sisanya terserah para developer” Kata Google expert dari Jepang.

Artinya: Belum ada aturan atau pakem yang jelas dari animasi transisi ini. Kalau tidak hati-hati memilih jenis animasi, maka bukan hanya para pengguna yang pusing. Para developerpun di bikin pusing. Animasi transisi haruslah konsisten dan jangan membingungkan. (P.S: saya liat animasi yang Google buat cukup bingung sih karena, tombolnya aja bisa pindah-pindah, warna tab berubah0ubah, font berubah dan sebagainya).

4. Adaptive Design

Material design menggunakan prinsip adaptive design yaitu desain kontennya menyesuaikan bidangnya dalam hal ini ukuran layar. Kalau di web ini namanya responsive design. Secara teknis para desainer dan developer selain harus menyediakan asset dari Mdpi hingga XHdpi, juga harus memikirkan layout (tata letak) atau tampilan aplikasinya di handphone 4 inchi, tablet 7 inchi, hingga monitor tv 40 inchi.

397. Catatan Google Developer Summit: Material Design! Ini dia yang dimaksud adaptive design. Sebenarnya kalau di web sudah ada sih namanya responsif desain.

Hal ini berarti desainer selain harus menyediakan asset dengan berbagai ukuran dpi juga harus menyediakan banyak Nine Patch apabila diperlukan.

Ke empat prinsip material design diatas sebenarnya merupakan perubahan desain besar-besaran yang di lakukan Google. Material design berlaku untuk semua produk google dan merupakan jawaban atas kebingungan developer mendesain aplikasi untuk berbagai jenis layar (fragmentasi).