Text-Bottom Layout

What is the text bottom layout?

The text-bottom layout uses a full-bleed background (color, gradient, or photo) with the headline anchored in the lower third of the frame. It works as a hook because the entire upper two-thirds are uninterrupted brand surface (color, photo, or pattern), and the text reads as a caption to the visual rather than as a separate element competing with it. Lifestyle apps and apps with strong brand identity use this layout on frame 1 when they want a magazine-cover feel. The trade-off matches lifestyle-hero: no UI explanation on frame 1, so frames 2 and 3 do extra work.

Best for

• Apps with strong brand-asset libraries (photography, illustration, color)
• Frame 1 for lifestyle, fashion, and editorial apps
• Cases where the brand identity is the selling point, not the UI
• Designed-feel sets that target premium-positioned audiences

When to use this layout

Use text-bottom when the brand frame is mature enough to carry a frame without showing UI. Works well when paired with strong educate-job frames 2 and 3. If you don't have premium photography or distinctive brand color, this layout falls flat. Skip for utility apps where the product is the value, not the brand.

Common pitfalls

• Using stock photography that reads as templated rather than brand-native
• Placing the headline anywhere except the lower third (the layout depends on the anchor)
• Forgetting the 60/40 rule: this is a no-device frame, count it against the no-UI cap

Related layouts