Why wireframes are becoming obsolete

A couple of weeks ago, I posted a short excerpt from Basecamp's Shape Up called Wireframes are too concrete. It highlights something that I've been experiencing over the past years, but never really got round to writing about — do wireframes still serve a purpose?

Wireframes are the middle ground. They're not sketches, but they're not high fidelity designs either. They're intentionally designed without color. A wireframe simply attempts to be an accurate representation of layout and information architecture while intentionally avoiding high visual and content fidelity.


The argument around wireframes

So why do we still keep planning for a phase of wireframing in so many projects? The purpose and argument for wireframes often fall in one of three buckets:

  • Wireframes focus attention on usability instead of aesthetics. They prevent stakeholders from derailing meetings over irrelevant details like button color and allow user testing to focus on interactions instead of visuals.

  • Wireframes are faster to create. They keep things conceptual and avoid the risk of getting too invested or attached to a particular design direction.

  • They're a tool for detailed documentation of interactions without the additional overhead of visual design. (for enterprise level users)

Let's we break these arguments down one by one:


1. Wireframes and stakeholders

I think most stakeholders over the past years have evolved a ton when it comes to reviewing and giving feedback on digital products. It's extremely rare nowadays to be in a meeting where the conversation derails over things like button color. And even if they do, any good designer should be able to shift the focus to more relevant discussions.


2. Wireframes are faster to create

When there's a design system available, I find that creating high fidelity designs is faster than creating wireframes. Most of the elements are already created so dragging and dropping them is, of course, more efficient than creating ones from scratch, even if they are just black and white.

With collaborative tools like Figma, the matter is even further simplified. In most projects I'm working on these days, I'll give my client access to Figma and, within days, I can see them trying stuff out. This makes collaboration fundamental in the relationship and takes a lot of pressure out of the meetings and presentations when you've created something together.


3. Wireframes are a simpler tool for documentation

The argument that wireframes serves as a tool to disregard visual design might be true, but that doesn't really make it a valid one. During my 20+ years in this industry, I'm not sure I've ever worked on, or even seen, wireframes that detail documentation of interactions — unless you're talking about 'links', but a high fidelity design absolutely do that.

First of, I don't think I've ever worked on wireframes that transferred truthfully into a visual design without moving or at least slightly re-arranging some of the elements. And if you're moving things around from the wireframes - and hence, breaking the structure and hierarchy that the wireframes were supposed to communicate - then what's the point in the first place?

I’ll give a wireframe to my designer, and then I’m saying to her: “I know you’re looking at this, but that’s not what I want you to design. I want you to re-think it!” It’s hard to do that when you’re giving them this concrete thing.Shape Up


What do I do instead of wireframes?

Instead, try sketching. I know what you may say, I can't draw. That's completely fine! If you'd see some of my sketches, you'd understand that you don't have to be able to draw. What you should be able to do, is communicate.

Simple sketch on paper

Here's something I shared with my SuperFriendly team. You can see that this is very rough, but you probably get the idea of roughly what I'm trying to communicate. This is arguably much faster than wireframing, and more importantly, it allows the team to focus on their expertise.

Work in the shaping stage is rough. Everyone can tell by looking at it that it’s unfinished. They can see the open spaces where their contributions will go. Work that’s too fine, too early commits everyone to the wrong details. Designers and programmers need room to apply their own judgement and expertise when they roll up their sleeves and discover all the real trade-offs that emerge.

No designer likes to get a wireframe, only to apply color. No developer wants to get a design that doesn't leave room for their own judgement and expertise. Teams that collaborate flourish. When you intentionally leave room for discussion, that's when magic happens.

Newsletter

Join thousands of designers, developers, and product people from companies like Amazon, IDEO, Figma, and Shopify on my mailing list. Usually once or twice a month.

Newsletter

Join thousands of designers, developers, and product people from companies like Amazon, IDEO, Figma, and Shopify on my mailing list. Usually once or twice a month.

All posts

December 4, 2023

November 6, 2023

September 13, 2023

June 29, 2023

May 25, 2023

April 27, 2023

December 9, 2022

September 13, 2022

June 29, 2022

April 5, 2022

December 20, 2021

November 24, 2021

November 1, 2021

October 11, 2021

September 22, 2021

August 23, 2021

March 1, 2021

January 25, 2021

January 2, 2021

November 2, 2020

October 12, 2020

October 1, 2020

September 21, 2020

September 3, 2020

August 19, 2020

August 10, 2020

June 23, 2020

June 22, 2020

June 22, 2020

April 8, 2020

March 31, 2020

March 29, 2020

March 11, 2020

March 1, 2020

February 24, 2020

February 10, 2020

January 22, 2020

January 20, 2020

December 16, 2019

December 2, 2019

November 18, 2019

September 25, 2019

September 9, 2019

June 27, 2019

June 18, 2019

June 13, 2019

May 20, 2019

February 22, 2019

February 18, 2019

February 15, 2019

February 7, 2019

January 29, 2019

January 23, 2019

January 18, 2019

December 28, 2018

December 17, 2018

December 13, 2018

November 29, 2018

October 22, 2018

October 12, 2018

September 13, 2018

August 17, 2018

August 13, 2018

August 12, 2018

July 20, 2018

May 24, 2018

May 21, 2018

May 16, 2018

May 7, 2018

April 26, 2018

April 24, 2018

April 16, 2018

April 9, 2018

April 9, 2018

April 9, 2018

April 9, 2018

April 3, 2018

March 29, 2018

March 29, 2018

March 27, 2018

March 27, 2018

March 19, 2018

March 19, 2018

March 19, 2018

March 15, 2018

March 11, 2018

February 28, 2018

February 28, 2018

February 11, 2018

February 1, 2018

January 22, 2018

January 15, 2018

January 8, 2018

January 5, 2018

November 10, 2017

November 10, 2017

October 31, 2017

October 7, 2017

September 25, 2017

September 11, 2017

September 4, 2017

August 29, 2017

August 28, 2017

August 25, 2017

August 15, 2017

July 10, 2017

July 7, 2017

July 4, 2017

June 30, 2017

March 28, 2017

March 6, 2017

February 7, 2017

November 22, 2016

September 28, 2016

June 27, 2016

March 7, 2016

December 16, 2015

June 16, 2015

May 5, 2015

April 14, 2015

April 7, 2015

November 13, 2014