Traditional Web Design Process is Fundamentally Broken

At 4/19/2024

Responsive design broke the traditional web design and development process in fundamental ways. Despite this fact, many organizations continue to use this broken process.

The traditional web design process looks something like this:

Planning followed by Static Wireframes then Static Mockups then HTML, CSS, and JS, and finally Launch

We start with some planning. Then someone creates wireframes and mockups. When we’re happy with the mockups, they’re handed off to developers who convert them into HTML, CSS and JavaScript. Finally, after a lot of work, the web experience launches.

To understand why this process is broken, let’s focus in on two stages—wireframes and mockups—for a hypothetical site with five templates.

We’ll need a wireframe and static mockup for each of the five templates.

Five desktop wireframe icons on the left and five desktop wireframe icons on the right. In the middle, larger versions of the same wireframe and mockup icons are shown with the labels, 'Static Wireframes' and 'Static Designs'. The image is titled, 'Five wireframes and mockups.'

And we can’t forget mobile so we’ll need mobile wireframes and mockups too:

Five mobile wireframe and mockup icons are added to the previous image. The title changes to say, 'Can’t forget mobile'.

And tablets:

Five tablet wireframe and mockup icons are added to the previous image with the title, 'And tablet…'.

And it is hard to imagine a web site design without at least one round of revisions:

The middle of the previous image has been replaced with another full set of wireframes and mockups. The entire image is now full of wireframe and mockup icons

At this point, we have sixty artifacts in a best case scenario. What are the chances that the designs only require one round of revisions?

Worse, the designs are misleading. There is no one size for mobile, tablet, or desktop. Current generation iOS devices account for thirteen breakpoints on their own. These static wireframes and mockups leave to the imagination any screen sizes other than the three specified.

This is the worst of all worlds—a waterfall process creating dozens of artifacts, none of which accurately capture how the design will look and behave in the browser.

Next time, we’ll look at what happens to those in-between screen sizes when static designs are handed off to development.

Permalink to This article is part 1 of a series on design tools in a design system world:

This article is part 1 of a series on design tools in a design system world:

Currently Viewing:Traditional Web Design Process is Fundamentally Broken
Design Happens Between Breakpoints
Faulty Assumptions and Unwanted Features of Most Web Design Tools
Responsive Design Process that Works
Web Design Tool Wish List
[Coming soon]