# Mockup process (draft)

Adi, 2026-09-07. Build order for a new mockup.

## Steps

- [ ] **1. Ask Claude to learn the context.** Brief, scope, client's stated decisions, brand kit, copy,
      existing site. Output: a register of what the client asked for and ruled out, with a source
      against each.
- [ ] **2. Ask Claude to prepare a draft base mockup.** Every section in order, real copy, placeholders
      for images. A skeleton to react to, not a design.
- [ ] **3. Header.** It appears on many pages, so it gets settled first.
- [ ] **4. Footer.** Also on many pages. Low risk, settle it early.
- [ ] **5. Hero.** Nearly every site has one.
- [ ] **6. Under hero.** The second thing seen. The most client-specific choice on the page.
- [ ] **7. The rest, in page order.** The system exists by now, so it is assembly.

## Header

- [ ] Nav: simple links, dropdowns, or mega menu
- [ ] CTA in the bar: none, button, or button plus phone
- [ ] Sticky? Shrink on scroll?
- [ ] Solid, or transparent over the hero
- [ ] Mobile drawer: what stays in it

## Footer

- [ ] Columns: 2, 3, or 4
- [ ] Newsletter: in the footer, its own band above, or not at all
- [ ] Social icons: which platforms (ask the client)
- [ ] Contact: phone, email, address, service area
- [ ] Legal bar
- [ ] Reversed logo for the dark ground

## Hero

- [ ] Height: full, not full, or narrow band
- [ ] Layout: text and image, centred, full-bleed with overlay, split, grid, or no image
- [ ] Background: photo, gradient, flat, pattern, video
- [ ] CTAs: one, or two at different weights
- [ ] Supporting line: yes or no
- [ ] Trust element: inside the hero, or directly below

## Under hero

Pick one or two. Driven by the buyer's first question, not by habit.

- [ ] Trust factor: logos, certifications, numbers
- [ ] Product or services
- [ ] The problem to solve
- [ ] The who: team photo or about (**ask, some clients want faces and some do not**)
- [ ] How it works
- [ ] Testimonial
- [ ] Tool or assessment entry

## Homepage variables

Settle once, at the start.

- [ ] Page width and section rhythm
- [ ] Grounds: white only, white plus a tint, or add one dark band
- [ ] Type scale: how many heading sizes actually get used
- [ ] Heading treatment: one weight, or two weights in one heading
- [ ] Imagery: photography, illustration, drawn marks, or none
- [ ] People in images: team, stock, or none (**client decision**)
- [ ] Image treatment: consistent filter or grain
- [ ] Icons: one family, one stroke weight
- [ ] Primary CTA, and the secondary if there is one
- [ ] How often the CTA repeats down the page
- [ ] Proof placement: under the hero, mid page, or both
- [ ] Forms: where the first field appears
- [ ] Motion: none, or one deliberate effect

## Each element, same loop

1. Name one element
2. Claude builds an options sheet, 3 to 6 variations on one axis, deployed to a URL
3. Look at it at real width, with the real treatment
4. Choose one by name, or reject all
5. Claude merges and regenerates every version
6. Claude measures what changed
7. Record the decision and why