Dark Theme Material Guidelines: UI Tips and Implementation.
Dark theme atau dark mode akhir — akhir ini banyak diterapkan pada aplikasi baik mobile maupun website. Pada pembahasan kali ini, saya ingin menuliskan mengenai apa itu dark theme, penjelasan dari pedoman Google Material Design dan bagaimana menerapkannya pada aplikasi. Tulisan ini saya buat setelah saya mempelajari tentang dark theme dari berbagai sumber yang saya temukan.
1. Apa itu Dark Theme/Dark Mode?
Perlu diketahui jika dark theme atau dark mode bukan berarti hitam sepenuhnya. Dark theme adalah tampilan low — light yang kebanyakan elemen visualnya memiliki tema warna gelap. Google Material Design sendiri merekomendasikan warna abu — abu gelap (dark grey) dengan nomor #121212 sebagai tampilan utama backgorund dibandingkan warna hitam total (#000000).
Saya mencoba menggunakan warna dark grey #121212 ini sebagai background dari study case streaming aplikasi yang pernah saya kerjakan di Binar Academy. Warna background memberikan kesan elegan dan memberikan kontras yang cukup untuk menonjolkan warna oranye sebagai warna brand.
2. Hierarki dan Elevasi
Dark theme tidak bisa dibilang sebagai kebalikan dari light theme. Nyatanya, tidak semua aspek pada light theme jika diterapkan pada dark theme dapat menampilkan hasil yang serupa. Sehingga jika ada aspek pada light theme yang dipaksakan tampil pada dark theme menjadi kurang pas, maka pesan yang ingin ditunjukkan tidak sampai pada user. Jika pada light theme menggunakan shadow untuk menunjukkan elevasi hierarki, maka dark theme menggunakan overlay. Hal ini karena shadow susah dilihat dalam keadaan gelap.
Jika pada light theme semakin tinggi hierarki, maka shadow akan semakin luas dan gelap. Pada dark theme, hierarki yang lebih tinggi ditunjukkan dengan warna yang lebih terang.
Saya mencoba menerapkan elevasi pada desain tampilan UI aplikasi Nobar. Elevasi dapat dilihat pada bagian poster, kalender, penulisan jadwal, dan daftar paket. Hal ini dimaksudkan untuk menonjolkan fitur tersebut pada user.
3. Warna dan Kontras
Kombinasi warna pada dark theme harus menampilkan elemen visual dengan kontras yang memadai, setidaknya harus lulus standar WCAG AA (Web Content Accessibility Guidelines) dengan perbadingan minimal 4.5:1 untuk body text saat diterapkan di semua permukaan elevasi warna. Agar dapat memastikan warna yang dipilih memenuhi satandar ini, dapat dilakukan pengecekan pada web https://webaim.org/resources/contrastchecker/.
Selain standar tersebut, elemen lain pada dark theme seperti card, button, field dan lainnya harus menampilkan kontras level setidaknya 15.8:1 antara teks dan background. Hal ini untuk memastikan agar body text lulus standar WCAG AA 4.5:1 dan teks dapat terbaca pada permukaan yang lebih terang (hierarki yang lebih tinggi).
4. Warna Branding
Hindari menggunakan warna saturasi karena hal ini dapat menyebabkan teks susah dibaca pada dark theme. Warna saturasi adalah warna dengan unsur abu — abu yang semakin sedikit, sehingga akan terlihat lebih mendekati warna dasarnya. Warna dasar ini umumnya adalah warna gelap. Untuk mengatasi hal tersebut, gunakan warna dengan range antara 200–50.
Jika aplikasi sudah memiliki merknya sendiri, warna tersebut tetap dapat digunakan meskipun hanya terbatas pada beberapa bagian seperti logo maupun button. Penggunaan warna merk yang terbatas pada beberapa elemen ini dapat menghasilkan keseimbangan sehingga elemen tetap dapat terlihat menonjol dalam hierarki.
Gambar di atas merupakan desain aplikasi yang pernah saya buat secara kelompok saat masih di Binar Academy. Tampilan pertama untuk UI aplikasi dikerjakan secara individu, dimana menggunakan warna oranye sebagai warna brand. Sedangkan tampilan kedua merupakan UI yang dikerjakan secara berkelompok, yang warna aplikasinya merupakan desaturasi warna dari warna primary. Desaturasi disini maksudnya adalah pengurangan pigmen pada suatu warna. Efek dari pengurangan warna pigmen ini didapatkan warna yang lebih terang.
Pemilihan warna ini dikarena warna primary awalnya tidak dapat terlihat dengan jelas saat diterapkan pada mode gelap, sehingga Lead UI/UX design saya saat itu, Mas Fikri Anam menyarankan untuk menggunakan tone ungu yang lebih terang dan hal ini di setujui oleh Mas Jo selaku Product Owner, Mbak Hilaria selaku Scrum Master, dan saya sendiri selaku UI/UX designer. Kami akhirnya memutuskan untuk memilih warna ini agar lebih mudah terlihat dan lebih nyaman saat dibaca.
Jangan bingung untuk memilih warna mana yang merupakan desaturasi dari warna brand atau warna lainnya. Google Material Design telah menyediakan tools yang dapat menampilkan range warna antara 900–50 https://material.io/design/color/the-color-system.html#tools-for-picking-colors.
Caranya adalah dengan memasukkan kode warna pada bagian kanan, kemudian Google Material design akan menampilkan deretnya. Selain itu, juga bisa ditambahkan secondary color jika ingin mencoba melihat kombinasi warna primary dan secondary.
5. “On” Color
Terdapat istilah “On” Color dimana hal ini merujuk pada teks yang berada di atas warna primary, secondary, background, surface dan eror. Warna default “on” yang umum digunakan adalah warna hitam dan putih. Warna ini dapat divariasikan tergantung pada informasi yang ingin disampaikan ke user. Variasi warna ini dapat dilakukan dengan mengatur opacity warna seperti yang dicontohkan oleh Google Material Design.
Jika warna background gelap, maka teks yang digunakan adalah putih. Sehingga kita bisa gunakan aturan ini untuk menentukan level opacity:
- High-emphasis text dengan opacity sebesar 87%.
- Medium-emphasis text and hint text dengan opacity sebesar 60%.
- Disabled text dengan opacity sebesar 38%.
Tampilan sign in yang pertama menunjukkan kolom teks yang memiliki warna lebih pudar, yang dimaksudkan untuk menunjukkan jika kolom tersebut masih disable dan belum terisi. Sehingga pada tampilan kedua diperlihatkan warna teks yang lebih terang jika sudah terisi dengan tulisan.
6. Aplikasi yang Bisa Menggunakan Dark Theme
Tidak semua tampilan aplikasi dapat menerapkan dark theme. Miklos Philips menuliskan bahwa aplikasi financial seperti perbankan yang ditujukan untuk masyarakat umum tidak sesuai dengan tampilan ini, ketika yang mereka butuhkan hanya membayar tagihan dan cek mutasi rekening.
Pastikan kembali sebelum benar — benar memilih untuk menggunakan dark theme. Warna dapat memengaruhi emosi pengguna. Ketika aplikasi yang dibuat bertema psikologis dan memberikan motivasi, penggunaan warna gelap dapat menurunkan minat pengguna untuk mengakses aplikasi.
Tema ini dapat sesuai untuk aplikasi yang menawarkan hiburan seperti menonton film yang cenderung identik dengan warna gelap seperti menonton di bioskop. Aplikasi dengan beberapa konten saja seperti pinterest atau lainnya juga dapat menggunakan konsep dark theme.
Terimakasih telah menyempatkan waktu untuk membaca tulisan ini. Saya menyadari belum semua guidelines yang saya terapkan pada aplikasi benar. Silahkan sampaikan kritik dan saran anda sebagai masukan bagi saya untuk berkembang lebih baik :)
References:
