9 Examples of Homepage Designs that Work
Designing a homepage that stands out in the sea of other websites, all competing for at least a part of your target audience, can be a tricky business. You want your design to illustrate who you are as a brand, the message you’re trying to convey, and what you stand for. And of course, you want it to look good.
To give you some inspiration and help you get started, we’ve compiled a list of nine homepage design examples that simply work. Hopefully, they will lend you some ideas for your own homepage, and make your own design process easier.
Open with your key message
The hero section of your homepage is your most valuable piece of real estate. This is the first thing people will see when they land on your website, and this is your chance to capture their interest right away.
A good way to do that is to open with your main point. For example, Forms on Fire opens with their sales message right away, and there is no doubt as to what they offer. Their core value is represented here: they make work easier by digitizing forms.
And add something else to your hero, too
Apart from that one key message written out in a larger font that stands out on your hero, you can add some additional copy in there as well. That depends on the kind of business you do, and you’ll first want to consider how your target audience might react to a bit more sales copy right up front.
For example, Freshbooks has another two sentences added to their hero section that deepen their tagline and add in some more power words: easy, fast, secure.
Choose colors that stand out
The colors you choose to feature in your design can be much more important than you might think. Different colors invoke different kinds of emotions, and you may unknowingly be sending out the wrong message.
Your color scheme can speak volumes about who you are as a brand: vibrant colors will speak of your playfulness and relaxed attitude, a black and white website may reflect your stylish side, green can let people know you are an eco-friendly brand, and so on.
Here is an example from Pixelgrade, which has chosen to go for a very colorful approach – this kind of design certainly captures your attention, and in this case, it also showcases the different things you can do with their product.
Use figures to illustrate your points
Sometimes, numbers can speak louder than words. So instead of spelling out how many clients you’ve worked with, the better choice would be to drive the point home with the use of actual figures.
You should also make these numbers stand out – use a larger font, use a contrasting color, place them in a prominent section of your page.
My Company Works shows off their experience with hard numbers, and this works really well – after all, boasting about 60 000+ clients is not really a boast, but more of a statement.
Use custom illustrations
Apart from the figures and words you have on your homepage, there should be some sort of visuals involved. You can use video, images, animations, or illustrations. As long as what you choose is fully custom and aligned with your brand’s identity, you can’t go wrong.
We are emphasizing the word custom here, as you don’t want to use the visuals someone else has already featured. It would not make you stand out, it would not make you recognizable, and it would certainly not match your brand’s story as much as something original would.
Evernote has some very simple graphics on their homepage – yet they illustrate the points perfectly, they’re in tune with the rest of the page’s design, and they’re not too distracting from the copy itself.
Or show a bit of the product
You can also use screenshots (or nearly-screenshots) that will show the actual product on your homepage. You can achieve the same end with a demo video, but knowing that not everyone will be interested or have time for the video, you can still show the product and get some nice visuals all in one stroke.
Mint uses images of their app on the homepage – these images are custom, fit into the overall design well, and they obviously do the basic job of showing what the product is and how it can help someone in their daily life.
Brag about your achievements
While this tactic will certainly not work in every industry, and will definitely not appeal to every kind of audience, sometimes bragging about your biggest achievements can bring in a whole host of new clients.
However, be careful about how you showcase this. You don’t want it to be all about you. You want your top contracts or top features to show that you do good work and that you can help the person looking at your page – not that you are incredible and expensive and don’t work with just anyone.
Jill Konrath does this with logos – her website’s hero section has a row of big publishing name logos, and it instantly tells you she has been featured in some very important magazines and papers. And it’s not too obtrusive nor too in-your-face. It works.
Choose a powerful CTA
Anything can be a CTA. You can make it short, you can make it very long, or you can make it predictable. All those “contact,” “click here,” and the like – they can get a bit mundane after a while.
Furthermore, a CTA should also aim to provide some sort of value, if possible. If you are asking someone to subscribe to your newsletter, there is certainly a better way to say it than “sign up” – depending on your target audience, of course. A lot of websites use some variety of “awesome content here.” And it does work.
Startup Resources has a great CTA, for example. It encapsulates everything the brand is about: join their email list of 2,000+ entrepreneurs and get a weekly curated email of useful tools that you can try.
Make it your own
Ultimately, the main piece of advice you should take away from this article is that your homepage needs to be your own. Even if you don’t adhere to any of the advice we’ve listed above, even if none of these ideas appeal to you – that’s perfectly all right.
Design a homepage that is in line with what you want it to be, and what you think your audience will appreciate. Let it show who you really are as a brand and as a set of individuals behind the brand.
To illustrate this point, here is the example of Ahrefs. They have incorporated some of the elements we’ve spoken about: great CTA, cold hard figures, screenshots of the product, bragging rights – but their homepage is actually much more than that. It is a reflection of their brand, which is why it works so incredibly well.
To sum it all up
Take a look at some of the design ideas we’ve listed and start sketching out your own homepage design. Remember that it will be a work in progress forever – and you will always have more ideas and want to make it even better. Cut yourself off at a point where you feel the page works, where it’s in line with your brand and your target audience, and take it out for a test drive.