Hello and welcome to the Working Image Podcast. I'm your host, Jarrod Michael Gordon. This is episode six. I Need a Hero section, A Hero section. What do I mean? What am I even talking about? Well, this is the section of your website that a visitor will see first. Every page of your website technically has a hero section, but in particular we're talking about your homepage hero section. The hero section that a potential client or customer will see first. The hero section that has three seconds, that's right, three seconds to grab the attention of the viewer or they leave. The hero section is known as being above the scroll, meaning the viewer will see certain information before they scroll down or click away from your site. In the newspaper world, remember newspapers, they were fun. This was called Above the Fold. The most interesting news would be a huge headline above the fold of the paper so people can see the most interesting topic or topics without picking up the paper. This entices people to buy that paper. Now, your hero section that sits above the scroll needs to entice the viewer to stay on the website. Therefore, your homepage hero section is the most valuable piece of website real estate. Obviously, the hero section is where your first impressions are made. Again, you have three seconds to make those first impressions. It sounds unfair, three seconds or the viewer is gone, but that's how it works. Now, there are other reasons why someone would click away from your site. They could have a slow connection, which you obviously have no control over, or your site could be slow, which you do have control over, but we aren't going to discuss that right now. For now, we're going to talk about how you make those first impressions. Assuming your site loaded just fine and the viewer is looking at your hero section. A hero section is truly where a designer's talent and experience shine because you have to do so much in such a small area. So I'm going to tell you what we designers do to make sure the viewer stays on your site. Just like anything, there is a formula for designing a hero section, the basic set of rules that one should follow. Let's review them. The hero section sits below the header and above the scroll. Technically speaking the header, which usually contains your logo, the navigation bar, and your phone number isn't a part of the hero section. But I'm gonna talk a little bit about the header section because it impacts the hero section. The first thing I want to make clear is that your logo does not have to be, nor should it be big. This is difficult for some business owners. If you speak to any designer, a running joke we have is make the logo bigger because every customer we've ever had has said this to us. A large logo does nothing, absolutely nothing for advertising and marketing, except if your logo is the only element on the ad or website page. Coca-Cola does this all the time, but they have also been branding their logo for over a hundred years and basically have unlimited amounts of money. So in the header, you want to keep your logo and other elements small enough to be usable and not get in the way of the hero section. There are plenty of designs out there where the header is blended into the hero section, which is a great design treatment, and you might wanna talk to your designer about that. Okay, so now your header size is good and unobtrusive onto the actual hero section. And the first thing is what? Who are you? Well, you don't really want to say who you are because people came to your site either by searching for your product or service or directly typing in your website address so they know a little something about you. Therefore, you're not gonna have to have your name in huge letters across the page. Well then what? What do you put in nice big letters for the viewer to see? The answer is the main point of your product or service. For example, Apple has their latest product or service that they're promoting. A personal injury attorney would have what they stand for. QuickBooks has a hero that says, Save time, track money, and get important insights. Now, all these examples are made to stop the viewer and get them to learn more. By clicking through your site, you might think, I didn't know a new iPad was released. I want to know more. So you click, you might think, I like what this attorney stands for, I wanna learn more. So you click through their site and finally, if you're like me, you may find QuickBooks very confusing, but when you read their statement, it feels more normalized and not confusing. So you stay and learn more in all three examples. The hero section accomplish its goal, which is to get to view, to stay on the site, to learn more about their product or service. So you have to have a statement about your product or service that will captivate the viewer enough to stay on the site and learn more about your company product or service. That statement is the largest part of the hero section. Again, located above the scroll of the site. Think of it as the headline that grabbed the attention of the people walking by newsstands just enough so they bought the paper. It's the same thing. What else is on a hero section? Well, you know you have to have a heading statement that grabs the attention of the viewer, but once that is done in the first second of looking at your site, you need to give them a little bit more information. That is where the subhead comes in. Now, let's think about this for a moment. You've got their attention with the headline. You need them to read the subhead next, and that will provide more specific information about your product or service in order to hook the viewer's attention more. In addition, the subhead will also be the second largest text on the hero section because you are now guiding the viewer's eye through the hero section, making them read what you want them to read in the order you want them to read it in your design controls. The viewer's eyes, the subhead should have more specific information. In the QuickBooks example, the subhead is it's the number one accounting software for small business. Now that's good. The subhead is more specific while still relating to the headline. This should hold the viewer for another second. So for all of you who are counting, we are only at two of the three seconds. We have to gain the viewer's attention. Next, you should always, and I do mean always have a call to action, also known as a cta. This is a button linking to some action page, usually a contact page or a form or a page where someone can buy your company's product or service. And with that, we've hit the third. Second. Now, the viewer makes the decision to stay or leave your site. If you have thought out your headline, subhead and cta, then a viewer will most likely stay on your site. Of course, if this happens, then you have a well-designed hero section that'll keep people on your website, images, illustrations, and animations included in the hero support your headline, and you should have one of these there to do just that, support your headline. But notice I said one. Sure, for some companies having a rotating gallery works just fine, but that would be for a very niche industry. So if you're a company that's in a common industry, only have one image illustration or animation in the hero section. The real winning element to have in a hero section is a video. I know, I know a lot of you out there don't want to go on video and you don't want to talk about your company. You may be camera shy, but there's ways around that. You can hire an actor or an actress. You could just practice and eventually you'll get a good take. But a general video about your company or product that is about 15 to 30 seconds long and explains enough to get the viewer to stay on the site is what you want to create. Video is king of the internet, the king of social media and the king of advertising, and it's not going away. Mostly everyone who visits your website will play that video. Remember that the video is there to support your headline subhead and cta, not replace them. So don't have a video in lieu of having everything else in your hero section. This video needs to be professional. And remember what I said earlier, the video should be about your company or product. It should not be about. Both companies tend to put more information than needed in all types of marketing. It's the designer, marketer, and or videographer's job to pull them back and remind them to stay on target, which in this case is to give enough information to have the viewers stay on the website. A good way to have somebody leave your site is to have a long, boring, drawn out video on your hero section. Get to the point and leave the rest of the information for the product or service page of your website. Because if the viewer is on the product or service page of your website, then they want more information about that product or service. And a dedicated page is the appropriate place to provide that information and not the hero section of your homepage. Combine these rules for the hero section with design rules to capture the viewer's attention, and you'll have a great hero section for your website that produces results and keeps people on your website. See how much work goes into just one section of your website. It makes one think about how the rest of the website should be designed, and we'll get to that. With all of this said, you should be reviewing your website's engagement on a regular basis. Obviously, how your hero section is performing is a part of this review process. Usually a company hires their web designer or a marketing company to review the statistics of the site on a monthly basis. In return, they will suggest edits to help lift or maintain engagement. Some of the edits will work and some of'em won't work, and they'll try again because as I've said before, your website is a living, breathing part of your company that needs to be curated regularly long gone, are the days when we designed a website and it sat on the internet for years without being updated. And remember, what's working for your competitor's website might not work for you, so don't just copy what they're doing. Your homepage hero section should change and adapt to your company's needs as time goes on. If you continue to adapt your website to your company, the result is always new leads and new customers. Well, that's it for episode six of The Working Image Podcast. I need a hero section. All the necessary links and information are in the show notes. If you have any questions, email the working image@gmail.com. We know your time is valuable. Thank you for using some of that time to listen. Take care, everyone.