How we build your website from start to finish

Hiring someone to build your website is not an easy to decision to make. Every web designer is different, and their process is likely to be completely different too.

You might have a number of questions and concerns, but, without spending hours on the phone speaking to dozens of web designers, how will you know who to choose?

This is why I wrote this article.

I wanted to lay it all out on the table and show you our entire process from start to finish, so you know exactly what you get when you hire us.

Below, I’ll walk you through the 31 steps we use to create a high-performing website that works FOR you!

1. We talk, usually via Skype

Before we start working together, we’ll book in some time to have a chat about your project. We’ll usually do this on a live video call and discuss what you want to achieve from your new website.

We’ll take a look at your existing site (if you have one) and we’ll go through your ideas for the new site. We can use this time to talk about your goals and objectives so that we have a better understanding of how we can help.

Essentially, this call is to work out whether we are a right fit for each other. I work only with clients who I can truly help, which is why this call is important. We’ll also discuss your budget, and I can give you an indication of what we charge.

2. Questionnaire

Following on from our initial call, we will send you a website questionnaire to fill out. This will allow us to gather additional information so we know as much as possible about your business before we start designing and building it. The more information we have, the better the finished product.

3. We send you a quote

Once we have all your requirements, we will send you a full proposal for our services, including all the website features you requested. We may also include additional elements that we think would work well for your website. More often than not, the fee for our services is similar to the price we discussed on the call.

We can also include a quote for creating your website content. Most of our clients hire us to write the text for their new website. This is an option for you, too.

4. Research

Using the information you provided on the initial call and the questionnaire, we will begin our own research. We will do a deep dive into your world, learning as much as possible about your industry and your competitors. We’ll perform some keyword research to find out what your customers search for online. During this time we’ll look at dozens of different websites, leaving no stone unturned before moving forward with any designs.

5. Initial concepts

Once we have enough information from the research, we then move onto the planning stage. This is where the fun begins. This is the creative part that I personally love the most. We’ll start by sketching out some layouts on a whiteboard. We use a lot of post-it notes and marker pens to come up with a basic wireframe of your pages. This begins the initial framework of your new site.

We’ll also discuss the main colours we’ll be using and taking into account what you already have and what we would recommend. We’ll decide on the best use of fonts and where to place your headlines and content for the most impact. We’ll also decide where your calls to action will go and how to ensure they are clearly displayed for your users.

6. Mockup

The next stage of the process is to take all the rough sketches and post-it notes and turn them into a work of art. Your website. We use Adobe Photoshop to pull together all of the pieces from our planning to create a mockup. We’ll position each element one by one and add some content to bring it to life.

Everything from your logo to your social media icons will have its own rightful place. Every inch of the design will be considered, informed by the research and concepts we’ve previously completed. Some of the initial ideas won’t work when we add them to Photoshop. And that’s fine. At this stage, there will be a lot of testing and trial and error along the way.

Chances are the design will change numerous times throughout the mockup stage until we are happy. This is one of the most import steps, and we’ll keep working on it until we have something that looks spectacular, is user-friendly and ensures maximum results.

Here’s an example of us building a mockup

7. You see the design

This is the fun part for you. This is the first time you get to see the design since we’ve started working together.

Once we are happy with the mockup, we’ll send you the homepage design via a video link. In the video, we’ll walk you through the design and talk you through each element one by one. By using a video, you get to see the full design as if it were a real website. We’ll explain why we’ve designed it the way we have and you’ll get to experience it before we move forward with the rest of the project.

Please note

Some of the items on the mockup will act as placeholders. This means if we are waiting for images and text from you, we may use stock images temporarily until we have all the correct information. Currently, your mockup is still a static document; the extra content can be added later on in the process.

8. Feedback

Once you’ve watched the video and had chance to reflect on what you’ve seen you can tell us what you think. You can also ask us any questions, and we can discuss what you want to change, if anything. This is your opportunity to let us know if we’ve missed out any key information so we can add it before moving forward with the build.

9. Continue with designs

Once we have the homepage nailed down, we then design the layouts for your other pages. You will generally have 3 unique layouts to choose from for your website. A homepage, an inner page and a blog page. We’ll design the additional pages using Photoshop like we did before. The colours and style will match the homepage, but the structure will be different.

10. Domain name

When we are happy with the designs, we then move onto the technical aspects of the process. We will register your domain if you haven’t already done so. If you have already done this, then we will use a temporary domain, which we’ll work on while we’re building your site.

Please note

Even though we register (and purchase) the domain for you, you will own it. It will be registered in your name.

11. Hosting

Along with your domain name, we’ll also purchase hosting. This will allow us to install a coming soon page and set up your email accounts so you can use them while we’re building your website.

Please note

If you already have an existing site, this will already be set up for you.

12. Setup of emails

It’s time to register your email accounts. This is where you get to decide which emails you’d like to use. You can have as many as you like. A few popular choices are yourname@yourdomain.com, info@yourdomain.com, sales@yourdomain.com and enquiries@yourdomain.com.

13. Install WordPress

The very first thing we need to do before we build your website is to install WordPress. WordPress is the content management system we’ll be using for your site. It will allow you to make changes easily, so you don’t have to pay us every time you want to add something. If you want to know why we ONLY use WordPress, then this article will explain all.

14. Add coming soon page

Once we’ve installed WordPress, we will add a “coming soon” page. This means we can start working on your website and we don’t have to worry about your customer stumbling across a half-built website. Instead, they’ll be greeted with a nice, warm welcome in anticipation of your brand new site.

15. Install the Genesis Framework

We use something called “Genesis” to build your website. It’s a WordPress framework that allows us to have 100% control over the technical aspects of your website. It also allows us to take your truly bespoke design and turn it into a fully functional website without additional “drag and drop” software.

16. The techie bit – Photoshop to website

We then take the Photoshop files we created for your mockup and your other pages and add them to your website. To do this, we create page templates for each unique design using a number of fancy tools and techniques (Code editors, FTP, CSS and PHP).

This sounds complicated and confusing, and it often is. It can take a lot of trial and error and is probably the most time-consuming part of the project. It needs to be done properly otherwise the website won’t look like the initial design you fell in love with.

We also have to prepare the site for mobile devices. The website will need to look good no matter what device is used to view it. We’ll assign a specific layout for mobiles, tablets, laptops, etc,.

17. Add pages and assign templates

We will then create all of the pages for your website within WordPress. Usually, we’ll just add blank pages with the titles, to begin with.

If this is a redesign of an existing site, we’ll also need to make sure that the URLs for these pages are the same as the old site. This isn’t always possible, so we’ll need to be extremely careful setting up redirects as we don’t want any broken links when you launch your new website. More on this in step 25.

18. Choose page style

Once we have added your blank pages, we then need to choose how each page will look by selecting the relevant template which we created in step 16. Generally speaking, the homepage and the blog page will be unique, but most of the inner pages follow a very similar style.

19. Add menu items

We then add your menu items to their assigned position. This is where we choose which pages will appear within the main navigation area of your website and order them appropriately.

You may have more than one menu on your website (e.g., sidebar, header, footer, etc.) so we’ll need to be careful not to duplicate pages. We also need to keep in mind the end user and how they can navigate through the site easily.

20. Add content

Once we have added all the menu items to your website, we can then add the content. We take the text and images for each section of your site and place them on the correct page.

We will arrange your content in a way that makes it easy to consume. There’s nothing worse than blocks of text with nothing to break it up. We’ll use images and headings to make it as readable as possible.

21. Plugins

We then install any relevant plugins to your website. Plugins are like website add-ons, and we’ll use them for most of the advanced features on your site. There are over 45,000 plugins to choose from, another great reason to use WordPress. Things like image galleries, contact forms, and social media sharing buttons can all be added by using these pre-made applications.

We may also adapt the plugins to make them look more in keeping with the style of your website.

22. API integrations

Aside from using plugins, we may also need to integrate additional applications from third-party websites. Services like MailChimp and PayPal use APIs so they can communicate directly with your website. Think of them as plugins on steroids. They will make your life easier and most major companies make their software WordPress friendly.

23. Test contact forms

We’ll go through your website, testing all of the contact forms, ensuring that they work properly and that emails go to the right place.

We can edit the form so you can gain any relevant details you’ll need from your prospect. We can also add more email recipients, meaning multiple people can receive your enquiries.

24. 301 redirects

If this is a redesign of an existing site, we’ll need to ensure all of your old pages are correctly transferred over using 301 redirects as we said in step 17. On occasion, you may not want to keep the old pages, or you might want to change the URLs. That’s fine. But we will need to set up 301 redirects for each page you plan on changing.

Essentially, we’ll communicate with Google exactly what you’re changing, so it knows where to redirect traffic if users land on a specific page in the search results.

Take this example below:

Old URL: exsistingwebsite.com/about-us
New URL: exsistingwebsite.com/about

We’ll make sure that if your old URL is displayed on Google, the page will automatically redirect to the new one. So no lost traffic.

25. Mobile friendly test

We will then test your website on different sized screens to see how it looks. During the website build stage (step 16) we assigned a different layout depending on the size of the device e.g. iPhones, iPads, laptops and desktops. However, we’ll still need to check it to make sure looks OK now that we’ve added plugins.

26. Page load speed

We need to check one last thing before we feel comfortable releasing your website to the world. We want to test your page load speed to make sure the site is running as quickly as possible. Google advises that all websites should load within 5 seconds to avoid any kind of penalty.

We use a number of tools to confirm your new website is as quick as it can be and we might even install some additional features to improve it if it needs it. The quicker your website loads, the better the experience for your users.

27. Cross browser test

There are many different web browsers, Chrome, Firefox, Safari and Internet Explorer to name a few. Each browser will display your website slightly differently. There’s no real way to avoid this but we do make sure to catch any major differences and glitches.

28. Yoast SEO plugin

We will then install the Yoast SEO plugin to your website. This is the tool that will allow you to optimise your website so that search engines can find you more easily. We will set it up for you and use it to verify your website with Google in the next step.

29. Submit sitemap to Google Search Console

Using Yoast, we can connect your website directly to Google. This means they can provide you with extra data about your website, and send you an email if you have any errors going forward.

We then provide Google with a list of web pages from your site so they can start listing them in search results. This is known as your “sitemap”. Chances are they would find your site over time anyway but this way they will keep their records up to date every time you make a change to your site.

30. Google Analytics

Once we have given your site to Google, we can then create your visitor tracking account. Instead of using fancy plugins for this, we use Google Analytics. This is a free tool that Google provide to show you everything you need to know about your website visitors. This will show you everything from monthly visitor numbers to the most popular pages. It’s a very valuable tool which you want to keep an eye on.

31. Rank tracking

We’ll add your website to our rank tracking software and keep an eye on how well you perform. From the day we launch we’ll have a record of your Google rankings and keep track of how they adjust within a month of launching. The main reason we do this for you is to make sure there aren’t any technical issues affecting your website’s performance.

Summary

So there you have it, our entire web design process from start to finish. I didn’t want to focus on the technical aspects of what we do. Instead, I wanted to show you the broad outline so can see what’s involved when designing a website. Hopefully, I’ve answered a few questions along the way. But if you have anymore, feel free to comment below!