Nutrition Prototype Example
FIGMA PROTOTYPE (2023)
Role: UX/UI Designer
​
This self-initiated project was completed in a half day using Figma. The goal was to create a visually engaging and interactive concept that showcased advanced design techniques and rapid prototyping skills. The final result is a compact yet powerful demonstration of what can be achieved in a short timeframe with focused design thinking.
​
Project Scope & Deliverables
​
This portfolio piece was created to highlight specific UI and prototyping capabilities:
-
High-Fidelity Visual Design: Created polished UI layouts incorporating best practices in layout, spacing, and alignment.
-
Micro-Interactions: Developed an interactive prototype using Figma’s advanced prototyping tools to simulate drag gestures and animated transitions.
-
Parallax Effect: Built a layered scrolling animation to create depth and visual intrigue.
-
Typography and Color Theory: Applied deliberate type choices and color schemes to enhance readability, hierarchy, and emotional tone.
​
Design Process & Tools
​
Working within a tight timeline required prioritization, speed, and precision:
-
Rapid Concept Development: Sketched ideas and translated them into a digital format using Figma.
-
UI Design: Focused on visual clarity and aesthetic appeal, using bold type, consistent spacing, and a clean layout structure.
-
Prototype Creation: Leveraged Figma’s prototyping tools to build animated flows, including drag interactions and layered scroll effects.
-
Visual Polish: Applied color theory to convey energy and contrast, while ensuring accessibility and harmony across screens.
​
Key Achievements
​
-
Speed and Execution: Delivered a complete, high-fidelity prototype with custom animations in under 24 hours.
-
Advanced Interaction Design: Demonstrated skills with non-linear interactions such as drag and parallax to elevate the experience.
-
Design Fundamentals in Action: Showcased strong use of typography and color theory to guide the user’s attention and create visual rhythm.
​
This one-day Figma project demonstrates my ability to move quickly from concept to prototype while maintaining a high standard of visual and interaction design. It also serves as a personal exploration of creative techniques that can be integrated into real-world product experiences.
​
The slideshow below includes samples of the layout, animations, and interactive gestures created during the sprint.