00:00 - Introduction to homepage elements
01:00 - Importance of branding on your homepage
05:00 - Navigation design and user experience
10:00 - Designing an effective hero section
15:00 - Implementing engaging visual content
20:00 - The importance of social proof and testimonials

[00:00:00] This topic we're going to be talking about is key elements. Every website homepage needs. And of course, everybody probably knows I'm Greg McKinnon with original 72 creative, and we're a full service website, graphic design and digital marketing firm. And our guest today is guest co host. I think I did that.

[00:00:22] Team was Rina Liddle from little works, indie media. And with that, I think we should just launch right in.

[00:00:29] Okay. [00:00:30] All right, so we're doing homepage today. So we, every time I was thinking about this topic, I kept moving through all the pages, so we're just gonna try and stick to homepage today. 'cause homepage is a pretty, is the most important. Page of your website, generally speaking. Greg, do you wanna start us off yeah.

[00:00:49] The first thing that is most important for not only your homepage, but the homepage and your overall site is clear branding that people will [00:01:00] recognize that they've gotten to the right place. So your logo, your branding. So that recognition that when people arrive, they know that they've got to the right place, super important all over your website, but most importantly, also on the homepage, because it's typically the first page you get to when you arrive at a site.

[00:01:23] Yeah, and especially if the name of your. Company is fairly generic or there are companies that are doing business with [00:01:30] a similar name. That can actually be confusing. I actually got on one of my other on, not on my little works page, but on another page got an inquiry that was, they were expecting somebody else at the other end, which was pretty interesting when they filled out my form.

[00:01:45] And it was great for me, not so good for the other person Basically, your branding and people's recognition that they're at the right place is super important for any page of your site because people will determine [00:02:00] within that first couple of seconds if they feel like they're at the right place right away.

[00:02:04] So if you, if your branding is off or if they have any hesitation that they might not have gotten to the right place, then they may go back and search for something else or. Or something like that. So it's just critical to, to have that branding on your mat your website match, whatever that visual look of your.

[00:02:26] Of your business is yeah, [00:02:30] absolutely. Now, do you have any be, so I've been building websites for over 20 years and I've put logos on left over the, to the right, I put them in the middle from a branding perspective and your header of your website, because this will lead into navigation, which I was going to go second with.

[00:02:51] Do you feel that instant recognition for people that you would prefer to always see the logo in [00:03:00] one, the left side at the top? Or do you find there's much of a difference for that? I think of it as, the way that we read I, I usually put it on the left, but I've also put the logo on the center.

[00:03:15] Basically. I am not a designer. My designers do that. We typically do left or center. But it really depends on your audience. So if your major target audience is right to left readers. Then you might want to consider sticking [00:03:30] it up on the right. But but in a Western context generally to the left or in the top.

[00:03:35] And it really depends on how it responds in terms of the mobile version. That's also another way. So I'm not so caring so much if it's left or center. I, but I do care greatly as to what does it do when you scroll on your desktop and what does it do when you scroll on your. On your, On your mobile.

[00:03:54] And I don't think that we need to have a logo that follows people. It's usually sometimes [00:04:00] when you scroll, it gets a little smaller in the top left corner, but it might be bigger a little bit when you first land on the page. That's one thing that we've done for some people. And actually it does.

[00:04:09] And now that I think about it, Usually does the whole menu bar stays fairly static. So it does go, but I don't need to have it all throughout. I also don't need to have I like to work with a complimentary color palette from the logo. I always feel like if you're building your site based on your logo colors, that's shows me that you haven't actually [00:04:30] hired somebody to do your site.

[00:04:31] So that's, and those branding colors need to work properly too. And And then I also I like a contrasting colors specifically for the call to action button. That's super important, but now I feel like I'm getting ahead. So should we roll that back? You make good points. And I think as far as the logo, whether it stays small or goes away, I think that's like you, it's always a fight with the client because of the client.

[00:04:59] It's always I want [00:05:00] my logo there and telling them once it's initially there and then you scroll or whatever, like it's not as important because people have already realized, okay, yes, this is where I'm supposed to be. And then after that, showing your logo is really just like further branding I think is the word you're looking for.

[00:05:21] Yeah, every designer will say like the worst comment from a client when giving feedback on a design is make the logo bigger. Do you think the logo [00:05:30] should not be that big? It doesn't need to be that big. If it needs to be bigger, it's usually because It's a long word and it's in this direction. And that's just not very great branding anyways.

[00:05:42] If you, so I would talk to a designer if you're having problems with people seeing your logo. But the other thing is a lot of people are using the wrong file format for their logos and their logos will typically end up looking blurry in comparison to the rest of the font on the site. And so you want to make sure that your [00:06:00] logo is actually crisp and and you may need to have a developer get you the proper size.

[00:06:05] A file to upload because while WordPress will render it to a size that it likes, it's not actually looking to see how sharp your logo is when it puts it in up at that size. Yeah, we shouldn't go too far down the design rabbit hole there, but I could go off and a bunch of stuff with logos.

[00:06:23] So that leads us into a logo placement and branding at the top. My next on the [00:06:30] list of most important things is a clear navigation, well organized. And as you've mentioned, not too cluttered, which I completely agree. Yeah. So when you're relying on WordPress to do the mobile responsiveness for you and you're not designing a separate mobile Home page.

[00:06:50] What ends up happening is your, if you have a lot of dropdown menus and a lot of menus, what will happen is it'll be hidden a little hamburger in the top, right on the [00:07:00] mobile. And then when you click on that, you've got three scroll worth. Yeah. This huge gigantic menu bar that you need to get through.

[00:07:07] So that's not great. But even on desktops, if you've got that there, some sites do require a lot of information, but we definitely don't want to put all the information up on sites and any more like we used to. So you want to get just. enough information to hook the client or the prospect and have them make that call or fill out that form or however it is that you want them to first contact [00:07:30] you.

[00:07:30] And and so you want that navigation to be as minimal as possible to accomplish that. So thinking about your overall number of pages Helps you to keep that menu down minimal. And then if you actually need more pages than that, then you can consider a secondary menu option that can always also be useful.

[00:07:52] Yeah. I think of a lot of the main navigation pages almost as inner landing pages, which [00:08:00] are. Mainly focused on then continuing to direct you to the content and additional pages within that section. And I think people don't really understand that as much and they're like, Oh this page is on my site.

[00:08:15] It needs to be in the menu somewhere and that's not necessarily the case. No, it's, I think of the metaphor that I use the most and sometimes people look at me as if I'm crazy, but I think of, Websites as being three dimensional in the sense that you've got [00:08:30] the top, you've got the length which is the two dimension of the paper.

[00:08:33] And this is how people think when they're thinking about their website before they deal with a designer. And then the piece that the designer should be giving you is how do people swim through that depth of the website? And that's how I think of it. It's you're right. It's gotta be, We've got to be thinking about the funnels.

[00:08:50] We've got to be thinking about where do we want the top funnel people to go on your site? Where do we want that? The mid funnel people, where do we want that sort of like person, where are we putting that click to buy [00:09:00] a button? And how do we get people to funnel through that? So we don't want the typical way of okay, here's my homepage.

[00:09:07] And it's going to have some, I usually homepages have very little content on them. Especially if you're working with a template, like there is only spaces to put in. Buttons and such and then they don't put any copy on that. And really you want your homepage to be the most helpful in terms of copy and getting people through that funnel.

[00:09:28] And then and then [00:09:30] you want to be funneling people through to other pages. So that's exactly right. So on that homepage, you're going to catch that person up at the top. Who's ready to buy right now with that. Buy now button or book an appointment button or call me button. Then you're gonna give them a little bit more information down the page so that you can get them into that mid funnel where you have enough information for them to direct them where they can do the rest of their research that they need.

[00:09:54] So here are the highlights. Where's the rest of the research on your services? And then further down is the blog, [00:10:00] usually the testimonials, the blog. Oh, the blog and the and the. The top funnel, which is sign up to the newsletter, generally speaking, or a downloadable will be at the near the bottom.

[00:10:10] So thinking about your funnel is super important when you're building a website and I'm off of the home page topic again. Sorry. That's the starting point of the funnel, but I think you made some really good points there, which made me want to lead into what my funnel is. Third item for important things on the [00:10:30] homepage was that hero section.

[00:10:32] That would be that first section after your header logo navigation stuff. And what you had mentioned was like a call us or buy now button. And it made me think, and I didn't make note of this, but it's something that's important is that sometimes people tend to try to do one type of call to action. On a site, I believe for the homepage, you're going to have multiple [00:11:00] one that would maybe in the top of the header, which would be like a button that's like by now or anything that you may, might want.

[00:11:10] People to be able to access as soon as they come to their site. And that would be like a supplemental or secondary call to action to me and your main call to action on the homepage would be whatever you put in your hero section, especially if it's like an e commerce site or like you, if you're trying to get someone to sign up to a service or.

[00:11:29] [00:11:30] Or something like that hero section is there to really have your main call to action of what it is you really want people to do as soon as they get to your homepage, but you can't have other call, like secondary calls to action, like a contact or a by now, or, something in the header, a lot of people have that at the very far it's just always there and then.

[00:11:54] Like you said, there's other secondary call to actions at the bottom, typically for mailing lists, [00:12:00] signups, and things like that. But that hero section, which is my third on the list, is pretty important. One of those things where it's the biggest thing you want to highlight for your site when people land there.

[00:12:11] Yes, absolutely. However, having said that while you do want multiple calls to action in terms of that sort of funnel depth or interest or where the person is at that funnel, you don't want a whole pile of them. I've also gone to some sites where it's learn, they've got the force sections and they've [00:12:30] got, learn more.

[00:12:31] And then they've got another four sections below that. And it's like a lot of repetitiveness. Like we need to work that out a little bit. Or you don't want to have 50 things that you want somebody to do. So you don't want the book an appointment and call us and there's sometimes there's just too much.

[00:12:47] And then you try and. I've seen this before, not so much anymore. Like it's a thing of the aughts time period where people were trying to, they were putting it all on there and then they were trying to create a hierarchy [00:13:00] through through all caps and underlines and different colors and all that sort of stuff, which most people have moved away from now, but we still want to keep that hierarchy of call to action more so in how high up is it.

[00:13:13] Like your most important one here, your next important one for the research here. And then your third one, which is let me nurture you is at the bottom.

[00:13:23] Proceed with anything. Yeah. Yeah. Yeah. Yeah. Or it might take me two years to get there, [00:13:30] which is sometimes.

[00:13:32] Yeah. So anything else regarding hero section you'd like to add? Yeah. So a couple of things came up on a client's, a recent client's site that I wanted to point out. You really want to make sure that you're working with a designer for this area, because not only does the type of photograph that you choose, the type of, if you're using B roll video.

[00:13:53] in behind. You need to really make sure that accessibility is going to be well organized so that the button actually shows. [00:14:00] And you want that text and that button to be organized in, in the same rules as graphic design. So you want you want it to sit on a certain point. You want that button to sit on a certain point on the lines.

[00:14:13] If you were going to draw the grid, the what do they call that? The golden mean, the grid, the golden ratio. Yeah. You want that to be organized properly because that's going to feel good. It's actually you get an anxiety when things aren't placed in the right spot, [00:14:30] especially on this one particular header where they had put the the call to action way on their.

[00:14:35] On the left. And then the main part of the photo was way on the right. And there was this dead empty space in the center. And so what happens is your eyes, you want to think about your eyes. My eyes were like, literally going back and forth trying to make the meaning and it was anxiety and Annoying.

[00:14:52] It was totally annoying. But sometimes people respond to things psychologically. They don't necessarily know why they don't like something. [00:15:00] They might not even see that this is the thing that I'm not liking. But they, what does affect the way that they interact on your site? If things are not looking professional, there is a reason why that's an industry.

[00:15:15] Yeah. One of the other things I was going to say about a hero section is that you may not have something that you're trying to sell immediately on your website and that header section can [00:15:30] also just be used to further reinforce who your company is so that people People might recognize, okay, this is where I need to go, but don't know as much about you.

[00:15:44] And you can also use that space to further clarify exactly what your business offers or does to make sure that person is okay, yeah, this is what I'm looking for.

[00:15:58] Statement or a [00:16:00] tagline, something like that is usually found in the text above the call to action. That's usually that's right. I totally forgot that part. No, I was just further to be it being like a typical call to action because typically when I. When I think of Hero Sections, a lot of people are immediately trying to sell something, sell you their biggest site.

[00:16:22] But there are times when then maybe it's a site that doesn't specifically sell something to you right away, but it's, but you [00:16:30] provide. A service that you just need to make sure people understand. Yes, this is what we do. You're at the right place. Is just as important than trying to immediately sell them something or go to a buy page to, to get them to sign up for something.

[00:16:49] Yeah. You want them to self select in. Yeah. Yeah. And further to that, I know you already talked about some visuals, obviously for the Hero [00:17:00] section, but we have that as a separate item to just visual content that's going to make sure to reinforce reinforce what you do and give people that warm, fuzzy feeling that they know exactly what they're going to get from you.

[00:17:16] So visual content typically is a really big impact in that hero section. Yeah. And there's a really, there are a few good rules that I like to follow when I'm thinking about visuals. And some of this has just [00:17:30] recently come up because I've been heat mapping some new sites and and this has become a thing.

[00:17:34] So you want things, you want your visuals to be super clear what they are. So what that means is Make sure that your visual is not going to be mistaken for a button because you get rage clicks on that image and if you use a heat map on your website, it's really the most interesting feedback that you get on your [00:18:00] website, actually, to be honest, and you can figure out what's working for people and what's not.

[00:18:05] Where they click and where they try to click and I've been going in and putting links where people are automatically trying to click like where they want to find a call button where they want to find more information to whatever was being spoken about in that. Paragraph, and that's been super interesting on helping me build out things and change things and respond to the interaction.

[00:18:28] So design is great [00:18:30] and data, the data to reinforce that design is actually really good too. So some of the things that I've noticed is that you want your photos to be. To be recognizable photos and not buttons. So sometimes if they're at a certain size, people will just try and click.

[00:18:46] And a lot of photos on websites now are clickable spots, especially on the blog snippet section, that kind of thing. So you want to. You want to check for that. Then the second thing is there's a big [00:19:00] move towards doing photos that are not descriptive. I think that move happened a long time ago, but a lot of people are taking a long time to figure that out.

[00:19:07] So I don't like it's not about me either. Actually, I just realized I don't like who cares what you like, but I don't feel what works is working anymore. Are things that look like Descriptive stock photography. So stock photography is fine. It's not the best. Obviously branded photos are always best.

[00:19:24] And what I mean by that is you hire your photographer and you do a whole bunch of random stock, like [00:19:30] photography, but but there is also this little movement that I've noticed is happening and it's been spoken about more and more is that we want And it's interesting because it flows with how websites are being developed in different ways in terms of different aspects of the design, like especially the copywriting.

[00:19:47] We want to focus not on what we are doing here. Look at this photo. This is what we're doing here. This is what we're doing for you in the services section. Instead, we want to flip the sentence structure so that we're actually [00:20:00] focusing on what How the service is going to benefit the end user.

[00:20:04] How is that going to change their life? What kind of lifestyles is going to give to you? Or what kind of experience can you expect from this service? And then the photos need to match up in a sense where you want to have photos that maybe show more a point of view for the end user.

[00:20:19] For the for the end user. So it could be, and I used to use this a lot. We want to have photos with people. We want people that look like they're happy because [00:20:30] they've done your, they've used your service and photos that are easily for me to imagine myself and project myself into a relationship with you already.

[00:20:39] We might want diversity. We always want diversity actually in all of that. We want to think about who our target market is. Do we really want the Medispa's kill me this? Like it's all skinny women in their 20 white women in their twenties. Usually they're, that's the worst kind of photography.

[00:20:55] So think about who it is, who your target market is. Match that [00:21:00] up in some way. And then also use the point of view photos that people are using on social On Instagram, but not quite as Instagrammable point of view. So if you look, there are some new stock photography companies that are coming up from millennials that have started it early late millennials in particular, and they're there what they think is hip and new is completely different than what other stock photography companies are utilizing.

[00:21:24] So think about your brand, think about your target market, and then see what's right for you in those photos, [00:21:30] because you can do some really more interesting things. So instead of showing what they're doing, which is different, instead of showing the computer on a table that on a desk, they will show legs crossed at the, in the chair next to the desk with the computer.

[00:21:43] Like they put the person actually physically in the photo so that you can do that sort of bridging of the gap of, yes, you can imagine yourself here. We are helping you. And this is what it looks like. And Sorry. That's me [00:22:00] relaxing in front of it. Yeah, exactly. Exactly. So those are some things about visuals that I like.

[00:22:06] And and then ask yourself, is this too much information? Could I move this piece of text somewhere else? Could it be a downloadable guide? Could it be, does it have to be like that? Do we want this much text on the homepage? Probably not. And then the other aspect, which is still fairly visuals formatting.

[00:22:25] So make sure that there's lots of, we don't write paragraphs the same way [00:22:30] for online as we do when we're writing an essay. Because We need space in between points that we're making like important points. We want to put that line drop in so that the eyes can rest and really absorb it. And okay.

[00:22:45] I think that's it. Because you are going to possibly tend to have multiple things that you want to get across and you can't be wordy on everything you need. You need that. Just that little bit of text that says. As much [00:23:00] as you need to entice the person to be like, okay, this is what I'm looking for.

[00:23:05] Click to get more of that information. And one last thing that I want to say, what don't do, because we don't, we try and remain positive, but take your sliders off your homepage. Oh my goodness. That is the best thing you can do for your SEO. And it's a really dated look. So no sliders. I'm not a date. And I'm not a huge fan of sliders, but in [00:23:30] certain cases they do provide something that you need.

[00:23:38] I'll just, I'll say it that way. Okay. Okay. If, and if you're going to do a slider, no more than two to three images, like that's gotta be tops because it is really ruining your SEO. The way I'm doing sliders now, if people have. Multiple things that they want in e especially like sliders in the, are you talking about sliders generally [00:24:00] anywhere or sliders in the hero section, because I'm not a fan of people just having 20 images that are slide.

[00:24:08] Yeah. But at the top, the way I'm doing sliders now is a consistent visual behind the slider and some rotating text. Okay, a statement. And then, but the but that slides off and there's another statement of some sort, but [00:24:30] the visual, like the look of everything stays the same. I'm not sure I'd have to check with my SEO expert, but.

[00:24:36] From what I understand, I am attempting to take all sliders off of all my sites, even the small ones that are on the about section or especially the, what, where we usually see them as in testimonials getting rid of them. They just drag down the site because the site the site is measured from, even though you can see the first slider and it loads nicely.

[00:24:58] [00:25:00] And the user experience is fine. It doesn't stop. It doesn't stop measuring the load time on that page until the last slider is loaded. So it really does affect your SEO. So it's true. It does depend on yours, on your site and what your industry is and what you're trying to do as to whether.

[00:25:18] If you want to take that risk on, or, you take, you obviously make decisions. What is important to, as to what is important. But from a strictly SEO perspective, we're removing all [00:25:30] sliders everywhere.

[00:25:32] And interestingly enough, where we used to see a lot of top banner sliders were on e commerce stores because they'd have a few, like they'd have a. A new collection and then the sales items and then all of that. And they would like to put that up and flash that. But now I noticed some of the bigger sites, the and the best sites that are out there, like that are really giant companies.

[00:25:51] They're actually putting multiple best skinny banners, multiple skinny banners down the top. Yeah. Or one at the top and then two more 50, [00:26:00] 50 or that kind of a thing. I see a lot of that too. Yeah, so that's how they're handling the SEO part, I think. And we are coming at time, but I did want to say one other important thing before we sign off was social proof, like testimonials and things like that are one of those things that is important for the site overall.

[00:26:25] But again, on the homepage, because everybody lands there and they're going to be [00:26:30] deciding. Whether they want to do business with you or get your service, having that on there, typically underneath all of those other spots where you're trying to get them to go off to a service or a product, but still on that home page lower down for that, for them to recognize, okay, these people have, they're reputable.

[00:26:49] They've done business with, whoever, if you're showing company logos of people that you are clients or people that have just bought things from you and are giving [00:27:00] testimonials, very important for the homepage to have that on there. Yeah. So how many do you put on the homepage? If they're testimonials, I like three.

[00:27:10] A three pack, shall I call it? That does that typically are usually in a slider. So if they have five or six, maybe I'll display three and people can cycle through the others. Is how I often put them on my site. Yeah. Yeah. So I like [00:27:30] the three, we do three sometimes four depends on the design and then we move them to another testimonials page if they want to read more instead of the slider.

[00:27:40] Yeah. And the last before we sign off again would be your footer. Your footer, obviously every page has a footer, but the content in your footer. Is quite important because you're probably going to have a lot of pages down there that wouldn't be in your main navigation. But [00:28:00] everybody knows that typically the footer has like a lot of page links to other information.

[00:28:07] So putting all of that down there and allowing people to scroll to the bottom and get to those pages. It's very important. Yes. Absolutely. So we quickly went through the end there, but we're going on for 45 minutes to an hour. Totally. And a lot of the, a lot of our next items we did, [00:28:30] I rattled through a lot of them at the top when I wasn't supposed to.

[00:28:33] So sorry about that. Yeah. I think most for the most part, we got everything that we identified out throughout the whole process. Yeah. The whole thing. So with that said, thanks everybody for joining us today. If you have any questions, drop them in the in the comments and for anybody not watching in the group, we post this live from cyberpunk geeks, marketing [00:29:00] mixer Facebook groups.

[00:29:01] So go over there if you're not in there and join us and next week. I think we have next week. We have Phelan and Pip on why use Tag Manager for your marketing, which is really important session if you're interested in getting into ads. Perfect. Thanks everyone for joining. See you next week.