01 / PLAN
Start with the result and the source
Place the product and message in separate but connected zones. Leave enough negative space for the headline and CTA without making the product feel detached.
Begin with one verified message and a sharp product image. Accurate prices, restrained copy, clear hierarchy, and honest product representation matter more than filling every available space.
02 / WORKFLOW
Complete the workflow step by step
- Prepare.
Choose a product image with enough detail and a shape that can anchor one side of a wide frame.
- Set up.
Select a 16:9 template and decide whether the reading direction should move from message to product or product to CTA.
- Create.
Add one headline, essential proof or price, brand identity, and a concise action.
- Review.
Export, inspect desktop and smaller responsive previews, and confirm the website will not crop essential edges.
03 / QUALITY CHECK
Review the result before the next step
Inspect the exported creative on the target screen. Verify spelling, offer accuracy, logo clarity, product edges, contrast, safe areas, and the final call to action.
- The product is clear at banner size.
- Copy does not become a long line.
- CTA contrast is sufficient.
- Responsive cropping has been considered.
04 / QUESTIONS
Common question
Should text be baked into a website banner image?
When possible, live HTML text is more accessible and responsive. Use image text only when the placement requires a single creative asset.
Can I update this workflow later?
Yes. Save the source and project details, then update the relevant settings, content, or output when the destination requirements change.