🖥️

Buka di desktop

Wireframe homepage Sirpuloh Publication ini direka untuk paparan lebar. Sila buka di komputer / skrin besar.

Best viewed on a desktop or wide screen.

Sirpuloh Publication · Konsep Wireframe · Homepage Kedai

Sirpuloh — Homepage

Cadangan struktur baharu untuk kedai Shopify Sirpuloh, berdasarkan research corak homepage e-dagang & kedai buku. Fokus: pelajar / ibu bapa jumpa buku yang betul secepat mungkin — pilih tingkatan dalam viewport pertama, produk terlaris awal, penulis sebagai bukti kepercayaan. Satu CTA utama: Beli Sekarang. Semua kandungan (produk, penulis, USP) dari kedai sebenar — tiada yang direka.

Draf 1.4 · Ogos 2026 · Greyscale — warna & gambar masuk fasa design selepas struktur diluluskan · 1.4: hero jadi banner biasa (gambar + value prop + CTA); box tingkatan pindah ke atas zon Kategori
BARU — tiada di homepage sekarang NAIK ATAS — dipindah ke posisi awal GABUNG — beberapa seksyen disatukan KEKAL — dikekalkan, dinaik taraf
00

Flow Homepage: Sekarang vs Cadangan

Susunan seksyen dari atas ke bawah. Homepage sekarang ada 10 seksyen — dua showcase yang serupa fungsi, dan koleksi produk hanya muncul di seksyen ke-6. Cadangan baharu: 9 zon, setiap satu ada satu tugas jualan, produk naik ke awal.

Homepage sekarang — sirpuloh-dev

1
Hero

Headline + 3 kulit buku condong

2
Marquee tagline

"Belajar lebih pintar" — tiada tawaran sebenar

3
Showcase 1

Orang pegang buku + rotate scroll

4
Bento gambar

Grid gambar lifestyle — tiada fungsi jualan

5
Badges USP
6
Koleksi Kami

Produk pertama muncul selepas 5 seksyen scroll

7
Showcase 2

Sir Syahmi pegang dua buku — serupa fungsi dengan Showcase 1

8
Barisan Penulis
9
Statement CTA
10
Newsletter + Footer

10 seksyen — pengunjung yang nak beli terpaksa lalu 2 showcase & 1 bento dulu sebelum jumpa produk.

Cadangan baharu — 9 zon

1
Hero

Banner biasa — gambar penuh + value prop + satu CTA utama. Trust bar (20K+ pelajar) di bawahnya

2
Band Promo

Tawaran sebenar (combo, jimat pos) — bukan tagline. Nipis sahaja

3
Koleksi — Terlaris

Dari seksyen 6 naik ke 3. Turutan automatik: promo → terlaris → lain. 6 kad + Lihat Semua

4
Kategori

Tingkatan (SPM · PT3 · UASA, box simple) di atas + subjek (Sejarah · Matematik · English · Teknik Belajar) di bawah — bilangan buku auto, terus ke collection

5
Penulis

Showcase 2 + Barisan Penulis disatukan jadi satu komponen: satu penulis di-feature besar (foto + bio + bukunya) yang auto-tukar ikut giliran, strip semua penulis di bawah — klik avatar untuk terus tukar. "Ditulis cikgu sebenar" = bukti kepercayaan utama Sirpuloh

6
Info — Kenapa Sirpuloh

4 USP sahaja (angka 20K+ pindah ke trust bar hero — satu nombor satu tempat)

7
CTA Penutup

Panel gelap "Sedia nak skor?" — butang sama dari hero

8
Newsletter

Sebab melanggan yang jelas: buku baharu & promo

9
Footer

zon baharudipindah ke awalseksyen digabung

Apa yang ditambah baik

Satu zon kategori lengkap. Tingkatan (SPM · PT3 · UASA) dan subjek disatukan dalam satu zon selepas koleksi — pelajar dan ibu bapa cari buku ikut tingkatan & subjek, bukan browse rambang.

Produk naik dari seksyen 6 ke seksyen 3. Terlaris dan combo muncul selepas satu scroll sahaja.

Dua showcase jadi satu zon penulis. Showcase 1 dan Showcase 2 serupa fungsi; sekarang satu komponen — penulis di-feature besar auto-tukar ikut giliran, klik avatar untuk terus tukar. Bento gambar dikeluarkan (tiada fungsi jualan).

Satu nombor, satu tempat. "20K+ pelajar" hanya di trust bar hero. Badge USP tinggal 4.

Satu butang utama. "Beli Sekarang" — ayat sama di hero, koleksi, dan penutup.

0B

Font: Tiada Perubahan

Kedai sekarang dah guna Sora (sans) untuk semua teks — konsisten dan sesuai kekal. Wireframe ini greyscale & font neutral; Sora kembali pada fasa design.

Buku yang buat kau skor. — Sora 800 / 400, kekal seperti sedia ada

0C

Rujukan

Struktur dirujuk dari best practice e-dagang & dua site yang jadi panduan gaya projek ini — klik untuk banding.

Luigi's Box Homepage best practices

Tengok: value prop dalam viewport pertama, produk terlaris awal, navigasi kategori untuk katalog — asas turutan 9 zon ini.

Slight Twist slight-twist.co.nz

Tengok: seksyen sikit tapi setiap satu berani & jelas tugasnya — rujukan "proper" untuk fasa design nanti.

The Amin Cap theamincap.com

Tengok: header glass, marquee outline, kad produk — house style yang dah terbukti untuk kedai sendiri.

Sirpuloh — sekarang sirpuloh-dev.myshopify.com

Kedai sedia ada (password: sir10) — untuk banding terus dengan cadangan di bawah.

sirpuloh.com
NAVKEKALStruktur header semasa dikekalkan — burger, nav kiri, logo tengah, cari/akaun/troli kanan
01 · HEROKEKALBanner biasa: gambar penuh + value prop + satu CTA utama · trust bar di bawah
Gambar banner — dummy dulu, generate kemudian
Penerbit Buku Latihan · SPM · PT3 · UASA

Buku yang buat kau skor.

Nota & latihan ditulis cikgu berpengalaman — ringkas, padat, fokus format terkini.

Beli Sekarang → Lihat Terlaris ↓
20K+Pelajar
[n]Buku diterbitkan · auto
KSSMFormat terkini
02 · BAND PROMOKEKALTawaran sebenar, boleh edit dari Theme Editor · animasi: marquee auto-scroll perlahan
Beli 2 buku, jimat kos pos Combo Sejarah SPM tersedia Pos seluruh Malaysia Beli 2 buku, jimat kos pos Combo Sejarah SPM tersedia
03 · KOLEKSI — TERLARISNAIK ATASDari seksyen 6 naik ke 3 · turutan automatik: promo → terlaris → lain · animasi: kad angkat sikit bila hover
Pilihan Sirpuloh

Koleksi Kami

6 buku pertama ikut turutan: produk promo dulu, kemudian terlaris, kemudian yang lain. Combo termasuk.

Kulit buku
SPMSejarah

Nota Ringkas Sejarah SPM Tingkatan 4 & 5

Deskripsi ringkas 2 baris dari data produk sebenar, dipotong automatik…

RM[harga]Beli
Kulit buku
SPMEnglish

The Essay Book SPM

Deskripsi ringkas 2 baris dari data produk sebenar…

RM[harga]Beli
+ 4 kad lagi (grid 3×2)
Combo Sejarah SPM termasuk

Anatomi kad produk

Pill 1Tingkatan — warna ikut peringkat (SPM/PT3/UASA)
Pill 2Subjek — warna ikut subjek
TajukNama produk penuh, maksimum 2 baris
Deskripsi2 baris, clamp automatik — dari data produk
Harga+ harga asal bergaris kalau ada promo
ButangBeli — terus ke PDP
Lihat Semua Buku →
04 · KATEGORIBARUTingkatan (box simple) di atas + subjek di bawah · automated collection ikut tag produk
Cari Ikut Kategori

Cari ikut tingkatan & subjek.

SPM[n] buku →
PT3[n] buku →
UASA[n] buku →
Sejarah[n] buku · auto
Matematik[n] buku · auto
English[n] buku · auto
Teknik Belajar[n] buku · auto

Box tingkatan = simple, nama + bilangan buku sahaja. Ikon subjek dari library Lucide (bukan emoji, bukan lukis sendiri). Semua collection automatik ikut tag — tile/box boleh tambah bila kategori baharu masuk, tiada kerja manual.

05 · PENULISGABUNGSatu komponen: featured auto-tukar + strip avatar boleh klik
Ditulis Cikgu Sebenar

Kenal penulis di sebalik buku.

Bukti kepercayaan utama Sirpuloh — buku ditulis cikgu yang mengajar subjek ini setiap hari, bukan kilang buku.

SejarahFoto penulis — auto-tukar
Sir Syahmi

[Bio ringkas 1 ayat — perlu dari klien]

6 buku diterbitkan
Buku
Buku
Buku
Sir Syahmi
Ghazali Masan
Iqbal Ahyar
Sir Asri
+ lain (13 foto)

Nota interaksi: panel auto-tukar ikut giliran penulis (crossfade). Klik avatar → terus tukar & auto berhenti seketika. Kotak buku = buku penulis tu, klik terus ke produk. Foto 13 penulis dah ada dalam aset · bio setiap penulis = permintaan #1 dari klien.

06 · INFO — KENAPA SIRPULOHKEKAL4 USP sahaja — "20K+ pelajar" dah pindah ke trust bar hero (satu nombor satu tempat)
Kenapa Sirpuloh

Kenapa pelajar pilih kami.

Format KSSM Terkini

Ikut format peperiksaan semasa

Ditulis Cikgu Berpengalaman

Rujuk zon Penulis di atas

Teknik Skor Pantas

Nota ringkas + skema lengkap

Pos Seluruh Malaysia

Semenanjung & Borneo

Ikon: guna semula ikon 3D glass sedia ada, atau Lucide pada fasa design. Ayat sokongan kecil di bawah setiap USP boleh diedit dari Theme Editor.

07 · CTA PENUTUPKEKALButang & ayat sama dari hero — satu laluan
Sedia?

Sedia nak skor?

Mula dengan buku yang betul — dipercayai ribuan pelajar seluruh Malaysia.

Beli Sekarang →
08 · NEWSLETTERKEKALSebab melanggan dinyatakan jelas — bukan borang kosong

Buku baharu & promo, terus ke emel.

Satu emel sekali-sekala bila ada buku baharu atau promo — tiada spam.

Alamat emel Langgan
09 · FOOTERKEKALLogo gelap sedia ada · pautan kedai + sosial
Sirpuloh Publication

Penerbit buku latihan & rujukan SPM · PT3 · UASA.

Kedai
Semua BukuTerlarisKategoriPenulis
Bantuan
Hubungi KamiPolisi PenghantaranPolisi Pemulangan
Ikuti
FacebookInstagramTikTok
Nota: Ini wireframe struktur — greyscale, kotak-X = gambar dummy. Warna jenama (krim · hijau gelap · pink · emas), gaya "kertas exam", font Sora, dan gambar sebenar (kulit buku, foto penulis, mockup) masuk pada fasa design selepas struktur ini diluluskan. Semua nama produk, penulis & USP diambil dari kedai sebenar; label [perlu dari klien] menanda kandungan yang belum ada. Bilangan buku pada router & tile kategori dikira automatik dari tag Shopify.