twc-028 / Studi oleh Syafril · bukan proyek klien

Saku Dapur: Saku Dapur

Buku kerja toko fiktif untuk bagian dalam Toko Saku: periksa pesanan contoh tersimpan, siapkan nota tanpa harga, sesuaikan stok latihan, dan baca hitungan harian. Semuanya di satu peramban; tanpa akun, pelanggan, harga, atau transaksi nyata.

Tangkapan layar desktop asli demo Saku Dapur.

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

    Punggung buku menjadi indeks

    Indeks bata desktop menamai pekerjaan, bukan kumpulan blok generik. Di ponsel lima tujuan hariannya pindah ke navigasi bawah berlabel; pengaturan dan buku desain tetap terjangkau.

  2. 02

    Hitungan menyebut yang dihitung

    Strip bergaris menghitung nota dan unit, tidak pernah uang. Latihan dan contoh etalase memiliki sumber terpisah; tidak ada klaim harga, pembayaran, atau stok tersedia di lembar ini.

  3. 03

    Snapshot dan pekerjaannya berbeda record

    Tabel membuka nota sumber yang utuh di laci detail berscope. Tahap penyiapan lokal hidup di buku terpisah, sehingga Toko Saku tetap dapat membaca snapshot v1 aslinya.

Sekilas desain

Tipografi judul
Chivo
Tipografi isi
Chivo
Coba interaksi ini
Periksa nota contoh, catat tahap lokal, sesuaikan stok latihan
Kertas buku#f4eee3
Tinta cokelat#302921
Sampul bata#943e2c
Kertas slip#fffcf5
Warna indeks#f2d9c3
Hijau pensil#355b44
Skema komposisi yang diimplementasikan.

YANG TERSEDIA / LANGKAH BERIKUTNYA

Pahami yang Anda pilih.

Periksa pekerjaan di balik satu nota toko yang jelas.

Berfungsi pada demo ini

  • Data latihan eksplisit atau pesanan contoh yang disimpan di Toko Saku pada origin sama
  • Tahap pesanan lokal, snapshot sumber terpisah dan utuh, penyesuaian stok, serta ekspor laporan
  • Layar masuk dan pemulihan contoh yang tidak mengautentikasi atau mengirim pesan
  • Buku desain sendiri, kontrol dwibahasa, dan personalisasi brand lokal peramban

Alat ini mencakup ruang kerja yang berfungsi dan buku komponen sendiri. Kontrolnya mengolah status lokal.

Integrasi produksi untuk didiskusikan

  • Sistem toko operasional membutuhkan aturan stok, akun, izin, data server, transaksi, harga, perangkat, dan prosedur audit yang disepakati terpisah.

Ekspor dibuat di browser Anda. Tidak terhubung dengan akun, penyimpanan awan, atau layanan eksternal.

Batasan untuk direncanakan

Studi desain fiktif, bukan ERP operasional. Tanpa pelanggan, harga, pembayaran, pengiriman, atau stok tersedia nyata. Penyimpanan lokal tidak memiliki transaksi lintas tab atau sinkronisasi server; ekspor tetap fiktif dan bukan bukti bayar.

Penyerahan & penyesuaian

Cakupan halaman, aset merek, konten, serah terima, hosting, biaya, dan dukungan dibahas lewat konsultasi sebelum pengerjaan dimulai. Demo menjadi referensi untuk percakapan tersebut.

Siapkan brief untuk arah ini

Gagasannya

Bagian dalam toko kecil punya ritme berbeda dari etalasenya. Buku stok bergaris dan slip di sela halamannya menjadi antarmuka: punggung bernomor untuk navigasi, lembar harian untuk hitungan, tabel nota masuk, dan laci yang menjaga snapshot asal tetap utuh. Toko Saku menyiapkan contoh; Saku Dapur mencatat pekerjaan lokal di sekitarnya.

Bahasa visual

Kain bata, kertas hangat, tinta cokelat, dan tanda pensil hijau. Garis lurus menata buku, bukan tumpukan kartu statistik. Indeks buku 192px menjadi milik desktop; di ponsel lima tujuan kerja berubah menjadi navigasi bawah. Slip detail memiliki tepi atas bata yang tegas, bukan nota bergerigi milik etalase.

Tipografi

Chivo 700 menulis papan nama, judul lembar, dan hitungan; Chivo 400 membawa baris tabel, label, dan teks baca. Keduanya WOFF2 Latin statis, satu bobot per berkas, dengan angka tabular. Tanpa bold tiruan dan tanpa huruf katalog di dalam buku.

Tata letak & komposisi

Indeks buku, header toko ringkas, baris studi fiktif, lalu lembar tugas. Strip hitungan bergaris mendahului batang berpasangan, cek stok, dan tabel nota masuk. Pesanan terbuka di laci kanan 440px; di ponsel menjadi lembar penuh. Pencarian, pilihan halaman, dan tindakan tugas tetap kontrol terpisah.

Gerak & interaksi

Transisi laci menjelaskan dari mana slip datang; baris yang berubah menandai pembaruan lokal. Perubahan optimistis dipulihkan saat penyimpanan peramban menolaknya. Placeholder memuat tidak berpura-pura mengambil data server. Reduced motion menghapus pergeseran dan shimmer, tetap mempertahankan setiap pesan status.

Di balik layar

Halaman App Router statis dwibahasa dengan data tervalidasi di peramban. collection-umkm-orders-v1 milik Toko Saku dibaca melalui decoder yang ada dan tidak pernah ditulis di sini. Buku terpisah 32KiB menyimpan tahap lokal dan paling banyak 60 penyesuaian stok; preferensi memiliki key 2KiB sendiri. Enam nota latihan diaktifkan eksplisit dan tidak dicampur dengan record etalase.

Dirancang untuk semua

Tabel asli mempertahankan caption dan judul kolom yang bisa diurutkan; pilihan menyebut cakupannya. Palet perintah mendukung Command/Control K, panah, dan Enter. Dialog detail menjaga scope, memerangkap fokus, dan mengembalikannya setelah Escape. Form memfokuskan kolom invalid pertama, umpan balik menetap sampai ditutup, setiap keadaan memakai kata selain warna, dan kedua mode warna mempertahankan teks terbaca.

Di dalam pengalaman

  • Lembar harian dengan hitungan, batang berpasangan, dan cek stok
  • Tabel cari dan urut dengan pilihan halaman serta laci detail
  • Pesanan contoh Toko Saku hanya dibaca; tahap lokal disimpan terpisah
  • Enam kode stok latihan dan penyesuaian eksplisit tervalidasi
  • TXT nota tanpa harga, cetak peramban, dan CSV hitungan harian
  • Palet perintah, umpan balik menetap, dua mode, dan brand lokal

Cocok untuk

  • Pemilik toko kecil yang ingin memeriksa alur pesanan dan stok lokal sebelum menyepakati sistem operasional.

Di berbagai layar

Tangkapan layar desktop asli demo Saku Dapur.
Tangkapan layar desktop asli demo Saku Dapur.
Tangkapan layar ponsel asli demo Saku Dapur.
Tangkapan layar ponsel asli demo Saku Dapur.

Sudut pandang lain