What does mockup do?
Use when the user should choose by looking: logo directions, a palette, a landing page, app screens, a store page, a menu or flyer, post templates. Works with or without a hub doc.
Steps
- Read the hub doc's Brief for name, audience, feel, palette, logo, and what to avoid. If the user gave reference images or a palette, use the exact colours (sample hex values from images when you can).
- Plan 3–4 directions that truly differ, not small variations, and every version each needs (e.g. mobile and desktop; Arabic and English; square and story sizes).
- Lay them out side by side on one canvas or page, in rows, so they compare at a glance. Use real copy from the brief and placeholders like [PRICE] for missing facts.
- Check contrast: 4.5:1 for body text, 3:1 for large text. If a palette pair fails, name it and say how to use it instead (e.g. decoration only).
- One line per direction: the idea, and its main strength or weakness. Ask the user to pick.
- Record the pick with to-brief and add follow-ups with to-tasks (final files, a flat version, a favicon).
Rules
- Never copy another brand's logo, characters or proprietary design.
- These are directions; say when final work needs a vector file or a designer.
- Generated images and 3D effects fail at small sizes. Always plan a flat version for icons.