Text-Top, Device-Bottom Layout

What is the text-top device-bottom layout?

The text-top, device-bottom layout splits the frame vertically: a headline (and optional subtitle) occupies the top third, and a flat or near-flat device fills the bottom two-thirds. This split is the most common educate-job pattern in App Store screenshots because it lets you state what a feature does in text first, then show the feature in the UI. The eye reads top-to-bottom by default, so the message lands before the visual confirms it. Use this layout for frames 2 and 3 where you have one feature to explain per frame. ConsultMyApp's caption-keyword research shows captions in this slot (top-of-frame) get the highest OCR weight in Apple's text-detection index, so the keyword you want to rank for belongs in the headline here.

Best for

• Frame 2 and 3 where one feature gets explained per frame
• Apps where the feature name and UI need to land in the same glance
• Captions you want indexed by Apple's OCR (top zone gets highest weight)
• Multi-feature apps where each frame explains a different capability

When to use this layout

Use text-top on educate-job frames in the middle of the set (positions 2 and 3 of a 5-frame set). If frame 1 is device-hero, this layout is the natural progression: hook with the product, then educate with feature breakdown. If your subtitle and feature names are short (under 6 words), this layout reads cleanly at thumbnail scale.

Common pitfalls

• Squeezing more than 8 words into the headline area, which loses thumbnail legibility
• Using middle-of-frame text overlay on the device area, which competes with the UI text and breaks OCR confidence
• Forgetting that frames 2 and 3 still need to work without context from frame 1

Related layouts