#BelajarDesain Hari ke 10

Material Design

Belajar dikit yuk Framework design dari Google yang banyak digunakan untuk platform Android

--

Artikel ini dibuat agar #BelajarDesain menjadi lebih mudah. Ikuti instagram kami di @belajardesain.io untuk mendapatkan update #BelajarDesain desain terbaru.

Kenapa sih harus mengerti tentang Material Design?

Material Design adalah sebuah guideline / panduan untuk mendesain yang dibuat oleh Google melalui riset yang dalam untuk menghasilkan UX yang lebih baik.

Material design sendiri adalah framework yang digunakan oleh Android, dan faktanya Android adalah sistem operasi untuk mobile yang paling banyak digunakan.

Jika kamu sebagai seorang UX desainer mengerti dan memahami prinsip material design dengan baik, maka akan memudahkan kamu dalam membuat sebuah produk — terutama untuk platform Android.

Kapan kita harus pakai Material Design?

Tujuan utama material design ini adalah untuk membuat suatu sistem visual yang menyatukan pengalaman pengguna di seluruh platform dan perangkat.

Namun, Material Design ini sebaiknya kita anggap sebagai panduan atau referensi saja. Karena tujuan utama kita adalah membuat produk untuk pengguna kita, maka kita harus menyesuaikan desain kita dengan kebutuhan pengguna kita.

Nah, kesimpulannya, jadikan Material Desain sebagai panduan, bukan sebagai contekan. Jangan di copy begitu saja, namun sesuaikan dengan kebutuhan penggunamu.

Yuk, bahas sedikit tentang pondasi yang penting yang perlu kita ketahui dari Material Design!

Fondasi Material Design

Berikut adalah beberapa fondasi dari material desain yang berguna untuk diketahui oleh seorang UX desainer:

Layout
Berisi tentang informasi layout ketika kita mendesain untuk platform ini, material design sendiri menggunakan sistem yang responsif, sehingga di sarankan untuk menggunakan sistem grid dalam mendesain sebuah produk, tujuan nya ketika kita mendesain untuk smartphone, desain kita akan otomatis berubah ketika di gunakan di paltform yang berbeda ukuran layar nya , contohnya tablet.

Navigasi
Navigasi yang dimaksud adalah interaksi perpindahan dari satu page ke page yang lain, ada beberapa navigasi yang dibahas di material design ini

Photo by Nick Tiemeyer on Unsplash
  • Lateral navigation
    Navigasi ini mengacu pada perpindahan antar layar atau page pada tingkat hierarki yang sama, komponen navigasi ini harus menyediakan akses ke semua layar di tingkat navigasi yang sama ini, biasanya navigasi ini banyak di gunakan di halamann depan atau home page pada sebuah aplikasi.
  • Forward navigation
    Navigasi ini mengacu pada perpindahan antar layar pada level hierarki yang lebih dalam. kebanyakan navigasi ini dapak di akses oleh sebuah button atau element design yang lain.
  • Reverse navigation
    Navigasi ini adalah kebalikan dari Forward navigation diatas, navigasi ini mengacu pada perpindahan layar untuk balik dari layar sebelumnya, dan ini adalah hal wajib untuk memberi akses ke pengguna untuk bisa balik ke layar sebelumnya.

Navigasi Drawer
Navigasi drawer adalah navigasi utama yang paling sering digunakan di material design, navigasi ini juga banyak disebut sebagai “hamburger menu” karena biasanya navigasi ini di trigger oleh icon yang menyerupai nama makanan tersebut (icon 3 baris menumpuk secara horizontal).

Untuk menggunakan navigasi ini harus memerhatikan beberapa hal, yang pertama adalah harus jelas dan bisa di akses dengan mudah, apalagi jika drawer digunakan untuk navigasi utama. yang kedua adalah harus teroganisir, jika menu yang ingin diakses di drawer menu banyak, maka bisa di kelompokan sesuai konteks sehingga bisa mempermudah user untuk menggunakan nya

Bottom Navigasi
Bottom Navigasi sering dijumpai di aplikasi di IOS platform, pengguna iPhone pasti sangat familiar dengan jenis navigasi ini. tetapi akhir — akhir ini navigasi ini juga di terapkan di material design standart, Bottom navigasi menampilkan tiga hingga lima tujuan di bagian bawah layar. Setiap tujuan diwakili oleh ikon dan label teks opsional.

Itulah beberapa fondasi untuk seorang UX yang harus dipahami, jika ingin mempelajari lebih dalam, bisa akses langsung di web material design.

Hari ini, kamu sudah #BelajarDesain tentang Material Design

Ikuti instagram kami di @belajardesain.io untuk mendapatkan update #BelajarDesain terbaru.

Selanjutnya, kita akan #BelajarDesain tentang Apple’s Human Interface Guidelines

--

--