Virgiawan Listanto
Chat WhatsApp

Ciri

Arah visual dan prototipe toko online untuk koleksi perhiasan perak AG925, kini dalam review klien.

Klien
Ciri
Bidang
Perhiasan perak
Peran saya
Arah visual, desain UI, prototipe
Tahun
2026
Jalur
Menjual
Beranda Ciri: tangan memakai cincin perak, dengan judul Your Personal Mark

Situasinya

Ciri menjual koleksi perhiasan perak sterling AG925: 13 perhiasan dalam 8 bentuk, terdiri dari cincin, anting, dan kalung. Perhiasan perak dijual lewat fotonya, jadi tampilan toko harus memberi ruang untuk kilau logamnya, bukan bersaing dengannya.

Sebelum toko dibangun, klien perlu melihat dan mencobanya lebih dulu. Saya menyerahkan satu file preview berisi 35 halaman yang bisa diklik, masing-masing dalam versi desktop dan HP. Klien sedang meninjaunya sekarang, dan tokonya belum dibangun.

Toko yang bisa diklik

Arah visual tanpa warna aksen

Huruf grafit dan abu perak, tanpa warna aksen sama sekali, supaya foto perhiasan yang paling menonjol. Judul memakai Cormorant yang klasik, sedangkan teks memakai Inter Tight yang ringkas dan mudah dibaca di HP.

Beranda Ciri di HP: cincin perak di jari dengan judul Your Personal Mark dan tombol Shop Now

Koleksi dan kategori

Halaman koleksi menampilkan ketiga belas perhiasan dalam satu grid. Pembeli bisa memilih kategori cincin, kalung, atau anting, menyaring menurut ketersediaan dan bentuk, lalu mengurutkan hasilnya.

Halaman koleksi Ciri: pilihan kategori, filter ketersediaan dan bentuk, dan grid cincin perak

Halaman produk dan tas belanja

Setiap perhiasan punya halaman sendiri dengan foto, detail produk, dan catatan perawatan perak. Tas belanja terbuka dari samping, jadi pembeli bisa menambah barang tanpa meninggalkan halaman.

Halaman produk Hollow Ring versi desktop
Halaman produk Hollow Ring versi HP

Journal dan alur belanja lengkap

Delapan artikel journal mengisi sisi editorial toko. Halaman tentang, kontak, bantuan, akun, checkout, dan konfirmasi pesanan juga dirancang, jadi klien bisa mencoba belanja dari beranda sampai pesanan selesai.

Dari arah visual ke toko

  1. Menetapkan arah visual: grafit, abu perak, tanpa aksen
  2. Merancang 35 halaman dalam versi desktop dan HP
  3. Menyatukannya dalam satu file preview yang bisa diklik
  4. Klien mencoba alur belanja dan memberi catatan
  5. Toko dibangun setelah desainnya disetujui

Keputusan yang melindungi bisnis

  • Prototipe sebelum kode

    Klien bisa mengklik seluruh toko sebelum satu baris kode toko ditulis. Mengubah desain di tahap ini jauh lebih murah dan cepat daripada mengubah toko yang sudah jadi.

  • Perak yang menjadi warnanya

    Tanpa warna aksen, tombol dan tautan tidak berebut perhatian dengan produk. Satu-satunya kilau di halaman datang dari foto perak itu sendiri.

  • Setiap halaman punya versi HP

    Ke-35 halaman dirancang untuk desktop dan HP sekaligus, jadi klien menilai keduanya sebelum toko dibangun, bukan menemukan masalah tampilan HP setelah tayang.

  • Catatan perawatan di halaman produk

    Perak bisa menghitam jika salah dirawat. Catatan perawatan ditaruh di halaman produk, supaya pembeli tahu cara menjaganya sejak sebelum membeli.

Dalam angka

13
perhiasan dalam 8 bentuk
35
halaman, desktop dan HP
8
artikel journal
0
warna aksen, perak yang bicara

Dibangun dengan HTML, CSS, dan JavaScript dalam satu file preview, memakai huruf Cormorant dan Inter Tight.

Ruang berikutnyaWebsite Invisual
Chat WhatsApp