Making the useful part of an App Store screenshot easier to read

Disclosure: I’m the founder of AppDrift. This example uses Folio, our fictional finance-app sample.

The screen has a large spending total and four category rows underneath. For a store screenshot about understanding your spending, the rows are the useful part, but they’re much smaller inside a phone mockup.

I’d keep the full phone for context and pull out a close-up of the breakdown. Three choices matter:

1. Keep each category name and amount together. Cropping to just the bars loses the meaning.

2. Back off the zoom when it cuts off a label or number. Bigger isn’t automatically clearer.

3. Fit the frame to the content. A circle can work for one control; a wider card gives these rows more room.

You can make this with a crop and a border in another editor, too. The important decision is which information deserves the space. This is a design example, with no conversion result measured.

The interactive example is here if you want to compare the crops: https://appdrift.co/screenshot-generator#zoom-detail

For a screen like this, would you show all four spending categories or focus on one?