Kembali ke demoBUKU KOMPONEN KHUSUS TEMA INIEN

Toko Saku / DESAIN & KOMPONEN

Toko Saku
Disusun dari bagiannya sendiri.

Tanya dulu, bayar belakangan. Toko kecil yang berjualan lewat obrolan tidak butuh checkout; ia butuh daftar yang jelas untuk ditanyakan. Toko Saku menjadikan nota toko sebagai antarmukanya: lambang saku dan papan nama meja, etalase barang berkode, dan nota sempit bergaris putus yang menghitung jenis dan jumlah barang — tidak pernah uang — lalu menjadi satu pesan. Nota selalu menyatakan belum dikirim dan bukan bukti bayar.

01 / Palet & tipografi

Kertas nota hangat, tinta petrol, dan label toko kuning, seperti blok nota di meja dan label harganya tanpa harga. Sudut siku, garis 1px dan garis 2px mengapit rekap, garis putus di antara barang, dan kaki nota bergerigi. Enam gambar datar yang dibuat untuk toko ini di atas bidang persik, mentega, dan sage. Kuning menandai jalan ke nota, tidak pernah menandai kontrol dengan warna saja.

Kertas nota#f5f0e3
Tinta petrol#174b52
Kuning toko#f3cf63
Bidang barang#e0e5db
Putih nota#fffdf6

Barlow Semi Condensed 700, padat seperti papan nama toko dan labelnya di bidang sempit, dipakai untuk wordmark, judul, nama barang, dan rekap jumlah. DM Sans membawa baris nota, label, tombol, dan pesan; angka jumlah memakai angka tabular.

02 / Komposisi & perilaku

Satu baris demo tipis, papan nama, lalu bilah halaman dengan jalan ke nota yang tetap di atas saat menggulir. Di layar lebar tiga kolom barang berdampingan dengan nota sempit; halaman nota menaruh nota yang bisa diubah di kiri dan pesan di kanan. Di ponsel barang menjadi dua kolom dan nota menyusul; halamannya terbaca nota → pesan → salin dan unduh → tautan → simpan, dengan pesan terlipat.

Hampir tidak ada: baris yang berubah ditandai sebentar dan nota tidak pernah menggulir sendiri. Tanpa konfeti atau angka berputar; reduced motion menghapus transisi tandanya.

Kategori berupa tombol tertekan dan pencarian berlabel dengan tombol bersihkan. Setiap jumlah terdiri dari tiga kontrol terpisah — kurang, kolom angka berlabel, dan tambah, masing-masing 44px — dan kurang nonaktif di angka satu alih-alih menghapus; menghapus adalah tombolnya sendiri dengan satu langkah urungkan. Perubahan diumumkan oleh satu baris status di dekat nota, tanpa memindahkan fokus. Pratinjau pesan berupa disclosure asli; salin baru menyebut “disalin” setelah peramban memastikannya.

03 / Kontrol hingga setiap detail

Satu baris demo tipis, papan nama, lalu bilah halaman dengan jalan ke nota yang tetap di atas saat menggulir. Di layar lebar tiga kolom barang berdampingan dengan nota sempit; halaman nota menaruh nota yang bisa diubah di kiri dan pesan di kanan. Di ponsel barang menjadi dua kolom dan nota menyusul; halamannya terbaca nota → pesan → salin dan unduh → tautan → simpan, dengan pesan terlipat.

Daftar komponen (gulir untuk memeriksa)

  1. 01
    Etalase enam barang bergambar dengan kategori dan pencarian

    Satu baris demo tipis, papan nama, lalu bilah halaman dengan jalan ke nota yang tetap di atas saat menggulir. Di layar lebar tiga kolom barang berdampingan dengan nota sempit; halaman nota menaruh nota yang bisa diubah di kiri dan pesan di kanan. Di ponsel barang menjadi dua kolom dan nota menyusul; halamannya terbaca nota → pesan → salin dan unduh → tautan → simpan, dengan pesan terlipat.

  2. 02
    Kontrol kurang, angka, dan tambah terpisah; 1–99 per barang, hingga 12 baris

    Kategori berupa tombol tertekan dan pencarian berlabel dengan tombol bersihkan. Setiap jumlah terdiri dari tiga kontrol terpisah — kurang, kolom angka berlabel, dan tambah, masing-masing 44px — dan kurang nonaktif di angka satu alih-alih menghapus; menghapus adalah tombolnya sendiri dengan satu langkah urungkan. Perubahan diumumkan oleh satu baris status di dekat nota, tanpa memindahkan fokus. Pratinjau pesan berupa disclosure asli; salin baru menyebut “disalin” setelah peramban memastikannya.

  3. 03
    Nota yang menghitung jenis dan jumlah barang, tidak pernah uang, dan tidak pernah “terkirim”

    Halaman Next.js statis dwibahasa; barang dan halaman detailnya dirender di depan. Keranjang — hanya ID dan jumlah — tersimpan di peramban ini selama tujuh hari, diperiksa ukurannya dan divalidasi dengan Zod setiap dibaca; nama selalu diambil dari katalog. Pesan, TXT-nya, dan tautan click-to-chat berasal dari satu serializer murni. Aksi eksplisit “simpan sebagai pesanan contoh” menulis snapshot dwibahasa tanpa harga ke kunci peramban bersama yang kelak bisa dibaca back-office. Tanpa akun, pembayaran, stok, atau server.

  4. 04
    Satu pesan: pratinjau, salin, TXT, dan tautan WhatsApp contoh

    Halaman Next.js statis dwibahasa; barang dan halaman detailnya dirender di depan. Keranjang — hanya ID dan jumlah — tersimpan di peramban ini selama tujuh hari, diperiksa ukurannya dan divalidasi dengan Zod setiap dibaca; nama selalu diambil dari katalog. Pesan, TXT-nya, dan tautan click-to-chat berasal dari satu serializer murni. Aksi eksplisit “simpan sebagai pesanan contoh” menulis snapshot dwibahasa tanpa harga ke kunci peramban bersama yang kelak bisa dibaca back-office. Tanpa akun, pembayaran, stok, atau server.

  5. 05
    Pesanan contoh disimpan untuk back-office kelak

    Halaman Next.js statis dwibahasa; barang dan halaman detailnya dirender di depan. Keranjang — hanya ID dan jumlah — tersimpan di peramban ini selama tujuh hari, diperiksa ukurannya dan divalidasi dengan Zod setiap dibaca; nama selalu diambil dari katalog. Pesan, TXT-nya, dan tautan click-to-chat berasal dari satu serializer murni. Aksi eksplisit “simpan sebagai pesanan contoh” menulis snapshot dwibahasa tanpa harga ke kunci peramban bersama yang kelak bisa dibaca back-office. Tanpa akun, pembayaran, stok, atau server.

  6. 06
    Buku komponen dan status sendiri; personalisasi merek lokal

    Halaman Next.js statis dwibahasa; barang dan halaman detailnya dirender di depan. Keranjang — hanya ID dan jumlah — tersimpan di peramban ini selama tujuh hari, diperiksa ukurannya dan divalidasi dengan Zod setiap dibaca; nama selalu diambil dari katalog. Pesan, TXT-nya, dan tautan click-to-chat berasal dari satu serializer murni. Aksi eksplisit “simpan sebagai pesanan contoh” menulis snapshot dwibahasa tanpa harga ke kunci peramban bersama yang kelak bisa dibaca back-office. Tanpa akun, pembayaran, stok, 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. Toko Saku tidak punya alamat, jam buka, harga, stok, atau pelanggan; barangnya gambar, nomornya dari rentang khusus drama dan tidak menerima pesanan, tidak ada yang dikirim, dan pesanan contoh hanya ada di satu peramban.

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

    Etalasenya adalah pembuka

    Tanpa hero atau slogan sebelum barang: papan nama dan satu baris demo, lalu h1 menamai etalase, dengan kategori berupa tombol tertekan dan pencarian berlabel. Setiap kartu menyebut kode barang, varian, dan satuannya — fakta yang sama dengan yang dibawa nota dan pesan.

  2. 02

    Tiga kontrol, tanpa hapus tersamar

    Setelah masuk nota, kartu menampilkan kurang, kolom angka, dan tambah, masing-masing 44px. Kurang nonaktif di angka satu; menghapus adalah tombolnya sendiri dengan satu langkah urungkan. Angka ketikan diperiksa saat kolom ditinggalkan, dan nota menyimpan hitungan sah terakhir.

  3. 03

    Nota yang tidak pernah “terkirim”

    Di samping etalase, nota menghitung jenis dan jumlah barang, tidak pernah uang, dan capnya selalu menyatakan belum dikirim; perubahan diumumkan sekali di dekatnya. Di ponsel, jalan kuning ke nota tetap di bilah halaman atas saat menggulir.

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.