Logo of UI Challenges
Sign in

Gallery

See what others have created

Card Swipe (Tinder-style)
S

sheeshable

@sheeshable

MediumGestures

Card Swipe (Tinder-style)

Design the main swipe deck for a mobile app where a stack of content cards sits front and center. Each card represents a profile or story, with the top card ready for a left or right decision and the next cards peeking behind it.

The screen should make the gesture legible immediately: dragging the card should reveal approval/rejection intent, while the stack behind it signals there is more to review. Keep the focus on the active card, but let the surrounding deck feel alive.

This is not just a gesture demo; it is a decision flow. The layout needs to support quick judgment, clear content hierarchy, and visible feedback as the card moves, tilts, and exits the stack.

Design the resting state, the drag-in-progress state, and the outcome state after a swipe. The experience should feel native to a mobile gesture-heavy app, with thumb-friendly positioning and motion that reinforces the choice.

What to deliver

  • Design the stacked deck resting state with the active card and partial previews behind it.
  • Design the drag state with tilt, offset, and directional feedback for both left and right swipes.
  • Design the approved and rejected exit moments, including what replaces the dismissed card.
  • Design the next-card reveal so the deck advances cleanly after a swipe.
  • Include a fallback control for users who do not want to swipe.

Use small, persistent affordances near the card edge so users can infer left vs right before they commit to the drag.