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 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


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.