«We want something modern» is probably the sentence I have heard most often in a first meeting. The trouble is that modern means something different to everyone: for some it is a colour gradient, for others an animation on scroll, for others simply that it should not look like the site they have now.
It is worth separating two things that often get confused. One is fashion: devices that are everywhere today and that, three years from now, will date a project with uncomfortable precision. The other is genuinely modern web design, which has to do with how the page is built and holds up considerably better over time.
This article is about the second.
The five traits of a modern web design
1. A grid you feel even when you cannot see it
The first thing that separates considered design from a filled-in template is the grid. Not the colours: the grid.
Modern design uses a clear column structure and a consistent spacing system, so that margins, the gaps between blocks and every alignment follow a logic rather than whatever happened to look right on that particular screen. The result is a page that reads calmly even when the visitor cannot explain why.
When that structure is missing, it shows immediately: blocks look stacked rather than composed, spacing changes for no reason, and the whole thing feels improvised.
2. Typography with a real hierarchy
Typography does most of the work in contemporary design. And it is not about picking a handsome typeface, but about building a scale.
- Few sizes, with clear jumps between them.
- Weight contrast between headline and body text, not only size.
- A line length that allows comfortable reading: 60 to 75 characters works well on desktop.
- Generous line height in body copy.
A site with two well-used typefaces looks more current than one with six and a handful of arbitrary sizes.
3. White space treated as a material
Empty space is not wasted space: it is what gives the content air and directs the eye. In the projects that age best, space is decided as deliberately as colour.
A familiar tension appears here. The temptation is to fill the first screen with everything important, for fear that nobody will scroll. In practice, a first screen that says one thing clearly works better than one attempting to say five.
4. Motion with intent
Animation is the trait that degrades fastest when used as decoration. Modern design uses it to explain something: where I am, what has just changed, how this element relates to the previous one.
Three rules I apply on any project involving animation and 3D:
- If removing the animation leaves the page just as clear, it probably was not needed.
- Short durations. Beyond half a second, motion is perceived as slowness.
- Respect
prefers-reduced-motion. For some people motion is a genuine problem, not an aesthetic preference.
5. Speed, which is also design
A site that takes four seconds to paint its headline is not modern, however much care went into the grid. Performance is part of how quality is perceived, and today it is a ranking factor as well.
The three things that weigh most in practice are image size, the number of typefaces loaded and the number of third-party scripts. I wrote about this in more detail in website speed optimisation.
What ages badly
By contrast, these devices tend to date a project quickly:
- Automatic carousels on the home page, which hardly anyone looks at beyond the first panel.
- Parallax effects applied to the entire document.
- Pronounced shadows and bevels on buttons and cards.
- Heavy background videos competing with the text laid over them.
- Generic stock photography, which makes two companies in the same sector look like the same company.
None of these is a mistake in itself. What turns them into a problem is using them as a substitute for an idea.
How to tell whether your site needs updating
A quick check, no tools required:
- Open the home page on a phone and count how many gestures you need to understand what the company does.
- Read the headline aloud. If it could sit on any competitor’s site, the problem is not visual.
- Look at the page on a large screen. If the content stretches to fill the full width unchecked, the grid is missing.
- Time how long the first legible text takes to appear.
If two or more of these signals show up, the job is probably not a facelift but a redesign with the structure reconsidered.
A closing note
The projects that hold up best are not the ones that adopted the most devices of the moment, but the ones that had a clear idea of what they wanted to say and used design to say it. You can verify this in any round-up of award-winning sites from five years ago: the ones still working are those that committed to a solid structure and a voice of their own.
If you are considering renewing your company’s website and want an honest reading of where to start, in the diagnostic we go through structure, message and technical decisions together before talking about design.
