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!
