FULL web design process [STEP-BY-STEP]

in this video I'm going to be sharing with you the web design process that has allowed me to 10x my income all while streamlining my actual client work down to just one day a week this is not a hack video I won't be showing you how to click one button and have ai do your entire job for you we will be using some AI to speed up our workflow but if anyone can generate a pretty nice looking website in one click then this means that your value as a web designer is in the strategy behind

a website this is what clients are paying you for and this is what I'm going to show you how to deliver in this video I'm going to be sharing my entire process with you holding nothing back all the templates that I'm using in this video are available below so if you want you can get these to save some time implementing everything you're going to learn here but otherwise by the end of this video you're going to be able to copy and paste my process to have everything you need to start delivering a $10,000 website tomorrow

so before we jump in there are two myths that I hear a lot of my comments that I want to put an end to right now myth number one is that if you are using templates then you can't call yourself a designer a lot of people think that to deliver value as a designer everything has to be 100% customer and you have to start completely from scratch on every single project this is wrong design is about solving a problem and so if you solve this problem for one person then it makes sense to take that

solution and reuse it to help more people solve this same problem and of course there's going to be certain Aesthetics and messaging that you want to be customed to each and every client but the truth is that there's a simple formula that works and stays the same for every High converting website and so you want to create templates as much as possible around the things that stay the same for every single project and what this allows you to do is deliver more and more value to your client you have more time to spend going above

and beyond to deliver custom Solutions when it comes to the strategy the Aesthetics and the messaging because you're not wasting time building out the same pages and features from scratch every single time and so myth number two is that you need to know how to code to land clients as a web designer all clients care about is is it going to make me money is it functional does it work and look great and how quickly can you deliver it they do not care how you get there so it's your job to choose the best tools

for the job that are going to make yours and your clients lives easier which is why even though I know how to code I choose to use no code Builders instead that make my workflow quicker and my client lies easier too so with that being said let me go through the tools that I'm going to be using so for the website build we're going to be using framer this platform is honestly the best thing to happen to me as a web designer I recently switched over to framer and it has made my workflow 10 times

quicker and you'll see why by the end of this video if you're a designer that's used to working in figma then this is going to feel very familiar to you the layout is very similar and it functions on the same free form canvas which gives you complete design Freedom so whereas before my design process would be to mock up the website in figma first before actually building the website in another platform now you can skip this step and design and publish the website within this one platform and unlike other Dragon drop platforms that are more

designer friendly like show it for example frer actually has much better structure and responsive design that creates a more robust website which is why I know a lot of web design agencies are also making the switch from webflow to framer so we're also going to be using figma to put together the strategy PDF to present to the client next up is notion this is where I manage my entire business and so you'll see a lot of the checklist list and templates organized in here and of course we're going to be using chat GPT to speed

up our workflow so to give you a quick overview of the entire web design process this is the timeline that I use for most of the projects that I work on and this is the best way that I found to break up the design process to give me time to get everything I need from the client and also minimize revisions by making sure I'm on the same page as the client throughout the entire project so I'll carry out some research and then we'll have our strategy meeting the strategy then needs to be approved before we

get to designing and then I'll break up the design into two phases first the homepage design and then the entire website and of course this timeline is going to vary depending on the type and size of the project and how quickly you can Implement each stage and this is going to come with experience so you'll want to give yourself more time and be patient with yourself if you're just starting out but a big part of the reason that I'm able to deliver this so quickly are the templates that I use to streamline this process which

is what I'm going to be sharing with you in this video so at the start of any project you want to spend a lot of time on the strategy this is key to saving time in your projects later on down the line making sure that both you and your client are on the same page before you do do anything else makes the rest of the project a breeze and it will help you avoid hundreds of revisions later on down the line it's also how you create a website that effective for your client's business and actually

makes them money which increases your value and allows you to charge more so in my website strategy I include brand messaging competitor analysis marketing strategy website strategy and design Direction so every project starts off with a call to ask a lot of clarifying questions and agree this strategy together with the client but to make the most of this meeting you want to do as much research and preparation as possible before this which is why I get my clients to fill in this brand questionnaire at least one week before the call which will give you the

information you need to start your research this is a strategy template I have set up in figma and before the meeting I will go in and start adding my notes to make this part easy we're going to use chat GPT to help us get the ideas flowing so here I have some prompts already set up for each stage of this process the thing with AI is that it can be extremely generic so for it to be effective you're going to have to learn how to craft expert prompts that are going to generate exactly what you're

looking for cuz the truth is you're not going to be replaced by AI but if you don't learn how to make it work for you then you are going to be replaced by someone using Ai and so it's worth spending the time to put together prompt scripts like this to help you with your research I won't go through all the prompts that I have set up but they are included in the template bundle below and so once you take the information that you have from the brand questionnaire and run it through chat GPT you're going

to have a great starting point but you still need to know how to take that information and use it to put together your strategy and the goal here is not to put together a perfect strategy because so far you've only had one conversation with your client and got some answers on a questionnaire so the likelihood is there's going to be nuances about your client's business and Their audience that you haven't fully understood yet but turning up to the meeting with these ideas is going to give your client an opportunity to clarify things and really get

on the same page with this messaging so that by the end of the meeting they have a really clear idea of what you're trying to do and you've agreed the strategy going forward so the first step is your brand messaging any website is 90% psychology and 10% design and so a huge part of your job is understand sales psychology copywriting and brand storytelling to help your client put together this messaging so the method that I use with all my clients is to put together this brand story script and this is from the book building a

story brand I went through how to put this together for yourself in this video here and the process is exactly the same for your client and so if you haven't already go back and watch this to get a more in-depth look at what a brand story script is and how to use it but essentially this is all about crafting a story for your brand or your offer in order to connect with your customers and get them ready to buy from you and to do this we need a really good idea of who the audience are

and what problems we're solving for them and so once you've clarified this and have run these through chat GPT to get some ideas flowing you'll be able to come in here and start filling this out for example these are the key messaging points from your story script don't copy and paste everything from chat GPT into here just grab bullet points and ideas because you're then going to go through this with the client and they're going to be able to add to this ideally they know what key problems Their audience are struggling with and what messaging

works better than anyone so going into our meeting my notes might look like this and then when I go over this with my client they can see where I'm trying to go with this so they might add a couple of extra points or tell me that these points here aren't really relevant to their clients and then after this meeting you can take this and write it up and the purpose of doing this and putting it in this document here is that it gives your client clear messaging that they can use throughout their marketing and their

website and they can then share this with their team or anyone else they're working with so the next step is competitor analysis so in your questionnaire you've asked for info about their key competitors and you can also do your own research here too because a lot of the time ESP especially if it's a smaller business that's coming to you they might identify their competitors as other smaller businesses like theirs because they think that those are the people that are on the same level as them but the reality is that as a small business your key

competitors are usually the big dogs in your industry these are the people that your customers are actually comparing you to and so it's your job to help your customer Elevate their brand presence to position themselves alongside these industry leaders so once you've identified who these people are you want to analyze how they set themselves apart what they do well and what are their weaknesses and this is going to help you identify the key opportunities that you have to establish your client's business and set them apart in the industry which is what's going to help you

put together your creative Direction now I know some people like to offer brand on web designs as a package deal or you might prefer to only work with clients that already have their branding sorted either is fine but regardless of how involved you are in the visual branding you still want to put together this visual direction to make sure you and your clients share the same vision before you get to designing so in your questionnaire you've asked some questions about their visual preferences and so now it's your job to take your client's vision any existing

assets and then combine this with your market research to come up with a visual direction that will really set them apart and Elevate their brand presence and so you can use this mood board here to show how the photography style colors and fonts are all going to work together as a web designer you're going to want to get really good at sourcing stock photography because clients almost always need help with this and this will really make or break your designs and so I've left a free notion workbook below and in this I have my web

designer toolkit with all the sites that I recommend for design inspiration and stock photog photography then on these next pages I like to create mockups of some website features and references that I'm drawing inspiration from this is really helpful to agree the design Style with your client before you start applying this to the entire website design and this is how you avoid huge revisions later on down the line then the next step is to take a look at their marketing strategy in this questionnaire you ask them about their marketing and this is important because an

exceptional website that makes clients a lot of money has to work in combination with their marketing a website without traffic is completely useless and so you need to understand how your client is planning on getting people onto their website and what stage in the customer Journey this person is at give you an example a location-based business like a contractor with no budget or plan to use paid ads is going to get the majority of their business from organic searches within their local area so if they're planning on getting their traffic from Google a huge part

of their website strategy is going to be centered on SEO this is going to be about creating blogs that answer questions that people are typing into Google and are relevant or even just related to their services and then these blogs will then need to nurture and build trust with their audience and guide them to the rest of their website where they have their services and their call to action but for me as a web designer I'm focusing all my marketing efforts on my organic content I'm not location based and there's a ton of competition when

it comes to ranking for web design on Google so I might want the capability to add a Blog later on but spending too much time and energy on an SEO strategy right now is not my priority and so the focus of my website is going to be on high converting sales pages with qualified traffic coming straight from my social media this audience already know about me and my offer a lot of the nurturing and the trust building has already been done when they come on to this sales page and so this is just about keeping

them on this page and getting them to take action and so hopefully you can start to see how your website works in combination with your marketing and So based on their current marketing plan you want to analyze your audience's level of awareness when they're coming onto the website and how your website is going to guide them through this buying Journey this here is what's going to help you put together your website strategy so when it comes to your website you have your clients goalss and you have your user goals and the website strategy sits in

the middle of this it has to satisfy the needs and the questions of your users when they come onto here and then effectively guide them towards the action that you want them to take so we want to keep this in mind when we're putting together our sitemap this is going to lay out all the different pages and all of the content sections on these Pages now there are a number of basic sections that make up any website and once you learn these it becomes very easy to plan this and piece this all together so within

this template bundle below I created a cheat sheet of all the key sections that make up a converting website with some different examples of how you can order them on different website Pages laying it all out like this is going to help you see how everything works together and check with your client if there's anything missing it's also going to help you with the next step which is getting your website content so after your strategy meeting you finish this PDF send it over to the client and they've approved this the only thing left before jumping

into designing is getting the website content and for most web designers this is the most painful part that can really drag out a project timeline so to stop this happening these are the templates that I use to make the this as painless as possible for both you and your client So within here I have these website copy templates there's a services and an e-commerce version depending on the type of client and then Within These there are guides on how to fill this in and then each page is broken down into the key sections with copy

prompts and examples these are also going to help you get everything you need for SEO website policies product pages contact form and so on in our sitemap we've already planned out our pages and laid out these sections and these templates are going to help us fill all this in and so what you want to do is check these templates against your sitemap to make sure that there isn't any additional content that you need for these Pages then once you've done that there are two ways you can use these with your clients if you are not

including copywriting as part of your project then you can just give this to the client and they can fill this in themselves this is what I'll do especially if it's a shorter project or a lower budget client this enables the client to do this part themselves and it breaks it up so it's easy to manage and your client knows exactly what you need and if they're working with a copywriter then often they want an outline like this so they know the strategy and the intention behind in the content but if you're including copyrighting in your

project which I recommend then I would use this template to get everything you need from your client again before your strategy meeting go in and make some notes in here basically to make sure that you know what questions you need to ask your client to fill in any of the gaps then you can fill this in as much as possible from the messaging that you've agreed in your strategy session once you've done this you can give it to the client to fill in any gaps and approve the messaging that you've written up make sure to

let them know that it doesn't need to be perfect just add their notes in here and then you will help them write it out properly it's up to you what works best for you and your clients but either way having these templates ready to go is going to make this so much easier and quicker so you can actually get what you need to start designing the website okay now is the fun part you've been waiting for most designers will be itching to jump straight into this from the start but all the hard work that you

put into the strategy and the website content is about to pay off the hard part is done and now you have as much freedom to be as creative as you like and if you've already set up your website platform with the right structure and templates ready to go then this part is really easy the last thing you want to do is start from a complete Blank Slate there are certain things that are going to be the same for every single website builder and so as much as possible you want to set these things up once

and then reuse this for every client which is why I recommend sticking with just one website platform because you can have all this set up and really streamline your workflow so let me show you how I have my website template set up as I mentioned before we're using framer here so you can design straight into the platform and when you're done all you need is to hit publish So within framer I already have the essential sections needed for every website laid out these are the same SE that we broke down in our website copy templates

and that we planned out on our s map and so the key to a really fast workflow is utilizing components and site Styles these are two things that a lot of website platforms have but framer has the most userfriendly setup that I've seen from a design perspective so each of these sections are set up as components and what this means is that when you make changes to one of these it will also change this section wherever you use it throughout your design so the most obvious things to use this for are your buttons your navigation

bar and your footer but a lot of the content sections will repeat on different pages too and so having these all set up as components means that you can quickly make design changes that Implement on every page at once all of these sections also use site Styles so that when you change your site color palette and fonts here these will change throughout the entire website too so what this means is that if you design everything in the right order then you can very quickly design and build an entire website in very little time so let

me demonstrate when I sit down to build a website I will always work for from a checklist here and so Step One is using the sit map create all your pages and put these sections in the right order step two is to change the site styles to set the colors and the fonts step three you want to make your way through these sections here starting with the global assets like buttons navigation bar and footer changing the style of these to match the visual direction from the strategy PDF and create a unique visual identity step four

now it's time to copy in the website content and design each of these sections starting with the homepage page you can see as I change all of these the other Pages start to fill out as well where we're reusing the content sections throughout the website if there are sections that will have different content on them on different pages then you can separate these from their main component for example you might want to show different testimonials on your sales page to your homepage and so you would change the design of the testimonial section on the homepage

first and then on the sales page you can select detach instance and it will let you change the testimonials here without making changes to the rest of these sections and so you can see that by doing it in this order you're able to very quickly Implement a consistent design across the entire website and because of how flexible the design is in framer compared to other platforms you can create a completely unique website in just a few hours and so this is why framer is an absolute GameChanger for web designers this is the smoothest and quickest

workflow I have ever had if you want to use this setup for yourself then you can get this exact framer template below with all the checklists that I use for Designing and launching a website all the other templates you've seen in this video are also included the brand questionnaire chat GPT scripts strategy PDF and website copy templates and so you can take all of this and literally copy and paste my business to start delivering websites like this to your clients tomorrow but otherwise even if you're not working in framer I really recommend taking the time

to set up the processes you've seen in this video in your desired platform because this really is the key to how I was able to 10x my income while working less than I ever have before after watching this video you have the knowledge to go away and deliver a website tomorrow and if you've watched the other videos in this series you also have everything you need to start attracting clients that are willing to pay this so if you haven't already done so make sure to go back and watch these videos and if you've made it

all the way through this series thank you for being here I truly appreciate all the love and drop me a comment below with what you'd like to see next on this channel