Create a Website Planning Spec Before You Build

Successful website design requires both skill and creativity. Another BIG piece that I think separates successful website developers from unsuccessful website developers is the ability to Plan. Website Planning is one of the most critical pieces of website development, yet it’s the piece that I see Website Developers skipping over most often.

Create a Website Planning Spec Before You Build

Many developers are so excited to get their projects going that once they have a little direction and all of the assets from their client, they simply give the website a little thought and jump right into development. Website Developers who neglect to take time for website planning will ultimately fail. They may succeed once, twice, maybe a few times, but eventually they will drop the ball and it will come back to lack of proper website planning prior to website development.

In this article I will talk about Website Planning, what it requires, how to do it, why it makes website development much easier, the benefits of website planning, and provide examples of documents that I always use during the website planning phase of any project.

Where Does Website Planning Fit Into the Website Development Process?

instantShift - Website Planning

Website Planning should start immediately for all Website Developers. For most, it does start at the beginning. Where the difference between most successful website developers and those who are just getting by is when the website planning phase end. For the majority of developers, website planning consists of the following:

  • Initial meeting(s)
  • Asset delivery
  • Website Concept Development

After receiving approval on their website concept, which is usually just design & layout of the different pages that will make up the site, most Website Developers jump into the build. What I’m hoping for, after reading this article, that more Developers will take one extra step up front during the website planning phase. Successful Website Developers follow these steps before starting to build:

  • Initial meeting(s)
  • Asset delivery
  • Website Concept Development
  • Creation & Approval of Website Planning Spec

Website Developers who take time to complete one extra step during the website planning phase of any project will have a better chance of being successful than one who does not. Creating what I call a Website Planning Spec provides benefits to both the Website Developer and the Client.

Define a Website Planning Spec

A Website Planning Spec is to a website as a Blueprint is to a house. What I refer to as a Website Planning Spec is a document created by the Website Developer. The Website Planning Spec takes the Website Concept to the next level. A Website Planning Spec is a detailed “manuscript” of every page on the website. Each page is broken down in three main areas:

  • Architecture – Layout and navigation of the website on a page-by-page basis
  • Design – Look and Feel of the website
  • Copy – Search Engine Optimized copy for every page of the website

A Website Planning Spec allows both the Website Developer and the Client to think through every page of the website before it’s built. It allows major changes to be made up front before requiring a rebuild. It also allows everyone to think a little about SEO and Website Navigation. What is the goal of your website? Where do you ultimately want your website traffic to land? Is it your Services page? Is it your e-Commerce area? Do you want them to sign-up for something? Thinking this through up front will allow the Website Developer to link certain pages together and to create a flow from all pages to one or a few main pages. This provides you with a great opportunity of achieving your goal. If you don’t take time to think through these things up front, one of two things happen:

  1. Most Likely – You end up with a website that doesn’t achieve your goals (ie. It doesn’t do what you originally wanted it to do)
  2. Very Common – The client realizes you’re going down the wrong path during first client review and the changes that come through require a lot of rebuild hours.

Either that or you get death by 1,000 change requests. You know what I’m talking about…

By taking time to create the Website Planning Spec you reduce the possibility of either of the outcomes occurring. Both you and your client are on the same page from the beginning. Now all you have to do is following your Spec to build the website.

Website Planning Spec – Architecture

instantShift - Website Planning Spec – Architecture

When drafting a Website Planning Spec one critical element to think about is website Architecture. The main components of Website Architecture are:

  • Website Main Navigation
  • Website Sidebars, Footers, Widgets, etc.
  • Inter-Page Linking

Most Website Developers hit the first element of Website Architecture when designing their Concept. Some even go as far as thinking through the second element(s) of Website Architecture. The element that almost always gets left out until the very end of the project is the flow of the site. If your client has certain goals of where they want traffic to end up, there are ways that you can ensure that happens. You can design pages in a certain way. You can include specific plugins or widgets in the sidebar or footer. You can link certain pages together through copy. All of this either gets missed completely, thus the website fails to achieve the owners’ goals OR it gets done at the end, which may require more hours than scoped for and/or rework.

Thinking through the Architecture of every page individually and collectively as a full site leads to greater efficiency in website development, gets the client to buy in up front, and allows you to be successful in achieving your clients goals.

Website Planning Spec – Design

The Design element of the Website Planning Spec is the one area that most Website Developers do a decent job with already. That said, usually the design is covered only in the Concept. Usually Developers think through website colors, font size, style, and color, logo placement, social media placement, etc. What’s lacking when Website Developers do not create a Website Planning Spec is that they don’t think through design on a page-by-page basis, nor how it impacts traffic flow as it relates to achieving their client’s goals. When Website Developers think through Design on a page-by-page basis the following critical areas of the website come into focus before anything has been built:

  • Page layout for all pages
  • Site Imagery
  • Design techniques that guide website traffic to click-through to the right pages

Great Design is plays a HUGE role in the success of websites. When Website Developers take time to think through site design on a page-by-page basis through their creation of a Website Planning Spec, both the Developer and the Client have a better idea of what the site will look like and how to best use Design to help achieve client goals.

Website Planning Spec – Copy

instantShift - Website Planning Spec – Copy

Copy is the third element of the Website Planning Spec, but it’s perhaps the most critical. Good copy can make or break a website. When creating the Website Planning Spec, Website Developers should either write the copy for every page of the website or receive the copy for every page of the website from the client. Laying out the copy up front will allow the Website Developer to think through:

  • Website traffic flow
  • Search Engine Optimization

We’ve talked about how both Architecture and Design can be made to help with flowing website traffic to certain parts of the website. Neither of these two elements of a website come close to making as much of an impact as good copy can make in regards to flowing traffic through a website. You can write copy in such a way that provides readers with information on one page and leads them to click on a link within the copy to get to the next piece of information under a given topic.

Another reason why good Copy is so important for a website is because it plays such a big role in search engine optimization. Before writing the copy for the website, Website Developers need to either create a list of Keywords for their client or have a list provided to them from the client. Having your list of keywords when you go to write the copy will allow you to infuse those keywords into your copy, which will ultimately help the website move up the ranks of search engine results.

Far too often Website Developers leave copy creation to the end, which is the wrong approach. Good copy is way too important on so many levels that it only makes sense to knock this out first. Not only that, but crafting good copy can take a decent amount of time. Leaving it to the end creates stress on whoever is developing the copy in order to get it finished so that the site can launch. This leads to poor copy development, which leads to poor SEO, which leads to clients not achieving their goals. Do yourself a favor, next time you get ready to build a website, knock the copy out during the Website Planning phase.

The Benefits of Website Planning

As you have probably already realized, there are a ton of benefits to creating a Website Planning Spec before building your next website. We’ve covered a lot of those benefits in the sections above. Taking time during the Website Planning phase to craft a Website Planning Spec actually benefits both the Website Developer and the client. Here are two lists of benefits, one listing all of the benefits to the Website Developer and the other listing the benefits for the Client.

Benefits of Creating a Website Planning Spec for Website Developers.

  • Allows you to think through the entire website
  • Flushes out 3 critical elements of successful websites – Architecture, Design, and Copy
  • Ensures everyone is on the same page as to what’s going to be built
  • Avoid too much rework
  • Ensures great design and copy
  • Gives the website a better chance of moving up the ranks of Search Engine Results
  • Reduces website build time

Benefits of Creating a Website Planning Spec for the Client.

  • Provides the client with a better understanding of what the website will look like, feel like, and read like
  • Gives the client an opportunity to weigh in on important elements of the website before they are built
  • Reduces the chance of a spiraling budget

Create a Website Planning Spec

Now that you know just how much a Website Planning Spec will improve your website builds, will you create a Website Planning Spec during the website planning phase of your next website development project? Leave your comments below. For those of you who do want to create a Website Planning Spec for your next website project, below are some images of some of the Specs I’ve created in the past for my website projects.

instantShift - Website Planning Spec - Terms and Conditions

instantShift - Website Planning Spec - Page

Image Credits

Like it? Share it.

13 Comments

  1. That’s really a good post , I will keep it and draft my new website according to it .

  2. I’m currently working on my start up, RaveOrBash.com, a complete and refreshing take on a consumer reviews that is about promoting the need for consumers to contribute their reviews and experiences of all their consumer experiences to help empower us consumers in our buying decisions for goods and services.

    I’m still working on recruiting developers for the project and this has been a great read and potentially a resource. Thanks RYan.

    • You got it Danny! Good luck with the new project. Glad you found the article valuable.

  3. Coming from the coder’s point of view, you should agree the tech spec of how it’s built and then also get the testing scripts signed off, based in that tech spec. Once you’ve coded the website so it completes the testing scripts without error you know you’ve finished the job and can bill the client. Also unless it’s major changes, try to put off ‘minor’ changes between the start and delivery of v1.0 of the site, and say that they’ll be in v2.0 instead. Minor changes are never as easy as they seem, and have a habit of snowballing into larger problems. Always deliver v1.0…

  4. As a freelancer I never planned thing like you explained here, also I’m always in a hurry to finish my clients job. Now, its time to get some inspiration and to change my attitude at my work. I personally thank Ryan for such an awesome article.

    • Very cool Bharat! I hope I don’t add too much time to your projects ;) I think you’ll end up saving time in the long run, have happier clients, and get more work!

  5. With constructive advice and relevant examples, this article seriously empowers us at Navigator Multimedia to make improvements to our planning spec process. Having a guide from the beginning benefits us by giving the whole team a go-to during the production phase. Another awesome benefit of an in-depth strategy for a project is the clarity it provides clients. It assures clients of timeliness, structure, and accountability.

    Thanks again,
    Sarah Bauer
    Navigator Multimedia

  6. That’s really a good post! Awesome!

  7. So useful, thanks a lot

  8. Well Ryan, I help small businesses that build their own websites. To be fair, I teach them how to use WordPress. We are more about SEO.
    That was a huge an impressive article and I took a lot from it. Will continue to use WordPress because it suits what we do but there’s still so mauch value in your breakdown that can be applied.
    Thank’s for a really thought provoking post.

    • You got it Steve. I actually use WordPress as well. The Website Planning Spec can absolutely be applied to WordPress builds. I even like to add in the SEO elements to the spec. I put in a list of keywords for each page that I spec out. This makes optimizing the site much easier when it’s time to build. Thanks again for the feedback.

  9. consult more time with designer of website which search engines do not dislike your website.

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>