How to Fix Outdated Website Design with AI

Fixed widths built for a monitor nobody has

The most reliable single tell. A container locked to 960 or 1140 pixels, sitting in a narrow column with vast empty margins on a modern display.

This dates a site precisely because it encodes an assumption about screen size from the era it was built in. The replacement is a fluid container with a sensible maximum reading width — content that uses the space available rather than a fixed slot within it.

The related tell is a separate mobile version maintained alongside the desktop one. One responsive layout that adapts is now the expectation; two parallel designs read as a retrofit, because that is what they were.

Type set small and tight

Older sites almost universally run body copy at thirteen or fourteen pixels with line height around 1.2, because that was normal when screens were smaller and lower resolution.

On a modern display that reads as cramped, and on a phone it reads as unreadable. Sixteen pixels with line height around 1.5 is the current floor, and line length capped so text does not stretch the full width of a wide monitor.

The other typographic tell is a compressed scale, where a heading is only slightly larger than the paragraph beneath it. Modern layouts use size and weight to make hierarchy obvious at a glance; dated ones distinguish levels by a couple of pixels and a colour change.

Ornament where there is now restraint

Drop shadows stacked on cards, bevelled buttons, gradients on every surface, rounded corners with a highlight along the top edge. These were the vocabulary of a particular period and they date a page instantly.

What replaced them is flat surfaces with hairline borders, shadow used sparingly to indicate genuine elevation rather than as decoration, and gradients reserved for a single accent rather than applied across the interface.

The underlying shift is that visual weight is now used to signal importance, not applied uniformly. When everything has a shadow, the shadow stops meaning anything.

Layout patterns that have moved on

Sidebars carrying primary navigation, which migrated to the header years ago. Carousels rotating three messages nobody reads past the first. Full-width hero images with text overlaid in a way that fails contrast on half of them.

The carousel deserves particular mention because it is still being built. The pattern exists to resolve internal disagreement about what should be first, not because it works — and it reliably means the second and third slides go unseen.

If several stakeholders each want their message in the hero, that is an editorial problem. Rotating them solves the meeting, not the page.

Consistency is most of what reads as modern

Here is the thing that surprises people: a dated site is usually not badly designed so much as inconsistently designed.

Sites grow section by section over years. One block has sixteen pixels of padding and a newer one has twenty-four. There are two shades of the brand colour and three button styles, each introduced at a different time by a different person.

Individually none of these is noticeable. Together they are what makes a page feel amateur, and imposing a single system across the whole page is usually a larger perceived improvement than any individual change.

Fix in this order

If you are working through it by hand, the sequence matters because early changes make later ones easier to judge.

Start with type, because it affects every page and is the cheapest change with the largest effect. Then spacing, applied from a defined scale rather than by eye. Then the component styling — buttons, cards, forms — as a set rather than individually. Then layout width and responsive behaviour. Imagery treatment last.

Check each step on a phone rather than a laptop. Most of the faults in this list are worst on small screens, and that is where most of the traffic is.

• Type scale — 16px body minimum, ~1.5 line height, and headings distinguishable at a glance.
• Spacing scale — a fixed set of values used consistently, with grouping expressed through space.
• Component set — one button, one card, one input, each with real hover and focus states.
• Fluid layout — one responsive design, not a desktop version with a mobile variant.