Overview
This project showcases my ability to design a clear, engaging user interface for a movie database experience. I created the full desktop layout in Figma, focusing on strong visual hierarchy, interactive components, and a dark theme suited to film browsing.
The version shown below is a gallery of high-fidelity mockups built in Figma.
I later developed a live version of the site using React and the TMDB API as a later project.
While the live site differs visually from the design, it demonstrates my understanding of structure, interaction, and developer collaboration.
Figma Desktop Design
Home Screen
Movie Details
Favorites Screen
Click any screen to view it full size.
Design Process
- Researched user goals and mapped flows for key tasks.
- Created wireframes to organize content and navigation.
- Designed high-fidelity desktop mockups with a dark theme.
- Built interactive prototypes to test and refine UI.
- Ensured good contrast and typography for accessibility.
Tools Used
Figma, TMDB API, React, react-slick, CSS Modules, Vite