To help you avoid that, I’m giving you a peek into my proven, 5-phase web design process which has been refined for nearly a decade. This is my full process for planning, building and launching sites effectively.
The full process is actually 50 steps in these 5 phases which I cover in much more detail in my Web Design Process Course but this will at least give you a good outline and roadmap to follow.
If you like this and want the whole 50 point checklist, join my process course today!
In this episode:
02:51 – Featured Review Shoutout
04:16 – Diving in
05:00 – 1) Planning & Prepare
15:13 – 2) Layout & Design
21:04 – 3) Build & Develop
27:03 – 4) Revise & Optimize
33:17 – 5) Empower & launch
38:41 – Recapping
You can also view the full transcription of this episode below.
Featured links mentioned:
Episode presented by:
My proven 50-step guide to successfully planning, building and launching a website!
• Put an end to costly, scattered, unorganized web projects
• Learn the ins and outs of how to build & launch successful websites
• Save serious time on every website you build with my proven process
"This course is so practical … In each step of the course you learn some new treasure or how to improve something you are not doing well. I have practiced everything learned in the Web Design Process course, and I really feel more confident than before, my workflow is much better and I’m saving lot of time."
"This course is worth the investment. It does not matter if you are new to web design or have been doing it for sometime. There is something to learn. I have been building websites, and the problem I had was it took forever. I was always having to remember if I forgot something, or going back to make correction.This course provides detailed step by step directions, and flow process. The old saying is time is money. Which for me, means more potential revenue."
What’s happening Friends? Welcome in Episode 72. In this one, I’m going to give you a peek inside my web design process. This is my five phase/50 step proven process for planning, building and launching websites effectively. I have essentially refined this process for the period of almost a decade and it’s probably pretty clear as to why you should have a process to follow if you haven’t crafted your own. But let me just give you some of my thoughts as to why this is so important before we dive in. It is to help you build sites effectively and efficiently to help you save time above anything, because if you don’t have a process, it’s likely that your website designs are taking forever. And you probably feel really scattered. And I think most importantly, you’re going to forget something. So there were a lot of times before I had nailed down my process, where I would be like, Oh crap, I forgot to do this or shoot, I forgot to turn on the setting in WordPress that actually enables Google to index the site like they were some really big things that would seem really common sense that you shouldn’t forget. But when you’re doing a lot in a website design, when you’re working with the client, you’re doing project management, you’re doing all the design, you’re doing all the troubleshooting and testing, there’s a lot of things that you can look over. So having a checklist and a process to follow is absolutely crucial. So this is why I wanted to offer just the basics of my process to you. Now this is all pulled from my web design process course. So if you didn’t actually know, I have this in a full in depth course. And what I do in the course is walk you through each step all 50 steps, and I give you an entire process the entire process that you can actually watch me do through the course. For this episode, however, what I’m going to do is I am going to cover the five phases, we’re not going to go through every 50 every 50 step in this process, but what I will do is cover the five phases. So for those of you who aren’t in my course, and at least want to get a good feel for the process, you have the basics and you have a good outline, you can follow. And I should say this outline is going to be outlined for you in the podcast post for this episode. So you can just go to Josh Hall.co/72. And you’ll be able to take this and use it for your own young process. And of course, if you want the full thing, if you like this and want more, make sure you join my process course which will be there as well. And I’ll have a special offer for you if interested. Without further ado, though, let’s get into the process itself.
And I actually wanted to give another quick shout out to a recent podcast review. This comes from I am 99.9%. sure this is Shannon Morris, who was one of my star students because the name here on the review is S Morris. But she says great resource, even though I have actually or even though I actually have all the Justice courses, I still learn new practical things, every new episode of his podcast. Because of his courses and all of his free content, I have been able to make the jump from a completely different career into starting my own web design business. He’s a great teacher, and communicator. And I’m so grateful I stumbled across JoshHall.co when searching for a career in web design. Shannon, thank you so much for taking the time to leave a review. And I will just say as a direct note to Shannon, it’s been awesome to see her really take the reins and start this jumpstart this career in web design because she actually came from a teaching background. And she’s killing it. And early in her career, I’ve actually already started recommending her to a lot of people who are looking for some subcontractor help and freelance help and her web design agency is called Teresa web design. She’s based in Charleston, California, or Charleston, California…Charleston, South Carolina. So I’ll make sure to link that in the show notes. So again, if you guys leave a review, make sure you leave your name and your website address and I will link it in the show notes. All right.
So let’s dive into my process. Again, these are the five phases that we’re going to cover here. And each one of these phases has a lot of steps in them. And I’m just going to cover a kind of a few steps for each phase. These all take you from the standpoint of planning, and then through building and then launching the site and let me just review the five phases and then we’ll dive in each one. Phase One is to plan and prepare. Phase two is to do the layout and the design. Phase three is to actually build and develop phase four is to revise and optimize and phase five is to empower and launch.
1) Phase One – Plan and Prepare
Without further ado, let’s talk about not module one or phase one, I should say. And of all the thing, this is really, really important because I think a lot of web designers get into the rut where you just start diving right into the design, and you just start building a website out. Before it’s all planned out. Or before you have all the content from the client, which we talked about that in Episode A while back. Or maybe you just you’re so it’s You’re so itching to just getting going on the design, you start building pages out and do all these effects. But if you don’t have it planned out and effectively prepared, it’s going to derail you and it’s going to make your Web Designs take probably at least three times longer than they should. So where I like to start in regards to planning and preparing is actually before even talking with a client or before doing anything, I like to start off with an organized file structure. And I show you this in my web design process course. But I’ll just tell you right now, the way I always like to set up my folders in my files for client projects for websites, were to have four main categories. One category of folders was for client assets, this would include any content and documents that they send over that I’d want to store in there. And then I would also have a folder under there for images and pictures. And this is something that may be maybe just a couple folders if it’s a fairly simple site. But if it’s like a WooCommerce site that has 50 products, then that folder is going to have subfolders under it. So you could store this locally on your computer, or you could have these in Drive or Dropbox or whatever client folder management system you’re using. But having some sort of folder for client assets during the process is huge. We’ll talk about what to do with those assets at the end of the website launch in a little bit. So one of the folders that have client assets. This could also include like logins, or any special files that they have as well. But generally for me, it was always content, and images. The next one is to have their logo and branding any like style guides that they may have or brand styles. If they have a logo, you want to make sure, generally you’ll have a couple different types of files for a logo, you may have a logo that’s built for print that you can scale up and scale down. And then you can use that to create web versions of the logo. Or they may, if they have a professional logo design, or for those of you who do logo design, you’re going to make sure you have print and web versions ready as well. So that’s another big folder that I recommend having. What I did is well as I always like to keep my questionnaires on file in every client folder, because it’s always good to have them in the programs or contact forms that you’re using when you’re doing the onboarding for clients. But I always found it to be a really nice reference point to have the questionnaires in their client folder. And a lot of times if it came through like Gravity Forms or something as one of their first questionnaires, I would just download that and then store in the in the questionnaire folder, it was really beneficial to do this too, once I started scaling my business, because instead of having to relay all that information, all their details were in those folders in that questionnaire and it saved a lot of time. So that’s the big one. And then the fourth main folder that I had in all the client files was anything to do with the website itself, which would include backups, I always like to store a backup ideally within the development process in this folder. And then definitely, you want to make sure you store a local backup in the client folder. Once you go live that way you have a working backup, an entire backup the the WordPress files, and the database that has the pages and all the information, you want to make sure you have that in there just in case God forbid something happens or they ever want to refer back to the original site that you created. You want to have a backup. And then I would usually have a folder for any sort of like snippets or code notes. You can store these elsewhere as well, you could do there’s a variety of ways to store these. But I would often just save a little text file like an HTML or CSS file of snippets that I use on that project that I could easily pull into other projects. I’d be like, how did I do that header effect. And then I just go into the snippets find the header section and bring that over. It’s just an idea for you. And then a couple other folders and they are going to be the web images and any graphics that are on the site. This would be different from images and pictures and the client assets folder because these are the ones that you’re working with. And you’re optimizing and they’re like finished assets on the site. And then I also highly recommend that you have any working files and graphics. These would be like if you’re working on some background images, and you have a template saved in Photoshop, or if you have icons that you’re messing around with in Illustrator, you want to make sure you have the working files saved as well. That way don’t do what I did in the early days and delete all those files and then a year down the road. The client wants to add a couple new services and then you look for those icons And you’re like shit, why did I delete the original file, the working file. So take a take a page out of my book. And don’t do that, save all that stuff. So client assets, logo and branding files, questionnaires and website files. Those are generally what I have to start with a nice organized file structure. Now another big piece to this first phase of planning and preparing is to do some sort of wireframe and sketch. And I should say, too, we’re not getting into the process of working with the client. And this that is a separate process. I talked about that in depth in my business course, this is strictly building out the website. So I generally have those folders set up, ready to go copy and paste kind of situation. And then once we have all the information, we’re ready to start building, that’s when I deploy all that. So the folders and then what I do, because there’s really no right or wrong way to sketch a design out or have a wireframe i. So most web designers will have a wireframe, meaning they’ll have some sort of structure that’s like, it kind of looks like a template. It’s very simple. And then we’ll have the hero Section A call to action button that’ll have like Latin text for the icons and the services. And that’s okay. The problem for me though, without de railing on this topic too much is I actually don’t like wireframes. For a number of reasons. I prefer to sketch things out on paper, often, like old school, just get my ideas out for the layout on on paper. And then I like to go right into Divi, I like to design the homepage, and then a sub page, and we’ll talk about that shortly. But I find that wireframes, you can spend so much time on wireframes. And they often don’t translate really well to the actual design, particularly when it comes to using Divi and putting effects in. Now sometimes it’s a great way to save a lot of time, but I just don’t care for wireframes as much. I’ve also seen clients have a really hard time understanding how a wireframe is going to translate. Like if you show them the design of the wireframe. And it’s all Latin texts and stuff they’re like, I don’t know what to do with this. So as we get a little further into the process, I generally like to show clients a little more of a polished version of a design, because I found that really limits revisions as well. But in any case, I don’t want to get off on a tangent with wireframes. But it’s a really good idea initially to at least get your ideas out because one thing I found too, as a side note, I always discovered that when I landed a project, my best thoughts in my excitement and enthusiasm would often come immediately, like right after the proposal was signed, the first payment came in. So even if you don’t have time to start on the project quite yet, like on the computer, start doing the graphics and design. If you have some ideas, at least sketch them out, at least get them out ready that way you can refer back to them. So that’s why I like to do this. So early. Because we’re actually not designing the site yet. We’re just talking about the the preliminary stuff. But either way, it’s great to have some sort of initial sketch or wireframe. And then the next piece to this with this phase one of planning and preparing is to finalize a few things, your main CTAs your call to actions. And you’ll want to do this with your clients, you want to find out what their main call to action or actions are, whether it’s call, or get a quote, or request consultation, or whether it’s two different funnels for like realtors, for example, often have funnels for sellers versus buyers. So you want to you want to kind of find out because that’s going to help determine how you do all the steps moving forward. You’ll also ideally want to have a good idea of the menu structure and the actual page layout. So this is really important to do early on, because you don’t want to start building a site that has five menu items in the top bar, and then all of a sudden, your client wants to completely change it that could really derail the navigation of the site. There’s also a lot of SEO implications in that as well. So this is why really thinking through the menu and the nav structure. And the way the pages are going to be laid out as far as a hierarchy is going to be huge and this state. And I often do this via a text document, I show that in the process course I show you how I do this just with a simple plain text document, or you could do it with a Google Doc, just to get approval on that before moving forward before you actually start building out pages on the website. And then kind of the last main thing that we do in this first phase is to solidify the brand styles in colors. So you want to make sure if there are style guidelines or brand guidelines, you want to have those in place. So you know what colors are set. You want to make sure you know what kind of styles are going to be preferred for buttons and stuff like that. And and that way, you’re ready to move forward with all that in place. So you can refer back to that. And you can do this you can do some basic styling in the site, which we’ll get into next, but it’s always good to have as reference as well that way if you do print design or graphic design as well and you happen to need the color green that they’re using, you can have some sort of style guide and that one thing I show in the course Is that if it’s a simple type of client that doesn’t have an advanced style guide, you can at least save their colors and their main styles, their fonts and stuff in like a text document as reference. So that all goes into the planning and preparing.
2) Phase Two – Layout and Design
And then we can move on to phase two, which is the actual layout and the design. And we want to start off with just a plain set up, and ideally a staging template of the website itself with WordPress and the theme you’re using, which in my case was always Divi. So I’ve talked about this in a few different podcasts. But one thing I learned to do that saved a lot of time initially was to have some sort of staging domain, which means you already have WordPress there, you already have Divi or your preferred theme installed, you have all your main plugins that you always use. And the beauty about this is you can quickly deploy that to a staging site or a development site. And you don’t have to set up WordPress, you don’t have to go through all the settings. So you don’t have to enter your license for all your plugins. All that is already, it’s all there. And the real beauty is all of your plugins and everything is up to date, because before having some sort of staging site, the problem that I had was I would set up a website and then I would do this over and over and over and over again. And even though it would take generally only 20 or 30 minutes to do these initial steps, that’s still 20 or 30 minutes, minutes that I was wasting time on that I eventually optimized and was able to automate that process by just having a staging site. Now, there’s a lot of different ways to do a staging site, I what I ended up doing was using ManagedWP, which is what I used to manage all of our sites. And I would just have a staging site in there that was like a blank template. And on top of the actual WordPress settings and the theme settings, I also had our main pages in there. So generally, every site is going to have a homepage, gonna have a contact page is going to have privacy terms, I would have all those already set that way I wouldn’t need to go create those. Once I had a new website ready to rock. So there’s a ton of different ways to go about it. You can use manage WP and clone a staging site to a development site. You can also use local, or you can use Flywheel to do like local staging sites. And you can deploy those up to a sub domain or development domain or a new website. You can also do this through hosting companies now to a lot of hosting companies will have options for like a staging site. So a lot of different ways to go about it. Either way, set up your WordPress, install all the basic details, your theme, your plugins, get all that ready to go and have some sort of staging site that you can easily deploy, it’s going to save you a lot of time. That way you can use your energy best for the steps that are coming up with designing the website.
And that leads us into this next part in phase two here, which is actually set all of your initial settings, I am baffled by how many people don’t take the time to set up global styles on their websites. And if you’re new to web design, you may not think about that. But you want to avoid designing pages one at a time and setting all the theme styles and fonts and colors by page because first of all, it’s a very bad practice you’re gonna your site’s gonna look terrible, it’s there’s not going to be any seamless look or streamlined feel there’s going to be different font sizes, different colors. And it’s going to be really hard to update. You don’t want to have to update things by page, you want to ideally update things globally. So when you update a header of most pages, they update across all of your pages, the same style. So the best way to do that is whatever theme you’re using, get into the theme options and set all that stuff up. Anything you can set up globally, is going to be key. And going back to the idea of solidifying your brand colors and all that one reason I love Divi is Divi and most themes have this, they have a color palette option. So you can set your main colors in your theme options. And those colors will follow you no matter where you are in your site. So it’s a really great way that we’re going to go to a text module on one service page, the colors will be right there if you want to use them. So set as many theme options as you can make sure you get your global stuff set up. And then on top of this in Divi at least the next plan or the next step for me was always to go into the theme customizer set all of your fonts and typography settings so you want to make sure all your headers look the same. Now you can always adjust these and tweak these on a per module or per page basis when needed. But I was always about saving as much time as possible and not making things more difficult for myself. So I always try to stick with the same h1 style h2, h3 s main body text sizing, line height, all that good stuff. And with Divi you can set that in your theme customizer because again, a lot of people don’t know about that. And if you don’t go through some type of proven path or a good tutorial or my process course you’ll likely just start building your pages, one module at a time. And next thing you know you got one jumbled janky looking site So you want to set your stuff again globally. And with Divi in particular, you can start in the theme options, set your styles, and then go to the theme customizer to set your fonts, your with your padding, height and all that stuff. So you want to make sure you have that.
And then the last piece to the second phase of layout and design, before we start building out the entire site, we want to at least start with the initial design. So this is where it kind of blends itself in with the wireframe slash initial sketch, I usually take what I had there. And what I like to do, again, there’s no right or wrong way to do this. But what I found really beneficial was to do the homepage, like do the menu, do the entire homepage, do the footer, and then usually one other sub page, which would be like a service page, or an about page. Now, if you’re doing like a WooCommerce site or something, it’s more advanced, then you could do a product page, and maybe a couple different versions of certain kind of pages, depending on the budget of the website. And then I always like to show that to the client, which is going to help us go right into the next phase here…
3) Phase Three – Build and Develop
Phase three, which is build and develop because we’re going to talk about some revisions and stuff in this as well. Now, again, in this one, we’re talking about the process of designing the site and building the site not working with the client directly. But I will say this is generally where we get into the initial revisions for the website, because the worst thing you can do is build an entire website out and then show the client. And you’re thinking, Well, duh, Josh, Well, I’ll tell you this, Josh, early on, didn’t really think that one through. And he often did this, and it went over really well sometimes, which meant I had barely any revisions, but the time that it didn’t go over, well guess what happened? Yep, you can probably guess what happened, I spent about 10 times longer than it should have been because I had to go and redo every aspect every page. And it’s just a much better way to go to get approval of the design first. And it’s again, why I actually like to build out the front page and do some basic design so they can see it on a browser. Just kind of an FYI, I show this in the process course. But I always like to send a video, an actual video walkthrough of the design to explain why things are the way they are, what we did here, how it’s built for conversion, how we took their questionnaires, and information and molded design around that. And it’s always really saved me a lot of headache with revisions. So make sure you do that don’t just send the link over to the new site actually guide them through. Remember, your client is the hero, they are looking for a guide to guide them through the entire process. You are that guide, and it’s going to help you with revisions, if you do some sort of walkthrough, I don’t even like to do a strategy call or anything at that point, I like to just send them the video and then get their feedback to let them get some time to think about it. So you want to do that, to get at least the homepage reviewed, and then some sub pages, make any revisions necessary on those and then you can continue with building out and developing the site. So the next piece, once that’s done is to build out all the rest of the pages. And this is where depending on the project, this can be a fairly lengthy process. Again, if it’s a more simplistic type of brochure site, you can generally knock this out fairly quickly. If you have a template created for service pages, then you should be able to just plop the information in there, change the content, change the images. And as long as your settings are all set up with some global styling and stuff that’s set up to where you don’t have to do it per module on per page, this should be pretty, you know, pretty seamless and efficient for you. Same thing for the rest of the pages, you just want to build all your pages out at this point. And then I generally like to go for another round of revisions, kind of after I get the main pages done that way they can see those. And then we can move forward with this is generally before I even add too many plugins or the development side of things. This is more of more or less stylized design stuff. And I should say too, this is just for desktop I, I generally always save phone optimization and responsive design until next the next phase. So you’ll do that build out all your pages, you can also start to implement some SEO content. So if you have done keyword research or some SEO stuff, this is where you can start to implement that. You’re always welcome to set your titles and descriptions and stuff now but you can also do that in this next phase as well. And then once the pages are built out, then I get into adding any additional add ons and integrations like forms plugin like grant like Gravity Forms for contact forms, maybe there’s a calendar, something like that. That’s where you can do this. In this stage. I generally like to build the pages out first before doing plugins because once you start adding plugins and forms, you can get into some nitty gritty stuff with dialing those and working those out and getting them all built out depending on what you’re adding. So I generally like to get the creative stuff out first before moving on to some of the development stuff which can Be a little trickier depending on what you’re integrating in your site. So you want to do that. And then kind of the last main step for this third phase of building and develop is to make sure you have templates created and saved for your main pages, like, like you might have a page for, or you might have a template for your main services page, which is, you know, you might have like a header image on the left a gallery, some icons and stuff that are repeated on every service page. So if you do, again, to save yourself a lot of time moving forward, make sure that you create some global sections and templates out of that type of like service page. That way, if your client has, you know, like 10, or 12 services, you don’t have to go through each page to make those adjustments. And then along with the template ideas, any type of global settings, or sections that are the same across all pages, you want to make sure you have that formalized and saved here. And the prime example of that is I did a site for a home inspector a couple years ago, actually numerous home inspectors there for a little while. And one thing that I found really helpful was for home inspectors that had location base or location specific pages, what we would do is we might have like a location, like a service area, set up on all those pages, and we might have some scrolling testimonials and their main services. Well, you can imagine with like 12, area locations, service area locations, I didn’t want to have to go through each 12 pages to adjust those settings if they ever changed or what anything that was in those sections. So I just made those global sections. So if I changed one icon on this one section, it would change across all the other pages as well. So just want to be very cognizant, and think about making your life a lot easier moving forward. And the best way to do that, before we get into the final steps here is when building and developing, make sure you end off with revising, creating templates, and then setting those global styles as much as you can.
4) Phase Four – Revise and Optimize
And then we are on to phase four, which is to revise and optimize. So again, the previous phase before this building develop, this could take a matter of days, if it’s a more brochure style site, it could be a matter of weeks, if it’s a much more advanced style site with a lot of different pages. So I’m kind of giving you the path that you would take either way, but just know this isn’t going to be the exact same timeline for every project, depending on the project’s needs. But in any case, once the site is, once you’ve planned it, you prepared it, you’ve done the layout, you’ve done the design, and you’ve actually built out and developed all the pages added your forms and integrations, then it’s time to revise and optimize to prepare for the final step was, which is to launch. So I always at this point, you can do any of these steps in any order, it doesn’t really matter which which step you do this in which order you do it in. But there’s the main ones here that you need to make sure you have on kind of your checklist. One is the email inform testing, this is a big one. This is one that I always neglected, it seemed like until we went live. And I was kicking myself all the time. Because early on, I would do really good at preparing and design and building it out and then launching and empowering my clients. But then I’m like, Oh shoot, I forgot to take the test the contact form. And then if we went live, and they were actually getting contacts in there, they’d be going to spam or wouldn’t have that all set up. So you want to make sure you do some testing on all your forms, and any plugins or anything like that in this phase in the space for revise and optimize phase. So you can do that. Just a little side note, there’s a ton of different tools for helping emails get through although that they issue with with contact form submissions, going to spam is not just website related, it’s often due to the server or the setup that people have on their mail. So there’s a lot of areas and aspects to this. But I will say one tool that I always use and really helped me and I actually still use it on Josh Hall CO is Sendgrid which will help the emails get from being submitted onto a contact form or the website into your inbox without going to spam as best as possible. So make sure you use Sendgrid or something like that that will help. I’ve got some links on that on the show notes for this episode. But make sure you have something like that for your email form and testing. Then the next step is the optimization for mobile. So responsive design, and we’ll make in browser testing with this as well. Now, ideally, when you’re using Divi or a theme, most themes respond pretty nicely to mobile. And you should always keep mobile in mind when you’re designing and building out the site. But at this point, inevitably you’re going to have little things that you’re going to want to tweak on mobile. This is where you really want to make that happen and do a really good job and be very thorough. Now there’s a few different ways to do responsive testing. In browser testing, as well. There’s a tool called browser stack you can use to see what the website’s gonna look like on different type of browsers. Make sure things are looking somewhat decent on Internet Explorer before you go live, even though I only say in our contract, we only support a certain number of Internet Explorer versions because Internet Explorer what, like nine or something, it ain’t gonna work on that. So we’ll really say we work on, you know, we optimize for Chrome in the main browsers and the higher levels of Internet Explorer, because some CSS effects don’t translate. In any case, you want to do some browser testing. And as far as optimization for mobile and responsive design, and browser taste, and testing, excuse me, there’s actually a really cool new tool called Cizzy Cizzy this was actually brought up. And my new membership, which just launched at the time of recording this episode, I have a section in my membership, where we talk about tools and tech. And this one was mentioned, it’s basically a it’s almost like a developer’s browser. And it’s a way to see how your website looks across different browsers and also different sizes of devices. So it’s really, really cool, it’s a very quick way to do that. You could do it manually through inspect element and some other tools. But I would highly recommend checking sizi out very affordable, very worthwhile if you’re designing a lot of websites. So either way, you want to make sure you check the responsive design, and optimize it for browsers before moving on. And then the couple last things about this fourth phase, as far as revising and optimizing, is you want to make sure you finalize any content. So you want to go through either you are have a copyright or somebody go through and make sure spelling is good on the website. This is like my biggest bane of my existence, because I often will will overlook some spelling. So if you guys happen to see any misspelling on a podcast post, or one of my pages, just let me know, not gonna hurt my feelings, I need you to keep me accountable for that. It’s just not my strong suit. So you want to make sure if it’s not your strong suit, you have somebody who can revise that, or at least scroll over, I would often my wife’s better at that kind of stuff. So I remember, I’d have a website about to go live and be like, Hey, babe, look over this website. Let me know if you see anything. So do that. And then you’ll also want to make sure any SEO settings are finalized. So like I said, in the phase three, build and develop section, we talked about doing some preliminary SEO, whether it’s on site content stuff, and then if you’re using SEO, Yoast or rankmath, get those SEO settings in your main pages, ideally, your homepage, your main services, page location pages, make sure you have all the titles looking good, because there’s nothing worse than when you launch a new site. And then it says home, or you didn’t do any optimizing on the SEO settings. And then once the client shares it with their audience, if you didn’t optimize the title in the description, it just looks terrible. It’s but so you want to be in full control of what the site looks like when it’s being shared. And the best way to do that is to adjust the SEO settings. So make sure you do that. And then any final revisions that the client has and any final preparations for launch. Again, in this one, we already tested the contact forms made sure they’re coming through to the best of our abilities. we optimize it for mobile did the optimization for all devices and browser testing, we finalized content SEO settings, made final client revisions and a next we are ready to launch this bad boy.
5) Phase Five – Empower and Launch
And the reason I call this fifth phase empower and launch is because you’re not just launching the website, but you’re empowering your client, particularly their clients who are going to be editing and updating their website. So if that is the case, the first thing to do is to make sure you have some client training in in your site ready to go. A lot of times for clients who did custom things on their sites like blog post, or maybe they had a calendar or events calendar they were using, I do have a client resources page that has basically tutorials on all the main tools that we use, but if there is something specific to certain sites, I would always have a custom training video or videos and a custom dashboard. And I actually use the Divi dashboard welcome by Divi life, one of my favorite little plugins because you can create a custom dashboard in WordPress. So when your client logs in, they see a custom training video. And you can also they can use that as an upsell area, you can do training links, you can put additional services in there pretty pretty cool. So either way, make sure if you do have sites that are you or excuse me, clients that are using their sites, make sure you have some sort of training in there for them. And the next piece to this is so I meant to mention to would the training. Ideally, you’ll do this before you go live, you don’t want to go live and then do testing with training because number one, you don’t want to put like test blog posts up there test events, and you don’t want your client doing some some stuff on the website that’s either gonna look terrible or blow it up before it goes or after it’s already live. So this is actually the this fifth step this fifth phase is kind of right before you go live towards going live and posting Live. So this is right before you go live, make sure you do the training. And then here’s a big one, do a backup, do a backup of the site before you go live just in case, God forbid, something happened. You want to make sure you have a backup of the site. Even if it’s the test, just make sure you have some sort of backup, you can do that with managed WP, you can do it manually, there’s a bazillion and a half plugins where you can do a backup, make sure you back it up. I also recommend before going live that you do some cleanup. And I show you how to do this in my web design process course in detail. But you want to make sure you get rid of images that aren’t being used any files because a lot of times, I found that when I was designing a page, particularly like a template, I might create like five versions of a background before I finally landed on a really nice background. And inevitably, I’ll have like five extra images on the media library that aren’t being used. So you want to make sure you delete that kind of stuff, clean up any old plugins that you don’t need anything, any files, any images, anything you don’t need on site, clean all that up. And then you can go live. And then once you go live, here’s the big one. You want to make sure this we talked about this in a couple SEO episodes A while back, but you want to make sure you appease Google, which the three biggest pieces to Google are Google Analytics, Google Search Console, and Google Webmaster. So likely, more than likely, if you’re if your client is a local brick and mortar type of shop, they’re already going to have Google Webmasters, which will have their website URL, phone number hours and all that stuff. But very often they won’t have Google Analytics. So you want to make sure you set up Google Analytics. And then you can always give them access to their Google Analytics. And that will integrate with manage WP as well, which is really handy. And if they already have Google Analytics set up, they can just add you or your company’s Gmail, and then you can have full access to their Google Analytics as well. So you want to make sure you do that. And then in most cases, I would always set up Google Search Console. And that was a part of what I would call our SEO boost, which is a basic SEO service that we provide. Either way, guys, it’s worthwhile getting into some basic SEO, because when you build a website, you are responsible for a lot of the SEO, even though you’re not an SEO expert yet, maybe. But you’re still responsible for the basic SEO because that’s where people are going to go to find that service online. So you want to make sure you, you put it in Google Search Console. And then I walk you through how to do that. In my process course I show you how you can submit all the Sitemaps. Using a tool like SEO, Yoast, make sure all the pages are in there, make sure it’s all being read and indexed properly. That way, Google will find the site as quickly as possible. And then your life and in the very last thing I recommend doing to kind of cap this off, in this fifth final phase of launching is to do a post launch cleanup, this will be on your computer, practically, you can get rid of all the files you don’t need. Except like I said earlier, don’t delete your working files, because you may need those. So get rid of the file, get rid of the files you don’t need. You can also do this on the server. If there’s again, sometimes if you update it, or if you upload a plug in or something in your WordPress website, you’ll delete it on the website. But then if you go to the server, that file is still there. So I often recommend going into the server into the main plugins file and themes file and getting rid of themes that are standard WordPress that you don’t need. Get rid of any files that you don’t need, and you just want to clean up as much as possible. And then you can do a final backup of the site that’s clean, live ready to go and have that there. And and you’re good. That’s the process guys. That is it. So again, this is something that could take a couple weeks on smaller sites, it could take a couple months on bigger sites.
So let me just recap the five phases really quick phase one, plan and prepare organize your files, do some sort of wireframe, get your ideas out there, out of your head on paper on file, finalize your CTAs or menu in your page layout. And then make sure you have your brand colors and styles solidified before phase two, which is layout and design. And you want to make sure you have some sort of staging site when you set up the site to save you some time. Do all your initial settings for your theme options. Get into your theme customizer do the main settings for type typography, font sizing, paves swith, all that good stuff. And then do your initial layout and design ideally front page and one sub page that will bring you into phase three, for building and develop after you do an initial review and you get some revisions out of the way you’re good to build out the entire site, build your pages out, add your SEO, then do your forums or plugins and any add ons. Get all that ready. And then make sure you create any templates for repeating pages and global styles, which is going to lead us seamlessly into phase four. Revise and optimize. This is where you’ll make sure you test your contact forms. Make sure emails are getting through. Do your responsive optimization for all the browsers, browser testing and also different devices. And then make sure you finalize your content make sure there’s no bad spelling errors, final SEO settings and then do any final revisions before Before we dive into phase five, which is to empower and launch, make sure you empower your clients before going live. If they need client training, do a backup, do a cleanup, then go live and then add your site to the Google stuff. And then do your final post launch cleanup.
And there you go, guys, that is my revised web design process that I’ve revised over about a decade. took me a long time to get that. So I hope you appreciate getting the feel for that. And again, if you like this, and you want to take this to the next level, and you want to actually see this in action, and get my full 50 step checklist, make sure you go to the link on this podcast posts, go to JoshHall.co/072. And then you’ll there’ll be a link to the process course I actually have a promo out right now as well for a discount off the process course. So I’ll put that in there as well. Check that out. I’ve interested I would love to have you in that course and help you refine your process even further. Because you can really adjust this and make it your own and you’ll have a nice checklist to follow. I guarantee one project you do after going through my process course will pay it off immediately because you’ll save so much time and you’ll feel much more confident. I’d love to help you out there. So I hope you guys enjoyed this. thanks for bearing with me. I’m a little I’ve got some sinus stuff going on right now with some seasonal allergy stuff. So I’m a little bit stuffy, but hopefully you were able hopefully this was listenable. Hopefully you enjoyed it. Have some fun saving time. Hope this helps and I’ll see you guys on the next episode.