Design: The Importance of Specification

“Measure twice, cut once”, this wise piece of advice is relevant to many facets of life but in particular website design. How often is a site revised, tweaked, manipulated and revised again before going live? In more cases than not this painstaking process can be avoided by placing greater emphasis on project specification.

The formula of most design houses run along these lines:

1.       Establish objectives.

2.       Design.

3.       Produce static templates and style sheets.

4.       Write the code.

5.       Test presentation and behavior.

6.       Deployment.

In the hands of an experienced designer on your run of the mill brochure style website this formula will work eight times out of ten. However on larger projects the lines can blur between attractiveness and the desired functionality whilst meeting the given objectives of the website.

There are any number of circumstances where the delivery of a formal specification will aid the design team but a few of the obvious ones include; websites with a broad target audience, for example international brands and entertainment products. Projects where any flaw or fault adversely affects the viability of the site, these include exclusively online business projects or event promotion websites.

Any project on a tight deadline has a much better chance of being launched on time if a little extra time is spent in the planning phase. Complex applications such as financial transaction applications, supply chain or customer management applications are sure to go through fewer production iterations when extensive planning is undertaken. Finally sites that intend to publish vast numbers of documents or expect unwieldy traffic flows will be more reliable if thought through properly.

Apart from a detailed formal specification, what other measures may be taken to avoid massive blowouts in time and budget?

Firstly, scenario role playing can identify in the early stages any glitches or navigation blunders that may otherwise be overlooked. The best way to identify these shortcomings is to play out the experiences of not only the target viewer but also of two different likely viewers. Finally the experience of the unwanted viewer that stumbles across the site, but is capable of influencing others’ opinions of the client if they do visit. If budget and time permit an analysis of the above four viewers in real life would be even more useful as the end goal is to optimize the end user experience.

Secondly, wireframes can protect project participants from unpleasant surprises. As they identify and locate the significant elements of a site such as, page headings, navigation, primary content, sidebars and application interfaces. They also provide the relevant information pertaining to the relationships between elements of site content and the ways in which those relationships will be described in the sites style sheet.

Thirdly, the use of style guides to define the look and feel of a website ensures design consistency. Along with screen colours, typography, illustration and photography, style guides should outline graphic dimensions, screen resolutions, grid sizes and shapes and appropriate use of whitespace. Effective style guides provide context specific guidance to designers and stylists that are sure to save more time than they take to create.

Under no circumstance is the use of wireframes in combination with style sheets a replacement for composites, as the first two explain why and how things are to be done but composites do the best job of explaining what the site is. Composites are colourful, non technical and easy to understand and more importantly represent the deliverable item of the design team.

The new design formula looks more like this:

1.       Establish objectives.

2.       Conduct scenario analysis.

3.       Produce wireframes and define site architecture.

4.       Produce sketches and composites.

5.       Draft the style guide.

6.       Produce templates and style sheets.

7.       Write the code.

8.       Test presentation and behavior.

9.       Reconcile test results.

10.     Deployment.

While the additional four steps may consume a little more time there are four main benefits to come from the extra effort. A well defined scope ensures the appropriate resources are assigned to the project. Scenario analysis promotes the early identification of user experience issues allowing them to be corrected before production starts. Context and purpose are well established therefore the production team performs more efficiently as the result of fewer internal disagreements. And finally accountability is introduced for team members’ decisions as style guides define clearly the predicted outcome of the project.

While the investment may be un-justifiable on smaller projects, the more complex ones are more likely to launch on time and within budget as the added preparation time removes many of the obstacles and surprises that inevitably occur without the correct specification.

Wiliam posses vast experience in the undertaking of large and complex web development projects and with due diligence maintain an amazing track record in delivering projects on time and on budget.