As somebody who’s spent the previous few years constructing web sites and serving to companies fine-tune their digital presence, I’ve seen firsthand how neglected the homepage may be. But, it’s probably the most visited web page in your complete web site. The digital entrance door that welcomes (or turns away) nearly all of your site visitors.
![Free Resource: Website Optimization Checklist [Download Now]](https://no-cache.hubspot.com/cta/default/53/00d9cc96-eff7-4cea-8ff3-583374c3dcd5.png)
Quite a lot of companies wrestle right here as a result of they deal with the homepage like a one-size-fits-all touchdown web page. However your homepage has a a lot greater job to do. It must information guests from all completely different backgrounds, pursuits, and site visitors sources to the following greatest step.
Meaning it must be designed with intention, not guesswork.
Once I work on web sites, and what to placed on the homepage particularly, I at all times take a look at three non-negotiables:
- Does it entice and hook guests rapidly?
- Does it educate them on who you’re and what you provide?
- Does it information them towards taking motion (with out being pushy)?
That’s the system for a homepage that performs. If you happen to’re critical about making your homepage work tougher for you, make sure that the next must-have components are in place.
What You Ought to Embody in Your Web site Homepage Design
1. Headline
On common, customers often scan web sites inside 15 seconds. That’s such a small window to inform guests what your online business has to supply. That’s why I at all times decide to position the headline, sub-headline, and a transparent CTA proper within the hero part — it’s prime actual property to get your message throughout quick. Your headline might solely be a number of phrases, however it’s one of the essential items of copy in your web site.
Once I’m engaged on web site initiatives, I’ve realized that making an attempt to please everybody with a single headline is a dropping sport. Your homepage will entice a variety of tourists with completely different backgrounds, wants, and ranges of consciousness. However the fact is, your headline solely must resonate with the third of your viewers that’s more than likely to like what you provide. These are the folks you need to join with immediately.
That’s why I at all times purpose for readability over cleverness.
A headline must be easy, direct, and immediately inform guests what’s in it for them. One in all my favourite examples is Dropbox’s homepage headline: “Discover something. Defend the whole lot.” There’s no fluff, no jargon. You don’t should assume twice about what Dropbox does. That sort of readability is what retains folks in your web site.
Through the years, I’ve seen too many companies overthink their headlines — making an attempt to sound progressive or daring — when what actually works is being clear and human. A well-written headline can do extra heavy lifting than a whole paragraph of selling copy should you hold it targeted on the customer’s wants.
Professional tip: A method I simplify this course of for myself and my shoppers is by utilizing HubSpot’s free drag-and-drop web site builder. It’s a user-friendly software that lets you construct a homepage that adapts to your viewers’s wants, no code required. I prefer it as a result of it provides me management over format and movement, whereas nonetheless leaving room to optimize as site visitors behaviors change.
2. Sub-headline
Your sub-headline is the place you get so as to add somewhat context to your headline. Consider it as the short follow-up that explains what you really do. It’s not the place to be obscure or overthink it.
One of the best ways to make it land is by calling out an issue your viewers is coping with and exhibiting the way you clear up it.
One model that does this nicely is Slack. Their headline says, “The place Work Occurs,” which is broad, however their sub-headline will get particular: “Carry your folks, initiatives, apps, and AI brokers collectively.” In only a few phrases, they’ve described precisely what they provide and why it issues to busy groups. The video of the Slack app getting used additionally provides to the readability of what their product really presents and the way it works.
Once I’m engaged on web sites, I at all times advocate utilizing this house to handle an actual ache level. Don’t simply listing a function, clarify the way it makes life simpler in your customers. That’s the way you flip a headline and sub-headline into a robust combo.
3. Main Calls-to-Motion
The very first thing I take into consideration earlier than I dive into web site constructing is what I need the customers to do. What motion do I want them to take? That’s the place easy, easy-to-find calls-to-action (CTAs) are available.
I like to recommend having at the very least two to a few CTAs above the fold, main guests to completely different elements of the shopping for journey. Personally, I wish to at the very least place one within the header and one other within the hero part. Some of us is likely to be prepared to enroll as we speak, whereas others are simply shopping. Your CTAs ought to meet them the place they’re — and they should stand out.
A very good instance of this in motion is Afterschool HQ’s web site. Proper within the header, they’ve a CTA geared towards program administrators seeking to promote their after-school actions that claims “Get Began.” In the event that they miss the button within the header, they’ve the identical one within the hero part beneath their sub-headline.
Professional ideas:
- I at all times advise shoppers to make use of a contrasting colour for CTAs. That merely means choosing a colour that pops in opposition to your homepage background however nonetheless feels prefer it belongs in your model palette. For instance, in case your web site has a tender, impartial colour scheme — assume whites and light-weight grays — a daring navy blue or vibrant coral button will naturally draw the attention. The secret’s steadiness: It ought to seize consideration with out clashing.
- Hold the CTA textual content easy. I’m speaking 5 phrases or much less. Brief, action-oriented phrases like “Get Began,” “E-book a Demo,” or “Attempt It Free” do the trick. Don’t make folks assume too onerous about what occurs subsequent.
4. Supporting Picture
Most individuals are visible. Be certain that to make use of a picture (or perhaps a quick video) that clearly signifies what you provide. Use photos or movies that seize emotion, drive motion, and visually inform the story you’re writing about.
To optimize your photos for cellular customers, use high-quality photos which have a decreased file measurement. (HubSpot clients don‘t want to fret about this, as photos uploaded to HubSpot’s software program are mechanically compressed. In any other case, instruments like Tinify will do the trick.)
Additionally, at all times add alt textual content to your photos to make them extra accessible to guests who use display readers and to take your web optimization efforts up a notch.
The Smith & Wollensky homepage is a superb instance of emotional imagery: It encompasses a collection of quick, high-definition, and mouthwatering movies that play on a loop behind a easy headline.
5. Advantages
Stating what you do shouldn’t be sufficient. I’m an enormous advocate for exhibiting what you do as nicely. Your viewers cares about how your product helps them, and that’s what retains them .
Hold your message gentle, clear, and of their language. Evernote is one in every of my favourite examples of this. On their homepage, they present their advantages in a approach that’s straightforward to learn and good to have a look at.
6. Social Proof
Social proof is a robust indicator of belief. Your services or products might be one of the best on the earth, and it‘s okay to put that declare — it’s simply that folks might not imagine you until they hear it from different folks, too. And that is precisely what social proof does.
Embody only a few of your greatest (quick) quotes on the homepage, and hyperlink to case research if relevant. Including a reputation and photograph provides these testimonials extra credibility.
OptinMonster nails this on their homepage with glowing testimonials from precise shoppers. Most native providers and items thrive on social proof. So, whether or not you are engaged on an orthodontics web site design or an area bakery, make sure that to incorporate testimonials and critiques if accessible.
7. Navigation
The design and content material in your homepage navigation might imply the distinction between an internet site conversion and a bounce. If you wish to hold your bounce fee low, you’ve bought to offer guests an apparent, easy-to-follow path to wherever they should go — beginning proper out of your homepage.
So, hold your navigation menu seen on the high, and lay out your hyperlinks in a approach that naturally guides folks via your content material, from a very powerful pages on down.
You and your crew know your web site in and out, however your guests don’t. That’s why it’s essential to run person exams to see if navigating your web site feels as easy and intuitive to them because it does to you. If you happen to can, add a search bar to make it even simpler for people to seek out precisely what they’re on the lookout for.
One in all my favourite examples of straightforward navigation is Slim & Husky’s Pizza Beeria. Their homepage navigation is clearly structured, preserving guests shifting in the best path.
8. Content material Supply
To generate much more leads out of your homepage, function a very nice content material provide, akin to a whitepaper, e book, or information. People who might not be prepared to purchase would possibly quite obtain a proposal that offers them extra details about a subject they’re involved in.
If you happen to want inspiration, listed here are a number of completely different content material varieties to select from.
9. Secondary Calls-to-Motion
Right here’s the factor: Not everybody who lands in your homepage goes to be able to commit straight into your important provide. That’s why having secondary CTAs is so essential. They’re like your security web, giving guests who want somewhat extra time (or a lower-commitment choice) one other solution to join with you.
Whereas your main calls-to-action must be entrance and heart above the fold, these secondary CTAs belong additional down the web page.
As folks scroll, you need to hold giving them causes to remain engaged. An amazing instance of that is Spanx’s homepage. When you scroll previous the highest part, you’ll spot three clear CTAs ready for you. Whether or not it’s grabbing $20 off or hitting “Store Now” to browse the catalog, these secondary actions give guests extra paths to transform after they’re prepared.
10. Options
Along with advantages, listing a few of your key options. This provides folks extra of an understanding of what is offered by your services. Once more, hold the copy gentle and simple to learn.
Dropbox for Enterprise, for instance, would not draw back from exhibiting off a options matrix proper on their homepage under the fold.
11. Sources
One in all my signature web site components is having a resourceful footer. It’s because most individuals aren’t going to be prepared to purchase on the spot. They’re nonetheless in analysis mode, making an attempt to determine if what you provide is the best match.
That’s why it’s sensible to offer them an area the place they’ll discover and be taught extra, like a useful resource heart or data hub. It not solely retains them engaged and in your web site longer, however it additionally positions you because the go-to professional in your house.
Take Lovesac, for instance. They’ve added a useful resource hyperlink within the footer, under the fold, that reiterates all of their great choices.
Their secondary CTAs are thoughtfully designed to catch guests at completely different levels of their shopping for journey. There’s a bank card hyperlink for people able to make a purchase order, a material swatch information for these nonetheless deciding on colours, and a web based catalog for customers who’re shopping however not fairly able to commit. Each provides guests a purpose to remain linked and transfer nearer to a purchase order when they’re prepared.
12. Success Indicators
Together with buyer success tales, awards and recognitions are nice for making a powerful first impression. Is your restaurant critically acclaimed? Did your app win greatest new product this yr? Spotlight these wins in your homepage. Identical to social proof, showcasing achievements builds belief and provides credibility for guests who’re new to your model.
On Calendly’s homepage, for instance, you may discover the names of well-known organizations which have acknowledged them, like Gartner and Dropbox.
13. Search Bar
In case your web site is content-heavy, including a search bar could also be extraordinarily useful in your customers, particularly should you’re a web based retailer with lots of of merchandise, a weblog library, or a useful resource hub.
Guests who already know what they’re on the lookout for don’t need to undergo layers of navigation menus. A easy, seen search bar provides them a direct shortcut to seek out precisely what they want, quick.
Bear in mind this: The extra content material you may have, the tougher it turns into for folks to flick thru classes and filters. A search bar solves that by letting customers kind in precisely what they’re on the lookout for. It’s an underrated software that retains guests engaged and prevents them from bouncing out of frustration. Websites like Amazon and Nike wouldn’t be practical with out it — and in case your web site has a big stock or content material library, you’ll need to comply with their lead.
Even on smaller web sites, a search bar can add worth when you have a number of service pages, case research, or weblog articles. It’s all about lowering friction and ensuring folks don’t should work onerous to seek out what they got here for.
14. Contact Us
Your “Contact Us” choices shouldn’t be hidden away in some forgotten nook of your web site. It deserves a spot proper in your homepage. Why? As a result of when a customer is able to attain out, you need to make that subsequent step as frictionless as doable. Whether or not they have a query, want a quote, or just need to join, giving them a direct line to you upfront builds belief and exhibits you’re approachable. Plus, it’s a key touchpoint that may flip informal browsers into actual leads — so why make them dig for it?
Now, should you’re working with a minimalist design or don’t need to dedicate a full web page or part to contact information, no drawback. You’ll be able to hold your format clear by utilizing a strategically positioned “Contact” button that triggers a hidden modal. When clicked, this modal can pop up with a easy contact kind or contact particulars, giving guests a distraction-free solution to attain out with out cluttering the principle web page.
It’s a smooth solution to hold your design tight whereas making certain folks know precisely learn how to get in contact with you. Try this weblog stuffed with nice “Contact Us” examples.
A Homepage Price Visiting
Your homepage is your model’s first impression — it units the tone earlier than you even get an opportunity to make a pitch. Guests decide what you do, why it ought to matter to them, and the way your services or products could make their life simpler. That first impression occurs quick, and your homepage must pop to maintain them .
By weaving within the components we’ve talked about — clear CTAs, robust headlines, user-friendly navigation, and a design that guides guests down the funnel, you’re constructing a path to conversion.
Editor’s Notice: This submit was initially revealed in January 2012 and has been up to date for freshness, accuracy, and comprehensiveness.
