Hiring someone to build your website is not an easy 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!
How we build your website from start to finish
Step 1: We talk, usually via Phone Call
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 phone call when you fill our enquiry form 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.
Step 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.
Step 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.
Step4: Upfront Fee Payment
Before we get started on a website development project we ask our clients to make an upfront payment of 70% if the initial fee.
Step 5: Research
After upfront payment has been made. 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. During this time we’ll look at dozens of different websites, leaving no stone unturned before moving forward with any designs.
Step 6: 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.
Step 7: Demo site Development
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.
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.
Step 8: 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 demo design via a link
Please note:
Some of the items on the demo 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 demo is still a static document; the extra content can be added later on in the process.
Step 9: Feedback
Once you’ve seen the demo site 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.
Step 10: 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.
Step 11: 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.
Step 12: 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.
Step 13: 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 [email protected], [email protected], [email protected] and [email protected]
Step 14: 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.
Step 15: 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.
Step 16: 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.
Step 17: 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.
Step 18: 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.
Step 19: 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.
Step 20: 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.
Step 21: 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.
Step 22: 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.
Step 23: 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.
Step 24: 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.
Step 25: RankMath Seo Plugin
We will then install the RankMath 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.
Step 26: Submit sitemap to Google Search Console
Using Rankmath, 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.
Step 27: 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.
Step 28: Final Site Testing & Launch:
As the heading states, this is the final stage, we test everything on the website, including the security and the rest, confirm that all is ready for Launch, then we launch the website.
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 get in touch