The Great Thing About Wireframing

Having been in the business of designing for both print and web for nearly two decades, I’ve seen many different ways to design for both mediums and historically they’ve been pretty different in social circles.  What do I mean?  Typically and well pretty much forever, a print-based design has started on a notepad, sketchbook or even a paper napkin at a client coffee meeting.  The rough doodles of pencil and felt-tip pen on paper ever expanding out to increasingly accurate representations of element placements like logos and photographs, typefaces and rough-in of messages.  Once these refined doodles were pretty much “there” then and only then did they move on to become finished art.

The process is called wire framing.

Wire framing as a concept to most outside of the design industry is probably a bit of a foggy concept.  To those who aren’t familiar, it really is like it sounds – simplistic shapes and designs to convey placements of major elements.  Colour and copy are not a concern at the wire frame stage, although the designer may have ideas about them – they are left to mood boards and design atmosphere documents. These simply are there to say here is 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.

By sharp contrast, the historical process of designing for the web has been radically different.  Certainly designers may have started with some simple form of a wire frame layout but show a client – how taboo!  Expected if you were a real web designer was to plop down with the extra-large coffee and hit Photoshop hard to forge that pixel-perfect representation of what the website would (not might)  look like at 800 x 600 pixels or whatever the accepted screen flavour that year was.  The amount of time for initial comps and multiple revisions was astronomical and far out to right-field by comparison to the far more sane and proven approach typical to print design.

Then the mobile web showed up and started to grow – like a weed.

Seemingly almost overnight it flipped.  No longer were pixel-perfect, fixed-width designs the way to start a project and the taboo was quickly shed and showing doodles and sketches of what might be (not would be) became the norm of a competent (and far more sane) designer.  The realization that multiple day layouts and weeks of design before a single line of code was written was pointless to an evolving web where new devices and screen resolutions were appearing faster than the coffee maker could brew that next pot. Yes, responsive design had taken hold as the new standard and with it the notion of wire framing and prototyping.

Only these approaches could support a web were there were no fixed widths any longer and that form and functional use of a website between hand-held device and desktop computer were radically different.