Skip to content
SynthMockOpen editor

A studio note · Art direction

A Duo mockup brief for a learning app

An illustrative lesson-to-workspace concept that explains a learning interface without making unsupported educational claims.

Closed Night Sky iPhone Duo with purple cover artwork against a mint gradient
The Duo cover screen in a mint scene, rendered in SynthMock.

This concept uses the cover to identify a lesson and the open display to show how someone works through it. The visual promise is a clear workspace, not an unproven improvement in learning outcomes.

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.

Choose one small learning task

A fictional lesson called Reading a color palette gives the campaign something concrete to show. The cover can identify the lesson and its next step. The inner layout can place an example beside an exercise, keeping the same lesson title and visual reference.

Use original exercise content and neutral demo progress. Avoid invented test scores, completion statistics or claims that the larger display makes learning faster. For a real product, preserve the actual lesson structure and show only interactions the app supports. An attractive mockup can communicate the layout; it cannot establish educational effectiveness.

Make the relationship between example and task visible

The inner display should explain how the workspace helps the selected activity. It does not need a chat panel, leaderboard and lesson library unless those elements are relevant to the immediate task.

SurfaceProposed contentPurpose
CoverLesson title and a short next-step cueIdentify the activity
Inner exampleOne palette and a concise promptKeep the reference visible
Inner responseA simple, plausible exercise stateShow where the learner acts

Review the task without the promotional headline

Place the open mockup in a slide with the headline temporarily removed. Can a reviewer describe what the learner is expected to do? If not, simplify the exercise state or change the crop. More decorative device movement will not clarify an ambiguous task.

For a proposed motion version, use a quick approach to the cover, a controlled opening and a stable exercise view. Fine instructional text belongs in a closer companion image when it cannot be read in the overview. Keep any progress labels identical across sources unless a verified recording shows a real change. Finish the handoff with the source exercise, its permissions and an explicit note identifying the concept as illustrative.

Final pass

Before you call it finished

  • Use one specific lesson rather than a generic course grid.
  • Avoid unsupported educational or performance claims.
  • Show a clear relationship between the example and the exercise.

Make the next version yours.

Explore Duo templates