Javapixa
Javapixa
Loading image 1...
High-Fidelity Figma Design and Rapid HTML/Tailwind Implementation
_Bc1BAPtm9.png%3FupdatedAt%3D1765319554256&w=3840&q=75)
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 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.
Showcase Proyek
Loading image 1...
Visualisasi proyek dan desain antarmuka
UI/UX Design
Structure
Styling
Styling
Interactivity/Slicing Logic
Complete design file including all states and mobile breakpoints for ticket tiers, countdown, and navigation.
Conversion of Figma design files into clean, styled HTML/Tailwind CSS files.
Design and slicing of complex cards to clearly differentiate regular, save-for-run, and hotel-bundled packages.
Prioritizing readability and registration flow on smaller screens.
A dedicated, stylized component for displaying the main sponsor (Bank BPD DIY) and compliance logos (OJK, LPS), designed to build immediate credibility.
Finalized HTML/CSS structure ensures WCAG 2.1 Level AA compatibility and consistent rendering across major browsers (Chrome, Firefox, Safari).
Pandangan detail tentang bagaimana kami mewujudkan proyek ini dari konsep hingga kenyataan melalui metodologi kami yang terbukti.
Created high-fidelity designs, defining the visual style, typography, and color palette based on client branding guidelines (Bank BPD DIY).
Converted the approved Figma design into static, reusable HTML components using Tailwind CSS utility classes, prioritizing the responsiveness of the ticket cards.
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.