Project Overview
Type: Personal Design Exploration
Focus: Animation Design, Visual Storytelling
Duration: 2025/06/01 - 2025/06/03
Tools: Figma, Photoshop, Midjourney
Focus: Animation Design, Visual Storytelling
Duration: 2025/06/01 - 2025/06/03
Tools: Figma, Photoshop, Midjourney
Design Exploration
Creative Intent
This project investigates how static poster design principles can be transformed into dynamic, interactive web experiences through strategic animation and motion design.
Design Question: How can we bring the visual impact of poster design into digital spaces while adding the unique capabilities of web interaction?
Visual Foundation
AI-Generated Portrait: Started with a Midjourney-created portrait from my previous work, establishing the project's visual anchor
Poster Design Influence: Drew inspiration from bold typography and imagery combinations typical in creative poster layouts
Thematic Focus: Women's personal growth and self-discovery as the conceptual framework
An AI-generated potrait I made in 2024
Poster of Savio Joseph : Wonderstruck
Creative Process
Animation Development
Technical Approach:
Photo masking in Photoshop to isolate design elements
Created separate glowing flower layer for animation effect
Implemented breathing/glowing animation in Figma
Design Philosophy: Animation as visual metaphor—the gentle glow and breathing effect mirrors the theme of personal growth and inner transformation.
Glowing flower animation component
Key frame of glowing flower animation component
component
component
Background portrait without flower on face, modified in photoshop
Orginal background portrait without flower on face, modified in photoshop
Visual Strategy
Layout Structure: Poster-inspired hierarchy from website name through navigation to slogan-portrait pairing Color Psychology: Carefully selected palette reflecting themes of growth and self-discovery Modern Aesthetic: Flat design approach for contemporary, accessible visual language Modular Design: Card-based elements supporting scalable content organization
Components of buttons
Components of nav menu
Design Solution
The resulting platform demonstrates:
Dynamic Visual Storytelling: Static poster principles enhanced with meaningful animation
Thematic Consistency: Visual choices reinforcing the personal growth narrative
Technical Innovation: Seamless integration of photo manipulation and web animation
Interactive Hierarchy: Traditional poster layout adapted for digital navigation
Key Animation Feature: The breathing flower effect creates an organic, living quality that transforms the static portrait into an engaging focal point.
Design Impact
Motion Design Learning
Technical Skills: Advanced Figma animation capabilities combined with Photoshop masking techniques Conceptual Growth: Understanding how animation can support rather than distract from core messaging Cross-Platform Integration: Successfully combining AI generation, photo editing, and web design tools
Creative Innovation
This exploration proves that poster design principles can successfully translate to web interfaces when enhanced with purposeful animation and interaction design.
Portfolio Development
Demonstrates:
Advanced animation and motion design skills
Multi-software workflow proficiency
Conceptual thinking linking visual metaphors to user experience
Ability to create cohesive visual narratives across different media