A radically different way to design your website

In his 2016 TED talk Inside the mind of a master procrastinator, Tim Urban introduces the Instant Gratification Monkey - that part of our brains we all have that craves instant gratification and we can blame for all our procrastination. If you've never heard of Tim Urban you're in for a treat. Tim is a writer, speaker and author with a radically different way of looking at things. His signature stick men and line drawings (which he claims has progressed from 2nd grade to 4th grade proficiency) are hilarious, illustrate his points in a way that is totally clear and are easy to understand.

You could say that Tim has a radically different way of looking at things. This makes him interesting, but it also allows him to explain things in a way that we all get to understand.

Last week I wrote about the checklist we use for better web page design - I had so many requests for more details that I decided to write this particular article sooner rather than later.

Here then, is a radically different way to design your website. (I don't know that this will make me particularly interesting but I do hope it will help you design a better website for your business.)

Let's start designing

When you're building your own website, your first step is usually to select one of the great tools available on the market. If you're slightly more technically minded you will usually go for Wordpress; otherwise tools like Squarespace or Weebly are the place to go.

These tools allow you to select a template that determines the overall structure of your website, usually with some attractive placeholder images and text, and all you have to do is start modifying it for your needs.

But this is the wrong place to start.

Web designers will usually ask you about the purpose of your website, your brand, image, logo and colours. They use these to design the website so that it matches your brand and gets your message across to your target audience with the greatest impact.

But even that is not the right place to start.

Every website has a purpose (and so has every page)

I've heard some designers ask "If your website were an employee, what would its job description be?". In other words, what is the purpose of your website? It's not too difficult to answer that question - usually the purpose of your website is to attract customers, inform them of what you do and perhaps sell them something, right?

But wait - that's not quite the purpose of your website.

It's actually quite difficult for your website to attract customers on its own - that's the job of marketing and advertising and search engines.

Potential customers end up on your website because of something they've seen or heard or searched for. So when they land on your website, they have an idea they may find something useful and the job of your website is to a) tell them there is something useful here and b) tell everyone else there's nothing interesting here. Usually we don't care too much about b) because they'll go away on their own so we're only really concerned with a).

But potential customers don't land on your website.

They land on a page of your website. That page may be the home page or a landing page one of your marketing campaigns sent them to - but the point is potential customers don't see your website; they only see one page at a time.

So while it's useful to understand what the purpose of your website is, it's even more useful to understand what the purpose of each page on your website is.

Here then is the (radically different) 5-step process that I use and teach my customers to use when building their own website.

Step 1: Decide which pages you need

The first step is to decide which pages you need. You obviously need a home page - the page where visitors land if they're not sent somewhere else. Then there is the list of usual suspects:

You may also need specific pages for your products or services or "other" pages not on the list above.

Step 2: Decide what each page is going to do

The next step is to decide what each page in your website is going to do. I use a simple form to do that (you can easily make your own):

The idea with this form is to decide what each page is for before you start the visual design. The old saying that "form follows function" is particularly apt here - the worst thing you can do is to start the visual design of a web page before you're clear on what it is supposed to do.

Here's a snapshot of the Britewrx home page and three of the top-level pages below that:

When I work with clients we fill in a page design form for each page they're going to need on their website and arrange them to show the website hierarchy; this goes up on a wall or a desk so we can stand back and see the whole structure.

We now review the structure and the purpose for each page and make adjustments as needed.

Step 3: Wireframes with headings

The next step is to create a rough draft of what each page is going to look like. I use Balsamiq Mockups but we often just use pen and paper, a whiteboard or Post-It notes.

The purpose of creating the rough draft is two-fold:

design the page layout; and
design the flow of information.

The page layout and flow of information to the visitor are two sides of the same coin; we want them to read an engaging flow of information and the page layout will help achieve that.

Don't add text - yet

It is important to avoid the temptation of adding text to the page at this stage. As soon as you start adding text, the flow of information is obscured, so stick just with headings and the page layout.

Here's what the Britewrx home page looks like at this stage:

I will often spend a number of iterations with clients getting this stage of the website design correct. Having just headings in there removes the temptation to start reading, and we can jump around the website and test it to see whether each page works for the purpose it was designed for.

Step 4: Add text

When you're happy with the overall structure of the website, you can add in the missing text. This step is actually quite fast because you know what the purpose of each page is, what each section is designed to do and you only have to focus on one block of text at a time.

Step 5: Make it look pretty

Finally, you can to the visual design parts where things start looking pretty. Because you've already designed the layout of each page this phase is a lot faster than you would normally expect; and the form you filled in in Step 2 together with the layout, headings and text already give you (or your designers) the information you need to design the page to get the message across.

By putting the visual design last we also avoid one other big temptation: to design your brand while designing your website. Brand design is - and should be - a separate activity that contributes to your website design. If you're just starting out and you can't invest in brand design you will have to do it yourself - and my recommendation is that you do that before you design your website.

Website design is iterative

Even with this approach, website design is iterative. My experience is that when you start adding visuals you get inspiration for the text - but having the flow of each page mapped out before you start adding visual design makes the process a heck of a lot faster.

Summary

The 5-step approach I outlined above is a radically different way of designing and building your website. From experience with clients - and working with graphic designers - this is a much more effective way of designing websites than the usual approach of starting with the visual design.

It's also a lot faster. As soon as you start playing with visuals the flow of information on each page is obscured - so stick with this approach if you want to design a better website faster.

In summary, the five steps are:

Decide which pages you need.
Use a simple form to describe what each page will do.
Create wireframes with headings - no text.
Add the text.
Make it look pretty.

Put the instant gratification monkey on hold

To design a better website you have to put Tim Urban's instant gratification monkey on hold for just a bit. We're tempted to build our websites from the visual design side of things - but visual design is in support of the purpose of your website, not the place where you should be starting.

Visual design is in support of the purpose of your website, but it's not the place you should start.

What you can do now

You don't only have to use the 5-step process to design your website - you can also use it to do a sanity check to see how well designed your website is right now.

Create your own forms (from step 2) or drop me an email if you would like me to send them to you. Then follow the steps to design your website or check to see how well it is designed.

And I would love to hear your thoughts - drop me an email with your comments!

2019-01-14 14:37

Build your business backwards (to get there faster)

It's easy to lose your head when there's so much to do to build your business. Building it backwards may help you get there faster - with less overwhelm. (6 min read)

2019-01-07 14:30

Where should you focus now?

Where do you need to focus now to get your business running better? One way is to use the Tornado Method. (6 min read)

2018-12-17 14:12

Behind the smoke and mirrors of Internet success

The Internet can be so full of hype we don't really know what's true and what not. Should you use hype to look successful even when you're not? (7 min read)

2018-12-10 13:50

The art of the finish

We all chase productivity, and some hold the 80-hour work week up like a badge of honour. But productivity is not enough - here's what you really need. (5 min read)

2018-12-03 15:50

You can start a business today

You "know" you want to build a business, but starting is difficult. The good news is that it's a lot easier to start than you may think - here are the first three steps you need to take. (7 min read)

2018-11-26 15:31

5 reasons you need a subscriber list

A subscriber list is critical for almost every small business. Here are 5 reasons you need a subscriber list, and why quality is way more important than quantity. (9 min read)

2018-11-19 16:07

How to beat the distraction monster

Staying focused on what matters means we have to beat the distraction monster. Here are three things that will help. (5 min read)

2018-11-12 14:35

Use shutdown routines to leave the stress at work

A daily shutdown routine can be the best way to prepare for the next day - and enjoy the evening before. Here's how. (5 min read)

2018-11-08 14:50

How to give a presentation without revealing all your secrets

Presentations are a great way to demonstrate your products or services and generate leads for your business. But how do you do that without revealing all your secrets? (6 min read)

2018-11-06 14:48

How screwing things up can be great inspiration

We can get a lot of inspiration from how we screwed up - not just how we succeeded. Here's how to use your screw-ups as inspiration. (7 min read)

2018-10-29 14:20

7 things I would do differently if I had to start again

There's a lot that can go wrong when building a business. Here are 7 things I would do differently if I had to start over. (12 min read)

2018-10-24 14:11

Three fundamentals of a lifestyle business

A successful lifestyle business is based on three fundamentals. Here they are, together with a checklist to see how well you're doing. (6 min read)

2018-10-19 15:24

Why values matter (and bad things happen when they disappear)

Vision, mission and values are at the heart of any business. But why do values really matter, and what happens if we don't live by them? (6 min read)

2018-10-18 14:35

Consulting or info products - 8 factors to help you decide

Should you start with consulting, or jump directly to info products to generate passive income? Here are 8 factors to help you decide. (7 mind read)

2018-10-17 13:56

Put a face on your business

To build trust with visitors to your website, you need to tell them about you. You're more likely to build trust and eventually get them to buy. (5 min read)

2018-10-15 15:35

Back office systems for an info products business

Here are the apps and systems I use to run the back office for the info products side of my business. (5 min read)

2018-10-12 15:04

How to get started with marketing

You can get started with marketing even if you're a complete novice - and you don't have to break the bank. Here's how. (8 min read)

2018-10-10 16:08

The power of specialisation (and how to do it)

The most important thing you can do to build a successful business is to specialise. Here's what it means, and how you can go about it. (6 min read)

2018-10-04 16:33

How to design a revenue engine (a Big Problem article)

Every business has a Revenue Engine - it's how you make money. You need to design it well to get it to work - here's how. (8 min read)

2018-10-02 14:05

My business is not taking off - what can I do?

When your business is not taking off and you're in the pit of despair, you need a way out. Knowing you're not alone is the first step. (6 min read)

2018-09-26 15:28

A brand is a process (and authenticity is the key)

Your brand has static bits and dynamic bits. Turns out that the dynamic bits are way more important to build a strong brand. (5 min read)

2018-09-24 15:15

How to solve a big problem (even if you don’t know how)

You can solve almost any problem by breaking it down into smaller problems. You'll find you can solve at least some of the smaller ones, and get help for the bits you can't solve. (7 min read)

2018-09-21 15:47

Why you need to stop learning (and start doing)

Learning can be a great thing - except when all we're doing is learning and not actually doing. Here's why - and what you can do about it. (6 min read)

2018-09-14 14:15

Decision’s evil twin: Second Guessing

It's natural to have doubts after we made a big decision. But you can't let those doubts let you lose momentum. Here's the story of Decision, and its evil twin. (5 min read)

2018-09-12 14:49

Build a bridge to make a sale

You can improve your sales by building a bridge to take clients from the lead nurturing phase to the sales phase of your revenue engine. Here's how. (5 min read)

2018-09-11 13:44

What kind of business do you want to build?

The thousands of different businesses you can build can be grouped into four or five categories. Here's what they are, and how each will affect your lifestyle (7 min read)

2018-09-10 15:09

Three keys to building a business you will love

There are three keys to building a successful business that you will love, and will keep you going through thick and thin. Where they meet is called the "sweet spot". (5 min read)

2018-08-28 15:43

How much do you need to know about business to build one?

Building a business is scary because you don't know what you don't know. But it turns out you don't need to be expert at everything - here's a system to help you figure out how good you need to be. (5 min read)

2018-08-27 14:14

How to overcome objections to the sale

Clients often hesitate at the last moment before they commit to a sale. Here's how to recognise the patterns, and overcome the objections. (5 min read)

2018-08-23 13:12

Building a small business culture

Building a culture does not have to be difficult. Here's a simple technique to get started. (4 min read)