Motion UI & Prototyping
Web Design for Photographer
Design elements used:
- Landing page, embedded video
- News page 1-3, works detail page
- Parallel, scroll movement
- Progress bar, pagination, active navbar
- Ease-out, ease-in, ease-both, spring
- Long press gesture, animated aperture
Typefaces & Logo:
- Playfair Display - regular
- Avenir - light, medium
Tools: Sketch + Principle
Mockups & Prototyping
Prototypes Video
Web Design for Swimwear Brand
Design elements used:
- Product page, detail pages
- Parallel movement
- Ease-out, ease-both
- Mutiple layers transform
- Clipping and masking
- Linear gradient color
Typefaces & Logo:
- Nova Round - book
- SF Pro Text - regular, semibold
Tools: Sketch + Principle
Mockups & Prototyping
Prototypes Video
Web Design for Travel Blog
Design elements used:
- Landing page, detail pages
- Nav bar in light/dark
- Parallel movement, resize background
- Ease-out, ease-both, ease-in
- Shape transform, clipping & masking
- Brown color palette
Typefaces:
- Playfair Display - black
- Proxima Nova - regular, medium
Tools: Sketch + Principle
Mockups & Prototyping
Prototypes Video
Web Design for Ai App Product
Design elements used:
- Parallel movement - vertical
- Ease-out, ease-in, spring
- Mutiple layers transform
- Clipping and masking
- Linear gradient color
- Handwriting animation
Typefaces & Logo:
- Rounded Mplus 1c - regular, medium
- Varela Round - regular
Tools: Sketch + Principle
Mockups & Prototyping
Prototypes Video
App Landing Page
Principle elements used:
- Ease-out, ease-both
- Shape transform
- Mutiple layers transform
- Clipping & masking
Rotate Colors Carousel
Framer elements used:
- Border radius
- Parent siblings
- Layer centering
- Layer states
- Text label style
- Tap event handler
- Animate function
- Spring curve
Previous And Next Button
Framer elements used:
- Import PSD file
- Border radius
- Layer centering
- Spring curve
- Layer states
- Text label style
- Tap event handlers
- Current state
- JavaScript methods
- Array push/pop
- If...else statement
Expanding Window Toggle
Framer elements used:
- Import PSD file
- Border radius
- Layer centering
- Layer states
- Border width
- Super layers
- Spring curve
- Mid X/Y placement
- Click event handlers
Settings Toggle Switch
Framer elements used:
- Import PSD file
- Border radius
- Layer centering
- Layer states
- Border color
- Super layers
- Ease curve
- Click event handlers
Input Search Bar
Framer elements used:
- Import PSD file
- Input module
- Virtual keyboard
- Placeholder color
- Input style
Design Tools: Framer programming
I was using the library of Framer, an open-source JavaScript framework for both low and high fidelity prototyping. I designed the transition, interaction, and animation of elements in the user interface.
