Why the wireframing process helps shape a better website solution for our clients

Building commercially successful websites for many years now, TJS has a proven track record in delivering websites and applications that successfully guide site users through to the clients’ online objectives, be that completing an enquiry or buying process. This doesn’t happen by accident, this happens through meticulous front-loaded project planning. Taking time to think through the Strategy, Planning & Wireframing stage helps TJS and the client to understand how best to achieve these online commercial goals. Preparing a detailed specification document highlighting all the proposed pages, navigation and functionality is a perfect way of nailing down exactly how the website will work. This on its own, however, can be open to interpretation. The key addition of wireframing provides TJS with the opportunity to map out our vision for the best way to get website visitors through to the clients’ goal.  Wireframes visually show how key information, and actions, are prioritised on each page. When this is then pulled through into a digital walkthrough, TJS and our client have a solid representation of how the new site or application will work (in tandem with the specification document). 

“You wouldn’t dream of having a house built for you without agreeing the plans first..”

Following this analogy, imagine how difficult, costly and time-consuming it is to move the walls of a house around after they’ve been erected as the customer’s mental interpretation didn’t align with that of the builders? The same applies to web design. Poor forward planning results in longer delays, higher cost, customer dissatisfaction and a weaker end product.  Spending the time moving elements on a wireframe is faster, cheaper and more importantly, gets all the thinking and experimenting done before a single line of code is written.

So what are wireframes?

Our wireframes are produced using a limited colour palette (blue is good!) – it does not contain logos, typography, or any specific design elements that would detract or distract the client’s understanding of why certain ‘building blocks’ of functionality are on the page. Wireframes get down to brass-tacks - what key blocks of information or functionality does the visitor need to see in order to make a decision? Put together into an online walkthrough, wireframes therefore become a powerful tool to help better understand the hierarchy of data and content, the importance of well placed calls to action and clear navigational cues - all within the remit of page speed and SEO considerations.

The result

Walking the client through a series of wireframes (in conjunction with the specification document) serves to showcase that we’ve applied best practice, understood the clients’ business and their customers’ needs, but also provokes discussion and can often breed new or innovative ideas. If revisions are required, not a problem. They’re swiftly updated and further discussions are had until the client is happy.  This ultimately triggers an acknowledgement that the client understands how the website is going to function from a technical perspective (written specification) and also from a more visual representation (the wireframes). It’s this neat combination that provides clients with a clear vision, excitement and something tangible they can become fully invested in.  George Wallis, Commercial Director at Boston Seeds, a long-standing client of TJS, has said, 'We always thought wireframing seemed unnecessary, but we have seen how really useful it is. The wireframe hones the design and you can see exactly what was agreed.' From this moment on, we’ve paved a solid foundation from which to begin the design process. The design process could (and should) justify its own blog article, but for the purposes of this narrative we’ll save that step for another day.

What is a wireframe not?

Whilst wireframes are a great indication of how the building blocks need to appear, in which hierarchical order on the page, they most certainly are not a tool to use to colour in to create a design!  Wireframes should always be used to invoke the designers’ knowledge of best practice for user experience, browser limitations, mobile / tablet / desktop considerations etc which when married to the clients branding, content and imagery create an engaging, high performing website or application.

So, if you have a project in mind, and would like to work with a team that will give you the reassurance and peace of mind that your project deserves, then please call us today on 01507 525 500 to get started.