Like building anything, preparation and doing things in the right order are the keys. Here’s my process for making a great website.
After more than ten years of building websites for clients, you would hope I’ve got the hang of it by now. The technology has changed enormously in that time, but the background process has not.
Sometimes our clients are surprised at how much goes into a web design project before we start building the site. Then they tend to be impressed by how quickly the pieces come together because of all the work we’ve done by that stage.
So here’s the process we use with our clients.
(This process is for a standard website. Sites with shops, online courses and so on are more complex.)
Bonus Step 0: Branding
There’s really no point in trying to make a website if you don’t know what the design style will be. You’ll be tempted to use design templates and presets, and the final product will look generic.
So before going anywhere, the following key pieces of design must be in place:
- Logo
- Palette of colours
- Fonts/typefaces
If I start work for a client who doesn’t have those, we include a branding design step in their project proposal. One of our graphic designers then takes over and hands back to me when it’s time to move to Step 1.
Step 1: Sitemap
The first thing is to plan what will be on your site. A sitemap is a list or chart of the pages and other sections that’ll make up your site. Some of them are used to build the navigation menus, but not all of them. So it’s important to lay them out now, so you can see how they will link together as a visitor browses through your site.
If you’re doing it for yourself, do it on big sheet of paper. Start by listing the pages and sections like news articles, landing pages and so on. Then draw them out on a chart showing what will appear in your menus and which are further ‘inside’ the site.
Step 2: Prototypes
The next thing you need is a black and white prototype or wireframe of each different type of page you’ll have on your site. At the minimum, you should lay out your homepage and a template to use for the other pages.
You shouldn’t design anything at this stage, just lay out what goes where. Where does your logo go? What sort of menu will you use? Will you have a big image banner at the top of the homepage? Will you have a sidebar on large screens, or will your pages be full width?
This will help you with the next step.
Step 3: Content
In badly run projects, content gets shoehorned in at the end. Don’t do that!
We use your sitemap to make a list of pages that need to be written. We use your prototype layouts to remind us what images we need, and any other elements we need to plan, such as contact forms or videos.
Then we turn that into a document with a sheet for each page from your sitemap. When our clients are writing their own content, we add some structure and reminders.
On each sheet we put the title of the page, and some tips of what to include – written text, images, and so on. Once it’s written, you have a single file with all of your content for the website gathered together.
Step 4: Design and Build
Notice that we haven’t started any technical work on the site until the second half of the project! It’s so important to hold off from playing with code or making bits of design until you’ve prepared everything that will be needed.
But now we have all the pieces, ready to assemble:
- The design ‘language’ for your site
- A map of all the pages we’ll need
- The rough page layouts
- The content that goes into those layouts
Now we start to put it together. We do it on a temporary address, so it doesn’t interfere with any existing site. Sometimes this is the main part of the project, but sometimes it’s actually quite quick now that we’ve done all the prep in the first few steps.
I sometimes like to pick a couple of pages and use them as guinea pigs to develop the site’s look and feel. If each page is quite different, a general overall design style is the first priority, and then I start work on creating something that truly shows off the content.
Your message is the most important thing – which is why templated websites don’t work. Your design has to fit around what you want to say and what you want to show to your visitors. I recommend you don’t ever try to fit your content into someone else’s design… it just doesn’t work.
Bonus Step 4.5: SEO Considerations
If you’re replacing an old site, and your Google rankings are important to you, a whole load more work gets done here, and again before and after launch.
Essentially we want everyone to be able to find the content they want on your new site, even if they have bookmarks to pages on your old site.
Google is basically one massive bookmark collection too, so it’s important that the search engine gets clear instructions on what pages are at what addresses now. That’s the non-technical explanation, anyway.
Step 5: Tweaks and Snagging
Usually by this stage, your site is looking pretty much finished. By doing all the earlier steps, you won’t have any missing sections or naff looking pages. It should look like a blend of your branding design, everything you’ve used as inspiration, and your unique content.
At this point, take a step back and maybe a few days’ break from it. Remember where you started from and what your goals were. Does this new site need any tweaks or alterations to get you there? If not, it’s time to crack on and get it out into the world.
Step 6: Launch
This is where we plan how to get your new site live for visitors to browse around. I could write another 1500 words just on this step!
But I won’t. As long as I know everything about your existing website, email system and domain names, this is the bit where you sit back and let us do the tricky work of getting the new site live and in the right place. Quite often we’ll do the actual launch late at night or in some other quiet part of the day, so we don’t affect too many of your visitors.
So there you have it – our battle-hardened website project process.
Each step is as important as the others, so if you’re reading this as one of our clients, please keep on providing us with everything we need. It’ll be worth it.
