9 Website Design Best Practices for Small Businesses in the Creative Industry in 2024

[00:00:00] Welcome to the Inspired Brew, a podcast for small businesses crafted with intention for coaches and creatives alike. I’m Ingrid, your host and resident brand and web designer. In each episode, I’ll bring you insights, tips, and tricks to help you grow your business and achieve your goals. Whether you’re just starting out or you’re looking into taking your business to the next level.

[00:00:21] I got you covered, so grab your favorite brew Sit back, and let’s get inspired. Hi, and welcome to another episode of The Inspired Brew. My name is Ingrid, your resident brand and web designer, and today I’m gonna go over nine website design best practices that I think every single business owner should at least go through once and at least once in a while.

[00:00:38] So let’s go right in.

[00:00:39] The first best practice that I wanna go over is understanding your target audience. And I know that this one sounds so basic, but it is actually something that a lot of people skip through and it’s kind of different to understand your target audience in relation to your website, because I’m not talking about who do you serve and you maybe have a really specific niche and you can tell me, oh, I serve coaches that have been in business for three to five years and they are breaking their six figure ceiling and going into seven figures, and you can gimme all their backstory.

[00:01:15] But what I’m talking about here with the website best practices and focusing in our audience is how do they consume content? How do they purchase? Are they fast purchasers? Are they slow purchasers and they need a little bit more information and a little bit more time? What is their behavior in relation to a website?

[00:01:32] So think a little bit deeper with your target audience in how are they really gonna be using your site.

[00:01:40] Here are three tips for you so that you can define your target audience way better and make your website truly speak to them. 

[00:01:49] So the first one is: Learn a little bit more about what kind of content they consume, what other websites are they visiting? what kind of offers are they purchasing? Things like that tell you more about the kind of content that they expect or would be good to expect on your website so that you know that it is really much flowing with what they already like and want to see.

[00:02:13] The second one is to actually use surveys or feedback forms. I know that this one is something that a lot of people are gonna say, well, you know what? I actually do send feedback forms, but not every single client fills them out. 

[00:02:25] You can follow up with them. Please don’t be afraid to follow up. We all get something in the way and we forget about those little things, but to you, this is not a little thing.

[00:02:37] Please follow up getting those feedback forms. It’s crucial because you get their own words. For you to use in your marketing, please do so ethically and ask them, Hey, can I use this testimonial in my website? And things like that. But take a look at the words that they’re using to describe the problem. 

[00:02:55] “Hey, how were you feeling before you hired me? What were you facing? Why did you decided to look for someone like me? What made you book?” Things like that will tell you specifically what words, what phrases, what motivations to use in your own copy in your website. So it is so powerful and something that I don’t see people using enough.

[00:03:13] Now the third one is actually using something like Google Analytics or Google Search Console to analyze your data. So you wanna use the words that they’re using, right? And how would it sound to you to go into a tool that can tell you exactly what someone typed on their browser when they found your website?.

[00:03:32] That to me is pretty magical, and I love using Google Search Console for that. I literally like to see the queries that they are using because it tells me, oh, how effective are my keywords and phrases working here, and what pages are they seeing? Because you can see how many times your page has popped up in the search results and for what searches specifically, and then how many times someone clicked on that.

[00:03:54] So it’s so nice to see a relationship between this page brought this many visitors and they were searching for this very specific thing. So I absolutely love using that. So take a look at your data. It doesn’t have to be Google Analytics, it doesn’t have to be Google Search Console. It’s just a matter of taking a look at what is driving the traffic, what kind of words are they using, because that way you can speak their language.

[00:04:15] It’s almost like you’re reading their mind.

[00:04:17] The second best practice that I wanna go over is actually your top navigation. Having something that’s gonna be very clear, concise, and not giving anyone a headache into what should I click, is going to be your best friend for your website. A lot of people have too many things in there, and this creates confusion and decision fatigue.

[00:04:37] I want you to lay the right journey for your people. So imagine that if someone is looking at that top website, they would be visiting from left to right here in the Western world, and your far right should always be that contact booking, schedule a call, whatever is your ultimate goal for your website.

[00:04:54] Keep it on the far right. Don’t fill this top menu with everything and anything. Make it your top six pages or top six elements that you want people to click on. And if you wanna have more things, because I know that happens. My own website has over 13 pages in the core suite. Let’s not even talk about the inner pieces, but between shop and education and my four services and my home page and my about.

[00:05:18] It just, it’s too much. So keep it to six that are your core. And then anything extra that you wanna include in there, you can have a hidden menu, something like a little hamburger, just like we have with mobile. you can apply that to desktop and have something that drops down or that comes in from a slider on the right.

[00:05:33] Or even better make sure that your footer is optimized to hold all of those extra links. I like to always create a little quick link section in there so that we can list almost every single page. Please don’t list everything if you have 50 pages, but you can. 15 pages really neatly organized in a really small space so that you can have everything that you need and your customers have everything at their fingertips, but it’s not crowding the top space and you are really dedicating that to being the most powerful piece that they can have at their fingertips, right at the top right when they land and they can navigate your site and you help them in that customer journey. 

[00:06:10] The third best practice that I wanna go over is consistent branding, and you know that I can talk your ear out about that. And if you wanna go deeper into that, please listen to episode two. I dive so deep into every piece, how to pick the fonts, how to pick the colors, all that good stuff because I’m a nerd about all those things.

[00:06:27] But consistent branding is definitely a website design top thing that you need to consider because it’s a best practice to make sure that your branding is actually very much present in your website. Remember, this is your first handshake. That first impression and your brand is supposed to feel all over in every single page on your website.

[00:06:49] This is an extension of your brand. If I found you on social media or someone shared a link, I wanna make sure that there is no disconnect, that I’m not breaking some trust in there just because my website is not really looking like my brand should. And it is very easy to fall trap to that because it’s like, well, I can use some of my colors, but then if I want to introduce something different or if I don’t remember the hex code, if I’m not repeating that, like subtle little things can really break it here.

[00:07:17] So we wanna make sure that the brand is consistent throughout your website.

[00:07:21] And here are three tips for brand consistency that you can use to guide you as you are building or revamping your website. The first one is super simple. Stick to only your brand colors and only your brand fonts. I know that it is so tempting when you find a new pretty font or when you find a pretty color that you wanna use.

[00:07:40] It might even look good with your color palette, but if it’s not in your original brand color palette, please don’t use it.

[00:07:46] It’s not worth it. You are just gonna create confusion. You’re not gonna create a strong experience for your people. Forget it. Stick to your colors. Stick to your fonts.

[00:07:56] The second is to use your logos or logo marks in your website in very specific places. So now this doesn’t mean plaster them all over because honestly, this is gonna sound so funny coming in from a brand designer, but we don’t really use our logos as much as we think we will. We really don’t. So having your logo in the top menu is a great part.

[00:08:16] Having it in your hidden menu, if you have one as a little accent. Or if you are having your icon or a logo variation in the footer, those things stand out so much and they create a really nice, smooth experience for your people. So really put your brand to use in the best way possible. Do not plaster it everywhere.

[00:08:36] Do not exaggerate, but you do need to make sure that it is there and it’s present. You are really continuing that brand exploration. You wanna make sure that the brand awareness is growing and that they are getting familiar with how your brand looks. 

[00:08:50] And third, make sure that your brand message is reflected throughout your website. This sounds so easy to do, but it’s so easy to not do it at the same time. You wanna make sure that your brand voice is felt throughout every single page. Every website should lead somewhere else, right? So you never wanna have a dead end.

[00:09:09] So let’s say you start at your homepage and then you give them options to move around. They have an option to even go to your about page, every single service page, everything needs speak and sound the same way from one to the other. And this applies also outside of your website. So if I am on your social media, on your LinkedIn or your newsletter, I wanna make sure that it feels the same way so that I know that I’m still speaking to you.

[00:09:31] You don’t wanna create any kind of disconnect. So take a look at your messaging and make sure that your website is sticking to your brand’s Message Foundation and your message framework. Again, if you need a little bit more of an in depth view into that, listen to episode two because I break down right there.

[00:09:47] . The fourth best practice that I wanna go over is mobile responsiveness. This is huge. If you have been living under a rock, new slash websites that are not mobile optimized are not gonna be ranking well at all because search engines like Google are really penalizing people that don’t have a good mobile responsive site, but not even showing them the results.

[00:10:05] So you wanna make sure that your mobile site is as good as your desktop site. So make sure that the experience that you’re giving someone on mobile, if that’s the first one, if that’s the 100 one, it doesn’t matter. It has to be a good one.

[00:10:17] And it has to allow them to navigate, find what they need, book you do not make it hard for them to book you. 

[00:10:23] And you can do this by taking little steps and thinking about how do you actually. A website when you are on a computer or a tablet and how to use it when you are on a mobile phone, it’s completely different.

[00:10:36] A lot of website platforms say, oh, we are automatically responsive, but sometimes that literally translates into we’re just gonna shrink everything to fit on your mobile device, and it’s just gonna look a little bit weird. You have to test your mobile experience. 

[00:10:51] I particularly love using Showit as my website platform because one, it’s no code. My clients do not wanna learn coding. 

[00:10:57] Second, it is giving you the opportunity to build your website in both mobile and desktop use at the same time. So you can have both of them side by side if your screen allows for that, or you can just bring one up and then the other. But the point is that you have separate experie.

[00:11:12] So you can design your website for desktop in one way and change the elements and arrangements for mobile. So that is huge.

[00:11:21] So you wanna make sure that you are working with either a template or a platform that is going to allow you to have a good mobile responsive site. And if you need some help with that, I know a great web designer that can. Now also keep in mind that your platform will help you or be not so helpful at the same time.

[00:11:39] So pick something that is going to give you some flexibility into how your mobile website is going to be looking on mobile devices.

[00:11:45] And also make sure that you’re testing your website because. Again, it’s so nice to see it all on your desktop when you are designing away, and then you never really test your own site on your phone. And that’s a big mistake because sometimes you catch something that you totally miss when you were building it.

[00:12:00] It’s like, oh, this image might be too large or too small, or this text is not reading right, or it’s just cutting off. You always wanna have that good space around the pieces and make sure that you take note when you are visiting one of your favorite websites. See it online and you are using it on your phone, just take a little note on, oh, you know what?

[00:12:16] I love this experience here because this or that, or, I love how they did this little thing here. Those pieces, they count for so much. It’s the little details that you’re giving just someone a little delight when they’re using your site. 

[00:12:27] And finally, one last thing from. Make sure that you are optimizing your site for it in terms of speed, because a slow mobile site is going to be your immediate goodbye. I’m not staying in here. 

[00:12:39] And this applies to everywhere. Like it doesn’t matter if it’s just on mobile device, even on desktop, if someone is having a terribly slow experience, there are leaving and never coming back. So I’m gonna go deeper into optimization a little bit, but just this little fyi, it really does matter on mobile too.

[00:12:55] Now the fifth best practice that I wanna go over is image quality. Using high quality images is really going to make it or break it for your website. A good image can help you tell the story and that is so cliche to say it, but it truly is you are supporting your message and your vibe and your brand with the images that you use on your website.

[00:13:15] So by making sure that the images that you’re putting out there are actually going to feel right to your brand, speak to what you’re saying. Let’s say if I’m a copywriter and I’m talking about my services. And I say something about me writing it and doing it for you. If I put an image of someone typing or writing, your brain is making that connection.

[00:13:35] Like it just sounds and feels right, because I’m reading it and I’m seeing it. Everything is connected and it’s supportive in what I’m doing. 

[00:13:42] So if I’m a copywriter talking about my services, I’m not gonna put a picture of a tiger looking at me very intensely about to eat me. that is a great safari photo. That is a great adventurous experience, but it might not be the best one when I’m talking about my copywriting services.

[00:13:55] Yes, there is a time like to break the rules, but very intentionally, and that’s great, but just be very mindful because your images are gonna help you tell the story. So these tell us about what goes up there. Curate your images to make sure that they are what you need and what your audience needs to support the message that you’re giving them.

[00:14:12] So, three things that I want you to take into account is :The first, make sure that the images are actually high quality. You don’t want any pixelated images. You don’t want any blurry images, nothing that’s gonna be tiny. Make sure that they are commercial use. If you’re gonna be using stock photos, but high quality images, that is gonna be the best start.

[00:14:30] The second thing is please at least use two to three headshots of yourself. By all means. I know it’s not the easiest to be just like in front of the camera, but having at least your face in some key places allows you to build trust with your audience, first of all. And second, it just humanizes the brand.

[00:14:46] This is not a robot. This is not just a wall of texts that I’m reading. I’m talking to a human, like there’s another human on the other side of the screen. Make sure that you connect with them.

[00:14:55] And third of course, using the images that will fit your brand and the aesthetic and the vibe, it’s gonna carry on that brand consistency that we were talking about.

[00:15:04] The six best practice here. It’s one of my favorites, by the way, calls to action. Minding your calls to action is something that I. Stress enough for anyone that has a website. 

[00:15:16] We were talking about how the pages carry the goal and you move people from page to page, you move them with calls to action, and I like to split mine into four main categories.

[00:15:26] This is just how I do things. So let me break those down for you.

[00:15:29] The first one and most common one is the invitation type of call to action. So this one is moving people literally from place to place. So we are telling them what do we want them to do next?

[00:15:39] The second one, it’s the exploring call to action. So this one is really used and used well when we are giving them options to go to more content. So if they’re going to a blog, to a podcast, to somewhere where there’s archives of pieces that we are letting them explore in roam into more than what they’re reading right Then the third one is the self-identifying call to action. These ones are some of my favorites, especially for those that have a lot of, services or a lot of offers that they’rer, wanting to put in a single page. And you really want to give each its own space, right? So the self-identifying one is where you give someone their own, pick your path option in here. If you want a graphic example, just go to my website penguindesigning.com, and you’ll see that I have in my home page, right under the header, there’s the little section, and then it just goes straight up to working together. And I have four options to pick from one for each of my main services, and each one has its own little description of a call to action so that you can click on it and it takes you to that page.

[00:16:36] So I’m being very intentional into pick your adventure here, and I want you to do the same. It is not okay to just let them roam around and be like,you do you, here are all of the things that you can do on my website. Bye. Like you really want to make sure that you are giving them the handheld tour in your website.

[00:16:51] This is your online home treated as such.

[00:16:54] Now, the fourth one, Is very much what a lot of people use and sometimes they use it incorrectly, is the immediate call to action. So this one, as it sounds, it has an immediate thing that’s gonna happen. So for example, if I have a call to action that says, book a call, I expect the action to actually be book a call, take me to the booking page, take me to the calendar, take me to where I need to go.

[00:17:18] Do not have an immediate call to action that is supposed to have a specific result, and then make me click on more things. You just lost me with that. Honestly, these calls to action are so common because we all say like, oh, book now. Oh, do this, do that. Is it really doing that? Test your own website. Click your calls to action.

[00:17:39] Read them and click on them and see if the action that followed was actually what it was supposed to do. Or if you are putting a little bit of a barrier there, or if it’s actually not even taking them to the most immediate place that could help you create a conversion for your leads.

[00:17:55] The seventh best practice that I wanna go over is contact forms. 

[00:18:00] Oh boy. Contact forms. This is something that a lot of people take lightly in terms of, I made you get into the contact page. Woo-hoo. I want, no, not really. 

[00:18:10] You win once someone actually books. And what I want you to consider here is your contact form needs to be really accessible first of all. So have you tested your contact form lately? Go into the back end of your site, check that everything is as it’s supposed to, and then visit it like a visitor would. If you can navigate your contact form with your keyboard, that means you start typing in the first question, and then you go with the tab button and you move to the next question, then you’re good to go on that end.

[00:18:35] A lot of people have these all convoluted. You need to make sure that it is accessible because it just, it’s the good thing to do, right? But also make sure that you are giving them the questions that you need in the most succinct way possible. You do not wanna have a form that is 3 million questions in there because no one wants to fill out a long formulaire before I even get some information, some people are ready to book. Whoop. Maybe you can hear my dog. Some people are ready. But some people are actually looking for more information and you’re just making it harder because I do not want to fill out 10 million questions here only to be able to get to you and ask you something.

[00:19:11] So please make it succinct and clear, but also do take this opportunity to use your contact form to give you the right information that you need to serve your clients better. So if there’s a certain amount of information that you need from them, before you even give them information, make sure that is clearly asked in your contact form.

[00:19:28] So two things to look for in contact forms is: 

[00:19:30] Making it clear. Yes, I know being clever sometimes is so easy and it’s just Ooh, I’m gonna flair it up. But being very clear with the questions and making sure that 

[00:19:38] it’s. What you need as that first touch with them. It’s crucial. And then the second piece is if you can make sure that your forms are asking things that are relevant in a top to bottom way, or if your form has, conditional logic, make sure that you are tailoring that for your experience.

[00:19:55] All contact forms are gonna be different depending on what you are using. 

[00:19:58] I particularly use my HoneyBook contact form because it goes straight into my crm. When someone fills that out, it goes into my system and I can get their whole customer journey with me from lead to booking, send them in invoices and contract. Getting all my communication in there with them, like it’s just all comprehensive and holistic.

[00:20:18] I’m gonna leave you a link to HoneyBook and the show notes, but honestly, use what you want. 

[00:20:23] You may use the contact form that comes with your website and it goes straight into your inbox. Like whatever it is, just make sure that it is easy to use, easy to fill out, and then it gives you the right information that you need for that first contact.

[00:20:35] The eighth best practice that I wanna go over is search engine optimization. Now, this one is a whole topic on its own, so I wanna go over the birds eye view of this best practice because it’s something that we can all apply and that it’s important to go over more than once. This is not a set and forget it deal.

[00:20:54] But let’s start with the basics.

[00:20:55] Basically, when you’re optimizing for seo, you are taking the best next step to make sure that you are ranking in search engines. that’s the whole idea here. You wanna make sure that you are gonna be shown to people that are looking for very specific keywords or phrases, and that your website will be the best solution to what they’re looking for.

[00:21:11] This can help you increase your visibility, your conversions, your sales, whatever it is that it’s taking them to. This is what it’s doing. It’s making that connection between user and website.

[00:21:21] There’s like three like big range pieces that I like to look at from the optimization standpoint. 

[00:21:27] One is keywords and search, phrases that people might be using to find you or services like you. 

[00:21:32] And the second is what you can do instead of your page. So on-page seo. 

[00:21:36] And then the third one is, what can you do to get traffic from other sources in places that are gonna be linking to you?

[00:21:41] So anything that’s gonna be outside of your website.

[00:21:44] If you wanna learn more about in-depth Showit SEO optimization, I do have an in-depth article in my blog. I’m gonna list that in the show notes so that you can get a breakdown of all those pieces. 

[00:21:56] But let’s go over two key things here. One, conduct your keyword research. I particularly love using data from my own website.

[00:22:04] So if you have Google Search Console, you can see exactly what people are typing. That is huge. But also if you wanna have some extra tools, I really like,Uber suggests. So Uber suggests is a free tool, and I think it gives you like three free searches. I do pay for it because I use it for my clients and a lot of other pieces, but that is one that you can use to see what stats can it show you from keywords that are related to what you are trying to rank for.

[00:22:29] And it even gives you some options. So for example, if you’re trying to rank for, let’s say copywriting, it’s gonna give you different keywords that people are using, aside from just copywriting like it, it gives you a little bit more insight and that is fabulous to have, especially so that you can’t have some variety in the keywords.

[00:22:45] You never really wanna stuff a page with keywords. Google knows, search engines know they’re very smart. You are gonna get penalized if you try to just stuff keywords in there. 

[00:22:55] And then with that information, the second part is going on the back end of your website and optimizing your images, your headers, your copy, your everything.

[00:23:03] But just be very mindful. Every single page should potentially be targeting a different keyword. And think about it this way, I’m a brand web designer. Everything I do is gonna be targeted to, “I can build your brand, I can build your website”, however, My core page for branding is gonna be my custom brand and website service page.

[00:23:22] But when I’m talking about websites that include e-commerce, I’m gonna be talking about shops, and then when I talk about those that have courses or private things, I’m gonna talk about my memberships and so forth. Like you see how everything is related, but it’s not really eating each other and cannibalizing the same keywords.

[00:23:37] I’m not trying to rank for the same thing on every single page. Every page has its own goal and it has its own main keyword so that it allows it to show up more in more relevant search results if it makes sense.

[00:23:50] Now, the ninth and final best practice that I wanna go over is your website optimization in terms of speed. And I know that this is something that a lot of people dread because speed and performance has a lot of pieces and some things are under your control, some things are not. It was really dependent on what pieces do you have on your website.

[00:24:11] For example, if you are running a lot of scripts like, Hey, you have a little pop-up here, and you have a chat feature here, and you have a video feature here, like things like that add up into your code, and that does affect performance, so you need to be mindful of what you’re adding. But there are some things that are absolutely under your control.

[00:24:26] So in order for you to have the best optimized website, in terms of speed and giving, the best experience possible is you have to take a look at the graphic elements that you are including, like for example, your images. I particularly like to make sure that I downsize the images to 3,500 pixels on the long side.

[00:24:45] That gives me a really crisp image that’s gonna be high quality for big retina displays. And I’m already reducing the size because there’s some images that are gonna be over 5,000 pixels that nobody needs in there.

[00:24:55] The second thing is to optimize the actual file. So I like to use something like ShortPixel, and I’m gonna leave a link below in the show notes so that you can test that on your own. But basically what it does is that you drop your image and it will compress the file. Now, a tool like that has different settings. This one has three, and the glossy setting is what I like to use because it really compresses the file without losing quality.

[00:25:18] And that to me is exactly what I need because my clients sometimes have background images that we’re using side to side. And if someone has a big browser, like a big monitor, and they’re seeing that full screen. I want things to still be very sharp and crisp and high quality.

[00:25:33] Then the other thing that I want you to think about is your videos. If you are including any kind of video media in here, you need to optimize that video. For websites, if you’re gonna be using it as a background video, keep it under eight megabytes.

[00:25:44] That is already very much large. I try to keep mine under five, but eight megabytes is fine. There’s no audio involved usually really. It shouldn’t, autoplay on any kind of audio because that’s a very bad user experience and I’m so sorry for those that actually like it. But it is a really bad experience.

[00:25:59] So your videos without audio can be background videos and it’s all good to go. And if you’re gonna be including videos that need to be in between the information of the page. So let’s say that you have a, I dunno, a video behind the scenes and the experience. Maybe you’re a photographer and you’re showing what it’s like to actually have a session with you.

[00:26:14] You can host that on something like YouTube or Vimeo or Wistia or wherever you want. By embedding the video, you are actually allowing your site to be lighter because you don’t have to host that, you don’t have to hold that. It’s literally just gonna play and come from a third party, and that way you are keeping your site as fast as possible while still providing video to showcase that.

[00:26:34] And that is perfect for videographers as well. Your videos will add up. You will have a lot of things to show on your portfolio, and you want things to still be very optimized so that it can flow fast and easy. A really good optimized experience for your users is going to result in a better conversion rate for you because that means that they are staying longer, they’re getting the information that they need, and you have the opportunity to move them from simple viewers into leads.

[00:27:00] So there you have it. Super easy. I wanted to keep it very simple for you. Nine website design best practices that you can go and really take a look at right now and start making tweaks into your website to elevate it and to give a better experience and to those first handshakes that you get with leads and even the repeat customers.

[00:27:18] Maybe there’s a lot of people that go back into your website to learn more about new recipes, new articles that you produce, things like that, like you can always improve your experience. Doesn’t matter if this is not the first impression that they get with you. You can make it better every single time, and that would just bring more people in and keep them coming back.

[00:27:37] So really, by implementing these little tweaks here and there, you’re going to give them a better experience and help you as the business to create more opportunities for conversion and increase sales.

[00:27:49] So go ahead, put this best practices into use and get to action. 

[00:27:53] Thank you so much for tuning in into another Inspired Brew episode. I hope you found this one helpful, and I’ll see you on the next one.