Dark mode atau mode gelap menjadi salah satu fitur yang banyak diminati beberapa tahun terakhir. Dark mode merupakan mode tambahan yang dapat digunakan untuk memperlihatkan tampilan gelap di UI. Ketika Anda menggunakan mode ini, cahaya yang dipancarkan oleh layar perangkat akan dikurangi namun desain tetap dapat mempertahankan raiso warna yang dibutuhkan untuk readability. Dark mode juga meningkatkan visual ergonomics dengan mengurangi ketegangan mata dan memfasilitasi layar agar bisa menyesuaikan dengan kondisi cahaya sehingga dapat membuat nyaman penggunanya.
Table of Contents
Kelebihan Desain Dark Mode
Seperti yang kita ketahui, saat ini sebagian besar orang menghabiskan banyak waktu untuk melihat layar perangkat digital mereka, baik itu smartphone atau pun dekstop. Dengan hadirnya dark mode ini, pengguna dapat mengistirahatkan mata yang lelah karena harus melihat layar yang terang.
Mode memiliki berbagai kelebihan. Apple mengatakan bahwa mode gelap dapat membuat pengguna menjadi lebih fokus pada pekerjaan. Begitu pula dengan Microsoft yang menyatakan bahwa mode gelap dapat mengurangi ketegangan mata dan menghemat daya baterai yang digunakan.
Berdasarkan data yang diperoleh dari business2community.com, terlalu lama melihat layar yang terang dapat memberikan beberapa dampak seperti ketegangan mata, mata kering, pusing, dan lain-lain. Jadi, tidak ada salahnya jika Anda menambahkan desain dark mode pada aplikasi atau sistem yang akan Anda kembangkan.
Tips Membuat Desain Dark Mode
-
Hindari warna hitam atau pure black
Membuat desain dark mode bukan berarti Anda bisa menggunakan warna putih dengan warna hitam pekat seperti # 000000 sebagai latar belakangnya. Warna-warna tersebut kadang justru bisa membuat mata pengguna menjadi tidak nyaman. Sebagai gantinya, sebaiknya Anda menggunakan warna abu-abu gelap untuk warna utama komponen. Warna abu-abu gelap seperti # 121212 dapat mengurangi ketegangan mata sehingga teks berwarna terang akan lebih nyaman untuk dibaca.
-
Hindari saturated color atau warna jenuh
Saturated color dapat terlihat bagus pada latar yang terang, namun tidak sesuai pada latar gelap karena membuat teks menjadi sulit untuk dibaca. Oleh karenanya, desaturate warna primer untuk membuat kontras yang pas. Gunakan tone yang lebih terang yaitu diantara range 200-50 karena warna-warna tersebut memiliki readability yang baik untuk dark mode.
-
Memenuhi standar rasio kontras
Pastikan teks atau konten yang Anda sediakan dapat dibaca dengan nyaman di dark mode. Sebagai panduan, jika Anda menggunakan warna putih untuk teks, maka rasio kontras yang harus dicapai adalah 15.8:1. Namun jika tidak menggunakan warna putih, maka rasio kontras yang digunakan adalah 4.5:1. Untuk mengujinya Anda dapat menggunakan alat penguji rasio seperti webaim.org .
-
Sediakan fitur switch ke mode biasa
Ketika Anda mengaplikasikan mode gelap pada aplikasi yang dibuat, Anda harus menyediakan fitur yang memungkinkan pengguna untuk mengubah mode sesuai keinginan mereka. Hal ini juga akan berpengaruh pada User Experience karena desain membuat pengguna memiliki kendali untuk memilih mode yang diinginkan.
Layanan Logique Digital Indonesia
Logique Digital Indonesia merupakan konsultan IT profesional dengan beberapa layanan seperti jasa pengembangan aplikasi, pembuatan website, web design, optimasi SEO, dan masih banyak lagi. Jika saat ini Anda sedang berencana untuk mengembangkan website atau aplikasi, Anda dapat menggunakan layanan kami. Silakan hubungi kami atau klik layanan Logique untuk mendapatkan informasi lebih lanjut.
