Stop 5 of 8 · Weekly
Claude Design: landing page mockups
Sections from the brief, three hero variants, copy written with the layout, a mobile view, and the sentence that keeps a mockup from being sold as a build.
From brief to sections
A landing page mockup starts with the section list, not the hero. Yara asks for the sections the brief implies, each with the job it does and the one thing a visitor must be able to do there. That list is a five-minute conversation with the client, and it is far cheaper to argue about than a picture.
Then the mockup. Claude Design builds the page from that list, with the copy written into it, and Yara iterates by talking. Not by nudging rectangles. By saying the proof section is doing two jobs and should be split, or that the hero is trying to say three things.
Three heroes, on purpose
Always three hero variants, and they differ in claim rather than in colour. One leads with the outcome, one with the objection, one with the proof. Then the client picks an argument instead of picking a blue. Yara has never had a hero meeting go badly when the three options actually disagreed.
Try this
Using the brief and the brand kit in this Project, propose the section list for a landing page. For each section give the job it does, the one action or realisation the visitor gets from it, and roughly how many words of copy it needs. Order them so the page still works for someone who leaves halfway down. Then tell me which section the brief does not give you enough to write.
Build the landing page mockup from that section list using this brand kit. Write real copy, not placeholder text. Give me three versions of the hero only: one that leads with the outcome, one that answers the biggest objection, one that leads with proof. Keep every other section identical across the three so the comparison is fair. Use empty image frames with captions instead of stock photography.
Show me the mobile view. Where the desktop layout has a three column row, tell me the stacking order and why that order and not another. Flag any headline over nine words, any button label over three words, and any section that becomes more than two screens tall on a phone.
What goes to the developer
Export the page as a PDF for approval, and send the section list, the copy and the chosen hero alongside it. The developer does not build from a picture. They build from the picture plus the decisions, which is what stop 7 is about. If the client wants the mockup itself to be handed to their team, PowerPoint and PDF are the formats that travel.