Virgiawan Listanto
Chat WhatsApp

VALE

Situs golf clubhouse yang menjadikan setiap pegolf seorang ksatria: peta kerajaan, enam bab, dan pemesanan tee time.

Klien
VALE Golf Clubhouse
Bidang
Golf clubhouse
Peran saya
Desain situs, interaksi, dan front-end, bersama Invisual Studio
Tahun
2026
Jalur
Ditemukan, Melayani
Beranda VALE: peta kerajaan bergaya cetak dengan enam landmark, kompas, dan daftar Legend of the Realm

Situasinya

VALE adalah destinasi golf modern yang terinspirasi semangat ksatria abad pertengahan: setiap pegolf menjadi ksatria, setiap fairway menjadi kerajaan, dan setiap ronde menjadi petualangan. Situsnya harus membawa cerita itu sampai terasa, tanpa membuat pengunjung tersesat saat ingin memesan tee time.

Proyek ini dikerjakan di Invisual Studio. Hasilnya satu file preview berisi peta kerajaan dan enam bab, lengkap di desktop dan HP, yang berjalan tanpa server. Situsnya belum tayang, dan formulir di dalamnya tidak mengirim apa pun.

Negeri yang bisa dikelilingi

Peta negeri

Beranda adalah peta lapangan yang bisa digeser dan diperbesar. Enam landmark, dari Training Ground sampai King's Reach, membuka kartu cerita masing-masing dan menuju babnya. Setiap landmark yang dibuka memberi satu segel di Quest Log.

Peta dengan kartu landmark The Great Hall terbuka di sisi kanan
Kartu landmark The Great Hall di HP

Enam bab, satu buku

The Legend, The Course, The Great Hall, The Knights Cup, The Order, dan Begin the Quest dibaca seperti buku: berpindah bab terasa seperti membalik halaman, dan The Chronicle menjadi daftar isinya. Di The Legend, Green Knight berganti pose sambil digulir dan enam companion bisa dibalik seperti medali.

Enam companion dalam bingkai oval, dua di antaranya sudah dibalik dan menampilkan ceritanya

Lapangan dalam detail

Bab The Course memperkenalkan kontur lapangan, lima bendera dengan angka dan kata, dan hole VII The Dragon's Bunker lengkap dengan par dan jarak dari setiap tee. Kode ksatria ditutup dengan tiga aturan sederhana di lapangan.

Hole VII The Dragon's Bunker: par 4, jarak tiga tee, dan foto batu penanda

Great Hall dan Armoury

Clubhouse tampil lewat foto ruangannya, papan pengumuman yang posternya bisa digeser, dan rak Armoury berisi delapan barang yang bisa ditarik untuk dijelajahi.

New Goods from the Armoury: polo, topi, kaus kaki, dan sweater dalam rak yang bisa digeser

Kartu anggota The Order

Pengunjung menulis namanya dan langsung melihatnya di kartu anggota, lengkap dengan nomor anggota. Kartunya miring mengikuti kursor dan bisa dibalik. Di bawahnya ada empat hak anggota dan formulir untuk meminta undangan.

Kartu anggota VALE bertuliskan Sir Galahad, di samping teks A true member of the Vale

Pesan tee time

Begin the Quest memandu pemesanan dalam enam langkah, dari tanggal sampai data diri. Tiket di sampingnya terisi sambil pengunjung memilih, dan jam pagi ditandai Early Knight. Di HP, ringkasannya menempel sebagai bilah di bawah layar.

Formulir tee time: tanggal, jam 7:00 bertanda Early Knight, dan tiket VALE yang sudah terisi
Segel lilin dan pesan Your quest begins setelah booking di HP

Alur memesan tee time

  1. Pilih tanggal dari empat belas hari ke depan
  2. Pilih jam; jam pagi bertanda Early Knight
  3. Atur jumlah ksatria, satu sampai empat
  4. Pilih sembilan atau delapan belas hole
  5. Tambah caddie atau cart bila perlu
  6. Isi nama dan email, lalu segel booking

Keputusan desain

  • Terasa tercetak, bukan datar

    Judul dan ilustrasinya punya tekstur tinta seperti hasil cetak buku tua. Teksturnya dibuat dengan filter SVG ringan, bukan gambar besar, jadi tetap tajam di layar mana pun.

  • Peta yang bisa dimainkan

    Quest Log mengumpulkan segel setiap landmark yang dibuka. Progresnya disimpan di perangkat pengunjung, dan situs tetap berjalan normal bila penyimpanan itu diblokir browser.

  • Cerita tidak menghalangi booking

    Tombol Begin the Quest selalu ada di header dan di peta, dan ringkasan booking terus terlihat. Pengunjung yang hanya ingin memesan bisa langsung memesan.

  • Tenang bila diminta

    Bila pengunjung memilih gerak dikurangi, animasinya ikut berhenti. Dialog, kartu, dan formulirnya memakai tombol dan label asli, jadi bisa dipakai dengan keyboard dan pembaca layar.

Dalam angka

7
halaman: peta dan enam bab
6
landmark dan enam companion
50
gambar vektor dalam satu file
20
pilihan jam tee time per hari

Dibuat dengan HTML, CSS, dan JavaScript, GSAP (ScrollTrigger, Draggable, SplitText), Lenis, dan ilustrasi SVG. Satu file, berjalan tanpa server.

Ruang berikutnyaRUA
Chat WhatsApp