“Blending UX strategy and visual storytelling to create meaningful products.”
Fantasy Thumbnail Series → UI Design System
⭐Hero Section
Transforming a cinematic media project into a structured UI design system by defining typography, color, spacing, and components — blending visual storytelling with interface clarity.
⭐ Project Overview
Problem: The original thumbnails were visually compelling but lacked consistency in spacing, hierarchy, and accessibility. They weren’t designed with scalability or UI clarity in mind.
Goal: Redesign the thumbnail series into a cohesive UI design system with defined typography, color palette, spacing rules, and reusable components.
Role: UI Designer • Visual Designer • Brand Strategist
Tools: Figma • Adobe Creative Suite • FigJam
“Original layout — strong visuals, inconsistent spacing.”
⭐Design System Foundations
Typography:
H148pxBoldHero titles, section headers
H236pxSemi-BoldCase study titles, major UI labels
H324pxMediumSubheaders, card titles
Body16pxRegularParagraphs, descriptions
Caption12pxRegularNotes, labels, accessibility hints
Color Palette:
Extract colors from my thumbnails:
-
Deep purples, fiery oranges, glowing blues
-
Add neutral grays for UI balance
-
Include WCAG contrast checks
Spacing System
Use an 8pt grid:
-
Consistent padding
-
Balanced margins
-
Clear alignment rules
Components
Design:
-
UI cards based on thumbnails
-
Buttons with hover states
-
Hero banners
-
Caption overlays
UI Redesign (Before → After)
Show:
-
Original thumbnail
-
Redesigned UI card
-
Typography applied
-
Color palette in use
-
Component layout
Add short notes explaining each improvement.
Feedback & Iteration
Mention peer feedback:
-
Improved text contrast
-
Simplified layout
-
Refined spacing
-
Added responsive variants
Final Design System
Show:
-
Full type scale
-
Color palette swatches
-
UI components
-
Final mockups
Reflection
This project helped me:
-
Translate media into scalable UI
-
Build a structured design system
-
Improve accessibility and hierarchy
-
Apply storytelling to interface design
Next steps: Expand the system into a full product UI. Add motion design. Create mobile variants.