A website is no different. It takes careful planning and precise information architecture before you can hammer 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 today.

A successful website deployment depends on creating a detailed specifications document, just as the house you live in began on paper as architectural blueprints.

Fail to plan, plan to fail.

Whatever we do in life, it is important to be clear about what we want to achieve. Otherwise, we never know when we’ve reached the end of the road. 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.

This can include formulating thoughtful questions that provide relevant insight, creating an in-depth study of the current website and the sites of any potential competitors, and a good old-fashioned brainstorming session with members of the design and development team is always helpful.

The snowflake effect.

A spec doc can be long or short. It can be filled with dazzling bar graphs and glossy 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. A large ecommerce or news site might look like the manuscript version of “War and Peace.”  The point is no two will be alike. Every one is 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

Delivering the deliverables.

A well-crafted spec doc allows designers and developers to move forward with a project while avoiding any surprises for the client down the line. It should give precise estimates of the time it will take to complete the project This helps control the scope of work and to keep costs from increasing during development.

7 killer tips for a successful specifications document:

1. Time spent on the spec doc should be proportional to the budget. Find out how much time is allocated to the spec doc and how detailed it should be. For example, 15 to 30 hours might be enough for brief document (15 pages and 3 to 4 wireframes), but a more detailed work takes no less than 50 hours. 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 going into detailed specifications, spend some time thinking about the new website, drawing its structure, and drafting wireframes for the most important pages. Only start working on the specs when you have a clear picture of how the website should work.

3. Home is where the start is. For wireframes, start with the home page. It usually includes links to all important sections of the website, so if the wireframe of the home page is ready, it is easier to work on other sections.

4. Understanding is in the details. If you are working on the redesign of an existing site learn how all sections of the old website work. You’ll be happy you did later. If old sections are cut or left out, the corresponding or replacement sections on the new site should be noted. 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. Do not leave empty sections “to be decided later”. Make sure that the spec document covers all website sections.  If anything is not clear, come up with the questions for the client.

6. Make the possible, possible. It is important to make sure that all functionality described in the spec doc is actually feasible. Empty promises lead to hard feelings.

7. We often do not see things as they are, we see them as we are. Avoid possible misunderstandings. Clients might be believe they understood what you said, but often they don’t realize that what they heard is not what you meant.Most clients won’t have knowledge of HTML, JavaScript, etc., but you should still be able to make this document clear for him as well.

Wireframes are an essential stage in building a website.The wireframe is a large part of the blueprint for the site whether it is hand-drawn or in digital format. It should give a clear understanding of what elements are on each page, where they should be displayed and why–to achieve the most cohesive balance and overall structure. As we always say, building a custom website is like building a custom house–you wouldn’t want to pick out your dining room wallpaper before you even decide if there will be a dining room!

Creating framework for a site always saves time and money.Why spend all the time to design a layout, when the message of that layout hasn’t been defined?Spending a few days to create a wireframe and test it as a prototype guarantees that a redesigned site will not create more problems versus fixing the ones already present.It will also allow time for the purposes and goals of a new site to be worked out and  should create user expectations and helps to develop an awareness of and familiarity with the site. In other words:

Great wireframes = great UI design.

Instead of getting caught up on colors and pictures, which can cause emotional responses that aren’t useful for deciding the overall mood of the site, the wireframe allows for the navigational structure  and layout (which should be intuitive) to take focus.

Wireframes force site designers and client to use simple shapes and lines to work out the flow and interaction for the user–a crucial step to ensure the user can easily move throughout the site to be shown what you want them to see and let them get where they need to go. The second a user gets frustrated with the site, they leave.The most common reason being frustration–poor user interface design.

When creating wireframes, the designer should not feel the need to be abstract or different.Most common elements that have been used on sites for years, such as top and side navigation, bread crumb trailing, headers and footers are very useful tools.A user knows and understands how these elements work and they expect them in an easy to use site.The creativity to mix these common elements with some innovative ideas is the key to a great wireframe design and a successful site.

“Specifications Document.” “Information Architecture.” What they mean and why your website quote isn’t complete without them

So you’ve called a few website companies and they may have told you it’s necessary to complete a specifications document, information architecture, research or discovery phase, but what exactly is that, and why is it necessary before giving a quote for the work?

Would you start building a house before drafting a blue print?

Where would the windows go, how many bed rooms would you have, how high are the ceilings? Similar questions need to be answered before starting an e-commerce or Web 2.0 website. The website company should walk you through a number of questions, much like an architect would, in order to draw up a blueprint for your website. Everything from the number of pages, how your users log in, whether user comments need admin approval, the purchase process, etc. For the majority of websites, this process should take a professional company about 40-50 hours and produce a document of 20-30 pages. It’s a back and forth, collaborative process with about 8-10 hours of feedback required from the client, but no technical knowledge on their part.

What should you expect?

Depending on the size of your website project, you might get 15-20 pages, or over 300. Either way, it should include the following:

• Detailed sitemap of main pages and subpages
• List of all front-end and back-end features and how each works
• Exactly how many hours each feature is going to take to design and develop
• How the user makes a purchase and how the admin collects, if the site is e-commerce
• How comments, rating, or other interactive features work, for sites with Web 2.0 tools
• Wireframes for homepage and a few other main pages to determine layout and structure

What does this document mean for my site?

Now that the site has been appropriately planned out, you and the website company know exactly how many hours the website will take to complete. The company can now give you the most accurate quote for the work. The document is so detailed you could hand it to a web developer you’ve never met and they would be able to complete the project with almost no questions asked. With everything on paper, it’s also much easier to decide which features are essential to the launch of the site, and which features you may want to put on hold for a Phase II.

When can we actually start the website?

Now the fun part starts, picking colors, images and nailing down the look and feel of the website to lay on top of the wire frames already completed. For a professional website company the rest of the website is easy to complete because everything has been detailed out for all the members of the website team from the designers to the developers. It’s now a streamlined process to getting your website up and running. Most websites from this point take about 6-10 weeks to complete the site. While the website is finishing the development phase it’s now time to give the online marketing team a call to figure out the best steps to help users find your website. The website is built to convert users into leads, members and repeat traffic; now it’s time to start driving qualified users to the site through online marketing tactics like Search Engine Optimization (SEO).