Documentation, of course, is critical to defining and confirming your client’s needs, and it’s critical for providing direction to your design and development teams. As part of your documentation, wireframes provide visual conceptualization that cannot be captured in a text-only document.
At Urban Insight, when we kick off a new web development project the first document we produce is the formal Project Requirements Document. This starts as a working document and, in its final form provides the client-approved outline of project purpose, feature requirements, technical requirements and creative brief.
On the heels of the Project Requirements Document we begin development of the wireframes. Wireframes also begin as a working document, have two phases and serve two critical purposes.
- To initially communicate basic content layout requirements to designers as input to the creative process
- To subsequently provide specific detailed functional requirements to developers
Between these two phases of development, the wireframes will grow and evolve.
Input to the design process
As a major source of input to creative development, wireframes walk a fine line. They must illustrate content priority and content layout as it will best support the website’s business objectives, but beyond that they must not provide a specific sense of design.
It's important your designer feels that within the creative process he or she has the freedom to rearrange content items while maintaining their relative importance within the presentation. It's important that your client remains open to the various creative options that your designer presents.
At the end of the first round of wireframe development, your client
should be happy that the site will effectively communicate what it needs
to communicate, and that it will lead the each website audience into
and through the site as required.As a wireframe developer, if you have creative sensibilities, this may be a difficult impulse to control. The first round of wireframes, however, should be a technical illustration. Save your thoughts on design for your review you’ll have with your creative team on content layout and creative requirements.
Home page wireframe as input to design process
Home page mockup from wireframe input and creative briefInput to the development process
Creative development, of course, is its own phase. Once design is signed-off, the wireframe document will subsequently expand to illustrate the requirements for content pages and any further design requirements for those pages, and they will become the document for detailed page-by-page functional specifications and direction to the developers.
In the end, the newly launched website may not look a lot like the very first round of wireframes, but what’s important is that they trace the site’s evolution from content requirements to functional requirements and help to produce a website that is user-friendly, compelling and effective for the client.
Content page wireframe with functional specifications
Content page final implementation
Kurt Rademaekers on the importance if wireframes.
