Sorotan: Prinsip Desain UI Gelap

Desain UI gelap terlihat jauh dan luas, dari layar ponsel hingga TV besar. Tema gelap dapat mengekspresikan kekuatan, kemewahan, kecanggihan, dan keanggunan. Namun, mendesain untuk UI gelap menghadirkan banyak tantangan dan tidak akan memenuhi harapan jika diterapkan dengan buruk. Sebelum menyelam ke "sisi gelap", desainer harus melihat sebelum mereka melompat.

Fisikawan mengatakan hitam sebenarnya bukan warna; itu adalah tidak adanya cahaya . Dalam eksperimennya menyinari sinar matahari melalui prisma, Sir Isaac Newton bahkan tidak memasukkannya ke dalam spektrum warna.

Dalam psikologi warna, sebagian besar warna mewakili hal yang berbeda untuk orang yang berbeda. Dalam budaya Barat, hitam sering dikaitkan dengan kematian, misteri, dan kejahatan. Hijau sering dikaitkan dengan pertumbuhan karena alam. Biru hampir secara universal menenangkan karena dikaitkan dengan langit dan air. Warna itu emosional.

Efek lainnya adalah budaya. Ungu, misalnya, masih diasosiasikan dengan kemewahan karena di banyak budaya kuno, pewarna ungu mahal dan langka—hanya bangsawan yang mampu membelinya. Itu adalah bagian penting dari zeitgeist budaya cukup lama untuk menjadi bagian dari jiwa manusia .

Produk digital dengan UI gelap— terkait dengan kekuatan, keanggunan, dan misteri —adalah tren yang tangguh. Meskipun sering dikatakan bahwa mode gelap dapat mengurangi ketegangan mata, tidak ada bukti bahwa ini benar. Dalam keadaan tertentu, itu juga seharusnya menghemat masa pakai baterai. Namun, lebih sering daripada tidak, tema gelap adalah pilihan estetika.

UI Gelap vs. UI Terang

Tidak semua antarmuka cocok untuk tema gelap. Desainer harus melihat kecocokan merek, kesesuaian budaya, dan psikologi warna dan mempertimbangkan dampak emosional sebelum memilih untuk menggunakannya. Ini adalah tindakan penyeimbangan yang rumit.

Sementara aplikasi keuangan yang menargetkan milenium dapat mencapai faktor keren dengan tema gelap, mungkin tidak sesuai untuk situs web bank besar yang ditujukan untuk masyarakat umum. Terlalu kaya, terlalu gelap, dan terlalu bergaya bisa menjadi lebih membuat frustrasi ketika semua orang hanya ingin memeriksa saldo mereka dan membayar tagihan.

UI gelap aplikasi B2B SaaS terkenal sulit untuk dirancang. Komponen UI web standar seperti tabel data, widget, formulir, dan dropdown dapat terlihat aneh pada UI yang gelap. Karena banyak skema warna tidak bekerja dengan baik dengan UI gelap, merek dan produk tertentu—bergantung pada jenis, konteks, dan faktor lingkungan—tidak cocok dan mungkin menjadi tantangan yang tidak dapat diatasi.

Desainer yang belum pernah bekerja dengan desain UI gelap sebelumnya dan memutuskan untuk terjun dengan kedua kaki mungkin menemukan diri mereka berada di perairan yang kasar dan belum dipetakan. Di lautan UI yang gelap, norma dibengkokkan, aturan diubah, dan jebakan banyak sekali.

Karena itu, ada banyak alasan bagus untuk menggunakan UI gelap:

• Ketika desain jarang dan minimalis dengan hanya beberapa jenis konten
• Ketika sesuai untuk konteks dan penggunaan, seperti aplikasi hiburan malam hari
• Untuk menciptakan tampilan yang mencolok dan dramatis

Dan, ada skenario yang tidak direkomendasikan:

• Ketika ada banyak teks (membaca dengan latar belakang gelap sulit)
• Ketika ada banyak jenis konten campuran
• Saat desain membutuhkan berbagai warna

Kontras dalam Desain UI Gelap

Tema gelap bukanlah tema hitam. Ini akan dianggap sebagai tema "cahaya rendah". Salah satu perhatian utama dengan UI gelap adalah mencapai kontras yang cukup sehingga elemen visual memiliki pemisahan dan teks dapat dibaca. Kebanyakan desainer akan berpikir menggunakan warna hitam akan optimal untuk mencapai kontras yang kuat. Namun, sebaiknya tidak menggunakan warna hitam asli (#000000) untuk latar belakang atau warna permukaan . Hitam paling baik dicadangkan untuk elemen UI lainnya dan digunakan dengan hemat. Misalnya, true black dapat digunakan untuk elemen UI kecil atau bezel di sekitarnya.

Tema gelap Desain Material Google merekomendasikan penggunaan abu-abu gelap (#121212) sebagai warna permukaan tema gelap "untuk mengekspresikan ketinggian dan ruang di lingkungan dengan rentang kedalaman yang lebih luas." Selain itu, banyak desainer merekomendasikan untuk menambahkan warna biru tua yang halus ke abu-abu gelap saat menentukan skema warna. Ini cenderung menciptakan nada gelap yang lebih baik untuk layar digital dan palet warna UI gelap yang lebih menyenangkan.

Keuntungan menggunakan rentang abu-abu adalah memberikan kebebasan bagi desainer karena rentang warna yang lebih luas dapat diekspresikan. Palet abu-abu juga membantu menciptakan kedalaman karena bayangan jatuh dapat lebih mudah dilihat dibandingkan abu-abu vs hitam.

Perhatian khusus harus diberikan pada kontras teks di UI gelap.

Pedoman Aksesibilitas Konten Web (WCAG) menyerukan “presentasi visual teks memiliki rasio kontras minimal 4,5:1 ,” kecuali untuk teks skala besar, yang harus memiliki rasio kontras minimal 3:1 . Oleh karena itu, desainer perlu memastikan bahwa konten tetap dapat dibaca dengan nyaman dalam mode gelap.

Ini juga merupakan ide yang baik untuk menguji kontras yang tepat antara elemen UI lainnya, seperti kartu, tombol, bidang, dan ikon pada berbagai tampilan dan perangkat. Jika ada pemisahan yang tidak terlihat antara elemen UI, desainnya terlalu banyak bercampur dan berisiko menjadi kusam.

Memfokuskan Perhatian: Warna

Warna menonjol di UI gelap. Sebaiknya gunakan skema dengan warna aksen yang lebih terang dan tidak jenuh. Hindari penggunaan warna jenuh di UI gelap, karena dapat bergetar secara visual terhadap permukaan gelap. Terlebih lagi, sebagai praktik terbaik, warna harus melewati standar AA WCAG setidaknya 4,5:1 saat digunakan dengan teks.

Saat menentukan skema warna untuk UI gelap, Google merekomendasikan aksen warna dalam jumlah terbatas agar sebagian besar ruang tetap tersedia untuk permukaan gelap. Menggunakan warna komplementer split dapat membantu. Skema ini memiliki satu warna dominan dan dua warna yang berdekatan dengan komplemen warna dominan. Melakukan hal ini memberikan kontras yang dibutuhkan tanpa ketegangan skema warna komplementer.

Skema warna yang tepat dapat membantu menciptakan kontras yang baik. Colorable adalah alat yang berguna untuk memilih kombinasi warna teks dan warna latar belakang yang sesuai dengan aksesibilitas.

Teks dan elemen penting, seperti tombol dan ikon, harus memenuhi standar keterbacaan saat muncul di latar belakang gelap. Seperti yang terlihat pada aplikasi Jabra Sound+ di atas, warna selain putih dapat digunakan untuk teks dan ikon.

Situs Desain Material Google memiliki generator palet warna yang berguna (di bawah "Alat untuk memilih warna") yang dapat digunakan desainer untuk membuat dan menerapkan palet warna ke UI. Tingkat aksesibilitas kombinasi warna juga dapat diukur dengan Alat Warna pendamping.

“Gunakan warna yang sangat kontras untuk meningkatkan keterbacaan. Banyak faktor yang mempengaruhi persepsi warna, termasuk ukuran dan berat font, kecerahan warna, resolusi layar, dan kondisi pencahayaan.” Panduan Antarmuka Manusia Apple

Lebih Sedikit Lebih Banyak: Memanfaatkan Ruang Negatif

Salah satu elemen mendasar dari desain UI gelap yang sukses adalah penggunaan ruang negatif yang cerdik. Jika dirancang dengan buruk, UI yang gelap dapat membuat produk digital tampak berat dan sombong. Untuk mengimbanginya, desainer dapat membuat UI gelap menjadi lebih ringan dengan memanfaatkan ruang negatif dalam desain minimalis yang jarang. Desain minimalis sama pentingnya dengan apa yang tidak ada seperti apa adanya. Bila digunakan dengan terampil, ruang negatif akan membuat UI yang gelap lebih dapat dipindai dan memungkinkan orang menyerap informasi dengan lebih mudah.

Komposer Prancis Claude Debussy pernah berkata, “ Musik adalah ruang di antara nada-nada .” Sentimen yang sama berlaku untuk kemampuan pemindaian—ruang negatif di antara elemen-elemen inilah yang membuat tata letak berfungsi. Sejumlah besar ruang negatif di sekitar elemen UI adalah apa yang memberi mereka definisi. Ini menekankan konten penting dan menyediakan ruang bernapas yang diperlukan untuk memastikan desain tidak terasa padat dan berantakan. Tanpa ruang bernapas, otak manusia cenderung tidak memindai tempat menarik dan lebih cenderung mengembara.

Antarmuka yang penuh dengan terlalu banyak elemen dan teks adalah kutukan dari desain UI gelap berkualitas tinggi. Dengan hati-hati mempertimbangkan hierarki visual di UI gelap, desainer dapat membuat kreasi mereka lebih mudah dipindai, sehingga meningkatkan pengalaman pengguna.

Gaya Kata: Tipografi

Setiap bagian teks di UI gelap membutuhkan pengawasan. Perhatiannya ada dua: keterbacaan dan kontras. Pertama, ini tentang ukuran. Teks harus cukup besar untuk keterbacaan yang baik (teks kecil dengan latar belakang gelap lebih sulit dibaca). Kedua, perlu ada kontras yang cukup antara teks dan latar belakang.

Ketersediaan ribuan font digital memudahkan untuk menampilkan pesan dengan dampak untuk header dan pesan pahlawan. Desainer dapat mengurangi masalah keterbacaan dengan meningkatkan kontras dan menyesuaikan ukuran font, spasi karakter, dan tinggi baris untuk teks yang lebih kecil.

Rekomendasi W3C AAA untuk teks berukuran biasa (kurang dari 18 poin jika tidak dicetak tebal) adalah memiliki rasio kontras minimal 7:1 . Ini juga berlaku untuk elemen UI lainnya: ikon, gambar teks, dan label teks, seperti label tombol. Adalah kewajiban desainer untuk memastikan bahwa semua produk digital dapat diakses oleh semua orang. Ini tidak hanya meningkatkan kegunaan, dan karena itu UX, itu adalah hukum di sebagian besar negara.

Ada banyak pilihan yang tersedia bagi desainer untuk mendapatkan tipografi luar biasa yang bekerja dengan baik di UI gelap. Google Fonts, Font Library, dan Adobe Typekit adalah beberapa yang menawarkan integrasi aplikasi atau situs yang mudah dan berbagai pilihan.

Kedalaman Komunikasi: Ketinggian

Tema gelap tidak berarti datar. Dengan tema cahaya, iluminasi, bayangan, dan bayangan menciptakan kesan mendalam. Dengan UI gelap, ini lebih menantang karena mengandung permukaan yang didominasi gelap dengan aksen warna yang jarang. Namun, desainer dapat menggunakan tiga atau empat tingkat elevasi dengan skema warna yang sesuai untuk teks untuk menyampaikan kedalaman.

Mengapa kedalaman? Kebanyakan sistem desain modern menggunakan sistem tingkat elevasi untuk mengkomunikasikan kedalaman. Rasa kedalaman sesuai dengan alam. Visi kami memiliki persepsi mendalam, dan kami hidup di dunia 3D. Kedalaman membantu untuk menekankan hierarki visual antarmuka. Elemen di latar depan, misalnya, menarik perhatian pada diri mereka sendiri, seperti dialog peringatan.

Permukaan diterangi secara berbeda untuk menandakan tingkat ketinggian yang berbeda. Semakin tinggi posisi permukaan di tumpukan elevasi (lebih dekat ke sumber cahaya tersirat), semakin ringan permukaannya. Permukaan yang lebih cerah memudahkan untuk membedakan ketinggian antar komponen, dan membantu melihat bayangan, membuat tepi setiap permukaan lebih jelas.

Merancang warna permukaan setiap level membutuhkan kehati-hatian. Yang terbaik adalah tidak memiliki lebih dari empat atau lima level. Desainer perlu memperhitungkan kontras teks karena permukaan menjadi lebih tinggi dalam tumpukan dan menjadi lebih ringan. Jika warna latar belakang tidak cukup gelap untuk memenuhi tingkat kontras setidaknya 15.8:1 antara teks putih dan permukaan, teks pada permukaan yang ditinggikan tertinggi (dan paling terang) tidak akan melewati standar 4.5:1. Dalam beberapa kasus, mungkin lebih baik untuk menentukan warna teks elemen sebagai hitam sejati (#000000) dalam sistem desain untuk mencapai kontras yang baik pada latar belakang abu-abu muda.

Inspirasi Desain UI Gelap

Merefleksikan prinsip-prinsip yang diuraikan di atas, berikut adalah beberapa contoh bagus dari desain UI gelap:

Atom Finance memanfaatkan tema gelap untuk tampilan yang canggih dan membatasi warna aksennya menjadi tiga. Tata letak menggunakan ruang negatif dan desain minimalis yang jarang untuk situs web keuangan yang kompleks. Situs ini menggunakan bayangan halus dengan baik untuk menunjukkan elevasi komponen yang berbeda di UI.

Kedua situs web tema gelap minimalis ini menggunakan tipografi tebal. Bayangan hati-hati dengan satu warna aksen digunakan selaras dengan praktik terbaik desain UI gelap.

Terlepas dari tantangan bekerja dengan tema gelap untuk aplikasi SaaS, dasbor visualisasi data untuk IBM ini patut dicontoh. Jumlah warna aksen dijaga agar tetap minimum, dan situs menggunakan bayangan halus untuk menunjukkan elevasi UI yang berbeda.

Aplikasi seluler ini mengamati praktik terbaik desain UI gelap dengan menggunakan warna hitam pekat hanya untuk bezel, bayangan elemen yang tepat untuk tingkat ketinggian yang berbeda, dan warna aksen dalam jumlah terbatas.

Ringkasan

Keputusan untuk menggunakan desain UI gelap di atas yang tradisional perlu didekati dengan bijaksana. Itu tidak boleh dipilih untuk alasan yang salah—untuk menjadi trendi, berbeda, atau meniru desain orang lain. Desainer harus memiliki alasan yang kuat untuk pilihan mereka dan mempertimbangkan konten, konteks penggunaan, dan perangkat di mana desain akan muncul.

Tema gelap cocok untuk beberapa produk digital tetapi sulit diterapkan untuk yang lain. Kesederhanaan adalah kuncinya. Mereka bagus untuk menyajikan konten minimalis, visualisasi data, situs media, dan platform hiburan. Mereka tidak cocok untuk platform B2B yang kompleks dan banyak data, halaman dengan banyak teks, dan banyak konten yang bervariasi.

Untuk desainer pemberani yang siap melintasi batas gaya baru dan menjelajahi UI gelap melalui lensa emosional dan estetis, mereka menawarkan taman bermain yang menarik dengan kemungkinan tak terbatas—di "sisi gelap".

Beri tahu kami pendapat Anda! Silakan tinggalkan pemikiran, komentar, dan umpan balik Anda di bawah ini.

• • •

Bacaan lebih lanjut di Blog Desain Toptal:

• UI gelap. Yang baik dan yang buruk. Anjuran dan Larangan.
• Prinsip Desain dan Kepentingannya
• Menjelajahi Prinsip Desain Gestalt
• Menarik dan Bergerak – Panduan Prinsip-Prinsip Desain Gerak
• Tingkatkan UX Anda dengan Prinsip Desain Interaksi yang Sukses Ini