Throughout my years of building websites with clients, I’ve found that the single most helpful step in preparing to build a website is creating a site plan. A lot of people working on their own seem to skip this step, which is a huge mistake. Nothing can speed up the creation of your site more than a well-thought-out site plan.
This is the third of four posts that will prepare you to build your website.
- Part 1: Identify Your Audience
- Part 2: Tailor Your Message
- Part 3: Create Your Site Plan
- Part 4: Gather Your Assets
In architecture, a site plan is a birds-eye view of how a blank piece of land will be transformed by a new construction project. It is a detailed graphical representation of all the new sidewalks, parking lots, and buildings that will be added to the lot. This plan will be indispensable to the construction crew when they break ground, because it means that they don’t have to make any decisions in the field—everything was already decided during the planning phase.
The same site plan concept works great for websites as well. Figure out and document exactly what you want and then when you are ready to build your site, all the difficult decisions are already behind you. The most basic site plan would be nothing more than a simple outline. Notes, fully written text, images, and more can be added to make it more robust. I usually recommend adding as much information as possible into the document which can result in your site plan ending up as an offline version of what will become your website.
The final document will be invaluable whether you plan on creating the website yourself or if you plan on having someone build the website for you. When you pay someone to make your site, they will often be working on an hourly basis, so having a complete site plan can save you a ton of money and dramatically speed up the project.
There is some flexibility in how you create your site plan, but I’m going to share the steps I follow when working with clients. The process starts by brainstorming all the different pieces of content that you would like to place on your entire website. Then you will identify patterns and groupings identified during the brainstorming. Next, you can convert these clusters into the future pages of your site and create an outline based upon those pages. Finally, you will add more substance to the outline by documenting exactly what should appear on each of the pages of your website.
Step 1: Brainstorm ideas
Since you have already identified your audience and message, you should have a decent idea about the high-level scope of your site. During this section you will begin to consider the details—exactly what kind of content your website needs to contain.
Start by looking at the websites of your top competitors and noting what specific pages and types of content they are using. Can you figure out the purpose of each site you visit? Can you see how a visitor is expected to move from one page to another? Do you feel compelled to follow through on the site’s call to action?
Now it is time to brainstorm.
This is best done with a small group of people who are all involved with your website. Start by sharing your notes about your audience, message, and anything you learned when analyzing the other websites. Then begin discussing different ideas about what everyone wants on the website. These can be large or small ideas—throw everything into the pile whether it is easy or difficult to accomplish.
Write out each idea on an index card or post it note and spread them out on the floor or wall so you can see them all at once. We’ll arrange the ideas in the next step.
Step 2: Cluster into themes
With all your notes spread out in front of you, start to group the concepts and ideas into different clusters. Once you see a pattern begin to emerge, the clusters can become the pages of your site.
For example, product descriptions, product photos, customer testimonials, and a YouTube video of the product in action can be grouped together to form a product page. Your primary call to action, your latest news, and a simple contact form might be grouped together into the home page of your site.
You may even see that some pages should be grouped together and you can make them subpages of a broader topic. This could be the case if you have several products or services that you offer, or if there are variations of a particular topic, like a photo gallery, map, and written rules for one rental property.
Some ideas might not fit with any others. Are these actually necessary? Do they deserve a standalone page on your website? Set them aside and revisit them during the next step when we make an outline of your website navigation.
Step 3: Create an outline of pages
As your clustered content ideas become pages of your site, it is time to find a method to display this information in an easily-readable format. Personally, I tend to gravitate towards outlines or bulleted lists as I find these formats quick and easy to reference.
When organizing your pages, limit yourself to five to seven primary ones for your site. This is the optimal number that people can easily digest at one time. If you need more pages than that, group some pages together into subpages of your primary ones.
A good rule of thumb is to make sure that your visitors can find anything they might be seeking without having to click more than three links. Each additional click can risk that user abandoning their search and moving on. It is also possible that a visitor will arrive at your website other than your homepage so you will want to make sure that they can still easily find their way around no matter where they begin.
Step 4: Flesh out the document
With an outline now in place, continue to add to this site plan by making notes under each page to remind yourself of particular assets or information that you would like to place there. This can be in the form of text, images, links, or even videos.
I recommend jotting down three different versions of the title for each page. The first is the shortest possible label for the page which you can use in the site’s navigational menu that visitors will use to move from one page of your site to another.
Headings are very important to demonstrate hierarchy within a website and every page of your site should start with a h1 tag to let visitors know exactly where they are within your website. This is where you will use the second title that you create.
The third version of the title will be a longer one that should be a bit more descriptive and will be used for improving where your website appears within search engines like Google. The actual title will not appear within the visible area of your website, but will instead be used in the title tag of each page. The title tag is one of the most basic html tags and is what also appears in the tab of your browser when you are on a particular page of a website. It may sound a bit complicated, but most website building systems provide an easy way to enter this text without having to use any code.
At the end of this step, each page of your site outline should look something like this:
The final site plan that emerges from this step will be your roadmap and blueprint for your entire website. Refer to it often as it will make the website creation process much quicker and easier.
With your site plan complete along with your research on your target audience and a clarified purpose and message for your website, you will have nearly everything necessary to hand your project to someone else to build or to start building the site yourself. All the important questions will already be answered which will ultimately result in a project that is completed much more quickly and at potentially much lower cost.
The final step, which I will cover in the last entry of the Preparing To Build Your Website series will focus on gathering your assets and preparing your materials for use on your website.
He currently serves as the Multi-talento in Jimdo's San Francisco office, solving problems, educating users, and helping to grow awareness about Jimdo, the easiest website builder on the web.
Latest posts by Brent Gummow (see all)
- Web Graphics for Beginners: A Best Practices Handbook - July 22, 2014
- First Half of 2014: The Top Posts on the Jimdo Blog - July 3, 2014
- What Makes a Great Facebook Fan Page? - June 24, 2014