1. Ringkasan
Di Google I/O 2019, Desain Material memperkenalkan panduan untuk membuat tema gelap yang melengkapi tema Material produk Anda yang sudah ada. Meskipun tema terang sangat cocok untuk membaca konten panjang dan menawarkan kontras yang lebih mudah dibaca, tema gelap dengan luminansinya yang lebih rendah memberikan keamanan di lingkungan gelap dan dapat meminimalkan kelelahan mata.
Dalam Material, tema gelap dirancang untuk digunakan sebagai mode tambahan pada tema terang default, dengan mempertahankan identitas unik aplikasi Anda (termasuk gaya untuk warna, bentuk, huruf, dan elevasi) melalui presentasi yang bernuansa dan ramah malam.
Dalam designlab ini, kita akan membahas langkah-langkah yang diperlukan untuk membuat tema gelap berdasarkan tema Material yang ada—menggunakan salah satu Studi Material kami.
Kami akan bekerja sama dengan Reply, aplikasi email yang didesain untuk kejelasan, keterbacaan, intuisi, dan kemudahan penggunaan. Kita akan mempelajari identitas Reply dan membuat keputusan yang cermat untuk mempertahankan momen bermerek di aplikasi sambil membuat tema yang tetap nyaman dalam mode gelap.
Kami juga akan mengembangkan tema lebih lanjut dan menggunakan warna permukaan kustom yang melampaui tema gelap dasar untuk menekankan kembali karakter unik Reply.
Bahan yang diperlukan:
2. Kumpulkan file yang diperlukan
Sebelum memulai, Anda harus mendownload file awal Figma kami. Semua yang Anda perlukan untuk designlab disertakan dalam file ini.
- Download DarkTheme DesignLab Kit.fig (7,6 MB)
3. Menyiapkan lingkungan Anda
Selanjutnya, Anda perlu menyiapkan lingkungan desain Anda.
Pertama, login ke Figma atau buat akun.
Setelah Anda login, impor file yang Anda download pada langkah sebelumnya. Untuk melakukannya, cukup temukan ikon "impor file" di sudut kiri atas layar file Figma dan temukan file di folder "Download" Anda.
Luangkan waktu sejenak untuk melihat-lihat file. Tema ini berisi tema terang, palet tonal bawaan berdasarkan merek aplikasi, dan salinan tema gelap akhir yang akan kita buat.
- Di tab lain, buka Panduan Desain Material untuk tema gelap. Kita akan merujuk pada panduan ini selama designlab.
4. Memahami identitas produk
Sebelum memulai tema gelap untuk Reply, kita perlu memahami beberapa karakteristik merek Reply. Hal ini akan membantu kita membuat pilihan yang tepat tentang tema kita sehingga identitas dan merek Reply dinyatakan secara konsisten di tema terang dan gelap.
Merek Reply menekankan komunikasi. Aplikasi memprioritaskan kualitas fungsional, lebih mengutamakan kemudahan penggunaan daripada elemen desain yang tidak memiliki tujuan fungsional.
Untuk tujuan kita dalam designlab ini, elemen ekspresi merek yang paling penting dalam Reply adalah warna, huruf, dan bentuk.
Warna
Tema warna Reply menggunakan warna primer biru-abu-abu gelap yang dipadukan dengan warna sekunder kuning-oranye.
Karena warna sekunder jarang digunakan, UI Reply sering kali monokromatik, menggunakan variasi warna primernya. Tema warna halus ini memungkinkan konten dibaca dengan mudah tanpa gangguan, dan memungkinkan avatar fotografi terlihat dengan mudah.
Oleh karena itu, warna sekunder Reply memiliki dampak yang sangat besar di mana pun warna tersebut digunakan — menekankan tindakan penting dan dengan jelas menyatakan momen bermerek di seluruh aplikasi.
Jenis
Sebagai aplikasi yang sangat berfokus pada konten dan efisiensi berbasis teks, huruf dan tipografi adalah inti dari ekspresi identitas Reply. Aplikasi ini mengandalkan Work Sans untuk skala huruf lengkapnya, menggunakan berbagai gaya yang menggabungkan enam bobot Work Sans: Light, Regular, Medium, SemiBold, dan Bold.
Membangun seluruh skala huruf dari Work Sans memberikan tipografi yang konsisten dan dapat diprediksi, tetapi organik dan mudah dibaca untuk Reply.
Menurut desainer Work Sans, Wei Huang, kelompok huruf ini dioptimalkan untuk penggunaan di layar. Hal ini menjadikannya ideal untuk membaca bagian teks dalam email atau konten lain secara efisien. Dasarnya yang longgar dalam bentuk Grotesque awal memberikan estetika yang agak lebih ramah dan manusiawi, sementara pelacakan yang lebih luas membuat pembacaan lebih lancar.
Bentuk
Reply memiliki kisah bentuk yang bernuansa, memadukan komponen bulat dan tajam dengan cara yang memperkuat efisiensi dan sifat fungsional daftar email sekaligus memberikan sentuhan yang lebih lembut pada tindakan utama dan komponen yang lebih besar.
- Komponen kecil
- Komponen sedang
- Komponen besar
Komponen kecil seperti tombol dan FAB sepenuhnya bulat, sedangkan komponen sedang seperti kartu email dan panel aplikasi bawah sepenuhnya persegi. Komponen besar seperti pengalih akun dan sheet bawah memiliki sudut yang sedikit membulat.
Bentuk-bentuk ini digabungkan untuk memperkuat pemahaman pengguna tentang lokasi mereka di aplikasi dan bagaimana setiap komponen dibuat, serta bagaimana komponen tersebut berhubungan dengan antarmuka lainnya.
5. Menangani warna
Dengan mengetahui hubungan warna dengan ekspresi merek Reply dalam tema terangnya secara default, kita dapat melakukan penyesuaian yang tepat pada paletnya untuk tema gelap yang dapat digunakan dan ekspresif.
Dalam Material, sistem warna didasarkan pada palet tone — palet ini menggunakan warna merek Anda untuk membuat serangkaian varian yang harmonis dan digabungkan dalam sistem warna komprehensif yang diterapkan di seluruh aplikasi Anda, sehingga memastikan gaya dan keterbacaan.
Dalam file Figma, Anda dapat melihat palet warna primer dan sekunder Reply. Panah terang di atas setiap palet menunjukkan nilai yang digunakan dalam tema terang Reply, sedangkan panah gelap menunjukkan varian yang akan kita gunakan dalam tema gelap.
Saat membuat tema gelap dengan Material, varian yang lebih terang dipilih agar sistem warna Anda tetap ekspresif dan mempertahankan kontras yang sesuai tanpa menyebabkan ketegangan pada mata. Warna yang lebih tersaturasi cenderung "bergetar" secara visual pada latar belakang yang lebih gelap, sehingga lebih sulit dibaca. Nuansa yang lebih terang juga memberikan fleksibilitas yang lebih besar dalam memvariasikan warna permukaan yang ditinggikan, yang akan kita bahas sebentar lagi.
6. Menyesuaikan warna permukaan
Setelah memahami palet tonal Reply dan warna yang akan kita gunakan dalam tema gelap, kini saatnya mulai menyesuaikan nilai warna dalam mockup.
Dalam tema gelap Material, lapisan antarmuka paling bawah biasanya berwarna abu-abu tua dengan nilai hex #121212.
- Di file Figma, temukan artboard bernama "Reply Starter" dan pilih lapisan bernama "Background".
- Di bagian "Isi" di panel inspektur di sisi kanan layar, tetapkan nilai warna ke 121212, lalu tekan Return.
- Papan gambar Anda akan terlihat seperti ini:
Dalam tampilan kotak masuk monokromatik Reply, kartu email memiliki warna yang sedikit lebih terang daripada latar belakang, jadi kita harus memberikan perlakuan yang sama pada kartu dalam tema gelap untuk mempertahankan hierarki visual kotak masuk.
- Di artboard yang sama, perluas grup yang disebut "Kartu email" dan pilih semua lapisan yang disebut "Kartu email."
- Seperti sebelumnya, pilih nilai Fill di panel pemeriksa. Tetapkan nilai ke 121212, lalu tekan Return.
- Sekarang, pilih hanya lapisan yang disebut "Email card overlay." Lapisan ini akan memungkinkan kita membuat overlay yang membedakan kartu email dari latar belakangnya.
- Beri lapisan Pengisi dan buat FFFFFF dengan opasitas 2%.
Sekarang, setelah kartu email digelapkan, teks kita tidak terbaca. Kita akan membahas warna teks selanjutnya.
7. Menyesuaikan warna teks
Untuk memahami warna teks dalam tema gelap, penting untuk memahami cara warna diterapkan pada teks dalam sistem Desain Material yang lebih luas.
Komponen Material mendefinisikan konsep warna "aktif", yang disebut demikian karena merupakan warna yang muncul "di atas" komponen dan permukaan utama yang menggunakan warna primer, sekunder, permukaan, latar belakang, atau error. Warna "Aktif" terutama digunakan untuk teks, guna memastikan teks tetap dapat dibaca di platform ini.
Warna "aktif" default di Material adalah putih (#FFFFFF) dan hitam (#000000). Karena warna "aktif" hitam atau gelap tidak cocok dengan permukaan gelap kami, kita akan menggunakan warna putih.
Sistem untuk membuat hierarki teks dengan warna "aktif" ini sederhana. Teks dengan penekanan tinggi memiliki keburaman 87%, sedangkan teks dengan penekanan sedang diterapkan pada 60%, dan teks yang dinonaktifkan menggunakan keburaman 38%.
Teks prioritas tinggi tidak berwarna putih murni karena, seperti yang dibahas di langkah 5, #FFFFFF—warna cerah—akan "bergetar" secara visual dengan latar belakang gelap kami. Selain itu, teks #FFFFFF murni dengan latar belakang gelap dapat mengurangi keterbacaan karena cahaya dari teks tersebut tampak menyebar atau buram dengan latar belakang gelap.
Dengan mengetahui semua ini, mari kita perbaiki warna teks dalam tema gelap kita.
- Semua teks dalam tata letak awal dikelompokkan agar mudah diakses. Cari grup bernama Teks kotak masuk dan luaskan untuk melihat semua lapisan penyusunnya.
- Pilih semua lapisan yang diawali dengan "Hi -". Ini adalah semua teks yang sangat ditekankan dalam tata letak kita.
- Di panel pemeriksa, tetapkan Fill ke FFFFFF dengan keburaman 87%.
- Kembali di grup Inbox text, pilih semua lapisan yang diawali dengan "Med -"
- Di panel pemeriksa, tetapkan Fill ke FFFFFF dengan keburaman 60%.
8. Menyesuaikan warna komponen
Dalam tema gelap yang dibuat dengan Material, komponen dan permukaan yang ditinggikan diberi warna menggunakan overlay. Makin tinggi permukaan, makin kuat dan terang overlay-nya. Ini adalah cara untuk mengomunikasikan elevasi dan hierarki saat latar belakang terlalu gelap untuk menggambarkan bayangan gelap secara andal.
Panel aplikasi bawah
Untuk panel aplikasi bawah Reply, yang berada di atas UI kotak masuk lainnya, kita akan menerapkan overlay halus.
- Temukan grup bernama Bottom app bar dalam daftar lapisan dan luaskan agar Anda dapat melihat lapisan penyusunnya.
- Temukan lapisan bernama Surface di dalam grup tersebut, lalu tetapkan nilai Fill-nya ke 121212.
- Temukan lapisan di atasnya yang disebut Overlay permukaan dan beri nilai Isi FFFFFF dengan keburaman 12%.
Tombol tindakan mengambang
Selanjutnya, kita akan menerapkan warna baru ke FAB. Untuk melakukannya, kembali ke palet tonal yang kita lihat sebelumnya dan ambil nilai 700 dari warna sekunder Reply.
Secara opsional, untuk komponen kecil tetapi berdampak tinggi di aplikasi Anda sendiri, Anda dapat memilih warna yang sedikit lebih jenuh selama warna tersebut mempertahankan kontras yang tepat dengan warna yang mendasarinya. Kita akan mempelajari opsi ini di langkah selanjutnya.
- Temukan grup bernama FAB dalam daftar lapisan dan luaskan untuk melihat bagian-bagiannya.
- Temukan lapisan Surface, lalu pilih lapisan tersebut. Tetapkan pengisiannya ke FCC13B.
Kartu yang dipilih
Anda mungkin melihat bahwa warna oranye-kuning yang sama dan berdampak juga muncul di sudut kartu email yang dipilih di kotak masuk Reply. Ini adalah momen bermerek kuat lainnya, tetapi tidak sesuai dengan komponen, platform, atau teks.
Untuk situasi seperti ini, sebaiknya mulai dari warna varian sekunder kami (dalam hal ini #FFFBE6) dan bekerja mundur untuk menemukan sesuatu yang cukup ekspresif tanpa mengganggu estetika fungsional Reply. Untuk Balasan, kita dapat menggunakan varian sekunder normal.
- Pilih lapisan yang disebut Earmark dan tetapkan Fill-nya ke FFF5A0.
9. Lebih jauh lagi: permukaan kustom
Seperti yang kita pelajari sebelumnya, tombol tindakan mengambang (atau FAB) di Reply adalah komponen dengan penekanan tinggi yang juga merepresentasikan momen branding yang kuat di aplikasi. Oleh karena itu, kita dapat memutuskan untuk mempertahankan ekspresi warnanya di tema gelap Reply dengan menggunakan warna sekunder asli Reply.
- Temukan grup bernama FAB dalam daftar lapisan dan luaskan untuk melihat bagian-bagiannya.
- Temukan lapisan Surface, lalu pilih lapisan tersebut. Tetapkan kembali pengisinya ke F9AA33.
Kita mungkin juga ingin menampilkan kembali warna primer Reply sebagai warna platform kustom untuk panel aplikasi bawah dan kartu email. Untuk melakukannya, kita hanya perlu mengubah overlay agar menggunakan warna primer gelap yang ditunjukkan dalam palet tone yang telah kita referensikan.
- Temukan grup bernama Bottom app bar dalam daftar lapisan dan luaskan agar Anda dapat melihat lapisan penyusunnya.
- Temukan lapisan bernama Overlay permukaan dan berikan nilai Isi baru 344955 dengan keburaman 48%. Hal ini akan memberikan warna merek yang lebih kuat sekaligus mempertahankan kontras yang memadai.
- Temukan lapisan yang disebut Overlay kartu email dalam daftar lapisan, lalu pilih semuanya.
- Tetapkan Fill ke ADC0CB dengan keburaman 4%.
10. Penutup
Dalam Material, tema gelap adalah ekstensi yang cermat dan disengaja dari identitas unik produk Anda sebagaimana dinyatakan dalam tema terang. Dengan penyesuaian sederhana pada warna dan cara penyampaian elevasi, Anda baru saja berhasil membuat tema gelap Material pertama Anda. Selamat!
Anggaplah langkah-langkah dalam lab desain ini sebagai kerangka kerja untuk memahami dan menentukan tema gelap produk Anda sendiri, dan selalu ingat properti serta tujuan merek dan produk Anda.
Untuk panduan tema gelap lainnya, lihat spesifikasi Desain Material untuk tema gelap.
Jika ada pertanyaan, silakan hubungi kami kapan saja menggunakan @MaterialDesign di Twitter.
Nantikan konten desain dan tutorial lainnya di channel YouTube Google Design.