Atlas Cables ‘wire-framing.’

The ‘traditional’ method of mocking up web page layouts is creating ‘comps,’ typically in Adobe Photoshop. Did that myself for more years than I care to remember. But those were simpler times, when a web page bore more resemblance to a printed page, in that you knew what size the page was. Some web designers apparently still do this. I don’t think it works anymore.

Sites now need to be optimised to look good on multiple devices and screen sizes, and conveying that in Photoshop is virtually impossible. Even if it were possible, it would be prohibitively expensive and it still wouldn’t really give you much more of an idea than a photograph of a meal. In both cases, you’ll still feel hungry.

Wireframes allow me to create and assess different layout combinations very quickly. At this stage there is an agreed structure for the site, but I’ve no interest in colour or imagery. This is about exploration, and it allows me to assess layout, see what happens when there are odd/even number of objects and quickly try different methods of presenting information.

Typically I will have dozens of these in total, each set representing a key page or content type. The left 2 images above show variations on an aggregate ‘Reviews’ page, the right 2 are ‘Dealer/Distributor’ options.

As with identity options, I’ll make an edited selection to show the client, normally I’ll show two or three options, but it varies by project. In this instance the client saw perhaps 30 individual wireframes, which allowed me to gather feedback and produce revised options as necessary.

The image above shows the preferred layout for presenting ‘UK Dealer’ and ‘International Distributor’ information. The decision was made to split into 2 separate pages, partly because it seemed likely a user would be viewing one or the other.

Once the wireframes are finalised, the site code and programming can get underway.

You only need a handful of pages?

On smaller scale projects, these days I normally prefer to scribble in a notebook first, which you won’t normally see, then ‘design in the browser.’ Turns out this is a much better way to show you what the ‘real’ website will look like and how it’ll work, because er, it is the real website.