Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Material Design
Code

Tips Desain untuk Material Design

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Pengantar

Dalam beberapa bulan belakangan, Material Design telah bergerak secara besar-besaran. Komponen berbeda dari Material Design seperti kartu konten dan meningkatnya penggunaan animasi bisa ditemukan di banyak aplikasi yang kita gunakan sekarang.

seperti yang banyak kiriman blog tlah bahas. Di satu sisi dia adalah hal bagus yang membuat desain solid jadi lebih mudah. Di sisi lain, ada juga yang tidak setuju kagerna hilangnya originalitas yang tampak dari desain mirip yang digunakan semua orang. Di sampng itu, memiliki akses ke bahasa desain yang bagus tidak berarti bahwa ia diterapkan dengan benar.

Pada panduan ini, kita akan membahas cara kamu bisa mengambil konsep dari Material Design dan mengembangkannya untuk membuat antarmuka lebih baik sekaligus membuat tampilan visual yang berbeda. Kita juga akan melihat beberapa tips umum sebelum kamu mulai mendesain dengan Material Design sebagai titik permulaan.

Metarial Design sebagai Dasar

Pertama adn utama, mulai dari Material Design hingga desain antarmuka tidak perlu setujui. Tidak semuanya. Pada faktanya dia membantu mempersiapkan dasar yang pengguna Android terbiasa dengannya.

Ketika membangun pengalaman pengguna yang baik, menemukan kembali roda-nya seringkali tidak direkomendasikan.

Menggunakan yang standar tentu adalah hal yang bagus untuk memastikan bahwa kamu membuat sesuatu yang bekerja. Struktur dari antarmuka dan interaksinya terbukti bekerja. Namun, itu bukan berarti di sana tidak ada celah untuk error atau peningkatan.

Menggunakan Cards di Desain

An Example of a Card Design
Contoh dari Card Design

Inti dari Material Design hadir dengan penggunakan kartu konten. Sekarang, cards menjadi komponen yang bisa diterapkan pada banyak situasi karena dia adalah pola desain yang sangat berguna. Secara serentak, dia bisa menjadi tantangan desain yang bagus untukmu untuk berpikir jikalau ada alternatif desain yang lebih menarik. Seiring kita melihat begitu banyak desain berbasis kartu, adalah hal yang bagus jika kamu memikirkan cara untuk mendesain-nya lebih baik.

Ambil kalendar sebagai sebuah contoh. Daripada sebuah daftar per-hari dengan sebuah kartu untuk tiap pertemuan. Perhatikan cara Sunrise mengombinasikan tampilan di mana kamu melihat baik tampilan bulanan maupun tampilan hariannya.

The Combination View in Sunrise
Kiri: Konsep Desain Kalendar Material Design; Kanan: Sunrise

Games adalah sumber inspirasi menarik lainnya jika kamu ingin mencari antarmuka unik sebagai bentuk inspirasi. Cek situs menginspirasi seperti UIMovement untuk melihat tipe antarmuka baru dan segar sebagai inspirasi.

Saat kamu membangun sebuah antarmuka, akankah kartu konten menjadi solusi paling optimal ataukah mungkin masih ada cara menarik lainnya untuk menampilkan konten yang bisa menjadi solusi yang lebih baik?

Tiap aplikasi berusaha untuk menyelesaikan masalah mereka sendiri dengan cara yang unik. Dengan kereta pemikiran ini, ini bisa jadi logis jika solusimu membutuhkan tipe antarmuka yang lain.

Baiklah, bagaimana kamu memprosesnya? Ini semua dimulai dari konten dan anvigasi yang akan saya bahas lebih detil di bawah nanti.

Berhati-hati Dengan Tombol Aksi Melayang

The Floating Action Button
Contoh tombol aksi melayang di kotak masuk Google

Salah satu pola desain yang ditawarkan Material Design adalah tombol aksi melayang. sebuah tombol melayang adalah cara bagus untuk menonjolkan sebuah aksi di antarmuka. Pada saat yang sama, dia bisa jadi mekanisme desain yang paling buruk. Ada banyak cara penggunaan tombol aksi melayang yang salah:

  • Meletakkanya di layar yang memiliki banyak aksi pengguna inti, ketimbang hanya satu.
  • Menyembunyikan menu di tombol aksi melayang
  • Menghalangi elemen desain yang penting

Secara pribadi, saya melihat beberapa contoh ketika sebuah tombol aksi melayang adalah tambahan yang bagus untuk produk, terutama di aplikasi yang memiliki satu aksi inti kepada pengguna. Aplikasi olah pesan adalah contoh yang bagus. Tombol aksi melayangnya membiarkan pengguna untuk menulis sebuah pesan baru. Uber bisa jadi contoh lain yang masuk akal. Interaksi inti dari produknya adalah memanggil sebuah mobil.

Triknya adalah berhati-hati dan lihat jika itu masuk akal dengan konteks produkmu. Ini bukan karena dia adalahv elemen antarmuka standar sehingga itu mungkin bagus untuk aplikasimu. Untuk produk yang lebih rumit, di mana pengguna sering menggunakan banyak aksi, tombol aksi melayang biasanya tidak cocok.

Strategi Konversi & Retensi Pengguna

Dengan pemahaman desain yang kuat dari awal, Material Design, Terkadang cukup mudah untuk melupakan dasar-dasarnya sebelum kamu mulai mendesain. Bagaimana cara kamu menentukan apa yang bisa kamu gunakan dari Material Design dan apa yang bisa kamu tingkatkan?

Beberapa pilihan desain, seperti menggunakan kartu konten, bisa jadi membatasi-mu sejak awal.

Berikut kamu bisa menemukan daftar singkat beberapa elemen dari aplikasimu yang perlu didefinisikan dengan baik sebelum membuat keputusan di desain.

Menanyakan pertanyaan yang tepat memberikanmu pemahaman yang lebih baik dari apa yang kamu ingin buat berdasarkan yang antarmuka yang kamu bisa buat dengan lebih baik.

Navigasi

  • Aksi pengguna apa yanng paling penting di produk saya?
  • Di layar apa dia terjadi?
  • Bagaimana penampilan grafik alur dari aplikasimu nanti?

Singkatnya, ada dua aturan sederhana yang saya ingat saat menstruktur navigasi dari sebuah produk.

Autran 1: 80/20

Terapkan aturan 80/20. 80% pengguna saya hanya akan menggunakan 20% dar fungsi yang ada. Bagaimana saya memastikan bahwa 20% fitur tersebut adalah yang paling mudah diakses dari produk saya?

Aturan 2: Konsistensi

Jika aka ada beberapa cara untuk mengakses layar di sebuah produk, pastikan bahwa itu terjadi secara konsisten. Contohnya, perpindahan dari layar tinjauan ke halaman detil harus dalam cara yang sama.

Berdasarkan hal tersebut, kamu bisa menentukan apa yang paling optimal untuk navigasi pengguna di produk. Jika kamu memiliki sebuah produk rumit dengan banyak pilihan, sebuah drawer bisa jadi pilihan yang tepat. Produk yang sederhana? menggunakan tab biasanya adalah jawabannya. Untuk informasi lebih lanjut mengenai navigasi dan Material Design, saya merekomendasikan untuk menelusuri Material Design Guidelines.

Konten

Music App Concept
Konsep aplikasi musik yang ditemukan di Dribbble adalah sebuah contoh dari penanganan aneka jenis konten.

Setiap aplikasi memiliki konten. Pertanyaan berikut harus membantu-mu menentukan cara menstruktur dan menampilkan konten dari sudut pandang desain:

  • Jenis konten apa yang saya miliki?
  • Berapa banyak tingkat dari konten yang saya miliki (misalnya, layar tinjauan, diikuti layar detil, dan akhirnya sebuah layar aksi(?
  • Berapa tinggi rata-rata dari tiap jenis konten?
  • Cara apa yang paling optimal untuk menampilkan kontennya? Sebuah daftar? Sebuah slideshow? Atau sesuatu yang lebih unik?

Setelah kamu mengetahuinya, akan menjadi jauh lebih mudah saat membuat keputusan desain. Itu adalah saat di mana kamu bisa menentukan apakah menggunakan kartu lebih logis atau apakah ada alternatif yang lebih baik dan menarik untuk antarmukamu.

Mempertimbangkan Aneka Jenis Pengguna Terlebih Dahulu

Tantangan desain terbesar yang bisa kamu temui adalah berikut:

Bagaimana saya memastaikan bahwa aplikasi saya sama memuaskkannya untuk pengguna baru maupun pengguna lama? Bagaimana ini akan mempengaruhi konten dan navigasi saya?

Ini adalah tantangan sulit dan sering berujung ke onboarding yang efektif dan memastikan bahwa layar utama dari produkmu adalah layar yang paling berharga bagi penggunamu. Apakah kamu butuh beberapa contoh? Perhatikan produk berikut. Apa layar utama mereka dan apa nilai yang dia berikan? Bagaimana mereka mendekati onboarding pengguna?

  • Instagram
  • Facebook
  • Espresso oleh The Economist

Produk di atas harusnya memberimu beberapa inspirasi. Jangan berkecil hati jika ini terasa menakutkan pada awalnya. Produk di atas telah melakukan beberapa iterasi untuk menjadi yang seperti sekarang.

Onboarding adalah subjek yang sendiri. Saya menyaranan kamu untuk melihat beberapa sumber yang memberikanmu pencerahan yang berharga, seperti User Onboard.

Peningkatan Antarmuka

Sekarang kamu telah memiliki ide dasar mengenai car kerja produkmu dan elemen yang bisa kamu gunakan dari Material Design, ini saatnya untuk memberi sedikit bumbu. Ada banyak cara untuk meningkatkan aplikasimuy secara estetik, beberapa di antaranya terdaftar di bawah.

Tipografi

Pemeilihan font-mu sangat berkkontribusi ke penampilan dan cita rasa produkmu. Memilih font kostum bisa sangat membantu membuat desain yang lebih beraneka ragam dan menerapkan sebuah tampilan dan rasa unik ke aplikasimu tanpa melakukan perubahan besar. Mencari font yang tepat bisa jadi sulit dan tergantung pada selera. Favorit pribadi saya adalah Typewolf.

Iconography

Dropbox Iconography
Dropbox adalah contoh bagus yang menerapkan ilustrasi dan ikon kostum pada produk mereka.

Menambahkan ikon kostum adalah cara lain untuk memasukkan tampilan dan sensasi-mu sendiri ke dalam aplikasi. Menggunakan iconography sulit karena Material Design memiliki standar yang besar. Untuk ikon, ini berarti beberapa aksi, navigasi dan elemen lainnya memiliki ikon yang sama.

Jika kamu ingin menggunakan ikonmu sendiri, ada dua aspek penting untuk kamu ingat:

  • Recognizability: Pastikan pengguna memahami maksud dari tiap ikon.
  • Consistency: Hindari menggabungkan dua paket ikon yang berbeda.

Aset Visual

Timehop
Timehop adalah contoh bagus dari penggunaan ilustrasi kostum untuk membuat tampilan dan rasa yang berbeda.

Cara kamu menggunakan konten fotografis atau ilustrasi bisa menambah karakter ke aplikasimu secara mudah. Kreatiflah.

Animasi & Interaksi Unik

Unique Animations Interactions
Ini adalah contoh dari animasi yang unik dan interaksi yang berhubungan dengannya. Sumber

Interaksi dan animasi kostum membutuhkan usaha paling keras, tapi dia adalah hal yang memuaskan untuk melihatnya berfungsi di sebuah produk. Animasi unik yang dibuat di antarmuka unik yang berfungsi adalah salah satu pekerjaan desain paling memuaskan yang bisa kamu cari online.

Skema Warna yang Unik

Stocks App Design Concept
Desain ini menggunakan konsep Material Design dengan warna yang tidak akan kamu sangka. Sumber.

Material Design menyediakan banyak pilihan warna yang bisa kamu pilih. Ini tidak berarti kamu tidak bisa menjadi sangat kreatif dengan penggunaan warna untuk membuat sesuatu yang sangat unik.

Sebuah Peringatan

Ada sebuah alasan kenapa kebanyakan antarmuka yang kita tahu saat ini biasanya desain yang sederhana. Dia terbukti bekerja dan pengguna merasa familiar ketika menggunakannya.

Desain eksperimental bisa menyakiti aplikasi-mu.

Maksudnya, dengan beberapa tweak, misalnya hanya berfokus pada warna dan tipografi. Kamu bisa jadi harus menempuh jalan yang panjang untuk mendesain sesuatu yang unik pada aplikasimu.

Kesimpulan

Material Design telah membuat posisi mundur yang nyaman saat kamu terjebak dalam masalah desain. Hingga saat ini, kamu memiliki semua kebebasan untuk kembali berpikir bagaimanakah sebuah antarmuka harusnya bekerja. Snapchat membuat sebuah produk yang berfokus pada gestur, Facebook Paper (iOS) memikirkan kembali hirarki dan animasi, dan Medium secara efekti mengurangi sebuah antarmuka agar fokus pada bacaan (dan tulisan).

Dengan itu dalam pikiran, pergi ke depan dan mendesainlah. Ada pertanyaan atau komentar? Tinggalkan di kolom komentar atau hubungi saya di Twitter.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.