Transcription
What if I told you that I could show you the perfect website design to sell to your clients to make them lots of money and make you lots of [Music] money?
Every business needs a great website, but unfortunately, most business owners don't know what it takes for a website to be great. And even more unfortunate, a lot of web designers out there also don't know what it takes for a website to be great.
Here's what it takes for a website to be great: that it helps the business promote or sell their product or service. That's it. So it doesn't matter what it looks like. It doesn't matter how many likes it gets on Dribbble or Instagram. What really matters is, does it help the owner of the business promote or sell their product or service to move their business forward and actually help them as a business? That's the question. If it does, then the website is successful.
Here's the two problems that we run into while we're trying to make websites successful. Number one, there's usually an overload of information on a website. This is a local plumbing website from my area, and you can see everything in the kitchen sink was thrown at this homepage. Logo far too big, testimonials and reviews up top, multiple calls to action, so many different navigation items, and different options down here. There's just far too much to look at. It's not singular in its purpose, and because of that, it's a bad experience and it's not going to help this company sell or promote their service as much as it possibly could.
Problem number two is usually on the designer side of things. When we want things to look beautiful and aesthetic, we tend to focus far too much on color, typography, imagery, and cool interactions and animations. You can see an example of a local wedding photographer site that I pulled up, and while this image is beautiful, what I see here is nothing about price, nothing about call to action, nothing about whether or not they're available, whether or not they're taking bookings. I see none of that right now because the designer and or the business wanted to focus purely on the imagery instead. Now, you might be able to argue in that context that photography is visual in nature, but there still should be some sort of call to action to make sense.
So, what I'm about to show you is the perfect website template made up of multiple sections that you need to have. Each of these sections in your website, and if you have each of these sections and walk through it and build them correctly and put the right content, your clients are going to make way more money for their product or service. That's going to allow you to charge way more money for your service as a web designer. Let's get into it.
First up, you need to master the header or the hero section of your website. The header is the first section of any website that people see, so you need it to make an impact. And here's the three elements that need to be in any hero or header section. Number one, very few words, concise words that explain what's happening. Now, I'm not going to give you an exact word count, it just needs to be scannable and it needs to be concise. Number two, clear call to action. A button, click me, work this, schedule now, make it happen. It needs to be clear and it needs to be a call to action. And number three, some sort of image or video that portrays or explains a product or service.
Let's look at some examples of these elements in situation, all right, actually being applied. Now, this may not be the most visually attractive website, you might argue, but does it have very few words? Yes. Fast response for electrical service, call or book online now. Awesome. That's concise and clear. Does it have a clear call to action? Yes, a button. I would argue this button could probably be elevated or made a, you know, different color to stand out a little bit more, but it does have a clear call to action. Lastly, an image or video that portrays or explains the product or service. Yeah, we have electrical work.
Here's another example. This is my 30-day UI design program. Says, "Become UI design job ready in 30 days." That's clear and concise. Now, there's a little bit of extra text you can read if you need everything to be explained, that's fine, but it's pretty clear and concise. Does it have a clear call to action? Yes, enroll in the program. If you'd like to see the curriculum, you can as well, sure, but we have clear call to action here and here. And lastly, I have a video that users can click on to play.
The header should always answer a couple of questions, and these are the questions that that hero should answer. Number one, what are you offering? What's the offer? What is the product? What is the service? Is it a course? It is. Is it electrical services? Is it plumbing? What are you offering? Number two, how will it make your customers' life better? When we go back to the example of my UI design course, it's telling you that you're going to become UI design job ready in 30 days, right? That's how it's going to make your life better. It's going to give you a journey to craft a portfolio and launch a career with confidence. Very clear, very concise. And last question, what do people need to do to buy or work with you? They need to click this button. They need a schedule now. That's part of that CTA.
If your hero section can answer these three questions and have these three elements, it's going to be a success.
Next up, we have the negative stakes section. This section of your website should paint a picture of what's going to happen if they don't take action right now. What if they don't schedule? What if, what's going to happen if they don't book? What's going to happen if they don't enroll in the course? Well, life pass them by. Will their pipe stay broken? Will they not be able to find a plumber or electrician easily? And a lot of times, you can paint those negative stakes like this. "Have you been frustrated?" This is an example of a real estate site. "Have you been frustrated by brokers who don't communicate with you, make big promises but don't deliver, cost you time and money with deals that fall through?" So, there's this emphasis here like, "Hey, if you miss out on this opportunity and don't click, man, it's going to cause you pain. It's going to cause you a headache. We can solve all those headaches." This is actually a Donald Miller kind of marketing 101 tactic where we are basically answering any objections we know that the potential customer is going to have. And so, getting these into your website as quickly as possible is going to keep people on that page, keep cruising, keep searching, and trying to understand whether or not this is the right thing for them to buy or use.
I want to take a moment and just talk about the sponsor of this video, which is Mobin. They are an ultimate go-to resource for UI/UX and web designers like you and me. And Mobin offers a wealth of curated, fresh, amazing inspiration. And you can go to the site and filter between things like iOS, Android, and web, and get all of these different inspirations. And click on any individual one of them, get the examples of not only that layout, but multiple other layouts that this website is using. And I can explore navigation patterns, color schemes, typography choices, and find the latest and greatest design trends all right there on Mobin. And it's a powerful search engine that allows me to go in and find individual or specific elements. Like, do I want to find app categories, marketing pages, specific businesses, websites, or applications? You can find all of that on Mobin. And the seamless experience makes it pretty much a joy to use. And so, you want to go and experience the creative possibilities firsthand and unlock design excellence with Mobin right now. The link is down in the description. Definitely give it a try.
Next section of the website should be the value proposition section, commonly called value props. It's a way for you to communicate the value that your products or service can deliver to a customer so they understand clearly what the service is. In the hero, they understand the negative stakes, and now they need to understand what that value is going to be. A really common way that people will do this is through these kind of value stack, icon, and title, and subheadline kind of layouts here. We kind of say, very quickly, you can visually scan it and identify, "Hey, it's easy online ordering, quality guaranteed, delight your loved ones." This is a really common way to do this. But there's also some newer, kind of more interesting ways to do this. Protopie, I can jump into how I'm able to do stuff for multiple displays or physical controls or real-time data. All of these are either feature or service or benefit-rich copy that's going to speak to that potential customer. So, if it's a plumber, you're speaking to people who need plumbing. And those value propositions should be very clear, concise, and really bring a lot of satisfaction and potential joy to the customer.
The next section of the website should be called the guide section. And that's a section of your website that positions you as a trusted authority or guide by showing testimonials or reviews or logos of the different brands that you have worked with. And really, this is establishing some sort of authority that, "Hey, this whole solution we're talking about, this is why you're the right choice to go with this company or this service provider." A lot of different ways to do this. Really popular would be to show all the different companies that you work with through some sort of logo section, or for instance, to feature all the testimonials and something like this. Now, this is kind of a debatable section as to where you put it. Some people want to put that higher up as social proof on the page, but I think it works well after they've seen that hero section and, you know, overcoming all those objections, seeing the value of your service or your offering, and then proof that that offering actually works by putting in those trusted logos and those testimonials.
Next section of the website should be called the plan section. And that's a way to show how easy it is to work with you, to show customers how awesome it is to buy this product, how what a great experience it's going to be. If I jump over to my agency website, you can see I have a "How it Works" section, and it talks about how it doesn't need to be a very complex process to hire good senior-level design work. Number one, you're going to subscribe. Number two, you'll receive designs. Number three, let's repeat. Let's do it over and over. We have a little section on tools, but primarily, it's about breaking down complex things and making the whole thing seem fun, intuitive, easy, and an awesome experience overall.
The next section of your client's website is what we call the explanatory paragraph. This is going to be an area that you write in long-form detail, and it's going to do a couple of things. It's going to give the customer more details on the product or service and the company. It's going to help them feel like they've done their due diligence, and it's actually SEO keyword-rich information. It's going to be helpful for search and organic traffic. Now, I have a script that I use for this that I recommend everybody download. There's a link in the description. But it basically needs you to fill in a couple parts, like the company name and what you, your clients want to be transformed by. And again, we're speaking about this from your client's perspective, speaking to their clients. So, if you're designing a website for a plumber, you're speaking to the people who need a plumber, right? In order to do that, we're going to need whatever that their customers want, and whatever there's an external problem that's identified for their customers, internal problems, philosophical problems, empathy.
Let's look at an example of how this might play out for a statement I would write for my creative agency at Good Fight Creative. Code that's my company. We know that you want to be, what is it that that you want to be? My clients want, they want to be successful product startups because that's my clientele. In order to do that, you need amazing digital product design. That's the service offered. The problem is that, and here's an external problem, senior-level talent is expensive and hard to find, which makes the internal problem, it makes you feel hopeless. Next, we believe that senior-level design, this is our philosophical statement, should be on demand and easy. And we understand how hard it is to design good products. That's us overcoming an obstacle and having empathy, which is why we use our 20 years of experience to do it for you. And here's the process on how we do it. Subscribe, receive, repeat. So here comes a clear call to action. Start a monthly design retainer so you can, here's the what failure looks like, stop wasting time and start. Here's what success looks like, start designing products that equate to funding and scale. This is a keyword-rich, explanatory, long-form statement that will be further down on any website that will allow users to get that rich, deep understanding of themselves, their needs, and how this product and service can satisfy those needs.
The next thing you might want to have, it is optional, but it's very, very helpful, and that's a lead generator. And the reason a lead generator is so important is because it's capturing emails for the business, for your client, and that's super beneficial. And any business could have some sort of lead generator tool. It's a free PDF, a free pack of this, a free instructional kit, a free video or training, whatever it is. It's something, something that brings value to the business's customers or clientele. And if that customer is not quite ready to buy or subscribe to that service or that product, well, then we can capture their email. You can do that for the business, and that's going to bring great value to the business. This is the type of strategic business thinking. It's going to bring a lot of value to the business, allow you to charge more as a web designer, as a freelance professional. So, consider generating or creating some sort of lead magnet and some sort of form to capture emails and deliver that lead magnet. You can do this very easily with online tools like Mailchimp or Flows or HubSpot. I'll leave some helpful links and resources in the description for you to learn how to build lead magnets for your clients.
Lastly, every website needs a junk drawer, commonly referred to as the footer. The junk drawer is the place where you're going to fill with other links and secondary and tertiary items that people might need to find. The contact information, the map, the whatever it is, shove all of that into your footer, into the junk drawer, so that it's there, it's available, but it's not detracting from the singular mission of this landing page or this marketing page. What we really want is to generate sales and revenue and leads and traffic for our customers, for the business. And to do that, we need to be a little bit more singularly minded and try to make everything else secondary, putting it into something like a junk drawer. So, definitely create an awesome footer that's easy to navigate, has a lot of great details and resources in it, and your customers will thank you for it later.
That's it. That's the recipe and the ingredients for the perfect sales page. We're talking about the perfect landing page. If you put this into practice, if you start implementing this process with your clients as a freelance web designer, you're going to be able to make more money. Why? Because your clients are going to make more money. Why? Because you are offering more value and strategic-level thinking and helping their business grow. And when their business grows, your business grows.
If you enjoyed the video, make sure to leave a thumbs up, subscribe to the channel, ring the bell so you know when more web design videos like this one come out. Check the description for a bunch of helpful links, platforms, tools, things that I recommend and use, recommend that you use as well, and we'll catch you in the next video.