If you fail to plan then you plan to fail! Website planning is the most critical part of website development and it should occur before a website is created. Despite this, many website developers are so eager to execute their website design that their end result is not properly aligned with their website goals and site strategy. This is why you need to create a website specification document before you begin anything else.
What is a Website Specification Document?
A specification document is essentially a detailed outline of every page on your website. Its purpose is to make the vision of your future website clear, both to you and the people who will be involved in creating it, so everyone is clear on the outcomes from the start. Ideally, this outline should result from a collaborative effort with your web developer, designer and copywriter.
Your website specifications document should be broken down into three main components:
- Site Architecture: Navigational structure, front-end functionality and back-end functionality features
- Site Design: The look, feel and layout of the website
- Page Copy: The type of content to be included on each page
Area 1: Site Architecture
The main things to take into consideration when building your website architecture are:
- Navigation: Will you include breadcrumb navigation, dynamic navigation, direct navigation, site structure navigation, function navigation, reference navigation, or step navigation? Also consider whether you will have multiple navigation systems such as global navigation, local navigation, contextual navigation, supplementary navigation and courtesy navigation. In addition, navigation is a must when comes to SEO purposes.
- Page elements: Commenting, star rating, sidebars, search bars, text fields, footers, check boxes, call-to-action buttons, widgets and radio buttons.
- Information design: The presentation, placement, amount and prioritisation of information.
- Functionality: Map out all your website pages and subpages and where inter-page linking should occur to help you and your developer visualise and assess mechanics of your website. Try to simplify your website functionality – the easier your check-out process is and the faster you can get your point across, the better.
- Content purpose: Although this may not directly relate to the architecture of the page, if you leave the positioning and purpose of your web copy as an afterthought it will likely drag down the finished product. So while you are considering your site architecture, determine the goals for each page and how its content will fit into achieving them. This will prompt you to go through your functionality specifications and ensure that you have thought of all the pages necessary for your website and to determine the amount of content needed for each page.
Area 2: Site Design
The design of the website will be created according to the concept of the website. First, your development team will determine the following in order to create a website wireframe:
- Page layout: How much real estate each page element should have, and what should be appearing above and below the fold.
- Conversion Rate Optimised elements: The Conversion Rate Optimised placement of all the elements you specified when planning your site architecture.
Wireframes help you evaluate and establish your website’s functionality and navigation paths. They do not typically include typographic style, colour schemes, and images that will be used. If you end up with multiple wireframes, don’t be afraid to A/B test these designs to see which layout works best.
Area 3: Page Content
In the final step of crafting your website specification document, you start thinking about:
- Content to be included on each page
- Font body and header styles and sizes
- Website colour scheme
Having already determined your content marketing goals in the site architecture planning stage, you already have a strong foundation on which to build here.
Taking the First Steps
If you’re having difficulties getting started, take a look at other websites on which you would like to model your own. Make sure you list down any elements or functionality aspects of these sites that you feel need to be improved or revised, and keep these things in mind when creating your website specification document. This will help you fill in the holes which your competitors haven’t and avoid the need for rework or rebuilding your site!