Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Avara Homes / DESAIN & KOMPONEN

Avara Homes
Disusun dari bagiannya sendiri.

Gambar harinya dulu, baru dindingnya. Lembar program ruang yang diisi arsitek bersama penghuni sebelum denah: siapa yang tinggal, ruang mana yang harus dekat, mana yang dijauhkan, dan apa yang terjadi sepanjang hari. Kertas cetak, tinta diazo, dan aksen genteng, dengan kop gambar vertikal di setiap lembar.

01 / Palet & tipografi

Kertas cetak, tinta diazo ungu, dan aksen genteng, dipinjam dari kebiasaan biro gambar di Indonesia: sketsa di kertas milimeter blok bergaris oranye dan cetak diazo dari kalkir. Garis milimeter hanya di belakang gambar; hubungan dibaca lewat simbol dan gaya garis, tidak dengan warna saja.

Kertas cetak#f3eedb
Tinta diazo#2f2b78
Genteng#a3401f
Kalkir#e4e0f0
Garis milimeter#e9a66f

Archivo Expanded 600, grotesk lebar bertulang lurus seperti huruf kop gambar dan label presentasi, menjuduli lembar dan wordmark AVARA. DM Sans membawa nama ruang, tabel harian, catatan, dan kontrol.

02 / Komposisi & perilaku

Setiap halaman adalah satu lembar dalam set: bingkai gambar 2px, bidang gambar di kiri, dan kop vertikal 312px di kanan (proyek, rumah tangga, skala, status, daftar lembar). Di ponsel kop menjadi strip atas dengan daftar lembar yang bisa digulir.

Tanpa gerak dekoratif. Hubungan yang diubah langsung menggambar ulang diagram gelembung dan diumumkan; potongan cahaya hanya berubah saat waktu dipilih.

Matriks kedekatan adalah grid ARIA: tombol panah berpindah antarpasangan, Enter atau Spasi mengubah hubungan, dan perubahannya diumumkan. Diagram gelembung punya daftar teks setara; sel jadwal dan pola adalah tombol berlabel; penyimpanan diblokir atau penuh dinyatakan.

03 / Kontrol hingga setiap detail

Setiap halaman adalah satu lembar dalam set: bingkai gambar 2px, bidang gambar di kiri, dan kop vertikal 312px di kanan (proyek, rumah tangga, skala, status, daftar lembar). Di ponsel kop menjadi strip atas dengan daftar lembar yang bisa digulir.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Matriks kedekatan dan diagram gelembung dari satu model

    Setiap halaman adalah satu lembar dalam set: bingkai gambar 2px, bidang gambar di kiri, dan kop vertikal 312px di kanan (proyek, rumah tangga, skala, status, daftar lembar). Di ponsel kop menjadi strip atas dengan daftar lembar yang bisa digulir.

  2. 02
    Sehari di rumah ini, dengan temuan dikirim ke matriks

    Matriks kedekatan adalah grid ARIA: tombol panah berpindah antarpasangan, Enter atau Spasi mengubah hubungan, dan perubahannya diumumkan. Diagram gelembung punya daftar teks setara; sel jadwal dan pola adalah tombol berlabel; penyimpanan diblokir atau penuh dinyatakan.

  3. 03
    Delapan pola orisinal untuk disematkan

    Halaman Next.js statis dwibahasa. Satu program per rumah tangga disimpan di browser ini dan divalidasi dengan Zod setiap dibaca; ekspor (TXT, SVG, cetak) dibuat lokal. Tanpa akun, pengiriman, atau server.

  4. 04
    Ringkasan cetak, TXT, dan SVG

    Halaman Next.js statis dwibahasa. Satu program per rumah tangga disimpan di browser ini dan divalidasi dengan Zod setiap dibaca; ekspor (TXT, SVG, cetak) dibuat lokal. Tanpa akun, pengiriman, atau server.

  5. 05
    Buku komponen dan status sendiri

    Halaman Next.js statis dwibahasa. Satu program per rumah tangga disimpan di browser ini dan divalidasi dengan Zod setiap dibaca; ekspor (TXT, SVG, cetak) dibuat lokal. Tanpa akun, pengiriman, atau server.

  6. 06
    Personalisasi merek lokal

    Halaman Next.js statis dwibahasa. Satu program per rumah tangga disimpan di browser ini dan divalidasi dengan Zod setiap dibaca; ekspor (TXT, SVG, cetak) dibuat lokal. Tanpa akun, pengiriman, atau server.

  7. 07
    Pilihan, tooltip & area gulir

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

  8. 08
    Ekspor & batasan

    Studi desain fiktif. Rumah tangga, pola, dan diagram bersifat ilustratif dan tanpa skala: bukan gambar konstruksi, listing, atau harga. Ekspor tetap lembar 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 desktop asli demo Avara Homes.123
Tangkapan layar website asli. Ikuti catatan bernomor.
  1. 01

    Hubungan sebelum ruang

    Matriks kedekatan memimpin lembar. Tiap belah ketupat adalah satu pasang ruang; ketukan atau Enter mengubahnya, dan diagram gelembung di sebelahnya digambar ulang dari program yang sama. Tidak ada yang diukur atau berskala.

  2. 02

    Kop gambar, bukan header

    Proyek, rumah tangga, skala, status, dan daftar lembar ada di kop vertikal, seperti pada set gambar. Di ponsel kop menjadi strip berisi daftar lembar, langsung diikuti judul lembar.

  3. 03

    Tinta diazo di kertas cetak

    Tinta ungu, aksen genteng, dan panel kalkir berasal dari kebiasaan biro gambar di Indonesia. Garis milimeter hanya di belakang gambar; hubungan dibaca lewat simbol dan gaya garis, tidak dengan warna saja.

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.