Traditional Web Design Process is Fundamentally Broken

Written by Jason Grigsby on

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.

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

  1. Currently Viewing:Traditional Web Design Process is Fundamentally Broken
  2. Design Happens Between Breakpoints
  3. Faulty Assumptions and Unwanted Features of Most Web Design Tools
  4. Responsive Design Process that Works
  5. Web Design Tool Wish List
  6. [Coming soon]
Jason Grigsby

Jason Grigsby is one of the co-founders of Cloud Four, Mobile Portland and Responsive Field Day. He is the author of Progressive Web Apps from A Book Apart. Follow him at @grigs.

Never miss an article!

Get Weekly Digests


Comments

Add a comment

I have wondered about this for years. My frustration with quirky frustrations with apps, phones, thermostats, and watches. There should be some kind of open source boilerplate software that runs scenarios early on.

This is why I never write media queries based on device dimensions. Instead, I add breakpoints for each element relative to the viewport. If the header starts to look bad at 860px, I’ll write media queries until it looks great on the smallest phone; and so on for other elements within the template.

Leave a Comment

Please be kind, courteous and constructive. You may use simple HTML or Markdown in your comments. All fields are required.


Let’s discuss your project! Email Us