screensdesign
LibraryCreateMCPPricingLoginRemoved appsApp Store ScreensWeb Onboardings

Mobile photo editing flow examples

Search the library

Everlook- Face & Body Editor: Editing a Photo

Open recorded flow

  1. Step 1 · 0:42

    Everlook- Face & Body Editor: Top bar with close and camera icons, followed by a 'Sample Photos' horizontal carousel, and a large grid of user photos filling the rest of the screen, with a floating 'Recents' button at the bottom.See the flow
    Everlook- Face & Body Editor

    Top bar with close and camera icons, followed by a 'Sample Photos' horizontal carousel, and a large grid of user photos filling the rest of the screen, with a floating 'Recents' button at the bottom.

  2. Step 2 · 1:54

    Everlook- Face & Body Editor: The screen is divided into three main parts: the photo preview area at the top, the adjustment slider in the middle, and the tool selection/navigation bar at the bottom.See the flow
    Everlook- Face & Body Editor

    The screen is divided into three main parts: the photo preview area at the top, the adjustment slider in the middle, and the tool selection/navigation bar at the bottom.

  3. Step 3 · 3:24

    Everlook- Face & Body Editor: Top image area with color swatches, middle text card, bottom close button overlay.See the flow
    Everlook- Face & Body Editor

    Top image area with color swatches, middle text card, bottom close button overlay.

  4. Step 4 · 5:31

    Everlook- Face & Body Editor: Top VIP badge, central photo preview with right-aligned filter list, bottom intensity slider, bottom tool selection menu, and bottom-most navigation bar.See the flow
    Everlook- Face & Body Editor

    Top VIP badge, central photo preview with right-aligned filter list, bottom intensity slider, bottom tool selection menu, and bottom-most navigation bar.

  5. Step 5 · 7:16

    Everlook- Face & Body Editor: Top image preview, middle slider control, lower mode selection tabs, bottom navigation bar.See the flow
    Everlook- Face & Body Editor

    Top image preview, middle slider control, lower mode selection tabs, bottom navigation bar.

  6. Step 6 · 8:32

    Everlook- Face & Body Editor: Top area shows the photo being edited, middle area contains adjustment tools and category tabs, bottom area contains the main navigation and confirm/cancel buttons.See the flow
    Everlook- Face & Body Editor

    Top area shows the photo being edited, middle area contains adjustment tools and category tabs, bottom area contains the main navigation and confirm/cancel buttons.

  7. Step 7 · 9:35

    Everlook- Face & Body Editor: Top photo preview, middle slider and utility icons, bottom filter carousel, bottom-most navigation bar.See the flow
    Everlook- Face & Body Editor

    Top photo preview, middle slider and utility icons, bottom filter carousel, bottom-most navigation bar.

  8. Step 8 · 11:06

    Everlook- Face & Body Editor: Top area shows the photo with a bounding box, right side shows color selection, bottom area contains the editing carousel and navigation controls.See the flow
    Everlook- Face & Body Editor

    Top area shows the photo with a bounding box, right side shows color selection, bottom area contains the editing carousel and navigation controls.

Precious - Baby Photo Art: Edit Photo Template

Open recorded flow

  1. Step 1 · 5:36

    Precious - Baby Photo Art: Top navigation bar with tabs, followed by a featured banner, a sub-header, a two-column grid of template cards, and a bottom navigation bar.See the flow
    Precious - Baby Photo Art

    Top navigation bar with tabs, followed by a featured banner, a sub-header, a two-column grid of template cards, and a bottom navigation bar.

  2. Step 2 · 5:54

    Precious - Baby Photo Art: Top navigation bar, central image editing canvas, instructional tooltip, bottom tool panel, and bottom navigation tabs.See the flow
    Precious - Baby Photo Art

    Top navigation bar, central image editing canvas, instructional tooltip, bottom tool panel, and bottom navigation tabs.

  3. Step 3 · 6:29

    Precious - Baby Photo Art: Top navigation bar, central canvas area with photo elements, and a bottom editing modal with a secondary navigation bar.See the flow
    Precious - Baby Photo Art

    Top navigation bar, central canvas area with photo elements, and a bottom editing modal with a secondary navigation bar.

  4. Step 4 · 6:42

    Precious - Baby Photo Art: Top navigation bar, central image preview area, bottom filter selection panel.See the flow
    Precious - Baby Photo Art

    Top navigation bar, central image preview area, bottom filter selection panel.

  5. Step 5 · 7:10

    Precious - Baby Photo Art: Top navigation bar, central photo editing canvas, bottom filter selection panel.See the flow
    Precious - Baby Photo Art

    Top navigation bar, central photo editing canvas, bottom filter selection panel.

  6. Step 6 · 7:25

    Precious - Baby Photo Art: Top navigation bar, large central image preview area, and a bottom horizontal toolbar for editing tools.See the flow
    Precious - Baby Photo Art

    Top navigation bar, large central image preview area, and a bottom horizontal toolbar for editing tools.

  7. Step 7 · 7:47

    Precious - Baby Photo Art: Top navigation bar, central photo editing canvas, bottom color selection panel, and bottom navigation tabs.See the flow
    Precious - Baby Photo Art

    Top navigation bar, central photo editing canvas, bottom color selection panel, and bottom navigation tabs.

  8. Step 8 · 8:15

    Precious - Baby Photo Art: Top title, search bar, followed by a multi-column grid of collage templates, and a bottom close button.See the flow
    Precious - Baby Photo Art

    Top title, search bar, followed by a multi-column grid of collage templates, and a bottom close button.

VSCO: Photo & Video Editor: Editing Photo

Open recorded flow

  1. Step 1 · 1:35

    VSCO: Photo & Video Editor: Top navigation bar with segmented control, followed by a multi-column image grid, and two floating action buttons at the bottom.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar with segmented control, followed by a multi-column image grid, and two floating action buttons at the bottom.

  2. Step 2 · 1:40

    VSCO: Photo & Video Editor: Top close button, large image preview, horizontal scrollable preset list, date text, bottom navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top close button, large image preview, horizontal scrollable preset list, date text, bottom navigation bar.

  3. Step 3 · 1:48

    VSCO: Photo & Video Editor: Top navigation bar, central image preview area, middle filter category tabs, bottom filter carousel, and bottom tool navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar, central image preview area, middle filter category tabs, bottom filter carousel, and bottom tool navigation bar.

  4. Step 4 · 1:52

    VSCO: Photo & Video Editor: Top navigation bar, central image preview area, middle category tabs, bottom preset carousel, and bottom utility navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top navigation bar, central image preview area, middle category tabs, bottom preset carousel, and bottom utility navigation bar.

  5. Step 5 · 1:53

    VSCO: Photo & Video Editor: Top image preview, middle slider, bottom tool icons, bottom navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top image preview, middle slider, bottom tool icons, bottom navigation bar.

  6. Step 6 · 1:56

    VSCO: Photo & Video Editor: Top image preview, middle slider, bottom adjustment tools, and bottom-most navigation bar.See the flow
    VSCO: Photo & Video Editor

    Top image preview, middle slider, bottom adjustment tools, and bottom-most navigation bar.

  7. Step 7 · 1:58

    VSCO: Photo & Video Editor: Image preview at the top, adjustment slider in the middle, tool icons and filter selector at the bottom.See the flow
    VSCO: Photo & Video Editor

    Image preview at the top, adjustment slider in the middle, tool icons and filter selector at the bottom.

  8. Step 8 · 2:00

    VSCO: Photo & Video Editor: Top hero image, followed by descriptive text, and a bottom section for example images.See the flow
    VSCO: Photo & Video Editor

    Top hero image, followed by descriptive text, and a bottom section for example images.

Layout for Instagram・Inpreview: Edit Photo

Open recorded flow

  1. Step 1 · 2:51

    Layout for Instagram・Inpreview: Top bar with navigation, 3x3 image grid in the center, and a bottom control panel with tabs, filter thumbnails, and adjustment sliders.See the flow
    Layout for Instagram・Inpreview

    Top bar with navigation, 3x3 image grid in the center, and a bottom control panel with tabs, filter thumbnails, and adjustment sliders.

  2. Step 2 · 3:07

    Layout for Instagram・Inpreview: Top navigation bar, followed by a 3x3 image grid, with a bottom modal overlay containing adjustment sliders and action buttons.See the flow
    Layout for Instagram・Inpreview

    Top navigation bar, followed by a 3x3 image grid, with a bottom modal overlay containing adjustment sliders and action buttons.

  3. Step 3 · 3:12

    Layout for Instagram・Inpreview: A centered modal overlaying a blurred background grid.See the flow
    Layout for Instagram・Inpreview

    A centered modal overlaying a blurred background grid.

  4. Step 4 · 3:15

    Layout for Instagram・Inpreview: Top navigation bar, followed by a 3x3 photo grid, and a bottom control panel containing filter categories, filter thumbnails, and adjustment sliders.See the flow
    Layout for Instagram・Inpreview

    Top navigation bar, followed by a 3x3 photo grid, and a bottom control panel containing filter categories, filter thumbnails, and adjustment sliders.

Found an example you like?See the whole story.

See the full library See plans