I would love to chat about our web development process. The steps we go through, and hopefully this is useful if you’re thinking about developing a site or building a site for your business. This could be useful.
Okay, well, number one, the brief.
So, first off, we need to find out why you need a new website and exactly what your goals are. We may need to dig deep and uncover your darkest secrets. Well, maybe not that dramatic, but we need to find out the why. We’ll always get a client to fill out an online form that we have on our website, which goes through a lot of questions.
Basic questions about the name of your business which is hopefully easy to answer. Going right through, target audience, budgets, websites you like, don’t like, and a few much deeper questions that really give us a good basis to build a proposal on, and build a brief on.
Sitemap
Once that’s all signed off, once we’ve shaken hands, once we’ve said yay to the job, we will move on to the first major step, which is the sitemap. Once we get all the information needed, we’ll build out the sitemap, so we can get on the same page really quickly. This acts as our map to structure the site, so we can provide the best user experience possible, and all the information for the sitemap really comes from that initial questionnaire and the initial discovery session we have with the client to really get as much information as possible.
Because obviously we both want to start off on the same level with the project, and we want to keep on the same level right the way through, and this is why a process is so important. If you are going to be hiring a web developer, a web design company, agency, to do your website, make sure they have a process. Ask the question right at the beginning, “Do you have a process?” And then wait for the answer. If it’s no, run. If it’s yes, find out what the process is. Just so everybody’s on the same page.
Okay, so sitemap, we’ve got the sitemap. Page structure, we know where all the information is going to be sitting on the site from the homepage to the internal pages, so we’ve got a really good idea of everything. From there, once that’s signed off, and this is the important part, make sure you sign off, and make sure you agree at every stage about what’s going to happen next.
So sitemap, tick, that’s great. We can sign off and move forward.
Prototype/Wireframe
The next step we go onto is the prototype/(wireframes) for the site. This is where we get a little bit visual, and this is based on the aim of the site. We build a wireframe for the key elements that are going to sit on specific pages on the site, where the logo’s going to be, the call to action, image placement, and other key functionality like contact forms.
This’ll show the general process of movement through the site from the client perspective, or from the user perspective, sorry. You’ve really got to put yourself in the shoe of your target audience at this stage, and work out that best journey for them when they hit the site. This is what the prototype does for the client. It helps them understand the movement through the site.
“This is the homepage, you’ll scroll down, you’ll see a call to action. This is where the video will be. They click here and it goes there.”
That sort of stuff.
So, again, this is an ultra important step in web development. Actually, this is probably the most important step apart from the sitemap. Just quickly, let’s go over what we’ve just done. The brief, the sitemap, the prototype.
After that, after we’ve got an amazing idea of the site journey, the sitemap, the construction of the pages, we head onto the visual part.
The Design
This is where we get to get creative and build a stunning brand-driven design.
Here, you may want to put your socks back on after this, ’cause it’s quite possible they’re going to get blown off.
I love getting visual at this part, and this is where the client can really start to see their branding, their business branding, their language, their colour, everything appear in front of them.
We’ll start creating a test development site at this stage where the client will be able to go back and reference as we’re building. So, this part of it is really important. Again, this is as important as all the other parts, and this is where every single part of this process, when it comes together, will create an absolutely amazing website for our clients.
After design, once brief sitemap, prototype design, where we’ve got visual, where we’ve put in the branding, and this is where the real nitty-gritty of the design comes into place. I’ve just said design about six times in a row, which isn’t any good. But once that’s signed off, we move straight onto the actual development and the coding of the site.
Development
So, everything really goes quiet at this stage, and all the secret stuff happens in the backend. There’s symbols, there’s codes, there’s Matrix style screens. Let’s just say we spend quite a bit of time indoors at this stage. It’s a good stage. This is the real nitty-gritty stuff. This is the real magic in the backend. This is where we’ll make your site quick, we’ll make your site functional.
This is where we build the site based on all the previous steps. Coding traditionally, two to three weeks, maybe longer, depending on what’s happening. Before all of this, we’ve agreed on the content, the client has put together the content. At this stage, we shouldn’t be waiting for any client content, and that should all be done. Be it through a copywriter or through their marketing department, or us helping them put it together.
Yeah, coding’s a very exciting time, because this is where all the magic really starts to come to the surface. Once that’s done, of course, we do our testing. Our testing is in conjunction with the launch of the site. Just before we’re going to go live with the site, we’ll go through a 22 point checklist of things we need to make sure are in place before we move across. At this stage, there’s a lot of stuff. Depending if we’re doing a full redevelopment of an old site, there’s a lot of stuff we need to take into consideration from an SEO perspective, redirects on old Google index pages.
Testing and Go Live!
We do our 22 point pre-flight check, and then launch it into cyberspace, so the rest of the world can visit it on computers, tablets, and smartphones. And definitely smartphones. Please ask your developer if they do mobile because if they don’t, again, run. Stick your Nikes on and shoot out the door, because every single site in the world should be optimised for mobile use. Tablets are definitely a dying breed when it comes to viewing websites, going by the data we have, but yeah, responsive sites are it.
That’s kind of it. After that of course we mandatory fireworks and we have party pies once the site goes live.
This is really where the fun begins, because once the site is up and running, there is a lot more to do.
Quick Recap
The brief, where we put together the information, what’s going to be happening with it. This is where we uncover your dark secrets. The sitemap, this is where we build out the visual sitemap of what’s happening. Where the pages are, what pages are. Prototype, this is where we start building the pieces together and we start to see things happening and get a little bit visual. Design, boom, stunning, brand-driven design. This is where the colour, the imagery, the logo comes in. Obviously after that the coding, and then the launch, and of course, as I said before, when we’ve launched, we have fireworks and party pies.
