Loading image 1...
MalioboroRun2024
Desain Figma High-Fidelity dan Implementasi HTML/Tailwind yang Cepat
_Bc1BAPtm9.png%3FupdatedAt%3D1765319554256&w=3840&q=75)
Malioboro Run 2024
Malioboro Run 2024
Desain Figma High-Fidelity dan Implementasi HTML/Tailwind yang Cepat
Desain Figma High-Fidelity dan Implementasi HTML/Tailwind yang Cepat
Menghadirkan desain UI/UX high-fidelity lengkap di *Figma* untuk website resmi Malioboro Run 2024, diikuti slicing frontend yang cepat dan pixel-perfect. Tujuannya adalah membangun identitas visual modern yang membangun kepercayaan serta menyediakan struktur HTML/CSS inti bagi tim pengembang untuk mengintegrasikan data dinamis.
Masalah
Tantangan utamanya adalah menerjemahkan kebutuhan event memadukan makna budaya Jogja dengan dinamika ajang olahraga menjadi desain mobile-first yang berdampak tinggi, lalu dengan cepat menyusun bagian harga bertingkat dan benefit yang kompleks hanya menggunakan HTML/Tailwind statis dalam tenggat yang ringkas.
Mengembangkan sistem visual komprehensif di *Figma* yang berfokus pada palet warna energik berkontras tinggi. Fase slicing memanfaatkan *HTML, Tailwind CSS, dan vanilla JavaScript* untuk menghadirkan tata letak dan styling inti, memastikan kode hasil akhir bersih, modular, dan siap untuk integrasi API eksternal.
VisualJourney
Showcase Proyek
Loading image 1...
Tangkapan Layar 1
Visualisasi proyek dan desain antarmuka
TeknologiStack
Figma
Desain UI/UX
HTML5
Struktur
CSS3
Styling
Tailwind CSS
Styling
JavaScript (Vanilla)
Interaktivitas/Logika Slicing
KeyFeatures
UI/UX High-Fidelity di Figma
File desain lengkap termasuk semua state dan breakpoint mobile untuk tingkatan tiket, hitung mundur, dan navigasi.
Slicing Frontend Pixel-Perfect
Konversi file desain Figma menjadi file HTML/Tailwind CSS yang bersih dan bergaya.
Desain Kartu Tiket Modular
Desain dan slicing kartu kompleks untuk membedakan paket reguler, save-for-run, dan bundel hotel dengan jelas.
Tata Letak Mobile-First
Memprioritaskan keterbacaan dan alur registrasi di layar yang lebih kecil.
Komponen Trust Bar Sponsor
Komponen khusus dan bergaya untuk menampilkan sponsor utama (Bank BPD DIY) dan logo kepatuhan (OJK, LPS), dirancang untuk membangun kredibilitas dengan segera.
Kepatuhan Lintas Browser dan Aksesibilitas
Struktur HTML/CSS final memastikan kompatibilitas WCAG 2.1 Level AA dan rendering yang konsisten di seluruh browser utama (Chrome, Firefox, Safari).
ProsesKami
Pandangan detail tentang bagaimana kami mewujudkan proyek ini dari konsep hingga kenyataan melalui metodologi kami yang terbukti.
Desain UI/UX di Figma
Membuat desain high-fidelity, menentukan gaya visual, tipografi, dan palet warna berdasarkan panduan branding klien (Bank BPD DIY).
Slicing Frontend (HTML/Tailwind)
Mengonversi desain Figma yang disetujui menjadi komponen HTML statis yang dapat digunakan ulang menggunakan utility class Tailwind CSS, memprioritaskan responsivitas kartu tiket.
QA Akhir & Handover
Menjalankan quality assurance (QA) visual terhadap file sumber Figma dan menyiapkan kode bersih untuk tim integrasi klien.
Menghadirkan *file desain Figma lengkap dan disetujui* untuk branding event .
Berhasil menerjemahkan elemen UI kompleks (harga bertingkat, paket hotel) menjadi komponen HTML/Tailwind yang bersih dan modular.
Menyediakan struktur frontend statis sepenuhnya responsif yang siap untuk integrasi backend dalam kurang dari *, minggu*.
Membangun estetika tepercaya yang diperlukan untuk event besar yang disponsori bank.
Desainnya berhasil menangkap semangat event. Pengiriman cepat frontend yang sudah bergaya memungkinkan tim kami segera memulai integrasi API.