Contoh portofolio — website fiktif untuk memperlihatkan hasil jasa pembuatan website oleh Santai Sampai Selesai. Nama toko, harga, dan nomor kontak adalah contoh.

Memeriksa jam buka…

Kebutuhan harian lengkap, harga tetap bersahabat

Toko Sembako Sumber Rejeki melayani warga Salatiga sejak 2012 — beras, minyak, gula, sampai sabun. Pesan dari rumah, kami antar sampai depan pintu.

Lihat Katalog Paket Hemat
12+Produk kebutuhan harian
Rp0Ongkir belanja ≥ Rp50.000
±1 jamPengantaran dalam kota
Pemilik Toko Sembako Sumber Rejeki melayani pelanggan berhijab yang sedang membayar di meja kasir kayu
Suasana toko kami — dilayani langsung oleh pemiliknya, Pak Slamet.

Diantar Hari Ini

Pesanan sebelum pukul 16.00 diantar di hari yang sama untuk area Salatiga.

Gratis Ongkir

Belanja Rp50.000 atau lebih, ongkos kirim dalam kota kami tanggung.

Stok Selalu Dicek

Label stok di katalog diperbarui setiap pagi — yang tampil, berarti ready.

Bayar Fleksibel

Tunai saat barang tiba, transfer bank, atau QRIS — pilih yang paling mudah.

Katalog

Belanja kebutuhan pokok

Cari produk atau saring per kategori, atur jumlahnya, lalu masukkan ke keranjang. Checkout tersusun otomatis menjadi pesan WhatsApp.

Paket Hemat

Satu klik, dapur aman

Paket bundel untuk kebutuhan seminggu sampai sebulan — lebih murah daripada beli satuan.

Cara Pesan

Tiga langkah saja

1

Pilih produk

Telusuri katalog, atur jumlah tiap produk, dan masukkan ke keranjang belanja.

2

Isi data antar

Tulis nama dan alamat, pilih diantar atau ambil sendiri di toko. Ongkir dihitung otomatis.

3

Kirim via WhatsApp

Klik checkout — rincian pesanan tersusun rapi dan terbuka di WhatsApp. Tinggal kirim, kami siapkan.

Rak-rak Toko Sembako Sumber Rejeki yang penuh sachet kopi, susu, dan kebutuhan harian
Tentang Kami

Warung kecil, langganan satu kampung

Berawal dari teras rumah pada 2012, Sumber Rejeki kini melayani ratusan keluarga di sekitar Tingkir, Salatiga. Prinsip kami sederhana: harga jujur, timbangan pas, dan pelanggan lama tetap disapa namanya.

  • Jl. Tingkir Raya No. 18, Tingkir, Kota Salatiga (alamat contoh)
  • Buka setiap hari, 06.00–21.00 WIB
  • WhatsApp 0812-3456-7890 (nomor contoh)
Kata Pelanggan

Langganan bercerita

Testimoni contoh untuk memperlihatkan tampilan halaman.

“Beras dan minyak habis barengan pas hujan deras. Pesan lewat web, satu jam kemudian sudah diantar. Nggak perlu keluar rumah.”

Bu RatnaIbu rumah tangga, Tingkir

“Paket bulanan itu nolong banget. Sekali pesan, kebutuhan dapur sebulan beres dan jatuhnya lebih murah.”

Pak Budi SantosoPemilik warung kopi, Sidorejo

“Harganya sama kayak beli langsung di toko, nggak dinaikkan. Ongkirnya malah sering gratis.”

Mbak SariKaryawan, Argomulyo
Di Balik Layar

Dibangun dengan UI UX Pro Max

Halaman ini adalah versi Pro Max dari contoh website toko sembako. Design system-nya dihasilkan skill UI UX Pro Max untuk kategori toko kelontong/grosir: gaya Vibrant & Block-based — blok geometris, border tebal, bayangan keras, dan hover yang tegas.

Token Warna

Primary
#059669
Secondary
#10B981
Accent / CTA
#EA580C
Background
#ECFDF5
Foreground
#064E3B
Kartu
#FFFFFF

Hijau segar untuk kesan stok melimpah dan segar, oranye membumi khusus untuk tombol aksi (checkout, paket) agar langsung terlihat.

Tipografi — Rubik / Nunito Sans

Rubik untuk judul: tegas, geometris, mudah dibaca dari jauh.

Nunito Sans untuk isi: huruf bulat yang ramah dan tetap jelas pada ukuran kecil — cocok untuk label harga, satuan produk, dan rincian pesanan yang dibaca pelanggan segala usia.

Aturan UX yang Diterapkan

  • Ikon selalu SVG, tidak memakai emoji sebagai ikon.
  • Kontras teks minimal 4,5:1 di mode terang maupun gelap.
  • Semua target sentuh minimal 44×44px — tombol +/− dan chip kategori nyaman di jempol.
  • Focus state terlihat jelas untuk navigasi keyboard.
  • Animasi mengikuti prefers-reduced-motion dan berdurasi singkat (150–250ms).
  • Responsif di 375px, 768px, 1024px, dan 1440px tanpa scroll menyamping.

Ciri Gaya Vibrant & Block-based

  • Border tebal 3px dan bayangan keras (hard shadow) di semua kartu dan tombol.
  • Hover tegas: kartu terangkat dan bayangan membesar, tombol bergeser saat ditekan.
  • Sudut siku (tanpa lengkungan) untuk kesan blok yang kokoh dan lugas.
  • Warna datar tanpa gradasi — cepat dimuat dan konsisten di semua layar.

Perbandingan: versi biasa vs versi Pro Max

AspekVersi BiasaVersi Pro Max (halaman ini)
Dasar desainGaya dipilih bebas saat pembuatan; warna dan font mengikuti selera umum.Design system dihasilkan skill UI UX Pro Max dari database gaya, palet, dan pasangan font untuk kategori toko kelontong/grosir.
Gaya visualKartu lembut dengan bayangan halus dan sudut membulat.Vibrant & Block-based: blok geometris, border 3px, bayangan keras, sudut siku, hover tegas.
WarnaPalet hijau umum tanpa token bernama.Token resmi: Primary #059669, Secondary #10B981, Accent #EA580C, Background #ECFDF5, Foreground #064E3B.
TipografiSatu keluarga font untuk seluruh halaman.Pasangan font dari skill: Rubik (judul) + Nunito Sans (isi), dipilih untuk e-commerce/ritel.
Aturan UXMengikuti kebiasaan umum tanpa checklist tertulis.Checklist skill diterapkan eksplisit: kontras ≥4,5:1, target sentuh ≥44px, focus terlihat, ikon SVG, reduced-motion.
Fitur belanjaKatalog + pencarian, paket hemat, keranjang + ongkir, checkout WhatsApp.Sama lengkapnya — fitur tidak berubah, yang naik kelas adalah sistem desain dan ketegasan tampilannya.
← Semua Contoh