Loading image 1...
MalioboroRun2022
Halaman Registrasi Event Responsif yang dibangun dengan Next.js dan Tailwind CSS
Malioboro Run 2022
Malioboro Run 2022
Halaman Registrasi Event Responsif yang dibangun dengan Next.js dan Tailwind CSS
Halaman Registrasi Event Responsif yang dibangun dengan Next.js dan Tailwind CSS
Mengembangkan website satu halaman yang menarik secara visual untuk event Malioboro Run 2022. Tujuannya adalah menyediakan informasi event esensial, menampilkan pengalaman lari unik melintasi Yogyakarta (Jogja), dan mendorong registrasi peserta. Situs sepenuhnya responsif dan dioptimalkan untuk kecepatan dan kejelasan.
Masalah
Tantangan utamanya adalah merancang antarmuka yang bersih dan ramah pengguna yang dapat dengan cepat menyampaikan keseruan event sekaligus memasukkan detail event (aturan, rute, FAQ) dan berbagai logo sponsor/partner eksternal tanpa terlihat berantakan.
Menggunakan Tailwind CSS untuk styling utility-first yang cepat guna mencapai estetika modern dan minimal. Memanfaatkan bagian Hero Gelap/Overlay untuk dampak visual tinggi dan menggunakan navigasi sticky dengan CTA jelas (Daftar Sekarang) untuk memaksimalkan konversi registrasi. Fungsionalitas inti diimplementasikan menggunakan vanilla JavaScript.
PerjalananVisual
Showcase Proyek
Loading image 1...
Tangkapan Layar 1
Visualisasi proyek dan desain antarmuka
StackTeknologi
Next.js
Framework Frontend
CSS3
Styling
React
Antarmuka
Tailwind CSS
Styling
Figma
Desain/Prototyping
FiturUtama
Bagian Hero Berdampak Tinggi
Gambar hero dominan jalan Malioboro dengan nilai jual yang jelas dan terlokalisasi: "Menikmati wisata kota khas Jogja dengan berlari".
Tautan Navigasi Terstruktur
Navbar yang jelas untuk rute, syarat, FAQ, dan registrasi (Daftar Medali).
Showcase Sponsor & Partner
Bagian khusus untuk menampilkan sponsor utama (BPD DIY) dan partner resmi lain (Isotonic, Mineral Water, Media Partner).
Penceritaan Visual
Thumbnail galeri di dekat deskripsi utama untuk merangkum suasana lari secara visual.
CTA Registrasi
Tombol "DAFTAR SEKARANG" yang menonjol di header untuk konversi langsung.
Hitung Mundur Event Dinamis
Timer hitung mundur real-time yang menonjol di bagian hero menampilkan hari, jam, dan menit tersisa hingga Malioboro Run dimulai, menumbuhkan urgensi dan antusiasme.
ProsesKami
Pandangan detail tentang bagaimana kami mewujudkan proyek ini dari konsep hingga kenyataan melalui metodologi kami yang terbukti.
Desain & Wireframing
Dengan cepat membuat sketsa tata letak satu halaman di Figma, memprioritaskan bagian hero dan penempatan CTA.
Styling & Pengembangan
Membangun struktur komponen di Next.js dan menerapkan utility class Tailwind CSS untuk styling cepat semua bagian (nav, hero, galeri, footer).
Integrasi & Penyempurnaan
Menambahkan interaksi ringan untuk menu dan scrolling di sisi komponen, lalu memastikan responsivitas penuh di seluruh tampilan mobile.
Deployment
Pengujian akhir dan deployment ke layanan static hosting seperti Vercel.
04 Hasil yang diserahkan
- 01Mencapai skor PageSpeed tinggi berkat keluaran statis Next.js dan JavaScript sisi klien yang minimal
- 02Menciptakan hierarki konten yang jelas meskipun berformat satu halaman
- 03Berhasil menampilkan sponsor utama (BANK BPD DIY) dan partner resmi secara menonjol
- 04Menerapkan tata letak modern dan responsif yang dioptimalkan untuk registrasi event via mobile
Website ini sangat penting dalam membangun buzz dan pendaftaran. Tata letak yang bersih memudahkan peserta menemukan semua informasi yang diperlukan dengan cepat.