Nacre Rituals / DESAIN & KOMPONEN
Nacre Rituals
Disusun dari bagiannya sendiri.
Lihat teksturnya dulu. Di konter perawatan, tester dioleskan ke selembar kartu supaya tekstur bisa dibandingkan berdampingan; secara daring kartu itu pengganti sentuhan yang jujur: digambar, bukan difoto, tanpa janji hasil. Bagian-bagiannya menjadi antarmuka: kartu bertepi foil membingkai setiap halaman, oles bernomor menjadi indeks produk, lup memberi tampilan dekat, skala encer → padat yang tercetak mengurutkan kartu, kartu yang menumpuk di belakangnya menjadi navigasi, dan kartu ritual dua sisi menjadi yang dibawa pulang pengunjung.
01 / Palet & tipografi
Kertas kartu, tinta kakao, dan abalon di atas dasar merah muda konter; tanah liat hanya di dalam gambar oles dan botol; cincin kilau mutiara 3px di dalam tepi kartu, tanpa animasi atau tekstur. Tanpa foto. Kekentalan dibaca lewat titik ●○ beserta kata, oles yang sudah ada di satu sisi bergaris putus dan menyebutnya, dan sisi aktif terisi serta tertekan — tidak pernah dengan warna saja.
#f4eeec#3a2420#1d5a6e#e2d4cd#c58d72#d3dfe3Bodoni Moda 500, Didone berkontras tinggi khas label parfum dan perawatan, dipakai untuk judul, nomor oles, dan wordmark; italiknya menamai oles, baris “untuk …”, dan catatan. DM Sans dipakai untuk fakta, kontrol, dan langkah.
02 / Komposisi & perilaku
Wordmark dan status penyimpanan di atas konter; kartu aktif di depan, dua kartu lain mengintip dari balik tepi kanannya dengan label tegak. Di bawah 900px kartu selebar layar dan dua kartu lain menjadi strip di atasnya; teks dan aksi mendahului gambar besar.
Dua gerak, keduanya setelah klik dan keduanya lewat transform: mengurutkan menggeser oles ke tempat barunya, dan membalik label memutarnya dalam 0,4 dtk. Reduced motion dan perangkat terbatas melewati keduanya; fokus tetap di kontrol yang ditekan.
Oles berupa satu grup radio (panah, Home, End); urutan dan sisi kartu berupa tombol tertekan; tombol naik, turun, dan lepas tiap langkah berlabel dan menjaga fokus pada langkahnya; penambahan dan penolakan diumumkan. Kekentalan, “sudah di sisi ini”, dan sisi aktif dinyatakan dengan teks selain bentuk. Gambar bersifat dekoratif di samping teksnya; gambar wadah membawa deskripsinya sendiri.
03 / Kontrol hingga setiap detail
Wordmark dan status penyimpanan di atas konter; kartu aktif di depan, dua kartu lain mengintip dari balik tepi kanannya dengan label tegak. Di bawah 900px kartu selebar layar dan dua kartu lain menjadi strip di atasnya; teks dan aksi mendahului gambar besar.
Daftar komponen (gulir untuk memeriksa)
BACA KEPUTUSAN DESAIN
Mengapa disusun seperti ini.
Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.
- 01
Kartu swatch, bukan header
Enam oles yang digambar di satu kartu bertepi foil menjadi indeks produk; tiap oles adalah radio, jadi panah memindahkan lup. Urutan encer → padat menggeser kartu ke tempatnya. Tidak ada yang difoto dan tidak ada oles yang menjanjikan hasil.
- 02
Kartu di belakang adalah navigasinya
Label botol dan kartu ritual mengintip dari balik kartu aktif dengan label tegak; keduanya tautan biasa, berikutnya dalam urutan fokus setelah wordmark. Di ponsel keduanya menjadi dua strip di atas kartu.
- 03
Fakta adalah tekstur, wadah, dan aroma
Lup dan label belakang hanya memuat jenis, kekentalan (titik dengan kata), aroma, dan wadah. Kotak komposisi dibiarkan kosong untuk pemilik; setiap ekspor menyebut dirinya konsep, bukan anjuran perawatan.
04 / Kontrak formulir & respons
Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.
Catatan yang disiapkan akan muncul di sini.
05 / Komponen yang benar-benar bekerja
Aktifkan ruang kerja lengkap saat ingin memeriksanya. Kode interaksinya dimuat sesuai kebutuhan.