Guide to the One-Page Site Plan
Before we get started designing and building a website, first we need to know what kind of site we want to create. Our first step should be making a plan. It doesn’t need to be a 50-page document; in fact, in the earliest stages of planning, the shorter the better. We want to sketch a road map, not create the engineering schematics for building every bridge and tunnel along the way. In this tutorial, we’ll cover the steps for creating our road map: the one-page site plan. (It also may bear clarification that this doesn’t mean planning to create a website that’s only one page – this can apply to much larger sites!)
Despite its brevity, this one-page document will contain the key specifications of our website plan, but without getting bogged down in all of the countless details that are likely to change within even the first week of development. This approach is inspired by both the Lean Business Canvas, which is essentially a one-page business model planning tool, and by Twitter, whose 140-character posts can still manage to convey a surprising amount of information (ok, not for all Tweeters) in as brief a package as possible.
Will this work for every website? Probably not, but I’d wager it can work for most. If you’re building an exceedingly intricate site, with lots of complex user interactions and database connections, you’ll probably need something a bit more robust.
However, even for that level of development, this can help to provide a high-level overview of the basic site requirements.
The whole one-page planning process shouldn’t take any longer than 15 to 30 minutes, so it’s worth a shot for whatever site project you’re working on.
Let’s get started with the One-Page Site Plan. Here are the main points to consider:
What is the primary goal of the website?
It’s likely that the primary goal of your site falls into one of these categories:
- Informational (education, events, resources, etc)
- Providing a service
- Selling a product
- Forum (for people sharing a common interest)
- Some combination of all of the above
Try to expand on these, including specific details relevant to your project. If your site doesn’t fit in those categories, that’s okay, just describe the goals as clearly and concisely as you can (and drop me a line so I can include another category!)
Some examples of site goals:
- To share stories about my travels around Asia
- Provide tips and tutorials about project management and to acquire new leads for clients
- Show my portfolio, and look for more work as a freelance graphic designer
- Present the features for a new app we’ve created for music playlist aggregation, and sell the app for mobile devices
- Sell handmade wooden kitchenware to national customers
- Serve as an online social network for my local soccer community
Take a look at these designs. What do you think the primary goal of each website is?
Who is the main audience for your site?
The only truly unacceptable answer here is “everyone”. Not even Google can truly say that “everyone” is their target audience, despite that nearly everyone is. There are people who never use computers, for whom a google sounds like a bovine neurological illness. And I doubt you’ll have more visitors than Google. Sorry to be a pessimist!
Try to identify key audience segments, because that will help you cater the design, content, and functionality to that group.
Some examples of possible target audiences:
- If you’re an adventure travel agency, your target audience might be
- Young folks between 18 and 29 years old, who are interested in foreign cultures, history, or extreme sports.
- You’re writing a healthy cookbook with quick, easy recipes:
- Busy parents and young professionals, who work full-time, like to exercise, and are interested in organic food.
- You’re a local dentist office:
- Residents of my local area, and particularly those that have the various types of insurance my service accepts
Who do you think is the target audience for each of these websites?
What are the main sections of the site? What kinds of content will each section include?
Before building the site, we need to know what is going to go into the site. Seems obvious, but many folks skip this step, only to create splitting stress headaches later when their site is a tangled mess. Having a basic map of the site will help you dive right in and start building the key pages, for one; and it will improve the usability of the site for your visitors. Site maps can also help you to focus the goal and content of each page within the site, ensuring that everything serves a clear purpose.
Start by creating a list of the main sections, and if you want to add another layer of detail, add a basic description of the type of content each section will include to each section.
An example of a sitemap with content plan:
- Home: banner image, service text, latest blog posts
- Services: text describing different services, supporting images
- Products: product catalog with text and images
- Portfolio: images and video from latest projects
- About: company history, mission, and team
- Blog: posts about industry-specific topics
- Contact: email, phone, map, and contact form
Some examples of typical navigation areas based on main section sitemaps:
Describe what you think your website should look like. Think in terms of concept, colors, typography, and layout.
Unless you already have a crystal clear mental picture of your site, it will likely help to do a bit of research here. There are as many approaches to designing websites as they are designers – well, almost. Trends definitely arise (and naturally fade away), but some design styles are popular for a reason. For example, trends have moved towards highly simplified layouts in recent years, moving away from the maddeningly cluttered sites of years past.
Four main considerations go into website design thinking:
You may find it helpful to think in terms of keywords for your business, organization, or project. What best describes what you do? These keywords can guide you to find the right design. Examples: innovative, focused, energetic, inspiring, traditional, etc.
If your company already has a color pallette, great. If not, think about your goals and target audience. Some colors and color schemes work well for some audiences, but not for others. Bright, bold colors may be appropriate for a creative apparel site, but not necessarily for a corporate law firm.
At this stage, just choose a handful of general colors you think appropriate; later, we’ll talk about choosing a color scheme.
Similar to your color choices, typography is highly influenced by the goals and audience. We can (very) generally break type into three main categories: traditional, modern, and decorative. If your concept is quite particular, like 60s retro, then you’ll likely need a decorative font-face. If not, go traditional or modern.
While website design has continuously evolved over the years, ranging from clutter to minimalism to highly experimental, we’ve seen a move towards layouts that are cleaner, simpler, and easier to comprehend. That doesn’t mean creativity is lost; any page layout your imagination can conjure can be created on the web.
Some beautiful design for inspiration, in a wide variety of fields (click on images to find URLs to these sites):
Describe what features and functionality your site will need.
Like the design plan above, knowing what types of functionality you’ll need may require some research. It’s also important to have considered the sitemap and types of content in the previous step on information architecture, because that helps give us an idea of what the pages need to do, as much as what they say.
Some common types of functionality for a website include (but aren’t limited to!):
- image gallery
- forms: contact, signups, registration, and others
- shopping cart
- social media integration
- community forum & social network
- events calendar
If you’re using a CMS like WordPress, most likely you’ll be able to find plugins to take care of most of these. If you’ve got a static site, you need straight-up code. And for that, you need some development chops, or a superstar developer on your team, at the least.
Some examples of common types of functionality for websites, including ecommerce, social sharing, custom forms, and user forums:
Who is on your team, and what are their roles?
Finally, we need to decide who’s going to do what.
Design is never as easy as many people believe it will be, and calls for both technique and artistic eye. If your site requires some heavy functionality like a shopping cart, you will benefit from having a skilled developer on your team. Some folks excel at writing content, others at marketing it. The site admin makes sure that all of the pieces are fitting together properly, and regularly checks the site for problems.
Just as we have those three planning tasks above – Sitemap, Design, and Functionality – we can have people responsible for each of these areas of site creation.
Some typical roles include:
- Site administrator
- Content creator
What do you think your best role will be? Be sure you can find the right people to fill in the gaps in your own skillset.
Just as no two websites are the same, neither will two site plans. Give this a shot, and give me a shout in the comments area if you’ve got any questions.
You can download a PDF of the site plan here:
Or if you’d like to work with Helix River on creating your site, try the online form here: