Merancang Reverie yang lebih tenang: dari chat ke seluruh produk

Jika kamu membuka percakapan dalam beberapa hari terakhir, mungkin kamu merasa ada sesuatu yang berbeda.

Antarmuka chat menjadi sedikit lebih tenang. Pesan lebih mudah dibaca, kontrol terasa lebih ringan, dan panel serta dialog tidak lagi terlalu bersaing dengan percakapan. Tidak ada fungsi yang dipindahkan ke tempat asing, tetapi ruang di sekitar karaktermu terasa lebih nyaman.

Kami memulai dari chat karena di sanalah banyak orang menghabiskan waktu paling lama di Reverie. Chat juga menjadi tempat terbaik untuk menguji pertanyaan di balik desain ulang ini: seperti apa antarmuka yang harus tetap nyaman sepanjang percakapan, bukan sekadar memberi kesan pertama yang kuat?

Perubahan itu bukan penyegaran satu halaman saja. Chat adalah bagian pertama dari sistem desain baru yang terlihat. Kini sistem tersebut telah diperluas ke seluruh produk—dari penemuan dan halaman karakter hingga alat kreasi, cerita, pembayaran, hadiah, pengaturan, dan layar utilitas kecil di antaranya.

Reverie selalu menjadi produk yang ekspresif. Kepribadian itu terlihat dari bingkai tegas, bayangan yang nyata, kartu berlapis, kontrol berwarna, serta permukaan yang terasa seperti benda, bukan sekadar persegi panjang di layar. Semuanya memberi kehangatan dan membuat Reverie mudah dikenali.

Namun, bahasa visual yang tepat untuk satu tahap produk bisa menjadi terlalu berat untuk tahap berikutnya.

Saat Reverie berkembang, antarmuka harus mendukung lebih dari sekadar penemuan. Orang menghabiskan waktu lebih lama dalam percakapan, mengelola karakter, menulis cerita, membandingkan paket, mengatur alat canggih, dan berpindah di antara alur yang semakin rumit. Detail dekoratif yang memberi karakter pada halaman promosi dapat berubah menjadi kebisingan visual ketika muncul di setiap dialog, kartu, menu, dan tombol.

Kami tidak mendesain ulang Reverie agar kehilangan ciri khasnya. Kami ingin ciri khas itu datang dari pengalaman itu sendiri.

Lebih ringan, bukan lebih dingin

“Ringan” mudah berubah menjadi latar putih, teks abu-abu tipis, dan komponen yang begitu samar sehingga tampak belum selesai. Itu bukan tujuan kami.

Sistem baru lebih tenang, tetapi tetap hangat. Kami mengganti putih tajam dengan permukaan netral bernuansa lembut. Teks menjadi lebih gelap dan kuat saat perlu dibaca lama. Bingkai lebih terkendali, bayangan lebih dangkal, dan warna digunakan dengan lebih sengaja. Beban visual berkurang tanpa menghilangkan rasa bahwa Reverie adalah tempat untuk cerita dan hubungan.

Keseimbangan ini penting dalam roleplay. Percakapan bukan dasbor pengaturan. Orang membaca pesan panjang, merasakan perubahan nada yang halus, dan menetap lama di satu tampilan. Tipografi dan latar harus tetap nyaman setelah dua puluh menit, bukan hanya terlihat bersih dalam tangkapan layar.

Tipografi untuk membaca lebih lama

Salah satu perubahan terpenting juga paling tidak dramatis: kami memperkuat hierarki tipografi.

Judul besar tetap ekspresif, sedangkan teks isi kini lebih mantap. Label penting, navigasi, dan tindakan memakai bobot yang mudah dipindai. Teks sekunder tetap berada di belakang, tetapi tidak lagi terlalu pudar untuk dibaca.

Prinsipnya sederhana:

Teks panjang harus terasa tenang dan kokoh.
Tindakan harus dikenali sebelum semua label dibaca.
Informasi pendukung boleh mundur tanpa menghilang.
Halaman harus tetap terbaca di berbagai layar, tema, dan pencahayaan.

Tipografi yang baik tidak meminta perhatian. Ia membantu mempertahankannya.

Satu bahasa komponen di seluruh produk

Ini bukan penggantian kulit halaman demi halaman. Kami membangun ulang bahasa komponen bersama yang menopang produk.

Tombol, kartu, dialog, menu, tab, formulir, tabel, tooltip, toast, drawer, popover, dan navigasi kini mengikuti aturan yang sama untuk:

radius sudut dan kontras bingkai
warna serta elevasi permukaan
indikator fokus
status hover dan ditekan
bobot teks dan jarak
warna semantik

Konsistensi ini lebih penting daripada satu pilihan visual. Saat tindakan yang sama terlihat dan berperilaku sama di mana pun, antarmuka lebih mudah dipahami. Tindakan berbahaya terasa berbahaya, opsi terpilih terlihat terpilih, dan tindakan utama mudah ditemukan tanpa semua tombol bersaing.

Kami juga menambahkan varian semantik yang jelas untuk status sorotan dan berhasil. Kini fitur tidak perlu membuat gradien atau warna sendiri-sendiri.

Bagian tersulit: menemukan pengecualian

Memperbarui komponen tombol tidak otomatis memperbarui semua tombol.

Produk mengumpulkan keputusan lokal: kartu harga dengan bingkainya sendiri, dialog hadiah dengan cahaya khusus, panel berbagi dengan latar berbeda, tindakan tersembunyi dengan gradien pribadi, atau kartu yang membangun ulang perilaku hover. Pengecualian seperti inilah yang membuat desain ulang terasa tidak konsisten.

Karena itu, audit kami melampaui pustaka komponen. Kami membawa antarmuka khusus yang layak diperbaiki kembali ke bahasa bersama: halaman pemasaran, alur pembayaran, hadiah, pencapaian, kartu karakter dan cerita, dialog berbagi, navigasi, empty state, banner, serta layar utilitas yang jarang dikunjungi.

Tidak semua pengecualian dihapus. Beberapa momen memerlukan identitas kuat untuk menyampaikan perayaan, urgensi, kelangkaan, atau status. Sekarang momen itu memperluas sistem, bukan mengabaikannya.

Lebih sedikit dekorasi, interaksi lebih jelas

Kami menghapus banyak efek yang tampak interaktif tetapi tidak memberi informasi berguna.

Bayangan berat tidak lagi ada di setiap kartu. Gerakan hover lebih terkendali. Gradien disimpan untuk momen yang perlu penekanan. Bingkai menunjukkan struktur tanpa memasukkan semua konten ke kotak baru.

Pada saat yang sama, status interaksi menjadi lebih jelas:

Opsi terpilih menyampaikan status secara visual dan semantik.
Fokus keyboard lebih mudah diikuti.
Kartu interaktif memiliki hover dan fokus yang konsisten.
Tombol menyampaikan hierarki melalui varian bersama.
Dialog dan menu terpisah dari latar tanpa terasa asing.

Dengan mengurangi dekorasi, kami punya lebih banyak ruang untuk umpan balik. Antarmuka bergerak lebih sedikit, tetapi berbicara lebih banyak.

Aksesibilitas adalah bagian dari sistem visual

Sistem desain belum lengkap jika hanya menjelaskan tampilan komponen saat memakai mouse.

Kami meninjau indikator fokus, perilaku keyboard, semantik pilihan, kontras, dan kartu interaktif. Beberapa kontrol kini lebih jelas memberi tahu teknologi bantu bahwa statusnya ditekan atau dipilih. Item cerita yang berfungsi seperti tautan dapat difokuskan dan dibuka lewat keyboard. Fokus mengikuti logika visual yang sama di semua kontrol bersama.

Perubahan ini sengaja dibuat halus. Aksesibilitas bukan mode terpisah di atas produk; ia harus hadir dalam perilaku bawaan.

Fondasi yang lebih baik untuk berikutnya

Hasil paling berharga bukan warna, radius, atau bayangan tertentu. Kini ada lebih sedikit jawaban yang saling bertentangan untuk pertanyaan desain yang sama.

Saat membuat fitur baru, kami tidak perlu menentukan kembali bagaimana dialog terasa, input merespons, atau kartu terpilih ditampilkan. Sistem sudah memberi jawabannya. Pekerjaan menjadi lebih cepat dan pengalaman lebih mudah diprediksi.

Konsistensi bukan berarti semua layar terlihat sama. Konsistensi memberi harapan yang stabil agar konten dapat berubah tanpa membuat antarmuka terasa asing.

Apa yang kami harap kamu rasakan

Idealnya, tidak terlalu banyak pada awalnya.

Reverie seharusnya terasa lebih mudah dibaca, lebih tenang dijelajahi, dan lebih konsisten saat berpindah dari penemuan ke percakapan, kreasi, dan alat akun. Tindakan penting lebih cepat terlihat, kontrol sekunder tidak berebut perhatian, dan sesi panjang tidak terlalu melelahkan mata.

Karakter tetap ekspresif. Cerita tetap memiliki suasana. Momen yang patut dirayakan tetap bisa tampil hidup.

Antarmuka hanya menjadi lebih paham kapan harus berbicara—dan kapan perlu cukup tenang agar hal lain dapat berarti.

Sistem desain baru kini mencakup seluruh pengalaman Reverie. Jika ada bagian yang terasa jauh lebih baik—atau masih kurang selaras—beri tahu kami di komunitas Discord.