Loading image 1...
MalioboroRun2024
High-Fidelity Figma Design and Rapid HTML/Tailwind Implementation
_Bc1BAPtm9.png%3FupdatedAt%3D1765319554256&w=3840&q=75)
Malioboro Run 2024
Malioboro Run 2024
High-Fidelity Figma Design and Rapid HTML/Tailwind Implementation
High-Fidelity Figma Design and Rapid HTML/Tailwind Implementation
Delivered the complete high-fidelity UI/UX design in Figma for the Malioboro Run 2024 official website, followed by rapid, pixel-perfect frontend slicing. The goal was to establish a modern, trust-building visual identity and provide the core HTML/CSS structure for the development team to integrate dynamic data.
The Problem
The core challenge was translating the event's requirements merging the cultural significance of Jogja with the dynamism of a sporting event into a high-impact, mobile-first design, and then rapidly slicing the complex tiered pricing and benefits sections using only static HTML/Tailwind within a condensed timeline.
Developed a comprehensive visual system in Figma focusing on a high-contrast, energetic color palette. The slicing phase utilized HTML, Tailwind CSS, and vanilla JavaScript to deliver the core layout and styling, ensuring the resulting code was clean, modular, and ready for external API integration.
Visual Journey
Project Showcase
Loading image 1...
Screenshot 1
Project visualization and interface design
TechStack
Figma
UI/UX Design
HTML5
Structure
CSS3
Styling
Tailwind CSS
Styling
JavaScript (Vanilla)
Interactivity/Slicing Logic
KeyFeatures
High-Fidelity UI/UX in Figma
Complete design file including all states and mobile breakpoints for ticket tiers, countdown, and navigation.
Pixel-Perfect Frontend Slicing
Conversion of Figma design files into clean, styled HTML/Tailwind CSS files.
Modular Ticket Card Design
Design and slicing of complex cards to clearly differentiate regular, save-for-run, and hotel-bundled packages.
Mobile-First Layout
Prioritizing readability and registration flow on smaller screens.
Sponsor Trust Bar Component
A dedicated, stylized component for displaying the main sponsor (Bank BPD DIY) and compliance logos (OJK, LPS), designed to build immediate credibility.
Cross-Browser and Accessibility Compliance
Finalized HTML/CSS structure ensures WCAG 2.1 Level AA compatibility and consistent rendering across major browsers (Chrome, Firefox, Safari).
OurProcess
A detailed look at how we brought this project from concept to reality through our proven methodology.
UI/UX Design in Figma
Created high-fidelity designs, defining the visual style, typography, and color palette based on client branding guidelines (Bank BPD DIY).
Frontend Slicing (HTML/Tailwind)
Converted the approved Figma design into static, reusable HTML components using Tailwind CSS utility classes, prioritizing the responsiveness of the ticket cards.
Final QA & Handover
Executed visual quality assurance (QA) against the Figma source file and prepared the clean code for the client’s integration team.
04 Outcomes delivered
- 01Delivered a complete, approved Figma design file for the 2024 event branding.
- 02Successfully translated complex UI elements (tiered pricing, hotel bundles) into clean, modular HTML/Tailwind components.
- 03Provided a fully responsive, static frontend structure ready for backend integration in under 1.5 weeks.
- 04Established a high-trust aesthetic necessary for a sponsored major bank event.
The design successfully captured the spirit of the event. The rapid delivery of the styled frontend allowed our team to begin API integration almost immediately.
Related Services
Services Featured in This Project
These are the Javapixa services behind this project.