Wireframes aren’t useless, but our approach to wireframing is outdated.
There are some debates in our society that will rage on forever.
Is Lebron better than Jordan? Pepsi or Coke? Edge piece or center cut brownies?
In the design community, an ongoing debate I’ve been following recently is around wireframes, specifically the best approach to wireframing.
A common wireframing experience I’ve heard about (and experienced) centers around designers or clients losing working time getting lost in the micro-aesthetic details of a wireframe rather than the content or functionality of the digital product they’re designing.
“…conflict arose after clients had seen the wireframes. The layout, even explicitly caveated, would set their expectations, and they did not appreciate screen designs that strayed too far from them, no matter how carefully crafted.”
Does this sound familiar?
How about this, “Designers who stuck close to the wireframes did not exercise their creativity, and all our sites started to look the same.”
These two anecdotes about wireframes come from a 2002 article by Information Architect, Dan Brown, “Where the Wireframes Are: Special Deliverable #3.”
In 2002, Nickleback was at the top of the Billboard charts and people were playing Sims on their Windows ’98.
Also in 2002, Brown published his concept, page description diagrams (PDD’s), as a response to the aforementioned main risks associated with wireframing that he kept experiencing.
Brown’s novel wireframing approach used prose to describe content areas of a web page, and plotted the description blocks along a horizontal axis (from left to right) ranking high to low priority in regards to importance of content or actions to the user.
Although he had early success with this new approach, Brown didn’t believe that PDD’s should or would replace all wireframes, but could work in unison with more high-fidelity wireframes.
Fast-forward to 2018, more than 15 years later, and the debate around the purpose and risks associated with wireframing is still going on with the same risks Brown wrote about in 2002 and a few new ones indicative of the change in design tools, interfaces, and technology.
Similar to Brown, many thought leaders in the design community published their different approaches to traditional wireframing and reemphasized the value of the discussion, thinking, and collaboration around a wireframe rather than the artifact itself.
A wireframe approach for every wireframing problem
Below are some different approaches that aim to combat the pitfalls associated with high-fidelity static wireframes. The approaches are organized by their overall goal, whether that be to focus on content, ideation, functionality, or prototyping.
Do you spend too much time on aesthetic details and forget about the content of the page, especially how a layout looks on ‘small screens’?
Try an approach that puts an emphasis on Content and Functionality:
Content (Wireframe) Spreadsheets —Josh Clark
Big Medium Founder, Josh Clark writes about problems with all static design artifacts, but provides insight and advice on how to move away from creating ‘throw away design documents’ and move towards production. One of his recommendations is to use a spreadsheet to detail the content that a certain page should display, with brief notes on functionality rather than a visual wireframe. This document is built on research, facilitates communication, and focuses on the ‘job to be done’ for a given page.
Priority Guides —Heleen van Nues and Lennart Overkamp
The origin of priority guides can be traced to Drew Clemens, but has been remixed to fit other design teams wireframing needs. Priority guides are constrained to the width of a mobile screen and include content blocks sorted based on page priority, the most important and relevant content to users are at the top of the page and the less important content at the bottom. Priority guides are content first, but also include detailed annotations about the functionality of a certain content block and overall page behavior. By removing aesthetic and layout details and including real content, priority guides help teams focus on how the content and functionality of the site meet overall business goals and fulfill user needs.