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?

The complexity of your website determines the type of documents/requirements you need, 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):

Sitemap

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.
Sitemap Example I   Watch our Sitemap video.

Sitemap sample example

Brand Guidelines

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.     Brand/Style Guide Example
Brand_Guidelines example of a Style Guide image

Style Tile

Often, a client may not need a full Style or Brand Guide and an abbreviated web-only “Style Tile” would suffice. This is a shorter, simpler style guide that outlines the official style components for the web project, typically including fonts, image sizes, colors, iconography, and other CSS items. This can be handed off to the development team to assist them with styling the front end design.  Style Tile Example
Style_Tile example sample

Wireframes

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.   I   Wireframe Example

Wireframe_example sample

UX Recommendations

This User Experience 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. UX recommendations can include documenting the user personas and user journeys throughout the online experience. Understanding the user experience is a critical key to online success.

Technical Brief

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.  Technical Brief Example
Technical_Brief example 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.   I    Features and Functionality Example
Features_and_Functionality example

Creative Brief

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.   I    Creative Brief Example
Creative-Brief example sample

Marketing Strategy

The marketing strategy is based on the client’s specific business goals. Agencies, like Executionists, follow a set of best-practices to observed 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).   Marketing Brief Example
Marketing-Brief example 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.   Project Estimate & Proposal Example
Proposal-opt1 Executive Summary
Terms & Conditions example sample

Change Order

Change Orders are created when the client needs or requests features that were not included in the original project scope. The Change Order captures these new requests’ requirements, functionality, and scope in an additional estimate.   Change Order Example
Change-Order sample example

Project Timeline

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.   I    Simple Project Timeline    I    Waterfall Project Timeline
Project-Timeline-Projection simple timeline Website Development documents
Project_Timeline_Waterfall Website Development documents

Next Steps:

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.

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.

If you would like to see additional examples of definition documents, or you want to get started on your planning phase, contact us here.

 

 

Richard Parr
by Richard Parr
Posted: June 15, 2018