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.
#f5f0e3#174b52#f3cf63#e0e5db#fffdf6Barlow 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)
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
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.
- 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.
- 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.
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.
