Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Hening Retreat / DESAIN & KOMPONEN

Hening Retreat
Disusun dari bagiannya sendiri.

Waktu luang, yang sengaja. Banyak retret dan pemandu alam memberi tamu buku catatan berisi petunjuk harian; di sini bagian-bagiannya menjadi antarmuka: sampul kain dan talang berjahit membingkai setiap halaman, tab di tepi buku menjadi navigasi, pita menandai halaman, halaman bergaris menampung catatan, dan lempeng foto serta cap karet berasal dari jurnal lapangan Nusa yang dipensiunkan.

01 / Palet & tipografi

Kertas lapangan, tinta pakis, pita dan cap cokelat kayu, kain sampul hijau lumut, dan alas lempeng pucat. Garis buku hanya muncul di halaman dan sebagai titik daftar isi. Tanpa tekstur kertas atau foto kulit: buku digambar dengan garis, bidang warna, jahitan, dan satu bayangan halus. Jendela terisi dan kosong dibaca lewat ● / ○ serta garis penuh / putus-putus, tidak dengan warna saja.

Kertas lapangan#efeadb
Tinta pakis#24332b
Pita & cap#7a4528
Lempeng#dde3d2
Kain sampul#3d5544
Garis buku#c9c1a6

Alegreya 500, serif yang dirancang untuk teks sastra dengan ritme goresan pena yang hidup, menjuduli halaman, nama hari, tab, dan wordmark Hening; angka gaya lamanya cocok untuk folio seperti “Hari 2” dan “02 / 03”. DM Sans membawa teks bacaan, label, dan kontrol.

02 / Komposisi & perilaku

Setiap halaman adalah satu bentangan buku di atas meja: sampul kain 10px, dua halaman di kiri-kanan talang berjahit, tab di tepi kanan buku (Sampul, Petunjuk, Hari 1…8, Bekal), dan pita di talang atau margin luar. Di bawah 900px buku menjadi satu halaman di bawah strip kain dengan tab tergantung yang bergulir ke tab aktif; teks dan aksi mendahului lempeng.

Beralih ke hari lain memainkan satu balik halaman singkat (halaman kanan berayun dari talang) dan memindahkan fokus ke judul hari; reduced motion menghilangkannya. Tidak ada yang berulang atau bergerak sendiri.

Tab berupa tautan dengan aria-current; buku catatan berupa tombol tertekan dan perubahannya diumumkan; tiap jendela adalah pilihan berlabel; catatan adalah area teks bergaris berlabel dengan penghitung. Jendela kosong ditandai dengan bentuk dan garis, bukan warna. Lempeng membawa keterangan jujur; pita, cap, dan jahitan bersifat dekoratif.

03 / Kontrol hingga setiap detail

Setiap halaman adalah satu bentangan buku di atas meja: sampul kain 10px, dua halaman di kiri-kanan talang berjahit, tab di tepi kanan buku (Sampul, Petunjuk, Hari 1…8, Bekal), dan pita di talang atau margin luar. Di bawah 900px buku menjadi satu halaman di bawah strip kain dengan tab tergantung yang bergulir ke tab aktif; teks dan aksi mendahului lempeng.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Buku lapangan berjilid dengan tab tepi untuk setiap hari

    Setiap halaman adalah satu bentangan buku di atas meja: sampul kain 10px, dua halaman di kiri-kanan talang berjahit, tab di tepi kanan buku (Sampul, Petunjuk, Hari 1…8, Bekal), dan pita di talang atau margin luar. Di bawah 900px buku menjadi satu halaman di bawah strip kain dengan tab tergantung yang bergulir ke tab aktif; teks dan aksi mendahului lempeng.

  2. 02
    Tiga buku catatan, 1–7 malam, dan tiga jendela per hari

    Tab berupa tautan dengan aria-current; buku catatan berupa tombol tertekan dan perubahannya diumumkan; tiap jendela adalah pilihan berlabel; catatan adalah area teks bergaris berlabel dengan penghitung. Jendela kosong ditandai dengan bentuk dan garis, bukan warna. Lempeng membawa keterangan jujur; pita, cap, dan jahitan bersifat dekoratif.

  3. 03
    Catatan lapangan bergaris untuk tiap hari

    Halaman Next.js statis dwibahasa. Buku lapangan tersimpan di peramban ini dengan kunci yang sama seperti buku harian sebelumnya, divalidasi dengan Zod setiap dibaca; draf lama terbaca tanpa perubahan. Hari dibaca dari ?day= di URL. Cetak (buku saku A5) dan ekspor TXT dibuat lokal. Tanpa akun, pemesanan, atau server.

  4. 04
    Enam petunjuk lapangan untuk diselipkan ke jendela mana pun

    Halaman Next.js statis dwibahasa. Buku lapangan tersimpan di peramban ini dengan kunci yang sama seperti buku harian sebelumnya, divalidasi dengan Zod setiap dibaca; draf lama terbaca tanpa perubahan. Hari dibaca dari ?day= di URL. Cetak (buku saku A5) dan ekspor TXT dibuat lokal. Tanpa akun, pemesanan, atau server.

  5. 05
    Cetak buku saku A5 dan bekal lapangan TXT

    Halaman Next.js statis dwibahasa. Buku lapangan tersimpan di peramban ini dengan kunci yang sama seperti buku harian sebelumnya, divalidasi dengan Zod setiap dibaca; draf lama terbaca tanpa perubahan. Hari dibaca dari ?day= di URL. Cetak (buku saku A5) dan ekspor TXT dibuat lokal. Tanpa akun, pemesanan, atau server.

  6. 06
    Buku komponen dan status sendiri

    Halaman Next.js statis dwibahasa. Buku lapangan tersimpan di peramban ini dengan kunci yang sama seperti buku harian sebelumnya, divalidasi dengan Zod setiap dibaca; draf lama terbaca tanpa perubahan. Hari dibaca dari ?day= di URL. Cetak (buku saku A5) dan ekspor TXT dibuat lokal. Tanpa akun, pemesanan, atau server.

  7. 07
    Personalisasi merek lokal

    Halaman Next.js statis dwibahasa. Buku lapangan tersimpan di peramban ini dengan kunci yang sama seperti buku harian sebelumnya, divalidasi dengan Zod setiap dibaca; draf lama terbaca tanpa perubahan. Hari dibaca dari ?day= di URL. Cetak (buku saku A5) dan ekspor TXT dibuat lokal. Tanpa akun, pemesanan, atau server.

  8. 08
    Pilihan, tooltip & area gulir

    Perilaku papan ketik dibagikan; tema ini memiliki warna popup, batas, radius, tipografi, dan fokus sendiri.

  9. 09
    Ekspor & batasan

    Studi desain fiktif. Hening tidak punya alamat, kamar, jadwal, atau harga dan tidak memesan apa pun; foto merupakan referensi berlisensi (Bromo bukan lokasinya) dan ekspor adalah rencana konsep lokal.

BACA KEPUTUSAN DESAIN

Mengapa disusun seperti ini.

Tangkapan layar menunjukkan pembuka yang diimplementasikan. Catatan menghubungkan komposisinya dengan pengalaman yang berfungsi dan perilaku di ponsel.

Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Buku berjilid, bukan header

    Sampul kain, talang berjahit, dan tab di tepi buku membingkai setiap halaman; tab itulah navigasinya, satu per hari. Di ponsel sampul menjadi strip dengan tab tergantung yang bergulir ke tab aktif.

  2. 02

    Jendela kosong ikut ditulis

    Tiap buku catatan menyusun tiga jendela per hari. Jendela kosong adalah lingkaran tanpa isi di daftar isi dan baris bergaris putus di halaman harian: jeda yang direncanakan, bukan isian yang hilang, dan tidak dibedakan dengan warna saja.

  3. 03

    Lempeng dengan keterangan jujur

    Foto duduk di alas bersudut tempel, bernomor seperti jurnal lapangan. Tiap keterangan menyebut fotografernya dan menyatakan Hening tidak mengelola kabin itu dan tidak berada di Bromo. Di ponsel, teks dan aksi mendahului lempeng.

04 / Kontrak formulir & respons

Catatan persiapan lokal. Coba kirim kosong, perbaiki, lalu ekspor masukanmu sendiri.

10–1.000 karakter. Disimpan pada halaman ini.

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.