{"id":11088,"date":"2021-12-29T00:00:00","date_gmt":"2021-12-29T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2021\/12\/29\/dark-mode-ui-best-practices-communicate-depth\/"},"modified":"2024-09-24T02:20:07","modified_gmt":"2024-09-24T02:20:07","slug":"dark-mode-ui-best-practices-communicate-depth","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2021\/12\/29\/dark-mode-ui-best-practices-communicate-depth\/","title":{"rendered":"Dark Mode UI Best Practices \u2013 Communicate Depth"},"content":{"rendered":"<h3>Depth (Kedalaman)<\/h3>\n<p>Gunakan skala warna yang lebih terang untuk menafsirkan ketinggian. Hindari menggunakan bayangan dalam mode gelap. Sebagai gantinya, gunakan properti yang mendekati untuk memancarkan tingkat kedalaman untuk elemen <em>UI<\/em>. Elemen yang jauh harus tetap memiliki elevasi yang lebih rendah dibandingkan dengan elemen yang lebih dekat.<\/p>\n<p>Hindari menggunakan bayangan dalam mode gelap. Untuk menyampaikan kedalaman dengan lebih baik \u2014 pastikan objek yang lebih dekat dengan pengguna lebih terang. Ini akan membantu membangun hierarki <em>visual <\/em>yang lebih baik.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9749\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-29-at-15.00.16-590x342.png\" alt=\"\" width=\"590\" height=\"342\" \/><\/p>\n<h3>Pastikan mode gelap anda kontras<\/h3>\n<p>Mode gelap, sama seperti cahaya yang harus memenuhi standar <em>WCAG <\/em>minimum untuk memastikan semua teks dapat dibaca dengan kontras yang cukup. Anda dapat menggunakan <em>plugin<\/em> untuk memeriksa desain kontras anda di tempatnya.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9750\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-29-at-15.01.44-589x342.png\" alt=\"\" width=\"589\" height=\"342\" \/><\/p>\n<h3>Desain mode terang<\/h3>\n<p>Saat membawa desain anda dari mode terang ke mode gelap, pertahankan semua tanda visual di tempatnya. Jangan abaikan atau hapus beberapa warna demi tema gelap agar tidak membingungkan pengguna. Sebagai gantinya, siapkan palet warna yang berfokus pada warna sebaliknya yang ada tanpa kehilangan efisiensi <em>UI<\/em>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9751\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-29-at-15.02.26-590x342.png\" alt=\"\" width=\"590\" height=\"342\" \/><\/p>\n<h3>Gunakan warna dasar untuk mendesain mode gelap<\/h3>\n<p>Untuk membuatnya dapat diprediksi, ubahlah <em>UI<\/em> bertema terang anda ke sisi gelap. Gunakan satu set warna dasar atau \u201cnetral\u201d dengan nilai transparansi yang sama sejak awal proyek anda. Satu set warna transparan dapat sangat memudahkan hidup anda. Alih-alih terus-menerus memilih warna abu-abu yang berbeda, Anda dapat menggunakan satu set warna transparan untuk mengubah desain anda ke mode gelap yang dapat diprediksi.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-9752\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2021\/12\/Screen-Shot-2021-12-29-at-15.03.11-588x342.png\" alt=\"\" width=\"588\" height=\"342\" \/><\/p>\n<div class=\"wp-content clear main-read the-640\">\n<p>Artikel merupakan terjemahan dari artikel asli yang berjudul \u201c<a href=\"https:\/\/blog.prototypr.io\/dark-mode-ui-best-practices-8101782de93f\">Dark Mode UI Best Practices<\/a>\u201d oleh\u00a0<a href=\"https:\/\/goncalodiasmm.medium.com\/\">Buninux<\/a>\u00a0yang diterbitkan pada situs\u00a0<a href=\"https:\/\/medium.com\/\">medium.com<\/a><\/p>\n<\/div>\n<div id=\"content-pages\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Depth (Kedalaman) Gunakan skala warna yang lebih terang untuk menafsirkan ketinggian. Hindari menggunakan bayangan dalam mode gelap. Sebagai gantinya, gunakan properti yang mendekati untuk memancarkan tingkat kedalaman untuk elemen UI. Elemen yang jauh harus tetap memiliki elevasi yang lebih rendah dibandingkan dengan elemen yang lebih dekat. Hindari menggunakan bayangan dalam mode gelap. Untuk menyampaikan kedalaman [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":11089,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11088","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11088"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11088\/revisions"}],"predecessor-version":[{"id":11614,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11088\/revisions\/11614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11089"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}