Comprehensive Website Planning Outline

Description

The following outline may be used internally, or with clients to determine preferences and design/content direction for primary web page elements. It covers most major details for top level pages that are present in nearly all websites.

Homepage

Goals

• Introduce potential clients or customers to your business and your brand
• Establish your business as the best choice among competitors in your market
• Begin building a relationship with your online audience
• Provide a basis for achieving top rankings in search engines

Page Elements

• Masthead containing:
  • Logo and other branding elements
  • Primary navigation, or main menu
  • Social links and icons
  • Contact information
  • If applicable, search box, call to action (CTA) or other critical elements
• Main featured image, sometimes called the “hero” image
• Contact or lead generation form
• Featured products or services with links for additional information
• Section providing details about your solution(s)
• Additional sections to provide credibility
  • Testimonials and reviews
  • Awards
  • Industry leaders that use your service or products (logos)
• Footer
  • Repeat contact information
  • CTA/formsMasthead

You masthead (sometimes referred to as the “header”) will be the same on every page. it is a primary branding element, but studies show that website visitors prefer simple mastheads, with clear, obvious navigational elements. For mobile compatibility, and to preserve screen space, we strive to keep mastheads slim and unobtrusive.

To design your masthead, we’ll need the following:

• • Clear, digital copy of your logo (preferred formats: eps, ai)
  • List of pages (we’ll discuss this in detail)
  • Links to all of your social media accounts
    • • Facebook:
      • Twitter:
      • LinkedIn:
      • Google+:
      • YouTube:
      • Other:
      • Other:

Main Feature Image Area

This is the first thing visitors to your website will notice. We prefer to use large, full-width images of very high quality. Our challenge is to create impact here without pushing critical information about your business too far down the page to be seen when first logging in.

Often, we’ll overlay headlines, buttons or forms in this area. Your goal should be to establish yourself as the leader in your market and to give visitors an easy way to begin a relationship. Usually, we do this with a simple form that feeds basic contact details into a database for followup and future record keeping. That information is also delivered to you as an email message.

To develop your main feature area, we’ll need the following:

• • Main, full-width image (ideal dimensions: Width: 1600px, Height: 400px). Choose an image that gives visitors an idea of what it’s like to work with you, or how your product/service provides a direct benefit.
  • Headline (Max: 20 words):
  • Subhead (Max: 30 words):
  • Call to action (CTA). This can be a link to request information, join a list, buy a product, sign up for an event or just about anything else. The point is to tell website visitors exactly what you want them to do. Make it obvious.
  • If your CTA is a form, list the fields. We recommend keeping it minimal and non-obtrusive. We will ask for more detail using a longer form on the “Contact” or “About Us” page:
    • • First Name: (Usually first name is enough.)
      • Last Name: (Only ask for last name if it is absolutely necessary. Most people prefer to remain anonymous until they choose to engage further.)
      • Email Address: (We generally require email addresses, but we don’t abuse them.)
      • Interest: (Often, this is a series of checkboxes for each service line, or specific request.)
        • • List Item #1:
          • List Item #2:
          • List Item #3:
          • List Item #4:
      • Phone Number: (Only if you absolutely need it.)
      • Physical Address: (Also, only if absolutely necessary.)
      • Other:
      • Other:
      • Other:
  • Additional block text, if necessary. You may provide 20-25 words of additional text to highlight the benefits of your product(s), service(s), convenience, or other details:Feature Areas

After viewing the main feature area, visors to your website will most often scan down the page for additional detail. Common practice is to highlight these in multiples of three, using short headlines, an image (icon or photo), a brief description (15-20 words) an a button to take you to a detail page.

It is acceptable to create feature boxes in combination of more or fewer than three, but three columns generally provide the best balance of information density and being aesthetically pleasing and scannable. The final decision will be based on the needs and goals of your business.

For feature boxes we’ll need:

Columns: ❏ 2, ❏ 3, ❏ 4, ❏ 5, ❏ 6

Rows: ❏ 2, ❏ 3, ❏ 4, ❏ 5, ❏ 6

FEATURE 1:

• • Headline (max: 12 characters):
  • Image:
    • • Create icon
      • Photo supplied
  • Button text (max: 10 characters):

FEATURE 2:

• • Headline (max: 12 characters):
  • Image:
    • • Create icon
      • Photo supplied
  • Button text (max: 10 characters):

FEATURE 3:

• • Headline (max: 12 characters):
  • Image:
    • • Create icon
      • Photo supplied
  • Button text (max: 10 characters):

FEATURE 4:

• • Headline (max: 12 characters):
  • Image:
    • • Create icon
      • Photo supplied
  • Button text (max: 10 characters):

FEATURE 5:

• • Headline (max: 12 characters):
  • Image:
    • • Create icon
      • Photo supplied
  • Button text (max: 10 characters):

FEATURE 6:

• • Headline (max: 12 characters):
  • Image:
    • • Create icon
      • Photo supplied
  • Button text (max: 10 characters):Product/Service/Solution Details

The previous sections are in intended to give an at-a-glance overview of what you offer and why your website visitors should be interested. Their purpose is to frame a solution to a problem or other benefit you provide. Up to this point, the focus is 90% on the website visitor, while the remaining 10% primarily establishes a connection between the solution and your brand.

Having accomplished this, we can begin introducing details about what makes your organization the best choice. This section should still speak to the desired outcomes envisioned by the reader, but from the perspective of building your business as the obvious solution provider.

• • Headline (15-25 characters):
    • • Company highlights (25-30 words):
      • Related image provided (Should be roughly 800x600px):
  • Subhead (20-40 characters):
    • • Restate, or provide an example of how you’ve directly benefitted a client or how your product/service fulfills a specific need:
      • If possible/applicable, identify one or more reason other solutions fail, are difficult to deploy or manage, or are otherwise disappointing to the client or customer:
  • Provide one or more testimonials from clients you serve or have served:
  • If possible, provide photographs of the clients/customers offering testimonials:Footer

Like the masthead, your page footer will be the same throughout your website. Internet users have grown accustomed to looking to the footer for “boilerplate” details about a company, like employment opportunities, investor relations, credibility badges, social media links and icons, etc.

Additionally, we like to use the footer to make critical details and functions (like contact forms) available throughout the website. Often, we use this area to display a more detailed form than was appropriate or practical in the main feature area at the top of the page.

If we provide a form, we are far less timid about asking for personal details here than at the top of the page. Our goal is to learn enough to provide for meaningful followup contact.

• • Include a form? Heading (15-20 characters):
    • • First Name:
      • Last Name:
      • Email Address:
      • Interest: (Often, this is a series of checkboxes for each service line, or specific request.)
        • • List Item #1:
          • List Item #2:
          • List Item #3:
          • List Item #4:
      • Phone Number:
      • Physical Address:
      • Text are for Comments or Questions:
      • Other:
      • Other:
  • Embed a location map (E.G. Google)
  • Business hours:
  • Contact information (email, phone, etc.)
  • Add social icons
  • Include sitemap and links to website areas/pages
  • Additional pages not included in primary navigation
    • • Legal information provided?
      • Privacy policy attached?
      • Terms of use attached?
      • Employment opportunities?
      • Other:
      • Other:
      • Other:
      • Other:
  • Image gallery thumbnails
  • Upcoming events
  • Specials:
  • Feature product/service:
  • Featured project or client/customer:
  • Cool quote:
  • Testimonial:
  • Important links:
  • Other:
  • Other:
  • Other:
  • Other:

About Us

Goals

For websites that have it, “about us” is the second most visited page, after the homepage. We believe it is at least as important as the homepage, as this is where visitors to your site gauge credibility and get a feel for what it will be like to do business with you.

“About us” provides an opportunity to talk about yourself and/or your business. It can be presumed that visitors to this page have learned enough about your solutions to take a more direct interest in you.

Your goal should be to introduce your company and provide background and context about how and why you are in business. Include information about how the company was founded, your key philosophies, and anything that supports your credibility.

• • Headline (15-20 characters):
  • Brief company history (50-75 words):
    • • Timeline?
  • Introduce the founders: (50-75 words):
  • Describe key successes: (75-150 words):
  • Describe what you do (75-100 words):
  • List several facts about you or your company:
  • Provide a testimonial:
  • Provide images:
    • • Staff
      • Founders
      • Office
      • Key work
      • ProductsServices

This page’s obvious purpose is to introduce the services you offer to visitors to your website. Like the homepage, phrase your services based on the context or point of view of the visitor. Ask yourself, “what problem(s) does this service solve?” Our goal is to use headings, copy and imagery to demonstrate how you will solve problems.

This is also a primary content hub to establish keyword focus and density to help ensure search engines will rank your site properly. As you create headings, try to phrase them similar to how a potential client would use Google to solve the problem outlined above. Sometimes it makes sense to concentrate on each service with its own page.

To structure your services page, we’ll need the following (add as many as needed):

• • Top level Headline (15-30 characters):
  • Supporting Text (20-25 words):
  • Service 1 Title:
    • • Brief Description (15-25 words):
      • Detailed description of service (4-6 sentences):
      • Image depicting solution (800px by 600px):
        • • Additional images as needed:
  • Service 2 Title:
    • • Brief Description (15-25 words):
      • Detailed description of service (4-6 sentences):
      • Image depicting solution (800px by 600px):
        • • Additional images as needed:
  • Service 3 Title:
    • • Brief Description (15-25 words):
      • Detailed description of service (4-6 sentences):
      • Image depicting solution (800px by 600px):
        • • Additional images as needed:Products

Like services, this page introduces your products. Again, focus on benefits before features, and again ask yourself, “what problem(s) does this product solve?”

Establish keyword focus and density to help ensure search engines will rank your site properly. Again, as you create headings, phrase them in the context of search engines. If we need more product pages, we’ll create them. Try to imagine the user’s intent for visiting exploring your site.

To structure your products page, we’ll need the following (add as many as needed):

• • Top level Headline (15-30 characters):
  • Supporting Text (20-25 words):
  • Product 1 Title:
    • • Brief Description (15-25 words):
      • Detailed description of product (4-6 sentences):
      • Image depicting product (800px by 600px):
        • • Additional images as needed:
  • Product 2 Title:
    • • Brief Description (15-25 words):
      • Detailed description of product (4-6 sentences):
      • Image depicting product (800px by 600px):
        • • Additional images as needed:
  • Product 3 Title:
    • • Brief Description (15-25 words):
      • Detailed description of product (4-6 sentences):
      • Image depicting product (800px by 600px):
        • • Additional images as needed:

FAQ

Answer questions that your prospects and customers ask you over and over again, with the idea that the FAQ on the website will serve your visitors better and cut down on the questions you receive. Always pose the questions in a positive fashion and, while you must always answer the questions honestly, you also want to make sure you keep readers interested. Your answers should help persuade the visitor to take the next step or action to hire you or purchase your product.

What to include: Questions you are asked repeatedly, questions that always come up when speaking with prospects, questions that address (and solve) possible objections your potential customers or clients might have. Strategically, these questions can help remove any barriers and/or preconceptions about your industry or your specific business.

Again, consider how your visitors use online searches when phrasing questions and answers, and provide context through descriptions:

• • Question 1:
    • Answer 1:
  • Question 2:
    • Answer 2:
  • Question 3:
    • Answer 3:
  • Question 4:
    • Answer 4:
  • Question 5:
    • Answer 5:
  • Question 6:
    • Answer 6:
  • Question 7:
    • Answer 7:

Testimonials

Testimonials, especially ones that also include a photo and contact info or web address help enhance your credibility, trustworthiness, and your dependability. Testimonials show your prospects that other people have hired your or bought your product and had success and it encourages them to do the same.

To design and develop your testimonials page, please provide the following:

• • Headline (15-25 characters):
    • • Your Client’s or Business Name:
      • Brief description of their need and your solution (1-2 sentences):
      • Photo of client, if possible:
      • Client’s logo if it’s a business:
      • Client’s Web Address:
  • Headline (15-25 characters):
    • • Your Client’s or Business Name:
      • Brief description of their need and your solution (1-2 sentences):
      • Photo of client, if possible:
      • Client’s logo if it’s a business:
      • Client’s Web Address:
  • Headline (15-25 characters):
    • • Your Client’s or Business Name:
      • Brief description of their need and your solution (1-2 sentences):
      • Photo of client, if possible:
      • Client’s logo if it’s a business:
      • Client’s Web Address:

Contact Us

Provide website visitors every possible means of contacting you. Different people prefer to communicate in different ways. Your goals should be to accommodate all of them.

This is also prime lead-generation opportunity, so we’ll provide a detailed for to feed the CRM. Here, we can ask for as much detail as we wish, since the visitor is initiating the contact from a much more engaged perspective than from the CTA on your homepage.

At minimum, provide the following:

• • Mailing Address:
  • Phone number:
  • FAX (If you still have one):
  • Important email addresses:
  • Social media profiles:
    • • LinkedIn:
      • Facebook:
      • Twitter:
      • Other:
      • Other:
  • Contact form fields:
    • • First Name:
      • Last Name:
      • Email Address:
      • Checklist of products/services:
        • • Products/Service:
          • Products/Service:
          • Products/Service:
      • General text area for questions or comments:

Additional Pages

Portfolio

Newsroom