Wireframes Taking the Fall for Process Pitfalls: Part 2

Originally written in 2013

Last week I wrote a post about the possible pitfalls in process and how wireframes often get thrown to the wayside. Poorly communicating the use of wireframes early on can lead to their misuse and pave the way for complete miscommunication of the process! This miscommunication grows bigger as the process continues into design.

Possible Design Pitfalls:

In the world where wireframes are used as a communication tool, they eventually are passed off to the designer. The visual designer has a sense of the features and the overall strategy, but because the wireframes weren’t thoroughly completed, no real interaction details were established. Additionally, the designer now has to get roughs and comps (the visuals of the site) in front of the client but has no strategy to refer to.

This is a lot of heaving lifting for the visual designer: make the comp aesthetically pleasing, fill in the giant gaps, and anticipate how the client wants the comps to look without a fully developed set of wireframes. To combat this, designers often look to wireframes as rough drafts or suggestions on the visuals of the site rather than a strategic roadmap.

When wireframes aren’t fully developed, designers lose hold of the golden rule- “form follows function”. Aesthetics should never trump the functionality of a website and oftentimes, the desired aesthetic overpowers the strategic design lost in the failure to create complete wireframes.

The Happy Way:

The number one problem: wireframes are design. A simple Google search of “define: design” returns, “A plan or drawing produced to show the look and function or workings of a building, garment, or other object before it is built or made.” Sort of sounds like wireframes, doesn’t it?

Let’s look at another example. Before the interior of a house can be designed, the structure of the house needs to be determined by understanding the use and needs its occupants. Once done, blueprints are created with a sensitivity to both the occupants’ needs and their wants with wants focusing on the design.

Our process is to bring the visual designer into the project early. The UX designer and visual/interactive designer work together to make the best blueprint that layers on brand and style while taking strategy into consideration. When the client sees the wireframes, they make sense. They convey how the site will actually look and actually function. We avoid the pitfalls of designs changing the strategic function of the site and continue to keep the conversation consistent. Additionally, we include the client and welcome the critique of the wireframes early on, ensuring mutual understanding before development begins.