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 ignored the homepage might be. But, it’s essentially 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.
Lots of companies battle 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 larger job to do. It must information guests from all totally different backgrounds, pursuits, and site visitors sources to the following finest step.
Which means it must be designed with intention, not guesswork.
After I work on web sites, and what to placed on the homepage particularly, I all the time take a look at three non-negotiables:
Does it entice and hook guests rapidly?
Does it educate them on who you might be and what you supply?
Does it information them towards taking motion (with out being pushy)?
That’s the system for a homepage that performs. When you’re severe about making your homepage work more durable for you, ensure the next must-have parts are in place.
What You Ought to Embody in Your Web site Homepage Design
1. Headline
On common, customers normally scan web sites inside 15 seconds. That’s such a small window to inform guests what your small business has to supply. That’s why I all the time decide to put 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 couple of phrases, nevertheless it’s one of the vital vital items of copy in your web site.
After I’m engaged on web site initiatives, I’ve discovered that attempting to please everybody with a single headline is a dropping sport. Your homepage will entice a variety of holiday makers with totally different backgrounds, wants, and ranges of consciousness. However the reality is, your headline solely must resonate with the third of your viewers that’s most probably to like what you supply. These are the individuals you wish to join with instantly.
That’s why I all the time goal for readability over cleverness.
A headline ought to 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 every little thing.” There’s no fluff, no jargon. You don’t should assume twice about what Dropbox does. That type of readability is what retains individuals in your website.
Over time, I’ve seen too many companies overthink their headlines — attempting to sound revolutionary or daring — when what actually works is being clear and human. A well-written headline can do extra heavy lifting than a complete paragraph of promoting copy when you hold it centered on the customer’s wants.
Supply
Professional tip: A technique I simplify this course of for myself and my shoppers is through the use of HubSpot’s free drag-and-drop web site builder. It’s a user-friendly device that permits you to 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 structure and circulate, 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 a bit 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.
The easiest way to make it land is by calling out an issue your viewers is coping with and displaying the way you remedy 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: “Convey your individuals, 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.
After I’m engaged on web sites, I all the time suggest utilizing this area to handle an actual ache level. Don’t simply record a function, clarify the way it makes life simpler to your customers. That’s the way you flip a headline and sub-headline into a strong combo.
Supply
3. Major Calls-to-Motion
The very first thing I take into consideration earlier than I dive into web site constructing is what I would like the customers to do. What motion do I would like them to take? That’s the place simple, easy-to-find calls-to-action (CTAs) are available in.
I like to recommend having not less than two to a few CTAs above the fold, main guests to totally different components of the shopping for journey. Personally, I prefer to not less than place one within the header and one other within the hero part. Some of us could be prepared to enroll at present, whereas others are simply searching. Your CTAs ought to meet them the place they’re — and they should stand out.
A superb instance of this in motion is Afterschool HQ’s web site. Proper within the header, they’ve a CTA geared towards program administrators trying 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.
Supply
Professional suggestions:
I all the time 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 lightweight grays — a daring navy blue or vibrant coral button will naturally draw the attention. The secret is stability: It ought to seize consideration with out clashing.
Preserve 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 individuals assume too exhausting about what occurs subsequent.
4. Supporting Picture
Most individuals are visible. Be certain to make use of a picture (or perhaps a quick video) that clearly signifies what you supply. Use pictures or movies that seize emotion, drive motion, and visually inform the story you’re writing about.
To optimize your pictures for cellular customers, use high-quality pictures which have a diminished file dimension. (HubSpot clients don‘t want to fret about this, as pictures uploaded to HubSpot’s software program are robotically compressed. In any other case, instruments like Tinify will do the trick.)
Additionally, all the time add alt textual content to your pictures to make them extra accessible to guests who use display readers and to take your search engine optimisation efforts up a notch.
The Smith & Wollensky homepage is a superb instance of emotional imagery: It incorporates a collection of quick, high-definition, and mouthwatering movies that play on a loop behind a easy headline.
Supply
5. Advantages
Stating what you do will not be sufficient. I’m an enormous advocate for displaying what you do as nicely. Your viewers cares about how your product helps them, and that’s what retains them .
Preserve your message gentle, clear, and of their language. Evernote is considered one of my favourite examples of this. On their homepage, they present their advantages in a manner that’s straightforward to learn and good to take a look at.
Supply
6. Social Proof
Social proof is a strong indicator of belief. Your services or products could possibly be the most effective on the planet, and it‘s okay to put that declare — it’s simply that folks might not consider you except they hear it from different individuals, too. And that is precisely what social proof does.
Embody only a few of your finest (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, ensure to incorporate testimonials and critiques if out there.
Supply
7. Navigation
The design and content material in your homepage navigation might imply the distinction between a web site conversion and a bounce. If you wish to hold your bounce fee low, you’ve obtained to provide 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 prime, and lay out your hyperlinks in a manner that naturally guides individuals via your content material, from an important pages on down.
You and your workforce know your web site inside and outside, however your guests don’t. That’s why it’s vital to run consumer assessments to see if navigating your website feels as easy and intuitive to them because it does to you. When you can, add a search bar to make it even simpler for folk to search out precisely what they’re in search of.
One in all my favourite examples of straightforward navigation is Slim & Husky’s Pizza Beeria. Their homepage navigation is clearly structured, holding guests transferring in the precise route.
Supply
8. Content material Provide
To generate much more leads out of your homepage, function a extremely nice content material supply, akin to a whitepaper, book, or information. Of us who might not be prepared to purchase would possibly quite obtain a suggestion that provides them extra details about a subject they’re excited about.
When you want inspiration, listed here are a number of totally different content material sorts to choose 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 essential supply. That’s why having secondary CTAs is so vital. They’re like your security internet, giving guests who want a bit extra time (or a lower-commitment possibility) one other method to join with you.
Whereas your main calls-to-action ought to be entrance and heart above the fold, these secondary CTAs belong additional down the web page.
As individuals scroll, you wish to hold giving them causes to remain engaged. An ideal 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.
Supply
10. Options
Along with advantages, record a few of your key options. This offers individuals extra of an understanding of what is supplied by your services and products. Once more, hold the copy gentle and simple to learn.
Dropbox for Enterprise, for instance, does not draw back from displaying off a options matrix proper on their homepage beneath the fold.
Supply
11. Sources
One in all my signature web site parts 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, attempting to determine if what you supply is the precise match.
That’s why it’s sensible to provide them an area the place they will discover and study extra, like a useful resource heart or information hub. It not solely retains them engaged and in your website longer, nevertheless it additionally positions you because the go-to skilled in your area.
Take Lovesac, for instance. They’ve added a useful resource hyperlink within the footer, beneath the fold, that reiterates all of their great choices.
Their secondary CTAs are thoughtfully designed to catch guests at totally different levels of their shopping for journey. There’s a bank card hyperlink for folk able to make a purchase order, a cloth swatch information for these nonetheless deciding on colours, and an internet catalog for buyers who’re searching however not fairly able to commit. Every one provides guests a motive to remain related and transfer nearer to a purchase order when they’re prepared.
Supply
12. Success Indicators
Together with buyer success tales, awards and recognitions are nice for making a robust first impression. Is your restaurant critically acclaimed? Did your app win finest new product this 12 months? Spotlight these wins in your homepage. Similar 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.
Supply
13. Search Bar
In case your web site is content-heavy, including a search bar could also be extraordinarily useful to your customers, particularly when you’re an internet retailer with lots of of merchandise, a weblog library, or a useful resource hub.
Guests who already know what they’re in search of don’t wish to undergo layers of navigation menus. A easy, seen search bar provides them a direct shortcut to search out precisely what they want, quick.
Keep in mind this: The extra content material you have got, the more durable it turns into for individuals to flick thru classes and filters. A search bar solves that by letting customers kind in precisely what they’re in search of. It’s an underrated device 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 website has a big stock or content material library, you’ll wish 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 decreasing friction and ensuring individuals don’t should work exhausting to search out what they got here for.
Supply
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 wish to make that subsequent step as frictionless as potential. Whether or not they have a query, want a quote, or just wish 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, when you’re working with a minimalist design or don’t wish to dedicate a full web page or part to contact data, no downside. You possibly can hold your structure clear through the use of 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 method to attain out with out cluttering the primary web page.
It’s a modern method to hold your design tight whereas guaranteeing individuals know precisely the way to get in contact with you. Try this weblog filled 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 parts we’ve talked about — clear CTAs, sturdy headlines, user-friendly navigation, and a design that guides guests down the funnel, you’re constructing a path to conversion.
Editor’s Observe: This put up was initially revealed in January 2012 and has been up to date for freshness, accuracy, and comprehensiveness.
