Wire Framing Power

Designing for Screens

Having been a designer for both print and web for just over twenty years, I’ve seen and executed myself many different ways to design for both mediums. Historically, while both start similar, there has been very different accepted standards by clients between web and print.

What do I mean?

Typically, (and well pretty much forever), a print-based design has started on a notepad, in a sketchbook or even scrawled on a paper napkin at a client lunch. The rough doodles of pencil and felt-tip pen on paper was etched out to increasingly accurate representations of logos, copy and photograph placement. Only once these refined doodles were pretty much “there” from a layout concept did it move to a more polished and final look. The client was involved at all stages generally too and pencil comps were often presented to the client in brain-storming sessions.

The process is called wire framing.

Wire framing is generally a foreign concept to those outside the design industry. Sure, we can refer to it as some “doodles” or even brain-dumps in initial meetings.

Doodling just works

However, it is an integral part of the design process and it does start as simplistically as it sounds – shapes and doodles convey placements of major elements.  Colour and actual copy are not a concern at the wire frame stage, although the designer may have ideas about them – these come later or may be separated out to a mood board.

Wire frames merely suggest where the logo will be, the feature image, the offer, a call to action and so forth.  Happy with that generalized layout then great, want to move an element? Easy. A very important visualization step before engaging the full mock-up or going to print, especially in yesteryear when creating a mock-up was a time intensive paste-up process.

Web designing sort of started backwards

By sharp contrast, the process of designing for the web has been radically different.  Upside down really. While designers may have started with some simple form of a wire frame layout for themselves, these were seldom shown to a client and the overall early engagement visually of the client has historically been absent, at least compared to print.

It has been more expected, if you were a “real” web designer worth your salt, you plopped your ass down with the extra-large coffee and hit Photoshop hard and forged a pixel-perfect representation of what the website would (not could) look like. The amount of time for initial comps often quickly become astronomical and multiple revisions had budget-blowing power. Far less sane than the time-tested approach typical with print design.

Mobile web changed everything – for the better

Then smart phones happened. Almost overnight, you could no longer make that pixel perfect comp for a 1024 x 768 pixel static display. Resolutions were quickly all over the place and responsive design was in high demand.

And the design process for web flipped.  Gone were the expectation and delivery of pixel-perfect, fixed-width designs in favour of sketches and prototypes showing approximations of element placement and a transition to what might be versus what must be. Wire framing became the norm of a competent (and far more sane) web designer. 

The realization that spending hours creating and refining website comps was pointless to a rapidly evolving web where new devices and screen resolutions were appearing faster than the coffee maker could brew that next pot. Responsive design had arrived and tossed the process and industry on its head. The standard since has been wire framing on paper followed by code-based prototyping.

Wire framing and prototyping are the only sane approaches that support a web space devoid of fixed width one-size-fits-all comping. Here’s to time saved and slightly reduced coffee intake!