![\"Free](\"https:\/\/no-cache.hubspot.com\/cta\/default\/53\/00d9cc96-eff7-4cea-8ff3-583374c3dcd5.png\")
<\/a><\/p>\nA lot of businesses struggle here because they treat the homepage like a one-size-fits-all landing page. But your homepage has a much bigger job to do. It needs to guide visitors from all different backgrounds, interests, and traffic sources to the next best step.<\/p>\n
That means it has to be designed with intention, not guesswork.<\/p>\n
When I work on websites, and what to put on the homepage specifically, I always look at three non-negotiables:<\/p>\n
- \n
- Does it attract and hook visitors quickly?<\/li>\n
- Does it educate them on who you are and what you offer?<\/li>\n
- Does it guide them toward taking action (without being pushy)?<\/li>\n<\/ul>\n
That\u2019s the formula for a homepage that performs. If you\u2019re serious about making your homepage work harder for you, make sure the following must-have elements are in place.<\/p>\n
What You Should Include in Your Website Homepage Design<\/h2>\n
1. Headline<\/strong><\/h3>\n
On average, users usually scan websites within 15 seconds<\/a>. That\u2019s such a small window to tell visitors what your business has to offer. That\u2019s why I always opt to place the headline, sub-headline, and a clear CTA right in the hero section \u2014 it\u2019s prime real estate to get your message across fast. Your headline may only be a few words, but it\u2019s one of the most important pieces of copy on your website.<\/p>\n
When I\u2019m working on website projects, I\u2019ve learned that trying to please everyone with a single headline is a losing game. Your homepage will attract a wide range of visitors with different backgrounds, needs, and levels of awareness. But the truth is, your headline only needs to resonate with the third of your audience that\u2019s most likely to love what you offer. Those are the people you want to connect with right away.<\/p>\n
That\u2019s why I always aim for clarity over cleverness.<\/strong><\/p>\n
A headline should be simple, direct, and instantly tell visitors what\u2019s in it for them. One of my favorite examples is Dropbox\u2019s homepage headline: \u201cFind anything. Protect everything.\u201d There\u2019s no fluff, no jargon. You don\u2019t have to think twice about what Dropbox does. That kind of clarity is what keeps people on your site.<\/p>\n
Over the years, I\u2019ve seen too many businesses overthink their headlines \u2014 trying to sound innovative or bold \u2014 when what really works is being clear and human. A well-written headline can do more heavy lifting than an entire paragraph of marketing copy if you keep it focused on the visitor\u2019s needs.<\/p>\n
![\"what](\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\")
<\/p>\nSource<\/em><\/a><\/p>\n
Pro tip:<\/strong> One way I simplify this process for myself and my clients is by using HubSpot\u2019s free drag-and-drop website builder<\/a>. It\u2019s a user-friendly tool that allows you to build a homepage that adapts to your audience\u2019s needs, no code required. I like it because it gives me control over layout and flow, while still leaving room to optimize as traffic behaviors change.<\/p>\n
2. Sub-headline<\/strong><\/h3>\n
Your sub-headline is where you get to add a little context to your headline. Think of it as the quick follow-up that explains what you actually do. It\u2019s not the place to be vague or overthink it.<\/p>\n
The best way to make it land is by calling out a problem your audience is dealing with and showing how you solve it.<\/p>\n
One brand that does this well is Slack<\/a>. Their headline says, \u201cWhere Work Happens,\u201d which is broad, but their sub-headline gets specific: \u201cBring your people, projects, apps, and AI agents together.\u201d In just a few words, they\u2019ve described exactly what they offer and why it matters to busy teams. The video of the Slack app being used also adds to the clarity of what their product actually offers and how it works.<\/p>\n
When I\u2019m working on websites, I always recommend using this space to address a real pain point. Don\u2019t just list a feature, explain how it makes life easier for your users. That\u2019s how you turn a headline and sub-headline into a powerful combo.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
3. Primary Calls-to-Action<\/strong><\/h3>\n
The first thing I think about before I dive into website building is what I want the users to do. What action do I need them to take? That\u2019s where straightforward, easy-to-find calls-to-action (CTAs) come in.<\/p>\n
I recommend having at least two to three CTAs above the fold, leading visitors to different parts of the buying journey. Personally, I like to at least place one in the header and another in the hero section. Some folks might be ready to sign up today, while others are just browsing. Your CTAs should meet them where they are \u2014 and they need to stand out.<\/p>\n
A good example of this in action is Afterschool HQ\u2019s website. Right in the header, they have a CTA geared toward program directors looking to promote their after-school activities that says \u201cGet Started.\u201d If they miss the button in the header, they have the same one in the hero section underneath their sub-headline.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
Pro tips:<\/strong><\/p>\n
- \n
- I always advise clients to use a contrasting color for CTAs.<\/strong> That simply means picking a color that pops against your homepage background but still feels like it belongs in your brand palette. For example, if your website has a soft, neutral color scheme \u2014 think whites and light grays \u2014 a bold navy blue or vibrant coral button will naturally draw the eye. The key is balance: It should grab attention without clashing.<\/li>\n
- Keep the CTA text simple. I\u2019m talking five words or less. Short, action-oriented phrases like \u201cGet Started,\u201d \u201cBook a Demo,\u201d or \u201cTry It Free\u201d do the trick. Don\u2019t make people think too hard about what happens next.<\/li>\n<\/ul>\n
4. Supporting Image<\/strong><\/h3>\n
Most people are visual<\/a>. Make sure to use an image (or even a short video) that clearly indicates what you offer. Use images or videos that capture emotion, drive action, and visually tell the story you\u2019re writing about.<\/p>\n
To optimize your images for mobile users, use high-quality images that have a reduced file size. (HubSpot customers don\u2018t need to worry about this, as images uploaded to HubSpot\u2019s software are automatically compressed. Otherwise, tools like Tinify<\/a> will do the trick.)<\/p>\n
Also, always add alt text to your images to make them more accessible to visitors who use screen readers and to take your SEO efforts up a notch.<\/p>\n
The Smith & Wollensky homepage is a great example of emotional imagery: It features a series of short, high-definition, and mouthwatering videos that play on a loop behind a simple headline.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
5. Benefits<\/strong><\/h3>\n
Stating what you do is not enough. I am a huge advocate for showing<\/em> what you do as well. Your audience cares about how your product helps them, and that\u2019s what keeps them interested.<\/p>\n
Keep your message light, clear, and in their language. Evernote<\/a> is one of my favorite examples of this. On their homepage, they show their benefits in a way that\u2019s easy to read and nice to look at.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
6. Social Proof<\/strong><\/h3>\n
Social proof is a powerful indicator of trust. Your product or service could be the best in the world, and it\u2018s okay to lay that claim \u2014 it\u2019s just that people may not believe you unless they hear it from other people, too. And that’s exactly what social proof does.<\/p>\n
Include just a few of your best (short) quotes on the homepage, and link to case studies if applicable. Adding a name and photo gives these testimonials more credibility.<\/p>\n
OptinMonster<\/a> nails this on their homepage with glowing testimonials from actual clients. Most local services and goods thrive on social proof. So, whether you’re working on an orthodontics website design<\/a> or a local bakery, make sure to include testimonials and reviews if available.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
7. Navigation<\/strong><\/h3>\n
The design and content in your homepage navigation could mean the difference between a website conversion and a bounce. If you want to keep your bounce rate low<\/a>, you\u2019ve got to give visitors an obvious, easy-to-follow path to wherever they need to go \u2014 starting right from your homepage.<\/p>\n
So, keep your navigation menu visible at the top, and lay out your links in a way that naturally guides people through your content, from the most important pages on down.<\/p>\n
You and your team know your website inside and out, but your visitors don\u2019t. That\u2019s why it\u2019s important to run user tests<\/a> to see if navigating your site feels as smooth and intuitive to them as it does to you. If you can, add a search bar to make it even easier for folks to find exactly what they\u2019re looking for.<\/p>\n
One of my favorite examples of easy navigation is Slim & Husky\u2019s Pizza Beeria<\/a>. Their homepage navigation is clearly structured, keeping visitors moving in the right direction.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
8. Content Offer<\/strong><\/h3>\n
To generate even more leads from your homepage, feature a really great content offer, such as a whitepaper, ebook, or guide. Folks who may not be ready to buy might rather download an offer that gives them more information about a topic they’re interested in.<\/p>\n
If you need inspiration, here are several different content types to pick from<\/a>.<\/p>\n
9. Secondary Calls-to-Action<\/strong><\/h3>\n
Here\u2019s the thing: Not everyone who lands on your homepage is going to be ready to commit straight into your main offer. That\u2019s why having secondary CTAs is so important. They\u2019re like your safety net, giving visitors who need a little more time (or a lower-commitment option) another way to connect with you.<\/p>\n
While your primary calls-to-action should be front and center above the fold, those secondary CTAs belong further down the page.<\/p>\n
As people scroll, you want to keep giving them reasons to stay engaged. A great example of this is Spanx\u2019s homepage. Once you scroll past the top section, you\u2019ll spot three clear CTAs waiting for you. Whether it\u2019s grabbing $20 off or hitting \u201cShop Now\u201d to browse the catalog, these secondary actions give visitors more paths to convert when they\u2019re ready.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
10. Features<\/strong><\/h3>\n
In addition to benefits, list some of your key features. This gives people more of an understanding of what’s provided by your products and services. Again, keep the copy light and easy to read.<\/p>\n
Dropbox for Business<\/a>, for example, doesn’t shy away from showing off a features matrix right on their homepage below the fold.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
11. Resources<\/strong><\/h3>\n
One of my signature website elements is having a resourceful footer. This is because most people aren\u2019t going to be ready to buy on the spot. They\u2019re still in research mode, trying to figure out if what you offer is the right fit.<\/p>\n
That\u2019s why it\u2019s smart to give them a space where they can explore and learn more, like a resource center or knowledge hub. It not only keeps them engaged and on your site longer, but it also positions you as the go-to expert in your space.<\/p>\n
Take Lovesac<\/a>, for example. They\u2019ve added a resource link in the footer, below the fold, that reiterates all of their wonderful offerings.<\/p>\n
Their secondary CTAs are thoughtfully designed to catch visitors at different stages of their buying journey. There\u2019s a credit card link for folks ready to make a purchase, a fabric swatch guide for those still deciding on colors, and an online catalog for shoppers who are browsing but not quite ready to commit. Each one gives visitors a reason to stay connected and move closer to a purchase when they are ready.<\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
12. Success Indicators<\/strong><\/h3>\n
Along with customer success stories, awards and recognitions are great for making a strong first impression. Is your restaurant critically acclaimed? Did your app win best new product this year? Highlight those wins on your homepage. Just like social proof, showcasing achievements builds trust and adds credibility for visitors who are new to your brand.<\/p>\n
On Calendly\u2019<\/a>s homepage, for example, you’ll find the names of famous organizations that have recognized them, like Gartner <\/em>and Dropbox.<\/em><\/p>\n
<\/p>\nSource<\/em><\/a><\/p>\n
13. Search Bar<\/strong><\/h3>\n
If your website is content-heavy, adding a search bar may be extremely helpful for your users, especially if you\u2019re an online store with hundreds of products, a blog library, or a resource hub.<\/p>\n
Visitors who already know what they\u2019re looking for don\u2019t want to go through layers of navigation menus. A simple, visible search bar gives them a direct shortcut to find exactly what they need, fast.<\/p>\n
Remember this: The more content you have, the harder it becomes for people to browse through categories and filters. A search bar solves that by letting users type in exactly what they\u2019re looking for. It\u2019s an underrated tool that keeps visitors engaged and prevents them from bouncing out of frustration. Sites like Amazon and Nike wouldn\u2019t be functional without it \u2014 and if your site has a large inventory or content library, you\u2019ll want to follow their lead.<\/p>\n
Even on smaller websites, a search bar can add value if you have multiple service pages, case studies, or blog articles. It\u2019s all about reducing friction and making sure people don\u2019t have to work hard to find what they came for.<\/p>\n
<\/p>\n - Keep the CTA text simple. I\u2019m talking five words or less. Short, action-oriented phrases like \u201cGet Started,\u201d \u201cBook a Demo,\u201d or \u201cTry It Free\u201d do the trick. Don\u2019t make people think too hard about what happens next.<\/li>\n<\/ul>\n
- I always advise clients to use a contrasting color for CTAs.<\/strong> That simply means picking a color that pops against your homepage background but still feels like it belongs in your brand palette. For example, if your website has a soft, neutral color scheme \u2014 think whites and light grays \u2014 a bold navy blue or vibrant coral button will naturally draw the eye. The key is balance: It should grab attention without clashing.<\/li>\n
![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20example20from20dropbox20homepage.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20slack20homepage.jpg\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20example20from20afterschool20hq.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20example20from20smith202620wollensky.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20evernote20example.webp\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20optinmonster20example20of20social20proof20on20homepage.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20examples20from20slim202620huskys.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20example20from20spanx.webp\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/Operation-Everest-what-to-put-on-a-homepage-of-a-website-10-20250824-7931687.jpg\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20example20from20lovesac.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/what20to20put20on20a20homepage20of20a20website2c20example20from20calendly.png\")
<\/p>\n![\"what](\"http:\/\/www.coclea.org\/wp-content\/uploads\/2025\/09\/Operation-Everest-what-to-put-on-a-homepage-of-a-website-13-20250824-2433814.png\")
<\/p>\n![\"\"](\"https:\/\/track.hubspot.com\/__ptq.gif?a=53&k=14&r=https%3A%2F%2Fblog.hubspot.com%2Fblog%2Ftabid%2F6307%2Fbid%2F31097%2F12-critical-elements-every-homepage-must-have-infographic.aspx&bu=https%253A%252F%252Fblog.hubspot.com%252Fmarketing&bvt=rss\")
<\/p>\n","protected":false},"excerpt":{"rendered":"