Sesuai dengan namanya, dark mode adalah mode tambahan untuk mengatur tampilan gelap pada user interface. Selama beberapa tahun terakhir, dark mode menjadi desain yang populer digunakan karena menawarkan kenyamanan dan mengurangi ketegangan pada mata pengguna.
Mampu menghemat baterai dan membuat mata menjadi lebih rileks saat memandang layar merupakan beberapa kelebihan dari desain dark mode. Desain ini memang sudah semakin populer dan banyak aplikasi yang menyediakan mode tersebut bagi para penggunanya. Jika saat ini Anda ingin membuat desain UI dengan dark mode, terdapat beberapa hal penting yang wajib diperhatikan.
Apa Itu Dark Mode?
Dark mode adalah user interface (UI) dengan cahaya yang rendah dan menggunakan warna gelap sebagai background utamanya. Jika desain tradisional pada umumnya menggunakan teks hitam pada latar belakang putih, dark mode justru akan menampilkan teks dengan warna yang terang dengan latar belakang gelap seperti hitam atau abu-abu.
Ide dibalik desain dark mode adalah mengurangi cahaya yang dipancarkan oleh layar perangkat namun tetap mempertahankan rasio kontrak warna minimum yang diperlukan untuk readability atau keterbacaan yang baik. Biasanya, dark mode dapat diaktifkan atau dinonaktifkan menggunakan toggle icon yang disediakan pada layar atau di dalam menu pengaturan aplikasi.
Baca Juga: Kesalahan yang Sering Dilakukan oleh UX Design
7 Tips saat Membuat Desain Dark Mode
1. Perhatikan brand atau merek bisnis
Perlu Anda ketahui, dark mode tidak diperuntukkan untuk semua brand. Jadi sebelum Anda menginvestasikan waktu dan tenaga untuk membuat desain UI gelap, Anda perlu mengevaluasi karakter brand terlebih dahulu dan melihat apakah desain ini sesuai untuk diimplementasikan.
2. Hindari warna pure black
Ketika membuat desain gelap sebaiknya hindari warna pure black. Ketika Anda menggunakan warna tersebut dengan teks berwarna putih terang, hal tersebut justru akan membuat mata pengguna menjadi tidak nyaman ketika melihat ke layar.
Sebagai gantinya, sebaiknya Anda memilih warna abu-abu gelap seperti pada kode #121212. Warna abu-abu gelap dapat menghasilkan tampilan dan nuansa yang sama seperti ketika Anda menggunakan pure black atau hitam murni, namun dapat memperhalus kontras antara teks dan latar belakang.
3. Hindari warna-warna jenuh atau saturated color
Warna-warna jenuh pada umumnya akan terlihat bagus dengan latar belakang putih. Namun ketika Anda menyediakan teks dengan warna jenuh dan meletakknya pada latar belakang yang gelap, maka teks yang disediakan akan menjadi sulit untuk dibaca. Bayangkan teks berwaarna merah, kuning, atau biru berada di atas background abu-abu gelap, tentu Anda akan sulit membacanya bukan?
4. Pastikan ada cukup kontras pada warna yang digunakan
Kontras warna adalah kunci dalam desain dark mode karena latar belakang harus cukup gelap agar teks putih mudah dibaca. Google Material Design merekomendasikan penggunaan tingkat rasio kontras minimal 15.8:1 antara teks dan latar belakang. Rasio kontras tersebut digunakan untuk desain yang menggunakan teks berwarna putih. Namun apabila teks tidak berwarna putih, maka rasio kontras yang sebaiknya digunakan adalah 4.5:1.
5. Lembutkan warna putih
Dalam pembuatan desain dark mode, selain menghindari warna pure black Anda juga sebaiknya menghindari warna pure white atau putih murni seperti kode #FFFFFF. Pada latar belakang yang gelap, warna pure white akan terlihat terlalu terang dan menciptakan pengalaman visual yang menggelegar bagi user. Solusinya, lembutkan warna putih yang Anda gunakan dengan membuatnya menjadi sedikit lebih gelap.
6. Perhatikan aspek emosional dari desain Anda
Warna sebenarnya dipersepsikan secara berbeda tergantung pada latar belakangnya. Artinya, tema gelap tidak berkomunikasi dengan cara yang sama dengan tema terang. Dengan demikian, tema gelap dan terang akan selalu membangkitkan emosi yang berbeda.
Sebagai contoh, warna merah muda yang cerah pada latar belakang terang dapat terasa ringan atau mampu menunjukkan kesan yang menyenangkan. Namun saat warna terseniy digunakan pada latar belakang gelap, mungkin aspek emosional yang ditampilkan adalah kesan yang misterius.
Oleh karena itu, perhatikan kembali pemilihan warna yang akan digunakan. Pastikan warna yang dipilih dapat mengirimkan emosi atau pesan yang tepat kepada user.
7. Komunikasikan kedalaman desain
Buat hierarki konten yang jelas pada desain situs web Anda. Pada latar belakang yang terang, hal tersebut dapat dicapai dengan membuat bayangan. Namun perlu Anda ingat, bahwa UI gelap tidak memungkinkan untuk membuat bayangan. Sebagai gantinya Anda dapat membuat konten terlihat menonjol dengan menerangi permukaan elemen-elemen tersebut.
Baca Juga: 3 Keuntungan yang Anda Dapat dari Web Desain Minimalis
Membuat desain dark mode memang memiliki tantangan tersendiri. Teks dapat menjadi sulit untuk dibaca atau mengirimkan pesan berbeda dengan apa yang diinginkan. Di sisi lain, desain dark mode juga memberikan beragam keuntungan. Selain dapat membuat style aplikasi terlihat modern, user juga dapat mengoperasikan aplikasi dengan nyaman karena desain dapat mengurangi ketegangan mata. Oleh karena itu, pastikan ketika membuat desain gelap, desain tersebut memiliki UI dan UX yang baik dengan penggunanya.
