screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile collage creation flow examples

Search the library

VSCO: Photo & Video Editor: Creating a Collage

Open recorded flow

  1. Step 1 · 11:49

    VSCO: Photo & Video Editor: Top header with close button, followed by a 2-column grid of collage template icons, and a bottom-aligned primary action button.See the flow
    VSCO: Photo & Video Editor

    Top header with close button, followed by a 2-column grid of collage template icons, and a bottom-aligned primary action button.

  2. Step 2 · 11:53

    VSCO: Photo & Video Editor: Top navigation bar, large central canvas area with nested placeholders, and a bottom navigation bar with three icons.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar, large central canvas area with nested placeholders, and a bottom navigation bar with three icons.

  3. Step 3 · 11:57

    VSCO: Photo & Video Editor: Header with close button and title, followed by tab navigation, a grid of media thumbnails, and a bottom-anchored primary action button.See the flow
    VSCO: Photo & Video Editor

    Header with close button and title, followed by tab navigation, a grid of media thumbnails, and a bottom-anchored primary action button.

  4. Step 4 · 11:59

    VSCO: Photo & Video Editor: Top navigation bar, central canvas with image and placeholders, bottom toolbar with editing options.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar, central canvas with image and placeholders, bottom toolbar with editing options.

  5. Step 5 · 12:18

    VSCO: Photo & Video Editor: Top action button, central canvas area with image and placeholder, bottom color picker carousel, and bottom navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top action button, central canvas area with image and placeholder, bottom color picker carousel, and bottom navigation bar.

  6. Step 6 · 12:24

    VSCO: Photo & Video Editor: Top bar with add button, central canvas with image and shape overlay, bottom shape selection, color palette, and bottom navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top bar with add button, central canvas with image and shape overlay, bottom shape selection, color palette, and bottom navigation bar.

  7. Step 7 · 12:33

    VSCO: Photo & Video Editor: Top navigation bar, central editing canvas with image and shape, bottom action modal.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar, central editing canvas with image and shape, bottom action modal.

  8. Step 8 · 12:39

    VSCO: Photo & Video Editor: Top navigation bar, central image preview area with placeholders, and a bottom modal overlay for export settings.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar, central image preview area with placeholders, and a bottom modal overlay for export settings.

  9. Step 9 · 12:42

    VSCO: Photo & Video Editor: A background editor view with a centered modal overlay containing a progress bar and a cancel button.See the flow
    VSCO: Photo & Video Editor

    A background editor view with a centered modal overlay containing a progress bar and a cancel button.

  10. Step 10 · 12:45

    VSCO: Photo & Video Editor: Top navigation with close button, central image preview card, text input field below, and a bottom-aligned full-width post button.See the flow
    VSCO: Photo & Video Editor

    Top navigation with close button, central image preview card, text input field below, and a bottom-aligned full-width post button.

Precious - Baby Photo Art: Create Photo Collage

Open recorded flow

  1. Step 1 · 2:24

    Precious - Baby Photo Art: Top header, followed by a horizontal row of three circular icons, a large promotional banner, a 'Today' section with a content card, and a bottom navigation bar.See the flow
    Precious - Baby Photo Art

    Top header, followed by a horizontal row of three circular icons, a large promotional banner, a 'Today' section with a content card, and a bottom navigation bar.

  2. Step 2 · 2:28

    Precious - Baby Photo Art: Top navigation bar, informational header card, section title, 3x4 grid of photo/placeholder tiles, and a bottom navigation bar.See the flow
    Precious - Baby Photo Art

    Top navigation bar, informational header card, section title, 3x4 grid of photo/placeholder tiles, and a bottom navigation bar.

  3. Step 3 · 2:32

    Precious - Baby Photo Art: A grid of tiles occupies the center, with a close button at the top and a bottom navigation bar for actions.See the flow
    Precious - Baby Photo Art

    A grid of tiles occupies the center, with a close button at the top and a bottom navigation bar for actions.

  4. Step 4 · 2:34

    Precious - Baby Photo Art: A 3x3 grid of content tiles occupies the center, with a modal overlay in the middle and a bottom navigation bar.See the flow
    Precious - Baby Photo Art

    A 3x3 grid of content tiles occupies the center, with a modal overlay in the middle and a bottom navigation bar.

  5. Step 5 · 2:39

    Precious - Baby Photo Art: Top navigation bar, followed by a 3x4 grid of image/text tiles, and a bottom list of sharing actions.See the flow
    Precious - Baby Photo Art

    Top navigation bar, followed by a 3x4 grid of image/text tiles, and a bottom list of sharing actions.

  6. Step 6 · 2:43

    Precious - Baby Photo Art: Background grid of photo tiles with a bottom-anchored iOS share sheet modal.See the flow
    Precious - Baby Photo Art

    Background grid of photo tiles with a bottom-anchored iOS share sheet modal.

  7. Step 7 · 2:46

    Precious - Baby Photo Art: Top navigation bar, followed by a 3x4 grid of photo/text tiles, with a centered modal overlay, and a bottom list of sharing actions.See the flow
    Precious - Baby Photo Art

    Top navigation bar, followed by a 3x4 grid of photo/text tiles, with a centered modal overlay, and a bottom list of sharing actions.

Precious - Baby Photo Art: Edit Photo Collage

Open recorded flow

  1. Step 1 · 2:49

    Precious - Baby Photo Art: A centered modal window containing a 2x2 grid of buttons with a fifth button centered below.See the flow
    Precious - Baby Photo Art

    A centered modal window containing a 2x2 grid of buttons with a fifth button centered below.

  2. Step 2 · 2:55

    Precious - Baby Photo Art: Top navigation bar, instructional text, grid of selectable photo thumbnails, and a bottom action bar.See the flow
    Precious - Baby Photo Art

    Top navigation bar, instructional text, grid of selectable photo thumbnails, and a bottom action bar.

  3. Step 3 · 3:03

    Precious - Baby Photo Art: Top navigation bar followed by a progress indicator, instructional text, and a multi-column photo grid.See the flow
    Precious - Baby Photo Art

    Top navigation bar followed by a progress indicator, instructional text, and a multi-column photo grid.

Found an example you like?See the whole story.

See the full library See plans