Loading image 1...
MalioboroRun2022
Halaman Registrasi Event Responsif yang dibangun dengan Tailwind CSS
Malioboro Run 2022
Malioboro Run 2022
Halaman Registrasi Event Responsif yang dibangun dengan Tailwind CSS
Halaman Registrasi Event Responsif yang dibangun dengan 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*.
VisualJourney
Showcase Proyek
Loading image 1...
Tangkapan Layar 1
Visualisasi proyek dan desain antarmuka
TeknologiStack
HTML5
Struktur
CSS3
Styling
JavaScript (Vanilla)
Interaktivitas
Tailwind CSS
Styling
Figma
Desain/Prototyping
KeyFeatures
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 HTML dan menerapkan utility class menggunakan *Tailwind CSS* untuk styling cepat semua komponen (nav, hero, galeri, footer).
Integrasi & Penyempurnaan
Mengimplementasikan JavaScript ringan untuk menu/scrolling dan memastikan responsivitas penuh di seluruh tampilan mobile.
Deployment
Pengujian akhir dan deployment ke layanan static hosting seperti Vercel.
Mencapai skor PageSpeed tinggi berkat static hosting dan penggunaan framework JavaScript yang minimal
Menciptakan hierarki konten yang jelas meskipun berformat satu halaman
Berhasil menampilkan sponsor utama (BANK BPD DIY) dan partner resmi secara menonjol
Menerapkan 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.