How to Plan a Website (for you or a client)

How-to-plan-a-website-for-you-or-your-clients2.jpg

When launching a website, 80% of the work happens before we even get started with the actual design & setup of the website.

That's because every decision that's made during the design process often comes back to those plans and decisions we made at the very beginning.

Who's this for?

This post preps you for the overall planning portion of your website- whether you're starting at square one and want to launch a strategic website. Or, you're a web designer trying to streamline your client process and want to have systems in place that keep a project on time and improve client communication

I do mention Squarespace a few times (these are not affiliate links) but because it's an easy to use platform that suits the website needs of most businesses.

But again, this is about the planning portion - so feel free to read on even if you're thinking about using another platform.


Determine Your Goals

I'm going to go out on a limb here, and guess that you need a website for at least one of the following reasons:

  • Grow Your Email List
  • Promote Your Services/Offerings
  • Share Content (blog/podcast/videos)

These are the goals that we are going to be focusing on MOST. Because it's how we're going to create a strategic website that actually converts visitors.

Knowing these goals ahead of time, will help you plan your call to actions and organize your pages.

Some additional goals might be, "Position Yourself as an Expert" and "overall, serve as a 'hub' for your online presence".


01. Create your website outline

STEP 1

In a Google Doc (or whatever you like to work in), list all the pages you want on your website:

planning-your-website-list-pages.png

STEP 2

Prioritize your pages by separating them into the "header" navigation and "footer" navigation.

planning-your-website-get-organized.png

Try to keep your header as minimalist as possible (easier for visitors to navigate) - I try to stick with max 5 items in the header menu.

For the footer, most folks will be good with ~5 items. If you have a complex footer, you might want to separate it into different categories (similar to how Made Vibrant does it).

Step 3

Now it's time to flush out your site plan by creating an outline of what you'd like to focus on for each page. Remember, that this is an outline and you're not married to these decisions. But for each page, think about your core goals and what information/content you can feature on that page that aligns with those goals.

You'll also want to have a primary "call to action" on each page - again, aligned with those goals. An easy example is, that if we're trying to build our email list - you'll want some clear email sign up call to actions on each page of your website.

Once we have our website launched, we can test each page and see what folks actually engaging with and clicking on. For example, your "start here" page might have a few content elements you think COULD be important - but you're not quite sure until you talk with visitors and test them out.

planning-your-website-get-organized.png

02. Content Planners

Now that you've outlined each page of your website, you can start writing the copy and creating/gathering visuals for each page. 

I also like to come up with a "visuals checklist". Do you want icons created to display with your offerings? Do you need a banner image for each page? Head shots taken?

designer tip

I like to create "content planners" for my clients to help keep us both organized! These are super simple and all you really have to do, is make a document and title each page with the title from their navigation. You can also have a box where they can make notes about images they plan on either purchasing or hiring me to create. 

Like most of my processes, I use Google Docs, so I can pop in and make comments about anything we need to keep the project going.

Want a free example? Click here :)


03. Create Mockups

Mockups are a visual representation of your website outline, you can create these in whatever platform your most comfortable. Whether that's an adobe program or even sketching them out on paper.

Since we are building out our website using Squarespace, you don't have to worry about the mockups being pixel perfect. This is a way to visualize what content you need and when you start to actually setup your website, you can easily drag and drop the elements needed for each page.

Here's a sample of what your mockup can look like:

mockup-thumbnails.png

Becky Kinkead is a designer and marketer focused on sharing easy to follow, step by step systems that help you master the tech side of business. On the blog, you’ll find a variety of topics that help you succeed in online business, such as graphic design, branding, website design, social media strategies, email marketing, blogging, business and online marketing. The mission with these resources and courses is to help you learn how to launch your business and grow your audience.