SynthMock
A reading app benefits from a presentation that leaves room for the text. This fictional direction connects choosing a title on the cover with a calm reading layout inside, avoiding decorative motion that contradicts the product experience.
Try it in SynthMock
Start with a Duo scene.
Use a reusable template as your starting point, then apply the choices in this article.
A paid plan is required to use templates and export.
Use a believable reading state
Prepare a fictional short essay or text you have permission to reproduce. The outer screen can show the selected title and a brief progress cue. The inner screen can show a readable passage with restrained navigation. Keep the title and reading location consistent so the larger view feels like a continuation.
A mockup is not a typography proof at every scale. Small body copy may not remain readable in a social preview, so use the title and overall rhythm to establish the product while providing a separate detail for typographic decisions. Avoid presenting a screen full of meaningless filler as evidence of a considered reading experience.
A restrained visual brief
The following choices are suggestions to develop with the actual interface. They describe the desired relationship between content and hardware, not a tested accessibility outcome.
| Element | Proposed choice | Reason to inspect it |
|---|---|---|
| Pose | Open device with minimal roll | Keep text lines visually stable |
| Background | Quiet pale or muted neutral | Avoid competing with the reading surface |
| Reflection | Controlled away from the main paragraph | Preserve visible text contrast |
| Motion | Brief opening followed by a calm view | Let the product state remain the focus |
Let the detail image do the close reading
A portfolio pair can show the whole device first and a closer reading surface second. Use the same passage in both so the detail supports the overview. Explain any design choices in the accompanying case-study text rather than expecting the mockup to prove reading comfort or comprehension.
If adapting the concept to a shipped app, preserve real controls and supported settings. Do not imply a dual-page mode, annotation tool or responsive behavior solely because it makes the larger screen look useful. The final image should make the reading environment understandable, while the real product or prototype supplies evidence of its behavior. Review glare and small text at the intended presentation size before choosing the final camera angle.
Final pass
Before you call it finished
- Use original or permission-cleared text.
- Keep the selected title and reading position consistent.
- Separate an overview from a typography detail.
Make the next version yours.
Explore Duo templates ↗