Lilacpane01 / Group assets by what they need to communicate
Do not order images by capture time. Order them by information hierarchy: the first image establishes the core value, then later images explain a key action, result, or detail.
| Position | Job | Suggested content |
|---|---|---|
| Opening | Establish value | The screen that best represents the product |
| Middle | Explain the flow | One step or feature per visual |
| Closing | Reinforce the result | Outcome, comparison, or use case |
02 / Lock three visual variables
A set does not have to be identical, but it should lock the frame treatment, background family, and headline hierarchy. Finish one reference visual before repeating the rules across the rest.
03 / Review information density at real display size
Shrink the result to the size at which people will actually see it. If the headline is unreadable or the interface focus disappears, the problem is usually too much information, not a lack of pixels.
- Remove the subtitle before reducing type size
- Enlarge the important interaction area instead of showing every UI detail
- Use whitespace to separate device and copy instead of relying on decoration
04 / Export a channel-specific version
Websites, social platforms, portfolios, and app stores use different dimensions and content rules. Keep one visual source, but export and review a separate result for each destination rather than forcing one file everywhere.
FAQ
Does every mockup need a phone frame?
No. A frame is useful for context, while a screen-only crop is better for explaining detail. A set can mix both when each image has a clear job.
Must every image use the same background?
Not exactly, but they should share a recognizable color family, brightness range, and headline system.
Can a website image go straight to the App Store?
Do not assume so. App stores have separate pixel, format, transparency, and content rules that require their own check.
