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.
VisualJourney
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.
Delivered a *complete, approved Figma design file* for the event branding.
Successfully translated comple UI elements (tiered pricing, hotel bundles) into clean, modular HTML/Tailwind components.
Provided a fully responsive, static frontend structure ready for backend integration in under *. weeks*.
Established 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.