Before-After Layout

What is the before / after layout?

The before-after layout splits the frame into two halves: a dark, dim, or cluttered "before" state on one side and a bright, clean, or improved "after" state on the other. The contrast itself is the message. There is no device in the layout because the transformation is the product. Use it for apps that solve a measurable problem (cleanup utilities, photo editors, organization tools, productivity apps that reduce clutter). The prove job lands here because the audience doesn't have to imagine the improvement: they see it directly. Skip if the app delivers an ongoing experience rather than a one-shot transformation.

Best for

• Cleanup and organization apps where the before state is visually messy
• Photo and video editors where the transformation is the product
• Productivity tools that reduce visible clutter (inbox zero, file organizers)
• Frame 3 of sets where you want a high-impact prove moment

When to use this layout

Use before-after when the app's value is a state change the user can see in a single image. The split must be honest: if the "after" exaggerates beyond what users actually achieve, App Store Review will flag it as misleading. Works best in frame 3 alongside a device-hero frame 1 and an educate frame 2.

Common pitfalls

• Exaggerating the "after" beyond what users actually achieve (misleading content violation)
• Using before-after when the app delivers an ongoing experience, not a transformation
• Splitting the frame top-to-bottom instead of left-to-right, which fights Western reading order

Related layouts