A simple checklist for better web pages

If you've followed my blog for any period of time you'll know that I've written about websites a number of times before.

As a small business, chances are that you're either developing your own website or you have someone following your instructions to do it (you probably don't have the luxury of being able to afford a marketing agency do it for you).

But as you already know developing a good website is not that easy. Few of us are trained in both visual design (which makes your website attractive) and psychology (how we get people to pay attention). Even with all the design resources out there it's still not easy to design and develop a website.

But there are things we can do to create better websites even without that training.

A different approach to website design

Over the years I've developed a completely different approach to website design that is almost directly the opposite of the way most website designers would approach the task. The approach works as follows:

• list the pages you think you're going to need;
• for each page, describe what you want the page to do (what is the purpose of this page?);
• wireframe the page using placeholders for images and text; using headings only to show the page flow;
• review the headings and flow to make sure the page is fit for purpose;
• add the copy (text); and
• finally, apply the visual design including images.

Working with clients on their websites this approach has turned out to be a lot faster - and better - than traditional website design. More importantly, individual web pages are better designed because the purpose of the page is the leading consideration.

Listing the pages you need

I use a simple catalogue to help determine which pages you need for a website. Here's what it looks like:

Not every website needs every page, and often pages are combined into one. I also have a separate list of pages for specific products or services (these are often sales pages) and a list of "other" pages that don't fit into any of these categories.

A simple checklist for page design

Putting the purpose of each page first - before we've even looked at any visual design considerations - makes it so much easier to develop a web page because we're designing to achieve a purpose.

We use a checklist for page design - here's what it looks like:

For each page we're going to need, we take one of these page checklists and put the page name at the top. Using a whiteboard or cork board we arrange the pages with the home page at the top, the direct pages just below that and any additional pages below those.

Here's the home page and top level pages of Britewrx.com:

Using the checklist

We now work through the checklist for each page. Here's a completed checklist for my website's home page:

Purpose: The first thing to determine is what the purpose of the page is going to be. In my case the purpose of the page is for visitors to "download the BTM" (BTM is my abbreviation for the Beginner's Guide to the Tornado Method).

When do they come here? This question helps me determine what they may know when they visit this page. For my website I know that first-time visitors will usually land here first, but they may visit the page in future as well.

What are they looking for? When visitors land on this page, what are they looking for? I am going to assume that they are curious; that they want to learn how to deal with overwhelm (a lot of my marketing uses overwhelm as the key to drive people to my website); and they want to see if there's anything here that will help them build and grow their business.

What are their pains, frustrations, feelings? It's important to understand what visitors to this page may be experiencing. In this case, I believe that they are overwhelmed; they don't know how to do "stuff"; and they are wary of hype and hard sell.

What do we want to tell them? Now that we have an idea of when they come here, what they're looking for and what they may be feeling, we can determine what we want to tell them. In this case, I want to tell visitors that they can deal with overwhelm; this is a safe place; and there is no hype or hard sell.

Every page on your website has to have a Call To Action.

What do we want them to do? Finally, there is the Call To Action (or CTA). Every page on your website has to have a Call To Action. If your visitor responds to the CTA they're interested in what you have to sell (or they're purchasing something) - and if not they may not be interested or they're not ready yet. In either case, you have to have the CTA, otherwise they're likely to just go away and you've lost them.

How this helps

If you start designing web pages from the visual side of things the visuals and images obscure what you want your website visitors to learn and do. We can get so wrapped up in the visual design that we forget the visual design is just there to get the message across.

Starting with the checklist - the purpose of each page - allows us to focus on what we want visitors to learn and do before we get distracted by the visuals.

Starting with the purpose of each page allows us to focus on what we want visitors to learn and do before we get distracted by the visuals.

When we understand what the page is for, and we've added in the headings and text and we're happy with the "flow" of the page, adding visuals is an exercise in strengthening the message.

Using this checklist will help you design web pages that are a better fit for purpose than you may otherwise have been able to do. If you're designing and building your own website this will you develop a better website - and if you have someone doing it for you they will thank you for being so clear about what each page is supposed to do!

Wireframes, flow, headings and text

As I mentioned at the beginning of this article, once I have these checklists I then move on to creating wireframes and design the "flow" of each page using headings only.

I'll cover this in more detail in a future article (in fact the whole methodology will eventually be part of my Website Design Toolkit). In the meantime you may want to check out Balsamiq Mockups, my tool of choice for wireframes.

It's worth noting that landing pages and sales pages get a bit of extra consideration - psychology plays a big role here and we'll cover that in the Website Design Toolkit.

What you can do now

Even if you have a website going through the checklist for each page is a good idea - you'll quickly realise whether your web pages are fit for purpose.