How to Design Websites for Small Businesses

[00:00:00]

Matt: Did you know that web design, and more importantly for this episode anyway, web design for small to medium businesses is actually a little bit of art and a lot of other stuff? You might think when you hear the words web design, you're like, "Oh, we're getting the wire frames out. We're getting the prototypes out.

We're getting the colors. We're getting the branding. We're getting all those things," and we are an extent, and we are sometimes getting really into it as well, but other times we're not, and there's a lot of other things that we have to design in order to make that website do work for the small to medium business.

And so we're gonna talk about web design or how to design small to medium business websites, talking about our procedures and how we've handled it for the last several years in our agency business. So if this sounds interesting to you and you wanna support the show, you can go and check us out on that Patreon, leave a review or rating on your podcast app, join us in our Discord server, or share this with your friends.

And if you wanna learn how to code, Scrimba has courses, and we have, uh, the [00:01:00] link for you. You get up to 20% off for new users with full details on how it works on htmlallthethings.com. That link is in those show notes on htmlallthethings.com as well, and also in the show description on the RSS description.

All right. So let's- Let's jump in here. Why not? Let's jump in here. So I, I, I've broken this episode up into several sections. I'm sure we'll just sort of, kind of liberally talk around, but the reason why I bring that up is because if you wanna kind of see my ramblings, but actually very organized in, in specific sections, lots of points and things, there's, uh, quite a bit in the show notes actually, um, on htmlallthethings.com, so definitely go and check that out. the very first thing I wanna talk about, before we talk about art, before we talk about colors, before we talk about brands and images and all this other stuff, you have to ask yourself some questions. You have to choose what web design service or services you would like [00:02:00] to offer. This is directed more toward people running an agency or people who are freelancing frequently for different jobs, making different websites or even web apps. will say, actually, just a brief thing is this is primarily toward my side of the business, which is more website and less web app, so it, it's a little more sort of biased toward that direction. But the point of what I'm saying is, you need to choose a design direction or directions that you are comfortable with offering a prospective client, you do this before you actually meet with them.

What you're effectively doing is you're choosing your pro- your service offering. If you think about it, if you had a services page, you might have several columns or several content boxes listing the things that you do, and in the web design chart, you may have one or two content boxes, and y- what you're gonna do is you're going to need to fill in that page. So think about that, and you're like, "Okay, I want one content box. Do I [00:03:00] want two? How many different things am I offering?" Now, first off, you might say, "Matt, you're just rambling. Like, web design is web design, right? Like, that's, that's it." I want you to ask, ask yourself these questions before filling in that service page on your website or even just figuratively filling in that, that page to get yourself kind of ready for a client meeting. Are you going to offer fully custom designs? Are you gonna offer fully custom designs for everyone? Are you gonna offer fully custom designs for large clients only or of a s- or, or of some scale? Because even though you're focusing on small to medium businesses, people who are running large businesses or people who are on the upper scale, the upper side of a medium-sized business may contact you, and they may have more needs, more wants, more brand identity, and they may need full custom design.

Are you willing to do that? Maybe that's not a service you offer. Maybe you're not familiar with that yet. Maybe you're not comfortable with that yet. Okay, so what about this? [00:04:00] Do you want to spin up sites quickly with a popular theme? Maybe something like a very popular WordPress theme. Something like you choose a theme that plugs easily into Elementor, and that's what you do.

You get really, really good with that theme. You learn how to... Usually you'll choose a very versatile theme, and so you learn how to use that versatility, and you could spin up a website that looks professional anywhere from a car lot all the way through, like, a ski resort. You could do that. Even maybe plug in e-commerce and things like that if the theme supports it. Maybe you get good with a couple of themes. But the point is, is that it's more cookie cutter, in fact, quite a bit more cookie cutter than a full custom design. you willing to do this? Is this something that you'd be willing to offer? Or maybe this is even still a bit too much for you, and this next one is gonna be for people that wanna offer speed.

So are you going to pre-prepare websites? Yes, you can do [00:05:00] this, and this is something that some agencies offer in order to lower the price, lower the time that they have spent, and lower the headaches of going back and forth with people over what colors and designs and, and margins and shadows and other things. What is a pre-prepared site? Well, maybe you will literally pre-make four websites and have a prospective client choose between the four. gonna tell them, "This is about 90% of what your website's gonna look like." And more or less if they, you know, let's say they choose option one, now option one is just a fill in the blank for you.

You erase your placeholder text, you add their logo, maybe you change the colors, and that's it. So it's a little more cookie cutter than just a theme As again, some of these themes are quite versatile, especially if you more or less make your own theme using Hello Elementor, which is, like, very, very customizable using the theme builder and other things like that. So this is a really important question, and this is something that Mike and I have actually messed up over the years, and we've also started to really [00:06:00] kind of over the years kind of hone in. Because the problem is, is we'll go into a, a business meeting with a very small client with very minimal needs, like they, they really need someone to use their contact form or something like that, or they're running an event and all the advertising is being done via paper and they don't care about SEO.

They just need this event site to run. But then you get caught up in this lengthy, and honestly useless at the end of the day conversation about web design. "Oh, I like 5 pixels padding instead of 7." Like, that's a worthless thing for somebody who's running that event site. That is 100% worthless. And so what you want to do, again, is envision that services page, whether you have one or not, and determine what you would put on that services page.

What's your ideal services that you would want to offer? if you say, "You know, I think a lot of people are gonna want fully custom designs, but I'm just not comfortable with it," if it's gonna end up costing you more money and time, it's gonna cause your, cause some [00:07:00] quality to slip or something like that, then offer one of the other options, right?

Or do the pigeonholing where someone has a tiny little site, don't offer them that. Don't offer them that full custom design. Offer them a pre-made site or something. But if it's some huge client, you really want to work with them, maybe then offer full custom design. Choose your service offering. This is extremely important

Mikhail: I, I think just like If you look at different sites around your ar- your, your local area, like do, do an experiment. Go, go to your local mechanic's website, go to your local hairdresser's website. If you're a serious web developer, a serious designer, you might roll your eyes. Like, I can see that happening.

But the reality is, is that think about the customer that those sites are targeting. They're not really targeting you. Like, you're not gonna... Y- you don't really need to go to their website. You're just gonna find them on Google and go there. Those sites are targeting an older clientele that values [00:08:00] looking at, like, services pages and stuff like that.

They're, they're targeting non-developers. Let's just put it like that, non-web designers. For those customers, like for those small business customers, it's a waste of their money, I'll just be blunt out and say it, to do a full custom design. It is almost 100% a waste of their money. Now, many exceptions, like there are exceptions to that rule.

For example, like a luxury e- a luxury, you know, boutique studio that's competing in downtown New York with all the Manhattan studios, you might have to look at that competition and decide, you know, okay, all these guys spent 20, $30,000 on their websites. You're doing, you know, your, your na- your numbers are crazy.

You need to compete with them. That's, you know, that's the, the, the job of the web agency that you hire to do that research for you and decide for you on that. That's what you're selling, in my opinion, when you're doing these kinds of deals. You're doing them the right service. [00:09:00] If you look at, like, a small town hairdresser, and you decide to do a full custom design for $20,000, you are doing them a disservice, no matter how good that design is.

I'm just saying it bluntly. It doesn't make any sense. You need to give them the exact service that they need at that time, at the right amount that works for you as the, as the web agency and the customer. And a lot of times, and I'm gonna say the majority of times, that's going to be a non-custom design.

That's gonna be probably something cookie cutter. If you're an agency, it's probably gonna be a template that you have already created or that you can buy or whatever, and that's fine. That's the o- Like, I think it's hard for us to let go of that. Uh, w- early on in, it, ear- in the early days, I was always like, "Oh man, like, I don't know if I like this.

Like, I don't know if I like this site. Like, it should be custom." Like, you know what I mean? Like, th- that was always difficult for me. But looking back, that's a dumb way to think about it. [00:10:00] Like, honestly, that's just naive and dumb, because I was almost doing myself and the customer a disservice right off the top.

They needed what they needed at that, at that time. You could do it at a minimal amount. Sometimes we were charging them minimal amounts and doing these custom designs for no reason other than to, like, a- appease our own egos, I don't know what it was, and wasting our own time, but You need to find that right balance, and it, it's different for every city, it's different for every customer.

That's your job, figuring out what they need

Matt: Uh, the disservice angle is extremely important, I think, because there's gonna be a ton of people, you were stuck at it, I was stuck in it as well, where didn't like the cookie cutter look. For example, if you go and look at a small town or an area like a county or something that has a collection of towns in it, and you look at a bunch of the small business websites in that area, oftentimes there will be one agency that's kind of, you know, advertised in that area and captured a bunch of those businesses, and their name will be on the bottom [00:11:00] of the footer. You click in there and you can take a look at their portfolio or just keep looking at businesses in that area, like we've already said, and if you look, there's a lot of cookie cutter stuff. You'll notice the same sliders, similar nav bars, similar contact forms. Sometimes it's very, very samey. Sometimes it is quite literally exactly the same, um, between the two, minus the colors and the images.

The design is, is identical. And I mean, that's fine. What we... What you're, what you're doing when you're designing Is you're not just doing the art, you're doing a bit of the technical side of things too, especially at the small to medium business scale where they don't have near in- indefinite resources.

They have usually very finite resources, and you're doing that disservice by giving them something that is $2,000 too much, and also costing you two months more or two weeks more or something like that. Mike's [00:12:00] 100% correct. If you... Even if you're in a small business, you mentioned a studio in Toronto, but let's say let's draw the scales down.

Let's say you take pictures at a tourist town, it's like a beach town or something. You can get some nice pictures out there, the sunset and all the rest of it. You're in an artsy business. You're not competing with the Toronto, the, the New Yorks, the big city art studios, but you're still an art studio. don't want your website to look like a bakery. You don't want it to look like a car lot. You don't want it to look like something that's just been tossed together. You have a specific look, that's important. Your business is based on looks. You're, you're doing images, you're doing, photography, maybe paintings, framing. Th- in that case, if the design is part of your job, then you have a specific design in mind. Now, here's the thing. You could still use a theme. You could still absolutely use a theme. You may- may be shopping for a theme, trying to find a theme, something like that. If [00:13:00] you're the agency offering it, you might be shopping for a theme for them to help them out because they're gonna be very particular, because looks do matter there. The point is, though, is if you go to, let's say, a small town, what's something common in a small town? There's usually a bakery, and there's usually a tax office, like an accountant. there could be... There, there is not much similar in their business, in their businesses. A baker is not a tax expert. A ta- a tax expert's not a baker.

I mean, it's possible for that to be the case, but that's, you know, very different businesses, but their websites can be virtually the same. It really is about the content, the pictures and everything because what the website is doing for these small to medium businesses with these finite resources is it is allowing people to do something for them.

The, the w- website is working for that person. So for the bakery, what does that look like? It might be people are booking a catering time and booking, "I need this many cookies," or whatever. [00:14:00] It could be common questions answered so their phone's not ringing off the hook. Like, "Hey, I need 100 cookies. Is that a catering job?

Do I have to call ahead? Can you just do 100 cookies? What's the limit of my order when I come in?" It... and these co- these questions will oftentimes be things that they're aware of 'cause they're getting the phone calls or someone's walking into the store and asking these questions frequently, and it's like, hey, let's offload that to the website because especially in the modern age, many people just want the question answered. And even if that person has never been in that bakery or never called, many people will go to the website. If they don't get an answer for something that they seem, they feel is simple, they won't actually go into the bakery, and so you've actually lost a client. My point is, that bakery website is trying to get that person leads. For the accountant, it could be, again, the same design of website, the same content boxes, the same buttons, the same whatever with different colors, maybe some different icons. Of [00:15:00] course, the logos and the pictures are gonna be different. So it's gonna be clear immediately that one's a finance office, one's an accountant, and one is a bakery. That's immediately clear. But what's the website doing for that accountant? Well, it could be putting up reminders. Maybe they have a little events calendar that says, "Hey, people, personal income tax is due on this day. You better get in here." Even better, they have a customized thing where they say, "Legally, they're due this day. We're filling up. Our capacity is filling up. We, we can only take another five income tax clients on the personal side this year. You better get in," right? Uh, maybe you have, like, an estate question when you're, and you're not sure, is this a, for a finance office? Is this for a lawyer? Maybe that finance office, that accounting office is constantly being asked these questions.

Again, an FAQ goes a long way. So you can immediately see how similar aspects work across, like both [00:16:00] need a form. You can use the same kind of content boxes. That's how... Like, the design matters less in this case. The website's doing work for them. It's letting their clients know deadlines. It's letting their clients know when to call for the cookie ca- catering. It's, and it, it, it's offloading work from the front-end staff or the people that are baking or the, the per- the, the receptionist at the accounting office. It's offloading work and freeing them up to do more important things I think ultimately what you wanna do with a small to medium business is you actually want to not do too much web design. Now, Mike, you, you mentioned you got- you were getting caught up on fully custom designs. I was too in the beginning, I think part of that, at least it was for me, was because it felt lazy. just doing a theme, like... And we would say that, it's just a theme. Ah, it's just a theme, like who cares, right? But what you [00:17:00] actually want to do is you don't want to do too much web design. You don't want the budget for web design to blow up for no reason. the, if the project calls for, let's just say 100 hours of design work, then the project calls for 100 hours of design work. But if the local car lot calls me and says, "I don't really wanna use Kijiji Autos," which is like Craigslist in Canada, Kijiji is Craig- and Craigslist are one in the same, different countries, I guess. " I don't wanna use Kijiji Autos anymore. I just, you know, I'd, I would just like to have my own website," not gonna say to them, "Well, we need 100 hours of design work." You don't need 100 hours of design work. I can go around, look at your competitors, ask you what your goals are, distill them down, and what you, what that person actually wants is a solution that works for them.

They want the cars listed. They want people to be able to inquire about the cars, see what the heck is going on with the cars, and arguably more importantly, they want to, and this is more on the technical side, but they want the CMS to be easy for their staff to use. Go outside, [00:18:00] take some pictures, and fill in the car, and press publish, and maybe even from a phone or a tablet or their computer at work, and they don't wanna be, "Well, every time I list a car, it's gonna be another 40 minutes."

They don't want that. y- you, you want to... You're trying to help these businesses. You're trying to be useful because that, I mean, that's what you're trying to do. Like, uh, your business is trying to be useful to their business. But it also gives yourself a bit of job security. If they see you as very valuable, a lesser chance of you getting removed, and they may bring you into their other ventures.

Many small business owners serial entrepreneurs or they know other entrepreneurs, and then they'll recommend you, and you can start getting into the referral game if that's what you want

Mikhail: There's, there's a lot of value in figuring out where you need to spend a l- most of your time, right? Like, th- that's essentially what you're saying, is that early on we were spending too much of our time in the design, and there's not a lot of ... Th- th- there wasn't a lot of [00:19:00] value in that time being spent.

We might have made some cool designs, whatever. We weren't spending our time in the right spots. Learning that, hey, you're not cutting corners, you're finding ways to spend the time that's allotted to the project in the spots that are gonna give the most return to your client, that's growing as an entrepreneur.

That's growing as a, a- as a business. That's what growth looks like. That's why you see all these websites that are very cookie cutter, because a lot of these businesses that I'm gonna say, like, are very successful. Like, if you go on a, like Matt mentioned before, you go on these, like, small town b- small town websites and they're all made by the same studio, and there's, like, they have, like, 200 people in their portfolio.

They're making similar websites. Great. Like, you might look down on them for that. Okay, sure. Good job. They have 200 clients that are all paying them probably retainers of f- 50 to 100 to $200 a month. They're living ... Th- they have a good living business because they know that that [00:20:00] website doesn't really matter.

The content on the website, the sty- like, you know, what the client or what the user clicks on matters. How the user gets to the website matters. All of that is where that you should be spending 90% of your time. The website is just a means to an end for, for a lot of businesses. Again, not everyone. You know, we, we can talk about that.

But, like, that maturity and that realization that you realize as you start to grow starts to compound with different things that you do. And like, I, I, I know we're not talking about AI in this, but like AI brings an element to this, right? A lot of these agencies are starting to incorporate AI, and you might think of it as like, you know, if you're a customer and you learn that, you're like, "Well, that's lazy," like they're, the AI's doing all the work.

A lot of times what that allows them to do is if they incorporate AI in, uh, ex- you know, ex-workflows, they can focus on the other stuff that AI maybe isn't that good at yet to make, to get more value out of the site that they built you. [00:21:00] That's the right way that an agency should look at optimizing, right?

The more time they can spend on the hard stuff, the lead generation, the right SEO, the competitor analysis, right? Like the, the, the copywriting, the, you know, SE- uh, the, the search engine rankings. Like all of that stuff that takes time. Like it's, it, it's not easy to do, and it's so different for every business, for every area, for every...

Like, there's so many nuances to it that unless you have unlimited time on every project, you're not gonna get it right. And so the more time you can give back to those things from the fluff of a website, the better product you could potentially build. Now, that's not gonna happen every time. Sometimes, you know, people are gonna take advantage of the situation and build more sites or whatever.

But that's the idealistic approach of how you should be thinking about it as, as an agency, is spending more time on the hard stuff by automating or making the other stuff easier, more basic, and non-fluff, fluffed up [00:22:00] for no reason.

Matt: And I think you'd agree with this point too, is not only necessarily the hard stuff, but the stuff that matters. Because maybe ge-

Mikhail: Yeah

Matt: you've got it down to a science, but you literally see that more hours spent lead gen means more money. You find lead gen very easy in your particular niche.

Again, you've got it down to a science. Why would you spend four hours messing around with whether a logo needs to be left aligned, center aligned, or whatever? Wouldn't you prefer to spend those four hours drumming up a lead or two? Makes

Mikhail: Exactly.

Matt: to be drumming up that lead. Um, and, and I li- I like the way you were saying it's like the maturing.

Like, you're mature- Like, the, us as an agency or a freelancer, we're maturing in that way because we're starting to realize we're more of a business tool and less of a, "Hey, let's have these super cool websites." There's moments like that, especially if you get contacted by someone who is, like, a hobbyist and they really want, like, a cool website.

We, we were contacted, uh, I actually bumped into him in person, um, a fellow who was basically [00:23:00] retired, and he just ran, like, a little shop, and it was, like, a shop that he did anything he wanted. He had a wine bar in there, he had some ice cream. Uh, he had, like, a painting part of it, and it's like this obviously is an, an un-ideal business from a business perspective, but he told me that. He said, "I've retired, I got the money to do this. This is kind of, like, a little thing I've always wanted to do, and so I'm doing it." And him and I were chatting over, like, a glass of wine that he offered for free. Uh, we were just kinda hanging out and, and we were just talking and, and he was talking about, uh, like, you know, he never ended up going with us, but he ended up with-- He was talking about, like, potentially going online.

He's like, "I just don't know anything about that world," like, what would that look like and things. And, like, that's somebody who's just in it for the love of the game. They're not really there to make money. In fact, he might be in the red. I have no idea what his finances are, but he might be in the red for that business.

Again, it's just something he wanted to do. He's retired now. And so that's the case, then, uh, I mean, you might say, "Okay," like, "let's just make a really cool website here." [00:24:00] We've had some clients like that, right? Where they're in it for the love of the game, and they just want something cool. Like, that's what they wanna tell their friends about. They don't tell their friends, "Look at how many leads I got." They say, "Go to the website, look how cool it is." a different type of project, and I think it, I think it, like, points to something I, I, I do really want to get into in this episode, which is distilling down what the client wants, actually. Like, having that initial meeting, a lot of it is gonna be, like, the business side, you know, budgets and things like that. But it's, a lot of it's the design, the web design. And what we're getting at is a lot of the time, a, a, if you talk to a small to medium business, they'll often just say, "I want it to work on phones."

We've heard that so many times. Like, "Hey, do you have any specific design requirements?" "Make sure my logos and my colors are on there and make sure it work- works on phones." We're told that probably six out of ten times, maybe seven out of ten times, 'cause they don't care. They're there because they want people to book their [00:25:00] services.

They're after the lead gen, and it's your job to take the meeting, and you gather all those business requirements, and you gather all the things that they're talking about, even if it's stuff that they're not asking for. Like, if they reveal to you like, let's say a lawn care business for the sake of it.

So a lawn care business, okay, great. If, if they're talking to you and they're like, "We need pictures of like cut grass, we need this and that," they're talking more, a little more designy. But then in the conversation, it's not part of the request to you, but it, it, you kind of either get a sense of or they literally start talking about how it's difficult to get people to book An ongoing, uh, like an ongoing, like lawn cut, or it's difficult to get people to do a temporary lawn cut, which is very common if you go away for two weeks, you'll have like, you usually cut your grass yourself, but you'll get this company to come in just for two weeks to cut your lawn and stuff like that. You could talk to them and say, "Hey, hey, hey, like I got an idea, guys. Like, why don't we have-- why don't we make a [00:26:00] page where there's like a booking thing and people can book it, but it's just short-term, four-week max, four cuts, whatever it is, flat rate or whatever." Let's talk about it. Let's take a look at our, at what your competitors have.

Do your competitors have anything like this? What do they offer? What can we improve on if they do have an offering? Can we improve on that offering? What do you-- what's your unique advantage and stuff? And you can find those threads to pull, and it sounds like we're getting off of web design, but to me it's like the design of the site is absolutely the visual part, but it's also the SEO, it's also the site map and kind of where the pages go, right?

Like it's the organization, it's the organization of the website. Like you have your main homepage, and then there's like a subsection for services or maybe not. Maybe you do offer so few services that you just have a services page. Maybe you offer so many services that we need a services section/services/lawn care/ uh, like ponds, like garden ponds for that lawn care company and, and, and different things that that [00:27:00] company will do, hedge trimming and things like that, if they consider all that stuff separate. like that to me is really a part of the design. It-- You're des- you're designing out the website. I consider that part of the web design. The UX design's absolutely part of it. And the point here that I'm trying to make is, is you wanna get as much information about what the client actually wants and needs in those initial meeting or two.

A lot-- Uh, like for small to medium business, usually, usually you'll have like just sort of one meeting and then you'll kinda get working 'cause they're busy, they're r- wearing multiple hats as a small business owner. And also I, I wanna point out one key thing that Mike and I have really struggled with over the years, but I would say the last five years we've really mastered is you get into a lengthy conversation.

Like sometimes these conversations will last two hours, like a long conversation. Small business, you think it's easy? No, you're having a big conversation. when that conversation gets lengthy, the wish list of features can just [00:28:00] go into the stratosphere. Like it could just start getting silly. We had a conversation with a guy one time where it was like, "We need to make sure that we u- have GPS and that GPS never has a person turn left if they are in a certain situation." What? so then I had this conversation with him and I said, "By the way, the website is nothing. We're actually making you an app that like tracks these cars and yada yada." I'm not gonna get into who it was, so I'm anonymizing details. But the-- this is a, a GPS app, and then I'll build a website as well. the, the complexity is this, is this app. That's gonna be the thing that costs you a whole bunch of money And unfortunately, we've lost jobs like that because we like, we, like Mike and I will get, and my- myself too, will get too focused on, oh my God, it's 10 hours for the whole website, but it's 400 hours for this, this crazy GPS thing. that's just one of those things where in a lengthy conversation, things go into the stratosphere. What you wanna do is you wanna bring them back to earth. Sometimes they need [00:29:00] a, a big old app. Oftentimes they don't. Oftentimes it's just like, "Do you actually need this?" "I don't know. It'd be nice to have."

It's like, "Okay, well hold up. We need the website first, right? We need the, we need the, the lead generation form. We need the mail- the mailing list sign up on your website. We need your social medias or whatever. We need your blog. Let's do that first." And so part of those initial meetings when you're meeting with them to g- to get all those things is you, you really want to take, like take control of the conversation, but still let them talk. But just don't let 'em go like way out there. We've had conversations with people where they'll ask, they don't really know what they're asking, this is where it starts getting into the stratosphere, and they're like four apps in. And then I'll bring back to them and I'll, I'll say, "Hey, you know all that stuff has gotta be monitored and like run by a person.

Do you have a staffer gonna run all this or do you wanna hire me on an ongoing basis?" "No." Hold up. So how important are these things to you?" "Well, it's just kind of a wishlist item." "Okay. Well, that's off the table for today [00:30:00] Let's talk about what the actual... Like, get back down to brass tacks and really figure out what the company's objectives are and how you can help them succeed. You can kind of distill it down into what their cl- what their primary objectives are. that I have listed in the show notes, which I'll just say here, are, you know, do, do the, do they, meaning the client, do they want to drum up leads? that what they're looking for? Then y- what you're trying to do as the website owner is have a good place to drum up leads, contact form, good blog posts, trying to get into the AI SEO game, things like that. Then you ask them, "Hey, care what the website looks like?" If they don't, fantastic. That's off the list. You just make sure that you make a professional website that looks good, that no one's gonna be like, "Why is everything upside down," right? You don't want to make something silly. Make it professional, and we can tweak it later. [00:31:00] We can tweak it later. We can change it later. It's fine. And are they particular? Do they want a specific look and feel? And that's different from what the,

Mikhail: Mm-hmm.

Matt: like because you can have, uh, basically the same layout, but you can have it be kind of like dark. You can have it be really bright and happy. You can be very serious. We've had... We've made websites that were literally designed for people on dial-up connections in remote areas running like Windows 98. This was years ago now. Running like Windows 98 on barely faster than dial-up connection stuff. So do those guys want fluff? No. They're also at work.

It was basically... It was like bordering on web app is what we made, was like, okay, they, they just need it to work on phones and stuff, and those phone and internet connections just in general just suck. The screens suck, so we need nice big fonts. We don't wanna have anything that requires a high DPI screen.

We want as minimal data as possible, and these guys are at work. They need these part numbers, [00:32:00] man. They need these addresses. They need these phone numbers. It was like a big old database of stuff. And we need it to be quick, and we need to have that no data, like as minimal. If it's possible to have zero, we would have zero kilobytes. Like, that's what we want. And so that's, even that's a particular look and feel. That's a very utilitarian feel. And so I think that there's more objectives and things that you could absolutely talk to your client about. That's just sort of like three off the hop, especially in an initial meeting if you've never met the person. basically, you want to distill all this information that you got from them, and then you distill it into an offer Now, going back to the beginning of the episode, we mentioned pre-made websites, we mentioned templates, we mentioned full custom design. Sometimes in a small b- business website, you're gonna, uh, especially these meetings might be, might be rather short or maybe just an hour, but it's easy enough to understand, the concepts are easy enough. You might have an offer ready right away. My point is, though, is stick to your guns. Like, if you offer templated websites and that's what [00:33:00] you're familiar with doing and that's what you wanna offer, try to distill it down into a templated website. Don't overstep, don't understep. Try to stick to your guns and say, "Okay," like, "This is how I think your idea could be... This is how my process would help you

Mikhail: Угу

Matt: your guidelines." You take their guidelines, you distill it down. This is how it would work in a templated website. This is how we can help you. the thing, though If you do not offer full custom websites, meaning full custom design, and they need that, don't try to convince them. Sometimes you gotta say no. I'm not saying just get throw in the towel. Give it your best shot and say, "Hey, I actually think you might be looking for something that's a bit more advanced, but here's what I could offer you." And you can do that in the initial call, like I said, if it's, if it's an easy enough conversation and you, you've maybe been doing this for a long time. But even Mike and I will sometimes, if it's a, if it's a client, 'cause we've met with tons of clients, but if we- if it's a client that we've, you know, never talked to and it's [00:34:00] an industry we've never been in, like, I wanna look at their competitors and we've done, like, a lot of really niche businesses, like, of, like, weird medical machines and things like this, and it's like, "Okay, I gotta take a look going on here before I can give a good re- recommendation." Sometimes your d- your offer will literally be in paper or in a subsequent meeting as well. And, and that's more business procedure, like, I don't wanna get too into that in this episode. But the thing here is, is, like, stick to your guns about the design again, you don't wanna do too much design. What...

If you're comfortable with this, this is what you're offering, what you're offering. And you can offer more than one, like you could say, "I offer templated designs. I prefer that, but I do offer full custom," then go for it, but if you do not offer full custom and someone needs it, I, I recommend you do your best shot, but you do mention, like, "Hey, I think you, I think you should go to someone else."

And you're probably gonna lose that, that job, and that sucks, but what you, what you're, what you want is you want integrity. You do not wanna make them a templated website when they really needed something full custom. They're calling you all the time. There's [00:35:00] constant issues. You're not solving their problem.

You are a problem to them. You do not wanna be their problem. Now you're in trouble because they'll never refer you. In fact, they might trash talk you. Nightmare. You'd rather have the little sh- little shock of like, "Hey, I don't think we're gonna work together." They're gonna be like, "Oh, what the heck? Like, don't you want this business?" But then that'll fade us- almost always within, like, a day.

Mikhail: Mm-hmm.

Matt: little shock is much better than, "What's going on here? The website's down, and I don't know what's going on." Like, if you know nothing about hosting servers and you just bought some cheap reseller, and this person's like, "I get 100,000 hits an hour," guess what?

Your whole f- your whole infrastructure might go down, and you're not an infrastructure person. You have no idea what's going on. You're now a major problem, like you are their problem, and you do not want that

Mikhail: So the only caveat I would say to this is there is an element to almost every website most likely that you're gonna be doing, especially in your first three years, where you're gonna feel outside your comfort zone.

Matt: [00:36:00] Угу

Mikhail: happen, and if you're always locking it down to only your comfort zone, like let's say you're just starting out and your comfort zone is templated website for X industry, that's what you're t- practiced on, that's what you've done.

And you get into a meeting and they're like, you know, "Y industry," like they're, you know, it's instead of a car lot, it's a bakery. And you're like, "Well, that's outside my comfort zone. I have never done a baker before. I'm not gonna do that." Um, I, I would recommend you to kind of make your own risk assessment here.

And from that perspective, like look at the similarities, the comfort zone, like what you're comfortable with in a project, and look at what you're not, and decide in your own head, you don't have to do any scientific thing, how much of it you're comfortable with and how much of it you're not. And if it's somewhere in the, you know, 80 to 70% range of comfort and 30% to 20% range of discomfort or outside the comfort zone, that's usually the, the, [00:37:00] a good indicator that you can take that on.

If you're a good problem solver, if you're a good developer, if you're a good businessman, you should be able to take on a bit outside your comfort zone, like a 20 to 30% easily. Now, I've done significantly more than that sometimes, to my positive and to my detriment in both cases. I think if you're gonna speak to a lot of business owners out there, they're gonna probably give you the same spiel.

They are like, "Sometimes, you know, you take the big risk and you see what happens." Um, just make sure that if you're in that spot, if you're being confident without the backup of actual knowledge, that you're at least see a path to knowledge. You know what I mean? Like you see a way... Like if you're, if a, if a, if a bank calls you in, they're like, "We need you to redesign our old," you know, whatever, uh,

Matt: Like a

Mikhail: I can't even remember.

COBOL. Yeah, "Our COBOL mainframe systems," and you've never worked with a mainframe. [00:38:00] You don't even know what a mainframe is, and you don't even know where to start with a mainframe, and really all you've done is design websi- websites on the front end. Like, that's too much. Like you're, you're, you're way too mu- like that, I mean, that's 100% outside your comfort zone at that point.

Matt: way too high at a bank too

Mikhail: Exactly. This, you gotta, you gotta weigh the stakes, you gotta weigh your comfort zone. I think it's okay to take risks. I think it's okay to be outside the comfort zone. That's fine. But you have to make that knowledgeable decision that will not destroy your client's business. I think a lot of people are willing to risk it, uh, just to get in and like, uh, you know, if you read all the stuff online about like, you know, you just have to fake it till you make it.

There's a lot of content around that Online, where you, like, you just take the big risk, take the big swing at initially. The, the, the people that succeed in that are limited, like, are much lower percentage than the people that fail, and we don't hear a lot of the [00:39:00] failure stories. We hear a lot of the success stories.

So I'm not saying that to scare people. I'm, I'm... Like, this is what Matt's trying to explain as well, that you gotta take calculated risks. You gotta be sure that you can actually accomplish this. Don't go too far outside. I agree with that. I think you need to take some risks. You need to make sure that you have a path to success.

It doesn't have to be like, "Oh, I know how I'm gonna do this today." Like, if, if you've never done a full custom design, for example, and you wanna offer that skill, right? Like, that, that's something you've always wanted to do, and you're like, "I've never done it. I've done something in between," that's a good sign that you probably, you might wanna take that.

But before you agree to it, after the meeting or something like that, be like, "Okay, everything's..." Like, you know, "We'll... I'll, I'll come back with an offering after, you know, distill all the information." Look it up. Like, look what a custom design actually takes. You know, you're, you're de-risking yourself there.

Look what the, look what that... Like, watch a couple YouTube videos. L- listen, like, you know, read a couple blogs. [00:40:00] Look at the source. Look, look at some material that you could read to actually build the custom design and be like, "Okay, I could see a path towards me building a custom website. I see that now.

It's clear. It's going to be difficult. I'm gonna do it." That's a, that's a risk you're taking. I think that's a calculated risk, and I think that that could work out. If you can't even find that path, my suggestion would be to not take the risk. That's where I, that's where I land on it

Matt: It's a good indication that that's something you should learn in private though. If you're like, I-- people are starting to ask me this and I'm constantly bumping

Mikhail: Yes

Matt: that I don't understand and I don't wanna offer, make a choice. Maybe it's something you hate or something. But if you are down to learn it, maybe dig into that.

Because if you take down your own website, I mean, who you mad at? Like, who-- you know, yourself. Like, that's the best place to do it. Do it in a little test server or something. I think it's a good mention though, Mike, because I'm definitely more on the cautious side where I'm like, "Hey, let's be super, super, super cautious.

Make sure we have cross [00:41:00] all the T's, dot all the I's, and make sure that the, you know, the T's and the I's are already dotted, you know, and, and crossed, uh, there." Like, I'm a little too cautious, and so like it's a, it's a good mention 'cause if you do, if you are a person listening to this and you are just getting started, there's gonna be many things you are not comfortable with, and unfortunately, you are gonna have to get comfortable with more than what you are doing currently, unless you're some sort of like whiz kid or something like that and you already know everything, which is, you know, nothing.

Like, no one really knows that, uh, without

Mikhail: Well, you could, you could...

Matt: practice

Mikhail: I think most of the time in that scenario it's like they just think they know everything, right? Like, it's, it's false confidence, which I'm, again, can work out. Like, you can, you can use that false confidence and you can build something cool and you can get through, and a lot of people do, but a lot of people don't.

A lot, a lot of people also fail hard. So just, yeah, just be sure that you have a path to success

Matt: I think, I think what, uh, I wanna touch on now is just a little bit, uh, just to kinda conclude the episode, a little bit of the art, and then a little bit of design directions. There's... [00:42:00] It's quite detailed in the show notes, so I'm not gonna jump into everything. Um, but I know that we've been constantly saying, "Hey, it's not all art.

It's not all, all art." But there is, like, an art and a creative aspect to this episode and to web design, of course. Um, like, if you post web design on Instagram, that's... You're in the creative side of things. Like, there's no, no doubt there. so I, I just wanna talk about this. And again, this is at a small to medium business level.

This isn't at, like, a super designer level or anything like that. But what do we do for our, for design, our, for a small to medium business? And this is what Mike and I do. Like, we, we try to gather all their brand assets, logos, colors, which are usually in the logo, promo posters that they've used in the past, 'cause I wanna see what type of style they like and, and, and what type of vibe they have.

Are they, are they joking? Are they not? Do they have a lot of testimonials? Do they not? Et cetera. slogans they have, things like that, like sort of their brand identity assets. Your, your, your... Mostly the assets, but you're, you're starting to learn that brand identity through it. about it [00:43:00] like we need as much information as we can to fill in the blanks on the website, whether that is a full custom design or a templated thing that you're literally filling in the blanks. you wanna know is, hey, if the template's asking me what color, I better know what color. I better not use orange when their color is green, for example. And this has actually happened to us. So I've been... I've asked over and over and over, "What are your colors? Like, do you have a logo?" Like, whatever. No answer.

Okay. So I just kinda put together something. I make their logo out of just, like, a nice font, and I just put together, like, a color scheme, and it looks professional, and they use it, and then I've shown up to their office, and it's the wrong color. Like, their co- Their, their office is all green, and I've used, orange. And it's like, "Oh, like, I guess." And they're fine with it, but it's just, like, what? It just doesn't quite, you know, quite jive there. And so gather all their brand assets as much as you can. I'd also like to say, too, that if you're having trouble gathering their brand assets, you might have [00:44:00] trouble doing the job. We've had issues in the past where I've asked for brand assets, and they're like, "I don't know what you mean." So you explain it. It's the logo. It's this. It's that. It's the stuff that's, like, on the outside of your building. Like, who did you... You sent a file to someone that made you that sign on the outside of your building. Who... Send me that file. And they just can't do it. can still proceed at this point, but I'm gonna say just, this is just, like, my own little piece of advice: Watch, watch yourself because I've gotten some pretty bad experiences. I've received pa- I've received pictures of their logo the newspaper And I'm like, "Okay, cool, yeah, yeah.

Send me that file that you sent in the newspaper." "I did." Okay, guess we're cropping out this, like, with this folded paper. Like, what are we doing here? You know, really silly. But anyway, getting back to, back on track here. Gather all their brand assets, the actual files. You can start to learn their brand identity, and that's the next thing here is l- start learning that brand identity.

Is the business super serious? Is it super utilitarian? And we already [00:45:00] touched on that in the episode. Is the business playful and fun? Are they joking all the time? Stuff like that. And this will not only shape some of the coloring and some of the visuals and things like this that you might use, some of the typography, but it will also shape the design of any text that you write on the site. Are you gonna write it straight to the point, or is it gonna be more friendly, for example? And then, you know, you kinda start getting into different design directions. There are several different directions you can take in web design, and here are some of the most common. These are re- this is retouching with just a touch more detail, again, more detail in the show notes, on what we talked about at the beginning. So full custom design. What does that mean? This is a sky's the limit- limits approach, okay? You're gonna get all the client's thoughts. You're gonna get all the, all the, like, you're distilling everything down. You're talking about not only their brand identity and what they do and what the technical things of the website is, but you're also gonna be talking about that full custom design. You're gonna be talking about the colors [00:46:00] and the typography and the mood and the landing pages, and if the landing pages are different, are they festive? What holidays do they like? Are they doing a big Christmas sale? Do they like to have a big Santa Claus on the site for that? Do they... All the things.

Sky's the limit, right? This is usually a build from the ground up or almost always a build from the ground up approach, and it includes multiple design stages. includes wireframing, iterations on those, and shipping to production. Sometimes you can skip a step. Like, sometimes something is simple enough, you can kinda use a template.

You don't need that wireframe, or sometimes you could, simple enough you can just prototype just kinda, like, make a first pass and see if they like it. That's up to your discretion, but with that full custom design, that is sky's the limit design. Lots of parts, lots of work, lots of hours. If you're using a popular theme or website creation tool If you, [00:47:00] chances are you're gonna choose a versatile one, so you choose a really versatile, let's say, a WordPress template.

You could use a Webflow template or something like that. Go ahead and, like, off a ton of designs by that. Like if y- you're not gonna hide that you're doing a theme. Some people will, but, like, I don't recommend it, and if there's a bunch of examples, show those examples to the person and say, "Hey, look, look at this, look at this, look at this." Some people will niche right down, too. So let's say it's a zoo, uh, and you're, like, trying to make a thing, and you only show them, like, the animal-related examples. Don't just get stuck there. If th- if that theme has an example of a car lot that has an amazing slider and you think that slider would look great with all of the zoo's ads, bring that up and say, "Hey, check out this car lot one.

I'm just talking about the look of the slider. Look how versatile this is." You're starting to get into the design there, right? Look at this, look at this widget that this thing could do. y- you, even though you are using a theme or template, because it's versatile and has all those different options, those visual [00:48:00] options, you're showing the client this stuff. are, you're able to bring that design dis- that design discussion to them even though you are, quote-unquote, just using a theme. you're not completely out of the conversation, is my point, if you are using a popular theme or website creation tool. Pre-made con- pre-made website conversation, though, that one's more to the point, right?

You create a selection of websites with dummy content. You show those off to the client. You make sure, make sure that it's clear to them that these, this is what the website's gonna look like 90% of the way there, you fill in their content. Maybe you change a few colors. You flip that logo in, image in there, and you ship it.

Very quick. That's the point of it. Cut, dry, you know, quick for them, quick for you More objective, more utilitarian in terms of your design process. You're not having those design decisions like you would in a full custom or even popular theme type thing. You're just kinda, you go." You're buying a product, they buy a product, and then you ship that product. There's one more thing I wanted to [00:49:00] mention here, it is remaking on a modern platform. So this is something that you will get asked to do a lot in small to medium businesses, at least we get asked this all the time, is because their current website is doing great, it's not responsive, or it's slow, or it's, it's starting to look dated, but it's doing the thing that they want it to do. But their brand identity, they want it to look modern, at the very least. And so you might be doing this, which is remaking on a modern making... meaning that you're taking the current design, you're tweaking it to make it more modern and those little fixes and things, and then you're putting it on a more modern platform.

Maybe an old custom CMS that somebody put together or like a Dreamweaver or something where they built it in or something. You're taking it away from that old style, old platform, old whatever, and you're putting it on something like, let's say like a WordPress. you're using like the very customizable Elementor with the Hello [00:50:00] Elementor theme, with the theme builder and all that stuff. Maybe you're doing that. Now, this is more technical than it is design work. It leans more in that way usually, 'cause you're looking at how can I achieve this form? How can I achieve this same slider? How can I achieve this same feature here and there? But it does come up with a lot of businesses, I wanna be clear here, and they're gonna talk...

when they talk to you about this, they're gonna talk to you more about the visual elements, and you have to identify that this is gonna be more of a technical project than it is gonna be a design project. The reason why I mention that is 'cause to them, oftentimes if they're not in tech at all, they think a lot of stuff is just click and drag.

And so they just say, "Hey, this needs to be bigger. Drag that wider." I hear that all the time. "Drag that wider. Make sure that... Make sure it shrinks." And then I tell them, "Well yeah, but it's gonna have to stack it. Things are gonna have to get out of the way. Like, what are you talking about?" Like, you know what?

I talk to them nicer than that obviously, but I say like, "Hey, like we can't do that." Or they have a data table that's way too wide, and it's like, "Just shrink it down." It's like, well, what are we gonna do? Font [00:51:00] size one? No, no, no. We have to have a nice little scroll area or maybe a light box or things like that, right? Basically, just know that you are... if you're working with small to medium business clients, you are gonna have a very diverse... Like we just went from, you know, the sky's the limit full custom design to more technical, less web design on remaking on a modern platform, and there's gonna be a touch of that web design in there for the tweaks.

Like you might go in and be like, "Ah, that green's really bad. The contrast is bad here for accessibility." There's gonna be a little bit of design stuff in there, but just know that, know that you're solving problems for a business, and even though you're, you're doing the design phase, it's not all art

Mikhail: So something that I've noticed recently, and something I've talked to a couple web designers out there, is how they're using AI in this process. I just wanted to kind of bring that up as, like, a number five that's kind of a mix of some of these. Um, essentially what they're doing is they're getting the requirements from the client.

They're then [00:52:00] presenting the client with, like, similar sites, so sites that they, the designer themselves approved, that are probably in the competitive sphere of whatever the client wants. It doesn't have to be, like, a direct competitor of the client. It can just be, like, something adjacent, something that could look something like that.

Like Matt mentioned earlier, that, like, there's not really much of a difference between a accounting website and a bakery website. You can use that kind of approach, where you can find a website adjacently that could somehow look and that you approve of. And again, you present options to the client of what you have already approved they, that they would like.

They give you the feedback from the options that they see, right? Like, "Hey, they like, we like the slider on this one. We like this and this and this. We like that. We don't like this." So you have a little bit more feedback there, and then you feed that into AI with the examples and get something out there, and then obviously you go through and do manual tweaks and stuff like that.

But that's another option for you to kind of have a little bit of that custom design, but it, it's more of a combination with, like, a little bit of [00:53:00] obviously some pre-made websites, quote-unquote. Sometimes if you're an agency, I could see this working where you already have, like, four or five pre-made websites that you've done many, many times, maybe to mix it up a little bit.

You can feed a couple of those in and, you know, get something a little bit more custom out. But you can u- you can do a little bit more now, essentially. Like, you don't have to completely reinvent the wheel, uh, but h- using the tools at your disposal should be something you, you're considering in this space.

And to make something a little bit more unique or to make something a little bit more on brand for the client specifically that's a little bit maybe not as templatey, you can s- you can leverage AI to, to give you that advantage and to also be a little bit outside the, um, the box, I guess. So to, to, to, to beat your competitors that maybe are sticking with their templates that have created over, like, 10, 10, 15 years ago.

Matt: I, I think it's a good, it's a good mention, and, and it does highlight the fact that, you know, we're [00:54:00] talking in more broad strokes in this episode. Like, we haven't really zoomed in and been like, "Open up your wire frame program," which is ... right? "Open up this," which is your image mana- manipulation program, which is

Right? This isn't like ... It's more broad stroke and less tutorial. And so, like, you bringing up AI, like, maybe we could have, in the future, like, a more zoomed-in episode, 'cause I think, like, the use of AI is, like, super interesting when it comes to some design stuff. Some people love it, some people

Mikhail: The agency. Mm-hmm

Matt: Um, but it, it's, it's totally something that some people are gonna start using, and maybe we could even look at different procedures, share ours, talk about other peoples or something.

Just spitballing. I'm not guaranteeing an episode in the future or anything like that. But just something to, uh, to chew on, because, like, again, this isn't ... This is more broad stroke, less tutorial, I think. For sure. But it's a good, it's a good note, 'cause someone listening to this might be like, "Okay, I'm gonna do full custom design.

Where do I start? Matt told me to program do I open?" " Where do I go with this? What do I do with this?" And so, yeah, we

Mikhail: Mm-hmm.

Matt: zoomed in [00:55:00] quite to that level But I think that's it. I think that's the episode. That's the web design episode. Um, thank you to, it was a YouTube that actually brought up, uh, th- that they wanted more design, design episodes, and I kind of took their comments and came up with this concept.

If you're listening to this, I hope that you enjoyed this episode, and if you wanted, like, another design episode or just literally want a different one or something like that, please let me know. That goes for everyone else listening as well. If you have any comments or anything like that, please let us know on the socials.

We'd love to hear from you. I'm sure some clips from this episode will go live as well. And if you want to support episodes like this, remember, we have a Patreon. That's patreon.com/htmlallthethings. And we have some three dollar tier patrons. Tim from the Web Hacker on Jason from Geek Life Radio via geekliferadio.com. Garrett Segall, Level Up Financial Planning via www.levelupfinancialplanning.com. Magnus from Yes Web via yesweb.se. Syntaxify from the HTML All the [00:56:00] Things Discord server, and Stacy Musseler from the website swoonworthydesigns.com. And remember that we have a contributing author. That's Michael LaRocca, and he contributes articles to the HTML All the Things website. Michael is the author of Self-Taught: The X Generation Blog at selftaughttxg.com. And if you want to learn how to code and take some courses to do so, we have up to 20% off a Scrimba Pro plan. Scrimba has a pretty unique media, wanna call... I call it the interactive media player code editor, where you can actually pause and start playing with the code that the instructor is talking about right on the screen. Go and check that out. They got some free stuff, but they also have that Pro level. You can get up to 20% off with our link. That link will be in the sh- RSS description, the podcast description, if you will. It'll also be in the show notes on htmlallthethings.com with full details on how that link works in those show notes. And that's it. That's the episode. Feel free to leave a comment or review on the platform you're listening to this on, and we are signing off