An experienced architect will tell you: only a foolish person would build a house without first putting some specs down on paper. The process of building a website is no different. It takes careful planning and precise information architecture before you can hammer down that first nail, or in this case… punch up that first string of code. And because search engine marketing success is so critically dependent on having a website with a solid underlying foundation, future efforts to optimize are riding high on your ability to deliver a cohesive plan from the start. A successful website deployment depends on creating a detailed specifications document, just as the house you live in began on paper as architectural blueprints. These "spec docs" help to design a clear understanding of what the finished product should look like, and the individual steps that need to be taken in order to achieve that goal.

Fail to Plan, Plan to Fail

Whatever we do in life, it is important to be clear about what exactly we want to achieve. Otherwise, we will never know when we've reached a specific goal. Same goes for your website. Before you begin scripting a spec doc, learn as much as possible about the visions and goals for the website and the business behind it. This can include formulating thoughtful questions that provide relevant insight, creating an in-depth study of the current website, as well as those of any potential competitors, and a good old-fashioned brainstorming session with members of the design and development team is always helpful.

web design spec doc snowflake effect

The Snowflake Effect

Just like a snowflake, no two specification documents are alike. They can be long or short, filled with dazzling graphs and photos, or stuffed with plain old text. An ecommerce site planning to sell only two or three different products will probably only require 15 to 20 pages worth of your ideas. While a large ecommerce website design or news site might look like the manuscript version of "War and Peace." The point is each one will be different. However, stick to this basic structure and you should be fine:

  • Purpose of the document
  • Description of the project
  • Front-end functionality
    • Common features
    • Sitemap and website structure
    • Description of every website page
    • Wireframes (home page and at least 2 other important pages)
    • Miscellaneous functionality
  • Back-end functionality
  • Use cases
  • Conclusion

7 Killer Tips For A Successful Specification Document:

1. Time is of the essence.. Evaluate the amount of time that is being put into the overall project, and then determine what portion of that should be focused on the spec sheet. For a brief document, 15 to 30 hours might be enough (15 pages and 3 to 4 wireframes), but a more detailed sheet takes no less than 50 hours. The time spent on the document should be proportional to the budget. There needs to be a conversation about how much time you can realistically devote to the specifications so that the rest of project can proceed in a smooth and prompt manner. If the project has only 400 hours allocated, it doesn't make sense to spend 100 hours writing the specs.

2. Don't dive in head first. Before getting too excited and diving directly into the detailed specifications, spend some time visualizing the new website as a finished product. Consider how you want the most important pages to look, then start drawing out their structures and drafting wireframes. You don't want to make everything up as you go along, so taking the time to create a skeleton of how you imagine your site looking can make the rest of the process much more organized. Only start working on the specs when you have a clear picture and long term goal for the whole project.

3. Home is where the start is. The homepage will be the first thing most of your audience sees upon visiting your site. So when working on wireframes, this is the logical place to start. It should include links to all important sections of the website. Once the wireframe of the home page is completed, the process of working on the other sections becomes much easier.

website design specifications document

4. Understanding is in the details. Let's say you are outlining a redesign for an existing website. Make sure you take the time to learn how all sections of the old website work first. In the long run, you'll be very happy you did. If old sections are cut or left out, the corresponding or replacement sections on the new site should be addressed accordingly. This is also important when redirecting old URLs that may be linked to from outside sources.

5. Not making a decision is a decision - a bad one. Why make a plan, if the plan is incomplete? Do not leave any empty sections that you intend to wait and make a decision on later. Make sure that the spec document covers all sections of the website. If there is anything that is unclear, come up with a list of questions for the client that is filled with topics you would like to address. The goal you set should be laid out as clearly as possible because it will make your job, and the client's involvement, a much smoother process.

6. Make the possible, possible. Empty promises lead to hard feelings. You won't feel good about them, and neither will the client. During the planning process, make sure the site functionality options described on the spec document are actually feasible. Having to go back to the client with any issues later on can leave them incredibly disappointed.

7. Keep it simple. Most clients are not going to have in-depth knowledge of HTML, JavaScript, etc., so you should make an effort to ensure this document is as clearly laid out for them as possible. A client might believe they understood what you said, but often what they heard and you meant, were two completely different things. It may feel tedious, but it can help to avoid any possible misunderstandings down the road.

Delivering the Deliverables

A well-crafted specification document allows designers and developers to move forward with a project while avoiding any surprises for the client down the line. It should give a precise estimation for a timeline of the project, and a completion deadline. You can hold you and your team accountable, while keeping the client at bay with an indication of what tasks you're working on and when. This helps to control the scope of the work, and keep costs from increasing throughout development. It is important to keep these details in mind while building a strong foundation for your overall project. In the end, it will lead to smooth communication between you and your client, and a clear picture for the project ahead.

This block is broken or missing. You may be missing content or you might need to enable the original module.