Guides

The 8K redesign: rebuild any site from its own screenshots

The 8K redesign: rebuild any site from its own screenshots

The redesign is the strangest project in the agency catalog: the client already has everything — content, brand, traffic, even layouts they half-like — and still the quotes come back at 8K and six weeks. The reason is that redesigns are rebuilds wearing a diplomatic name: every page gets touched, nothing may break, and the old site keeps running while the new one takes shape. Here's the 8K redesign delivered in two weeks: rebuild the site from its own rendered pages, restyle it on a new design system, and launch without the traffic noticing anything except that it got better.

The pipeline's trick is treating the existing site as the specification. Every live page is a rendered, client-approved description of its own content and structure — the most accurate brief you'll ever get. What changes is the design system underneath and the sections that deserve better; what survives is the information architecture, the URLs and the rankings.


What an 8K redesign includes

  • A new design system — palette, type, spacing, components — applied consistently everywhere, which is the thing the old site lost years ago.
  • Every page rebuilt natively on your standard builder from its own rendered form — 20 to 40 pages in the typical bracket.
  • Section upgrades where they pay: a modern hero, credible proof sections, tighter service pages, a conversion-built contact flow.
  • URLs preserved, rankings protected. Same addresses wherever possible; redirects and metadata handled where structure genuinely improves.
  • Performance and accessibility pass — the invisible half of “it feels faster and cleaner.”

Days 1–2: audit and the design decision

  1. Crawl the site: full page inventory, traffic-weighted. The 12 pages with 90% of traffic get the design attention; the long tail gets clean templates.
  2. Read the current design out of the site itself: the agent extracts the de-facto palette, type and spacing — usually five grays and three oranges that were supposed to be one of each. This mess is your before picture.
  3. Set the new system: tokens proposed from the brand's intended values, approved once, applied everywhere after.
  4. Classify pages: showcase rebuilds (hand-directed, section upgrades), standard rebuilds (template-driven), retire-and-redirect.

Days 3–8: the rebuild loop

Each page follows the same loop, powered by the URL-to-page pipeline: the live page is read as rendered, rebuilt as native elements, and bound to the new tokens instead of its old inline styles. Then the judgment layer: keep the structure, or upgrade the section.

  1. Showcase pages first — home, top services, about: rebuild, then upgrade by instruction: “Replace the hero with a full-height version, headline unchanged; turn the four bullet paragraphs into an icon grid; add a proof band under the fold.”
  2. Standard pages in batches: rebuild on the new system, structure intact — approve in groups of five, skim each in staging.
  3. Repeating content goes dynamic where the old site hard-coded it: news cards, team grids, logo strips become loops and reusable parts.
  4. Forms rebuilt and wired; the contact flow gets the conversion pass it never had.
  5. Content is preserved by default — this is a redesign, not a rewrite. Copy edits happen only where the client signs off, as drafts.

Days 9–10: swap and verify

  1. The pre-launch checklist on staging, then the URL check: same addresses resolve, changed ones 301 through an approved map.
  2. Metadata carried and improved: patterns applied, no regressions on ranking pages.
  3. Cutover, immediate link crawl, sitemap re-submitted.
  4. The before/after pack: old vs new screenshots per showcase page, the performance delta, the audit log. Redesign clients buy with their eyes — give them the comparison.

The ledger

  • Traditional 30-page redesign: 70–100 hours — rebuild, restyle, QA, and the endless “make it match the new header” loop.
  • This pipeline: 18–26 hours — token setup, showcase direction, batch approvals, upgrade instructions and the launch pass.
  • At 8K: strong margin in two weeks, and the before/after pack does the selling for the next redesign client.

Redesign-specific failure modes

  • Restyling without a token layer — you get a newer-looking version of the same inconsistency. The system is the redesign.
  • Rewriting content mid-redesign without a mandate — scope doubles invisibly; keep copy changes a signed, separate track.
  • Changing URLs for tidiness — every changed address is ranking risk; structure changes need a reason and a redirect.
  • Redesigning the long tail by hand — the 30 pages nobody visits get the template treatment, not art direction.

The redesign checklist, printable

  • De-facto design audit run; inconsistency report saved (it's also the pitch).
  • New tokens approved from the brand's intended values.
  • Pages classified: showcase, standard, retire — with the traffic data attached.
  • Scope fence sentence in the contract; copy changes on a separate signed track.
  • Showcase pages rebuilt and upgraded one by one; standard pages in group approvals.
  • Hard-coded repetition converted to loops and reusable parts.
  • Forms rebuilt, wired, test-submitted.
  • URLs preserved; the exceptions carry an approved redirect map.
  • Metadata carried and patterned; no regressions on ranking pages.
  • Checklist on staging, cutover, live crawl, before/after pack delivered.

The content freeze: the small process rule that saves the launch

One procedural rule earns its own section because skipping it burns real redesigns: from the day staging is created, production content freezes — or every edit made on the live site while you rebuild is an edit the launch silently deletes. The practical protocol is lighter than it sounds: the client keeps a running list of must-make changes during the two weeks (most can wait), genuinely urgent edits get made in both places with a note, and the final week's comparison pass diffs staging against production for the twelve pages that change most, catching anything that slipped. Say the rule at kickoff, put it in the timeline email, and repeat it when staging goes up — three tellings is what it takes. The alternative is the launch-day discovery that the client's assistant rewrote the pricing page on Tuesday, and the choice between re-doing it live under pressure or explaining why the new site shows old prices.

The accessibility pass: the redesign's quiet obligation

A redesign is the one moment a site's accessibility debt can be paid wholesale, because every page is passing through your hands anyway — and skipping it means re-shipping the old failures in new colors. The pass rides the token layer: contrast gets fixed once, at the system level, when the new palette's text-on-background pairs are checked before any page is built (the audit's five grays almost always include two that fail on white). Heading order gets repaired page by page during the rebuild loop — the h2-to-h4 skips that accumulated over years of visual-size headline picking simply don't survive a structure-aware rebuild. Focus states, form labels and alt text are instruction-level fixes across the batch. The dividend is triple: a measurably more usable site, a small rankings tailwind, and — increasingly relevant for EU clients — a defensible position under the accessibility directives that now reach private-sector sites. The before/after pack gets an accessibility line for exactly that audience: “contrast failures: 23 → 0” reads like insurance to the partner who signs renewals.

FAQ

Does the old site stay up during the redesign?

Yes — everything happens on staging while production runs untouched; cutover is the last, least dramatic step after the checklist passes.

Will rankings drop after the redesign?

URLs preserved plus metadata carried means the risk profile is far below a migration's. Where structure changes, the approved redirect map covers it — and the crawl verifies.

Can the client keep editing the site afterwards?

Better than before: everything is native elements on a coherent token system, so their edits inherit the design instead of fighting it.

Redesign or migrate — which is this?

Same stack, new skin: redesign. Changing builders or platforms while you're at it: that's the migration project — the machinery overlaps, the scope and price don't.

The redesign prompt set

  • “Read the de-facto design out of [site]: every color in use with frequency, every font size on real pages, spacing patterns. I want the inconsistency report.”
  • “Propose global styles from the brand's intended values: [assets]. Map each old value to its token replacement.”
  • “Rebuild [URL] natively on the new tokens from its rendered form. Same structure, same content; list what you mapped where.”
  • “Upgrade pass on the rebuilt home: full-height hero keeping the headline, the four feature paragraphs into an icon grid, a proof band after the fold. Show the plan.”
  • “Batch-rebuild these 9 standard pages on the tokens, structure intact. Group approval; flag anything that didn't map cleanly.”
  • “Replace the hard-coded news cards with a query loop matching the new card design.”
  • “Compare staging against production for these 12 URLs: content differences only, ignore styling.”

A worked example: the law firm's second redesign

The instructive case: a 28-page law-firm site, redesigned once already three years ago — which is why the de-facto design audit finds four heros, seven grays and three button styles (each “redesign” had added a layer without removing one). The inconsistency report becomes the pitch artifact: partners who couldn't see “dated” could see 7 grays where 2 belong.

Tokens get set from the firm's actual brand book — apparently consulted for the first time since it was paid for. The twelve traffic pages (practice areas, attorney profiles, home) get the showcase loop: rebuild, then one upgrade instruction each; attorney profiles gain a consistent card structure that makes the team page finally look like one firm. Sixteen long-tail pages batch-rebuild in two group approvals. The news section's hard-coded cards — updated by the marketing assistant via a shared doc and a prayer — become a query loop, which quietly ends that ritual.

URLs: 26 of 28 unchanged; two merged with redirects. Cutover Thursday night; the crawl comes back clean; the before/after pack goes to the partners Friday — old and new home side by side, the 7-grays report marked resolved, the performance delta. Twenty-two hands-on hours. The firm's managing partner, who approved 8K with visible reluctance, forwards the pack to two other firms within a month — the before/after pack is the referral engine, every time.

Selling the redesign: the audit is the pitch

Redesigns stall in sales because “your site looks dated” is an opinion the client's cousin disagrees with. The audit converts opinion into inventory: run the de-facto design read on their live site before the proposal meeting — free, twenty minutes — and present the inconsistency report next to the brand book they paid for. The gap between intended and actual design is undeniable in a way taste never is. Close with the two-week timeline and the URLs-preserved promise (the fear behind the fear is always rankings), and the 8K conversation becomes a scheduling conversation.

The scope fence: what turns 8K into 20K quietly

  • “While we're at it, let's rewrite the services copy” — a content project wearing the redesign's clothes. Separate track, separate signature.
  • “Can we also restructure how practice areas are organized?” — that's information architecture, which reopens URLs, which reopens rankings risk. Price it as its own phase or defer it.
  • “Marketing wants three new landing pages for the launch” — sell them at the one-day price as launch companions; don't absorb them.
  • The fence sentence for the contract: same pages, same addresses, same words — new system, new sections where agreed. Everything outside it is welcome, and priced.

How is 8K justified when nothing new is being 'added'?

The client isn't buying additions — they're buying coherence and its compound interest: a system that makes every future page cheaper, sections that convert better, and a site their team can edit without breaking. The before/after pack makes this visible; the inconsistency report priced it.

What happens to the client's page-builder addons and shortcodes?

The audit lists them; the rebuild replaces their output with native equivalents and the plan flags any without one. Most redesigns retire two or three plugins whose entire job was propping up the old design — a small performance and security dividend the report takes credit for.

The bottom line

An 8K redesign is a token system plus a rebuild loop plus restraint: the site is its own spec, the showcase pages get the art direction, the long tail gets templates, and the URLs survive. The conversion machinery is screenshot or URL to page pointed at the client's own site; the price-ladder context is 1K vs 5K vs 25K. Toolset: pricing.

More reading

From the blog

Everything, in one Bundle.

Every Pro Skill and ability, bundled — for your own sites.