FitPulse Fitness App UI
High-Contrast Fitness Tracker Mobile UI/UX & Responsive Frontend Built in HTML5 & CSS3
Role
UI/UX Designer & Frontend Dev
Design Tools
Adobe XD & Figma
Frontend Stack
HTML5 & CSS3
Event
Tula's Institute Hackathon 2024
End-to-End Design & Frontend Coding
FitPulse is a modern fitness tracking mobile application designed and developed for the 2024 Hackathon at Tula's Institute. The project combines high-contrast dark mode UI/UX wireframing in Adobe XD and Figma with responsive frontend code written in HTML5 and CSS3.
Adobe XD & Figma
Design Tools
HTML5 & CSS3
Frontend Stack
Tula's Institute
Hackathon Event
Dark Mode UI
Visual Theme
5 Wearables
Gadget Integration
2024
Project Year
Building at Tula's Institute Hackathon
During the 2024 Hackathon held at Tula's Institute, our team aimed to create a clean, accessible mobile health application for tracking fitness routines and syncing wearable gadgets.
As the sole Frontend UI/UX Designer & Developer on the team, I designed the complete user experience in Adobe XD and Figma, and subsequently converted the designs into live, responsive frontend code using HTML5 and CSS3.
From Design Canvas to Live Code
UI/UX Wireframing (Adobe XD & Figma)
Designed 20+ screen artboards mapping out splash pages, metric collection forms, telemetry dashboards, user profiles, and device pairing modals.
Frontend Development (HTML5 & CSS3)
Hand-coded responsive layout flex containers, custom form input fields, high-contrast dark CSS themes, and interactive button states.
Wearable Integration Hub
UX cards for pairing fitness wearables including Google Fit, Noise, Boat, Samsung Health, and Fitbit.
User Metric Onboarding
Clean form UX capturing gender, age, height, and weight inputs to compute tailored calorie burn targets.
Interactive Screen Gallery
Explore application screens and design canvas layouts built for FitPulse.
Full Design Suite (Adobe XD & Figma)
Six core application screens: Splash Welcome, Calorie Metrics Form, Height Selection Modal, Dashboard Telemetry, Profile Details, and Wearable Device Sync.
Core Application Design Modules
High-Contrast Dark Mode
Dark theme styled with HTML/CSS for comfortable visibility during workout sessions.
Motivational Splash UI
Bold athletic photography paired with vibrant call-to-action buttons.
Multi-Device Wearable Sync
Sync screens for Google Fit, Noise, Boat, Samsung Health, and Fitbit.
Body Score & Metrics
Calculates body mass index, weight goals, and daily calorie targets.
Adobe XD & Figma Canvas
Full interactive wireframe map covering edge cases and form states.
Pure HTML & CSS Code
Frontend coded cleanly with responsive layout structures and custom form styling.