Planning For Web Design (Definition Document Samples)
Developing a website is like building a house. When building a house, you ask an architect to draw up the plans. The architect obtains building permits, city licenses, and more — all before any actual construction begins. Similarly, Website Definition Documents act as your website’s architectural blueprint. By using these documents, you and your design agency can build a strong foundation.
What are Website Definition Documents?
In the web business, the initial planning phase can be referred to as “Definition”, “Scope,” or “Discovery.” During this preliminary planning phase, your website agency will create documents that define website architecture, and identify key technical and creative requirements.
These documents will help answer questions like:
- What is the overall online strategy?
- How will the business brand be applied to the website?
- What programming framework will be used?
- What are the website features?
- How will marketing be integrated?
- What is the best user experience to promote sales or growth?
The complexity of your website determines the type of documents you need to be created, as well as the length of the planning phase. Every web services agency should have its own version of these documents within their methodology. Feel free to use our samples as a reference and contact us if you have any questions. We provide these planning services with all our web projects, and also offer them separately if you already have a design and development partner.
How To Use Definition Documents For Successful Web Design:
The definition documents set expectations on both the client and agency-side as to the final website deliverables. The client should sign off on the definition documents in order to begin the next phases of the website project. If the client has contracted with the web agency to conduct a definition phase before committing to full project development, then (at the end of this phase) the client owns all of this documentation. This can serve as a project road map for any web services agency.
Definition Documents List (With Samples):
A sitemap shows the bird’s eye view of the website structure. The standard template lays this out as a series of boxes linked by directional arrows that illustrate relationship and hierarchy. A sitemap can provide a web developer with a quick overview of the entire website.
Click image for sitemap sample
This is a creative/marketing document guides the visual design of the website and dictates the correct way to represent the brand. This can include a style guide that provides logo usage, color palettes, font styles, graphics, etc. If you don’t have one, we can help you to create one. We also provide complete logo/branding design services.
Click image for Style Guide sample
These are simple, blocky representations of website pages that are devoid of graphics and color. A wireframe indicates key content and functions required on a page. Designers and developers will reference the approved wireframes. Wireframes are usually created by an IA (Interface Architect) in a program like Axure or OmniGraffle. Key wireframes should be created for both mobile and desktop devices to indicate how the structure and function are meant to adapt to different screen resolutions.
Watch our wireframe video.
Click image for Wireframe sample
This document is generally prepared by a usability expert who has knowledge of best practices within website design and has researched the client’s industry. The document spells out the best method to engage visitors to achieve the website’s business goals.
For example, if the client is in the accounting industry, the usage of the color red may not be effective for buttons and calls-to-action.
This document is prepared by the Technical Project Manager. It covers the hardware requirements such as the hosting environment, type of server, application framework, database structure. These documents can get very extensive (with diagrams and system architecture schematics) since this is usually where the bulk of a website effort resides.
Click image for Technical Brief sample
Features and Functionality
This is a list of the proposed website features and the functions. Features are a website’s capabilities- like the ability to have a member profile or video streaming. Functions are how those features are implemented; it generally deals with the code that makes the features work. Many times this matrix will be separated by website area/section. Each feature and function will be accompanied by a short description and a LOW, or Level Of Effort. Later, this document can be tied into the project budget to show what the cost of various features may be, so the client can determine how best to proceed based on the intended budget.
Watch our features and functionality video.
Click image for Features and Functionality sample
The website project’s Art Director or Creative Director will prepare the creative brief after meeting with the client (and/or the client’s marketing staff). The businesses branding and how it will be represented within the website is a key component. This includes the types of graphics, color palette, and photography that will need to support the brand. A creative brief should also address the target audience(s) and what will appeal to them.
Watch our creative brief video.
Click image for Creative Brief sample
The marketing strategy is based on the client’s specific business goals. Agencies, like Executionists, follow a set of best practices to observe for any website. Beyond that, there is no “one-size-fits-all” solution. The marketing strategy should be customized to the specific client, audience, and business goal(s).
Click image for Marketing Strategy sample
Website Project Estimate
Most clients will get a rough estimate, or an estimated range, before the definition phase. The initial round of investigation following the definition phase will produce a realistic estimate. For example, initially, the client mentions adding a website “search” feature. The feature was initially assumed to be a basic, out-of-the-box feature. But, during the planning phase, the team discovers that the client wants additional functions that will customize the search results in specific ways. The “search” feature may now jump from 3 hours of effort to 100 hours of effort, thereby changing the project estimate. Once the definition phase is complete, a much more accurate estimate can be generated.
Click image for Project Estimate sample
The timeline shows the various project phases broken up into sections that include milestones for deliverables and client approvals. Timelines merge with Resource Allocations, which is a list of the required staff for each phase. The unfortunate truth is most web projects don’t launch on time.
Watch our short video on website timelines.
Click image for Project Timeline sample
We create definition documents after discussing the project with the client and/or the client provides us with a business plan, or a website requirements document (RFP). If you need help getting your requirements started, please see our online Client Questionnaire.
If you would like to see additional examples of definition documents, or you want to get started on your planning phase, contact us here.
There are another ten or more documents we could have listed that may apply to certain projects and specific tasks! Each web agency’s versions of these definition documents will vary based on their website definition & development process.
So, whether you’re building a house or a website, remember to define your requirements and document your plans before you begin.