Website Design Process in 7 Easy Steps

I had a recent client that needed a fully polished website done in one week and it was a bit of a challenge, but I got through it and I'm going to show you my whole process on how I did that. And this video is sponsored by user centrics. More on that later. So step number one is the proposal. So it was one of my friends clients, he runs an agency, not a design agency, but he does more of Facebook ads and social media marketing. And so he needed a designer and he's like, hey bro, send me a proposal so I can shoot it to my client, include it. So I was like, all right, cool. I jumped on notion and bam. Within an hour or two had a proposal done for me. I don't like doing fancy proposals, it's just big time suck. So I love just doing a simple one pager in notion. What I usually do is have a nice template in notion where I state the goal, I show the deliverables, I also show the timeline and the pricing. And what I like to do is I like to have three different offers. In this case I had a logo only offer which just has not much strategy, just literally just the logo design and some brand guidelines. Then we had the full visual identity with some assets like, you know, social media, graphics, business cards, et cetera. And then the logo design. And then we had the biggest package which is my main offer was the full brand and website package. And that basically had everything you need, the essentials to really launch this brand. So you can see this, how I structure it, laid out, just really clean, simple, just straightforward, no fancy design. I don't have to show any of that. And they picked the full package. And so we did a full identity and a website. Now the next thing I do is a discovery document. Typically I would have a discovery template in Illustrator that I go through, but for this project we decided just to do a Google Doc. Really easy and simple. The main thing you want to get is all the key nuggets, information and everything you need so you can move on to the design phase which will include mood boards and all the creative work. So we just got the business and the story, their vision, goals, the brand expression. We also asked them about their users, what they want to feel from the website, you know, brand keywords, certain aesthetics that they want. So this really kicked off the project and it was really easiest. Shoot it off and you get it back within a day and then you can jump straight into the moodball phase. And a little hack that I do just to save me time is I'LL drag that doc or just export as a PDF, drop it into my custom GPT, and then I'll ask it to summarize the whole document, and then I'll basically get back a structured response for each element of the discovery. So, for example, you know, the brand positioning statements, the voice and tone, the target audience, the services offered, basically use that to start creating slogans, taglines, you know, all those things that I need for the graphics and the things that I'm designing. So I think when it comes to speed, this is one of the best things to do to make the process really fast. Now, once discovery is done, I jump into rapid design, which is step three. So, so what I do is I go in straight into mood boarding. Now, it's one of the funnest things of the process because at the research, get to look at different ideas and images. I like to go to Cosmos, I use dribble, Behance, and sometimes I'll go on other websites, like design blogs and stuff. But for me, I presented three main mood boards and then I was working on one, but I didn't get time. We had like a scribble paint one, like graffiti, bit of artistic vibe, some brush paint style. And then you had sort of like these cinematic portrait shots, more of a red color palette. So I thought this was cool. We wanted to keep everything friendly, authentic and fun. Then I moved on to this one, which was connecting line and more of a boulder logo with all caps. Thinking of maybe we could use some of these sort of fat, like, lines with grain. Thought that was cool with some of these pinky purples. Then next we had number three grainy gradients. I really liked the colors. The color palette here. And then this one, I was thinking of, like, maybe have a mark, like an end mark or something. And. And so round grain and vibrant was the keywords for this. Now, you know I'm a big fan of AI. One of the tools I've been using is recraft. And part of the design phase, I use that to create illustrations and icons that you see on the website. If you enjoy seeing the process of me creating something, just leave a comment below and hit that like button. It really helps because we picked the grainy gradients. Mood board, they liked round forms. That's soft, that's friendly. We stuck with like, sort of these intersecting circles, which means, like, you know, connectivity, inclusion. A bit of fun, warm. You can see a lot of the things I was creating. I was creating some images as well. And I'm not gonna go too Deep into the prompts. I have other videos for that. And then once we were sold on the final design, you can see, created some ones like this, really fun, textured, grainy circles. And then I created some illustrations like with this. And I created my own custom style. So with Recraft you can create styles and I always do that for my client projects. And you can get these really fun illustrations like this. And I made some patterns, exploring different visual graphics we could use. So then part of that rapid design process, I jump into Illustrator, start using typography, start creating some logos. As you can see some of the process here, I had the main text of the brand, keywords and taglines and things that I need. And you can just see me just exploring, creating different ideas. And this is just round one. You know, typically we have a few rounds. Sometimes I do the one concept approach, but it just depends on the project. So you can see a whole bunch of ideas here, exploring. Started creating some, you know, here images for the ui. Thought that was cool. And that led me to our first presentation, which looks something like this. Did like a recap of all the goals, the brand Essence mood board. And then we had our first logo direction. So this is what I ended up with for the first round. And I didn't want to do too many mock ups because it just takes time. And so, yes, you can use AI, but I like to keep it authentic and real and speedy. And then we had direction number two here. This was another fun direction. I like the colors and logo. That was cool. You can see some of the marks there, some of the details. And so that was round one. The next part we did around two. There was a bit of an issue with the logo. I felt like it wasn't hitting. And I got some feedback from some designer friends. And it's always good to get feedback because sometimes, you know, something feels not right. And so we ended up not going this direction, but I pitched another final direction. And so you can see we ended up going with this direction here. Really love this idea with the love heart in the sense of the G and the gradient just worked really well. And I customize the type. As you can see, the T flows nicely, the round shapes. And I just kept it really simple. You can see the final design as I just quickly go through this. And here was the early design of the ui, the hero image. I always start off with the hero image because once you get the hero image done, then it sets the tone for the whole website or landing page you're creating. So that was really cool. It was lots of fun. Once the identity was fully approved, we jumped into step number five, which is selecting a template and start building the website. Now, when you need a website done very fast, especially in one week, you want to use templates because it's going to speed up the whole process. You can customize it however you want in Framer. And we picked Framer because it's, you know, optimized, it's speedy, it's easy to update. So we ended up picking one of the templates from here. We ended up picking this one, Deformo, which is really cool. So this. So the first thing I do when I jump into a Framer template, I go to the Styles page. This is where it's gonna have all your text styles, color styles and components. And we just wanna update that with the approved Visual Identity brand we built. So I'll go to the left hand side, go to Styles, go text styles. And you can see you got paragraphs and headings and everything that's already created in the template. I'll usually click on this and start updating all of the headings, the paragraphs, updating the colors. Upload my custom fonts. And it's super fast to do in Framer. Come through, add link styles. You can see all the colors, all the brand colors that I had to update and change here. Like if you have a vector icon set, you can come in there and adjust, start adding those in. And then after that, what I do is use page templates. I always start off with the nav bar and then the footer so I can set all that right. And then I'll go in and start working on the homepage first. And then once we have that, then I can just duplicate sections. I can update parts of the design that I want. And so you can see here was the initial design that we had. So you can see from the Illustrator file, it looks similar to this. Started building out some of the custom designs here, the sections, and then I also took out some sections. I always take out things that we don't need. We can always add it in later. So you can see some sections here. And then one of the great things about having a frame template is that it is responsive. I did have to tweak some of the text styles and stuff, but you can see there, it's fully responsive. And you can see some of the designs here. And we tweaked it. So that was the first round. Did this in about two, three days. And then after getting quick revisions, we did some changes. And it's turned out really awesome. Now before step six where we launch and over deliver, I always want to help my clients be compliant as possible when it comes to cookies and their website. And that's why I like using CookieBot from User Centrics. They help businesses be compliant and it's totally free for small businesses, which is really great, but if you're larger, it's only about $8 a month. It's basically a cookie consent solution that allows businesses to be GDPR compliant, CCPA and all the main ones that you see from the global governments. And the cool thing is it works with anything. WordPress plugins, Squarespace, Wix, Frame, our workflow, whatever you're using. So I just installed it just by doing this. So once you start up with a free account, you'll be in a dashboard at the back end. And what you got to do is click on domains and just click add and add your domain. Then it should add that into your account. And then what you want to do is go to configuration and then you have full control over how you can create your consent cookie solution. And what I want to do is go the layout. You can change it to a bar at the bottom or a dialog box that pops up. I also like to play around with the settings. You got style effects, overlay or none and then you want to go to design. I typically go with the light theme and you can change the button styles. You can go mixed. You can also go outline to make it more subtle. So it's really up to you. I typically go for something more subtle so you can see the outline there. And you can also add your logo. If you want to display logo on banner, you can go ahead upload your own custom logo. I've got my client's logo there, which is cool. And then we want to click on compliance on the left and you can choose if you want to imply consent or explicit consent. And then you can change the type of solution. You got a multi level. So if you want them to be able to choose more preferences, you can do that and you can see an example of what it will look like. You can do just accept only if you want. Really simple, you need to accept or deny. You've got inline multi level and a do not sell or show my personal information. So we could do accept or decline. You also have extra settings here that you can play with. Then you and you can do it for all visitors or only certain people in certain countries. So I'll probably go to Oceana and go to Australia there as you can see. But you can tick all visitors if you want to just be extra safe. And then once you're done good with that, you can literally click Save changes. It also can detect the language that the person is using in their browser. So you've got default language will be English. Make sure you tick auto detect language. So automatically do that for you. You can also add custom languages as well. So you got everything here and you can click that and it will add it right there and we can delete it. And then you can fully customize the actual text on the banner that pops up. So you got the heading text, you got the buttons as well. So you can fully customize that to your liking. Then what I want to do is go to privacy as well. You can show the privacy button on or off, you can update the pixel. So Maybe you want 25, 25, like this light theme. I'll go bottom right and I'm going to click save changes. Beautiful. Now once you configure the style and your template design, you want to go back to your dashboard and click on implementation. Now you got the CMP banner here. If you're using WordPress you can easily use the plugin or Google Tag Manager. It basically helps you step by step, really easy to do. You can also embed the cookie script which makes it easy to use on any website. And then you've got some installation guides and you've also got Shopify, you got Webflow here, Squarespace, you got some pre built templates for implementing there. So what I can do is come to the here to the right side, I can copy to Clipboard and then what I can do is go back to framer and in Framer you want to go to the top right click on Settings and scroll down, make sure you're on the homepage. And then what I want to do is go to custom code and I'll paste that in the header tag, click Save. Just make sure when you publish it that you publish it not just to your staging so, but to the full website. Just want to click deploy and we're going to test it and I'm going to show you what it looks like. So as soon as you go to the website you can see it's fully working. Cookie Bop, the CMP solution, the consent solution, you can see it's a clean banner here and you got all the details and about. And then all we can do is put our mouse and we can click Allow and it's fully working on the back end. Super easy to use and set up. And then your business is going to be compliant. And then if you want to see all the tracking reports, you can go to cookies and reports and you can see all the trackers cookies, you can add ones, you can also check the analytics and to break down all the views. And so it really is free per month. You can have one domain with up to 50 subpages. So it's great if you want to try it out or just use it for one of your client websites, I will put a link in the description if you want to try it out for your business. Then lastly, the last step is launching. I make sure that all the SEO for every page is good. That's really easy. And one of the cool things as well, if you want to do things like Alt text in Framer, you've got Alt text generators, which you can come in here and I can just use AI to do it. And then because it's a number for profit, I added this plugin called Axe Origin Accessibility. So when people are on the website and click this little button on the left and you can change the font size. Let me just scroll down. You can change the font size, letter spacing, line height, you can change the font invert colors. So it just makes it more accessible. I'm not sponsored by this plugin. I just actually thought it was really good and you can use it. That's the great thing about framers. You can have all these cool plugins that just speed up your workflow. And then I do a test, as you can see, GTMetrix, it got performance of 90%. So I want to make sure that all the videos and images are compressed and optimized. And Framer does a bit of optimization as well to make sure it's fast and running smoothly. Then you just connected the domain to the website we polish and we're good to go. So the key thing with doing a website in one week is there's no secrets, there's no magic. It's literally just having a clear systemized process that works every time, that makes the whole process smooth. And for me, it works. And by choosing the right tools like Illustrator, Re Craft and Framer and Notion just makes it really easy to just get the ball moving because speed is important running a design business. You don't just want to to be creative and designing, but you need to learn how to do business really fast. And you need to learn how to move quickly and make your clients happy. Because at the end of the day, you know, time is money and they need to focus on their business and you need to be pushing the boundaries of your designs. So thanks so much for watching. If you do want to try Cookie Bot by User Centrics, I'll put a link in description below. Try that. It's completely free and your clients will love you for it. If you do want to learn more about website design, I do have a framer course that you can check out. Or you can watch some other videos here on my process of creating another client website. Hope you have an awesome day. Talk to you soon.