Redupkan lampu, rilekskan mata, dan hemat energi. Mode gelap adalah salah satu tren terbesar dalam desain, dan merek kelas dunia seperti WhatsApp, Instagram, Google, Facebook, dan Apple telah menggunakan kereta desain mode gelap.

Ilustrasi desain aplikasi tema Gelap
Ilustrasi mode gelap oleh Vladanland
Mari kita lihat apa yang dilakukan oleh merek-merek terkenal ini dan bagaimana Anda dapat membawa UI mode gelap ke dalam desain Anda sendiri. Anda akan mempelajari pro dan kontra mode gelap dan praktik terbaik yang penting ketika merancang mode gelap untuk memastikan web dan desain aplikasi terlihat dan berfungsi dengan sempurna.

Apa itu mode gelap?
–
Mode gelap adalah antarmuka pengguna dengan pencahayaan rendah (UI) yang menggunakan warna gelap — biasanya hitam atau warna abu-abu — sebagai warna latar belakang utama. Ini adalah pembalikan dari UI putih standar yang digunakan desainer selama beberapa dekade. Dengan bertambahnya waktu layar kami, pengembang menemukan bahwa antarmuka tema gelap membantu mengatasi ketegangan mata, terutama dalam situasi kurang cahaya atau malam hari. Lebih sedikit ketegangan mata berarti lebih sedikit sakit kepala dan pengalaman kerja yang lebih baik.

Tetapi mode gelap sebenarnya bukan sesuatu yang baru.

Ingat kode komputer hijau menghujani latar belakang hitam di Matriks? Itu anggukan mode gelap asli: monitor monokrom tua-sekolah, dari komputer pertama.

Tampilan gelap klasik keluar dari gaya di 80-an mendukung teks hitam pada latar belakang putih yang dirancang untuk meniru tampilan tinta di atas kertas.

Selama hampir tiga dekade, ini adalah norma, sampai mode gelap membuat comeback pertama di Windows Phone 7 pada 2010. Setelah Google memverifikasi bahwa mode gelap menghemat masa pakai baterai, mereka menambahkan fitur ke OS Android mereka pada 2018. Setahun kemudian, Apple diikuti dengan mode gelap di iOS dan iPadOS.

Kelebihan menggunakan mode gelap
Mode gelap tidak hanya mudah di mata (bila dilakukan dengan benar), tetapi gaya ini menghemat masa pakai baterai dan bahkan bisa lebih sehat. Mari kita lihat manfaat praktis dari mode gelap vs. mode terang.

Mengurangi ketegangan mata
Anda tidak seharusnya merasakan mata Anda. Tetapi, siapa pun yang menganalisis data di layar untuk waktu yang lama tahu bahwa setelah beberapa saat, Anda mulai merasakannya. Computer Vision Syndrome (CVS) termasuk sakit mata, penglihatan kabur, penglihatan ganda, sakit kepala , nyeri leher / punggung, dan banyak lagi. Ketika berbicara tentang bagan dan grafik, mode gelap dapat membantu mengurangi rasa sakit secara harfiah.

Meningkatkan visibilitas dalam pencahayaan ambien rendah
Jika Anda tertidur dan seseorang menyalakan cahaya terang, Anda akan mengalami sakit kepala. Prinsip yang sama berlaku dengan orang yang bekerja di depan layar komputer larut malam atau dini hari. Mode gelap mengurangi cahaya terang itu dan membuatnya lebih mudah untuk melihat konten dalam situasi cahaya rendah.

Menghemat masa pakai baterai
Gadget digital tertentu dengan layar OLED dapat mematikan piksel hitam ketika sedang tidak digunakan. Mode gelap menggunakan peningkatan jumlah piksel hitam, yang memaksa perangkat untuk menggunakan lebih sedikit energi.

Memberikan dorongan emosional
Banyak pengguna mode gelap UI berada di dalamnya untuk manfaat kesehatan dan hemat energi daripada alasan estetika. Mode gelap mengingatkan mereka bahwa mereka melakukan sesuatu yang sedikit lebih sehat, yang memicu perasaan yang baik — semacam perasaan senang yang Anda dapatkan saat Anda mengisi tas belanja atau botol air yang dapat digunakan kembali.

Mencegah ADD
Yah … agak. Cahaya putih dan warna cenderung membuat perhatian Anda melayang, yang membuatnya lebih sulit untuk tetap pada tugas. Mode gelap UI dapat meningkatkan fokus dengan mengarahkan konsentrasi Anda ke zona konten antarmuka Anda, membiarkan konten itu muncul dan latar belakang menghilang. .

Kontra menggunakan mode gelap
Seperti apa pun, mode Gelap memiliki kekurangannya. Mari membiasakan diri dengan alasan bahwa tema gelap bisa menjadi kelemahan untuk tujuan Anda.

Mengurangi koneksi emosional
Warna-warna cerah dapat menciptakan emosi yang cerah. Jika itu yang dicari pemirsa Anda, maka meredupkan warna dapat menciptakan hambatan mental dengan mereka. Mereka akan lebih sulit membuat hubungan emosional dengan tema gelap. Jika merek Anda memotivasi, inspirasional, atau bersifat spiritual, mode gelap UI bisa menjadi pertaruhan. Jika warna-warna cerah dapat menciptakan emosi yang cerah, yang terjadi adalah sebaliknya. Jadi siapa audiens Anda? Jangan memadamkannya jika mereka sedang mencari tumpangan.

Mengecilkan ruang
Kamar dengan dinding gelap dapat terasa sesak. Pada perangkat, mode gelap dapat bekerja dengan cara yang sama. Jika Anda mencoba untuk menciptakan ruang, UI gelap dapat membuat ruang terasa lebih kecil.

Warna kontras rendah mungkin sulit dibaca
Jika Anda tidak mendapatkan warna dan kontras yang tepat saat mendesain situs web atau aplikasi tema gelap, itu dapat membuat teks lebih sulit untuk dibaca, jadi ingatlah itu ketika membuat surel mode gelap, aplikasi atau desain situs web.

Cara menggunakan mode gelap dalam desain
–
Desain mode gelap dapat bekerja di mana saja. Dari aplikasi seluler hingga jam tangan pintar hingga antarmuka TV, tren desain ini dapat memajukan merek Anda. Lakukan dengan benar dan mode gelap dapat berfungsi seperti gangbusters. Lakukan salah dan desain Anda dapat mematikan pengguna dengan segera. beberapa kiat utama saat merancang situs web tema gelap atau antarmuka aplikasi:

Kapan menggunakan mode gelap
Cocokkan warna merek Anda
Ketika palet warna merek yang sudah ada sudah mode gelap yang kompatibel, para dewa mode gelap tersenyum pada Anda.

Pikirkan dua kali tentang menjadi gelap jika sepertinya Anda harus mengubah merek agar sesuai dengan estetika. Demikian pula, jika merek Anda perlu menggunakan spektrum warna yang luas, pertimbangkan UI yang lebih terang. Spektrum penuh warna tidak cocok untuk kegelapan. latar belakang.

Sorot industri Anda
Mode gelap UI juga berguna untuk meningkatkan industri tertentu, misalnya, merek yang berfokus pada kehidupan malam dan hiburan sangat cocok untuk mode gelap karena konten berenergi tinggi sering dipasangkan dengan latar belakang gelap dalam kehidupan nyata.

Pergi minimalis
Jika estetika desain Anda sudah minimalis dengan konten terbatas, kondisi Anda baik untuk mode gelap. Dalam situasi di mana teks adalah konten utama, UI gelap dapat membuat keterbacaan menjadi masalah. Biasanya, mode gelap memperkuat kekacauan visual membuat layar berantakan bahkan lebih membuat layar berantakan. semrawut.

Hasilkan emosi
Mencoba menciptakan respons emosional tertentu? Seperti suasana misteri atau drama kecil? Karena visibilitas rendah menciptakan keingintahuan dan memperkuat ketegangan emosional, mode gelap mungkin merupakan kendaraan yang sempurna untuk merek Anda.

Simbol status
Jika Anda ingin menghasilkan perasaan status, UI mode gelap dapat menjadi alat yang efektif. Warna gelap membangkitkan emosi yang terkait dengan kemewahan dan kemakmuran. Jika Anda ingin menarik perhatian pada pengerjaan halus, pertimbangkan UI mode gelap.

Praktik terbaik untuk desain mode gelap
–
Ada beberapa proses yang perlu bekerja dengan baik ketika membuat UI mode gelap. Setelah semua, Anda ingin produk Anda menendang, kan? Mari kita centang semua kotak pada daftar periksa praktik terbaik mode gelap kami:

1. Jangan terlalu gelap
Penerbit buku tidak menggunakan kertas putih karena kontras dengan tinta hitam terlalu mencolok. Itu membuat Anda menyipit dan menyebabkan sakit kepala. Hal yang sama juga berlaku untuk perangkat digital. Menghindari hitam murni. Sulit di mata untuk melihat layar kontras tinggi. Warna mode gelap yang baik adalah nuansa abu-abu dikombinasikan dengan warna desaturasi.

2. Memiliki kontras yang tepat
Latar belakang mode gelap harus cukup gelap untuk menampilkan teks putih. Saran dari Google Material Design adalah untuk menggunakan tingkat kontras teks ke latar belakang minimal 15,8: 1.

3. Desaturasikan warna Anda
Jauhkan dari warna-warna jenuh penuh pada latar belakang gelap. Nuansa sering tampak “bergetar” ketika dilihat pada permukaan gelap. Sebaliknya, gunakan warna desaturasi seperti warna pastel dan warna yang diredam — warna yang ditambahkan abu-abu dan putih.

Juga, pertimbangkan untuk menyesuaikan palet warna merek Anda. Biru perusahaan Anda mungkin membaca secara berbeda tentang hitam daripada putih. Warna dalam mode gelap sering harus diubah untuk mendapatkan respons yang sama dengan yang Anda dapatkan dalam mode cahaya.

4. Gunakan warna “on” yang tepat
Apa itu “on” warna? Salah satu yang muncul di atas elemen dan permukaan tombol. Warna “On” biasanya digunakan untuk huruf. Mode gelap UI default “on” warna adalah putih bersih (#FFFFFF) .Jangan menggunakannya #FFFFFF tampak bergetar bila dilihat dengan latar belakang gelap. Gunakan abu-abu terang.

5. Jangan hanya membalikkan
Jika Anda beralih ke mode gelap dari mode standar, mungkin ada isyarat visual yang berharga dalam tema asli. Jangan hanya membalikkan warna untuk mendapatkan tema gelap Anda. Anda mungkin mengubah warna yang memiliki tujuan psikologis menjadi warna tanpa makna yang tidak berarti. Bersikaplah sadar tentang pemilihan warna Anda.

6. Mendalam
Semakin tinggi sebuah layer, semakin terang seharusnya. Ini akan membuat hierarki visual dalam mode gelap yang beralih dari elemen yang paling sering digunakan dalam tampilan Anda menjadi yang paling sedikit.

7. Uji dan tawarkan kebebasan
Uji kedua versi mode gelap dan terang desain Anda. Percobaan dengan masing-masing gaya dan buat tweak yang tepat berdasarkan umpan balik pengguna. Pada akhirnya, preferensi orang bisa tidak dapat diprediksi, jadi jangan membuat lubang pengguna Anda. Biarkan mereka mengubah tampilan mereka dari cahaya mode ke mode gelap. Ini memberi pengguna kesempatan untuk mengontrol pengalaman mereka sendiri dan membuat mereka merasa lebih seperti individu.

sumber:graphie.co.id