You never get a second chance to make a first impression. That’s why your homepage is undoubtedly one of the most important pages on your website. In fact, it's the very reason why we just launched a brand new homepage design last week. For any given company, the homepage is its virtual front door -- and face to the world. If a new visitor doesn't like what they see, their knee-jerk reaction is to hit the "back" button.
That's right. Despite mom's best advice, unfortunately, a lot of people still judge a book by its cover.
What makes a homepage brilliant, and not "blah?" Well, it's really about more than looks along -- it also has to work well. That's why the most brilliant homepages on this list don't just score high in beauty, but also in brains. Get ready to learn about excellent homepage design through these 15 real-life examples!
Elements of a Brilliant Homepage Design
All of the homepage designs shown here utilize a combination of the following elements. Not every page is perfect, but the best homepage designs get many of these right:
- Clearly answers "Who I am," "What I do," and/or "What can you (the visitor) do here." If you're a well-known brand or company (i.e. Coca Cola) you may be able to get away with not having to describe who you are and what you do; but the reality is, most businesses still need to answer these questions so that each visitor knows they are in the "right place." Steven Krugg sums it up best in his best-selling book, Don't Make Me Think. If visitors can't identify what it is you do within seconds, they won't stick around long.
- Resonates with the target audience. A homepage needs to be narrowly focused -- speaking to the right people in their language. The best homepages avoid "corporate gobbledygook," and eliminate the fluff.
- Compelling value-proposition. When a visitor arrives on your homepage, it needs to compel them to stick around. The homepage is the best place to nail your value proposition so that prospects choose to stay on your website and not navigate to your competitors.
- Usability and mobility. All the homepages listed here are highly usable, meaning they are easy to navigate and there aren't "flashy" objects that get in the way of browsing, such as flash banners, animations, pop-ups, or overly-complicated and unnecessary elements. Many of them are also mobile-optimized, which is an incredibly important must-have in today's mobile world.
- Calls-to-action (CTAs). Every homepage listed here effectively uses primary and secondary calls-to-action in order to direct visitors to the next logical step. Examples include "Free Trial," "Schedule a Demo," "Buy Now," or "Learn More." Remember, the goal of the homepage is to compel visitors to dig deeper into your website and move them further down the funnel. CTAs tell them what to do next so they don't get overwhelmed or lost. More importantly, CTA's turn your homepage into a sales or lead-generation engine, and not just brochure-wear.
- Always changing. The best homepages aren't always static. Some of them, like Whitehouse.gov, are constantly changing to reflect the needs, problems, and questions of their visitors. Some homepages also change from A/B testing or dynamic content.
- Great overall design. A well-designed page is important to building trust, communicating value, and navigating visitors to the next step. As such, these homepages effectively use layout, CTA placement, whitespace, colors, fonts, and other supporting elements.
1) FreshBooks
Why it's brilliant:
- There's great use of color and positioning with the primary calls-to-action -- they jump right off the page!
- The copy used in the CTAs "Try it Free for 30 Days" is very compelling.
- The sub-headline is also great -- "Join over 5 million people using FreshBooks to made billing painless." It resonates with the audience because typically accounting software is "painfully complex" to freelancers and small businesses.
2) Mint
Why it's brilliant:
- It's a super simple design with a strong headline and sub-headline.
- The homepage gives off a secure but easy-going vibe, which is important for a product that handles financial information.
- It also contains a great call-to-action, "Free! Get Started," and a very clear supporting image. Within seconds, visitors know this is an online (and mobile-optimized) software solution.
3) CloudPassage
Why it's brilliant:
- Besides the crisp, clean design, this homepage clearly conveys what CloudPassage does within the body copy and with a supporting video.
- There is only one call-to-action (which is perfect to guide visitors to exactly what they should do next), and to help reduce friction, they've included the message, "No credit card. No commitment."
4) Box
Why it's brilliant:
- The Box homepage is a great example of using strong visuals and copy. Their headline is simple, yet powerful. The homepage also includes good "proof" elements by listing some of their top customer logos, along with the copy, "Over 140,000 businesses use Box."
5) Whitehouse.gov
Why it's brilliant:
- What's particularly great about Whitehouse.gov is that it is completely unlike most government-related websites. It's clean, web 2.0-like, and fosters a community.
- It's fairly easy to find what you're looking for when you land here. There's even a "What are you looking for?" search box. What's also great about this homepage is that it's constantly changing to reflect top concerns and priorities.
6) Carbonite
Why it's brilliant:
- What if you lost all your family photos in an instant? That's the disaster Carbonite helps you avoid, and they clearly convey that on their homepage.
- This page is also a good example of segmentation, by placing links for either home usage, or business usage.
7) Evernote.com
Why it's brilliant:
- Evernote probably wins for the simplest yet best headline, "Remember Everything."
- This homepage is arranged into three simple benefits that jump out due to the rich, green background color.
- The "eye path" then leads you to their call-to-action, "Get Evernote, it's Free."
8) Unlocking
Why it's brilliant:
- There's no question what this website does when you arrive on the homepage. And while most visitors to this site probably know what cell phone unlocking is, they still include a small description on the page.
- This homepage has great contrasting colors and strong proof elements. For example, "Trusted by Millions...over 4 million phones unlocked."
- We also love the short form placed directly on the page, instead of using a button to send visitors to another landing page to get started.
9) Desk.com
Why it's brilliant:
- It's a very simple, yet beautifully designed homepage with a great product screenshot.
- Their headline is strong, with zero fluff.
- Desk.com uses a form directly on the page to get started with their free trial.
10) eWedding
Why it's brilliant:
- For those love birds planning their big day, eWedding is a great destination to building a custom wedding website.
- The homepage isn't cluttered and only includes the necessary elements.
- They've included excellent product visuals, a great headline, and an excellent call-to-action that reduces friction with the copy, "Create your free website in under 5 minutes." Genius!
11) Basecamp
.
Why it's brilliant:
- For a long time, Basecamp has had brilliant homepages, and here you can see why. They feature awesome headlines and put their customers right at the center of their marketing.
- There is also a sign-up form directly on the homepage, to skip the step of going to another page
12) Eventbrite
Why it's brilliant:
- The headline on their homepage, "If it's happening out there you'll find it here." is great, because it sparks curiousity.
- It then follows into the sub-head where visitors can either browse thousands of events, or choose to create an event.
13) GoodData
Why it's brilliant:
- This homepage is a bit non-traditional, but that's just one reason it's so brilliant. There's a very big headline, and it directly speaks to all the data-crunchers out there.
- The image helps visitors see how their product fits into their daily lives -- a visual use case, if you will.
- The one thing it's missing, however, is a clear call-to-action. Hopefully that will be in their next design.
14) TechValidate
Why it's brilliant:
- This homepage is beautifully designed. I particularly love their use of white space and contrasting colors
- The headline is clear and compelling, as are the calls-to-action.
- Making the copy "credible content" stand out in yellow helps readers instantly understand the company's value proposition.
15) Endeavor.org
Why it's brilliant:
- This homepage might not look the most exciting, but it executes many things well. To start, the headline is fantastic, because it makes you want to learn more.
- Second, there is also a supporting video to teach us more about their mission -- a great use of multimedia, visual content.
- The social sharing modules on the homepage help the homepage get more visibility among a wider audience -- particularly important for a .org or any community-oriented website.
What do you think of these homepages? What are your favorites? Are there other great websites I missed? If so, list them in the comments!
Inbound Marketing Blog Feed
Charlie Williams 9:06 AM on January 04, 2013
I redesigned my site last Winter to the latest web standards, and although it only gets a little income from adsense, it actually lost revenue this year.
It could be the recession, but next time I may try "experiments" in Google analytics.
Nicola 9:12 AM on January 04, 2013
Great article. Has already given me inspiration and ideas to try out on my next site!
Christopher 9:16 AM on January 04, 2013
Thanks for this great article! It's very good Overview and Source to inspire! Thx
Dave Vranicar 9:28 AM on January 04, 2013
It's interesting that so many of the examples you cite are for SaaS software vendors (like HubSpot). They all tend to have the same design approach, with big graphics and very little copy.
Two questions:
1. These home pages meet your criteria, and their designs are attractive. Any evidence that they work? Have you checked the Wayback Machine (an archive of old web pages) to see how these sites may have tuned their home pages over time? Such research may provide a different set of insights.
2. Do you have an opinion regarding the effectiveness of very widespread use of sliders? Flash?
Thanks for a good post! It's timely, as I'm reworking my home page now. It's awful.
Dave
Phil Ayres 9:28 AM on January 04, 2013
I'm always on the lookout for great designs like those presented here. The homepages shown here work well as an introduction to the organizations they represent, as well as landing pages to get people into the marketing funnel.
All these examples show that there is little to differentiate the brand in terms of layout of the page - it all comes down to the big graphic they use at the head of your page. And how clever they are at keeping key information above the fold.
Since everything is heading the same way in terms of visuals, this reinforces that success will probably be driven by the quality of the content on the site, rather than the visuals alone.
Roger Poultney 9:39 AM on January 04, 2013
There are some very good examples here and excellent discussion here - though I would like to add that most important menu items should almost always be top left aligned to help ensure they get seen irrespective of viewing screen size etc.
The only additional point I'd like to make is same criteria should be applied to all web pages (i.e. not just the so called "home" page) - as any could be first point of entry to the website (via e.g. search engine listings and other external links etc.)
John McTigue 9:47 AM on January 04, 2013
I think Carbonite should actually use your suggestion "what if you lost all of your family photos in an instant" instead of their product-centric "Carbonite is a better backup plan".
It's interesting that most of the designs you chose are from cloud-based services. Do you think that this industry "gets it" better than others when it comes to web design?
I love everything about the Evernote home page, except one thing - the call to action is the same color as the main background color and gets lost.
Would be very interesting to see an A/B test of Unlocking to see if the short form converts better there or on a linked page. Studies on similar pages have gone both ways.
Kristy 10:10 AM on January 04, 2013
Great article! We are getting started working on a redesign so this is very helpful! I'd love to see your opinion on more retail product driven sites
Juli Durante 10:14 AM on January 04, 2013
I have to disagree with Basecamp. While their homepage is visually appealing and does encourage me to fill out the form, it doesn't actually tell me what Basecamp IS. I found this out when trying to explain it to someone... They should add some more information below the fold.
Jamie Spurrell 10:32 AM on January 04, 2013
Nice article on the importance of homepage design and examples that have incorporated some of the essentials. The one thing I did notice, however, is with the exception of freshbooks.com (great mobile site), whitehouse.gov, and box.com, the majority of these sites do not provide a great mobile experience.
Any thoughts on this?
Graham 11:42 AM on January 04, 2013
I agree with Kristy, great article but would like to see more retail examples. These examples are relatively easy to be made clear and concise as they all represent a single brand/product. Our challenge is to incorporate our brand as the purveyor of many brands and products.
Mara 11:53 AM on January 04, 2013
These websites look all the same.
Helen 12:02 PM on January 04, 2013
I also agree with both Kirsty and Graham , Its a fantastic opportunity for us to see the great websites but Retail is what we are looking at to Launch a brand new Brand ..
Its very inspiring reading your Blogs
Thank you .
Stephanie Ewen 12:18 PM on January 04, 2013
Not to pick on Basecamp, but what are they optimizing on their home page. There is very little content and according to Google, 279 inbound links. I took a look under the hood at their source code but don't see their keywords. This may be a comment for a different post but, the design can be great but how are their customers going to find them? I Googled "web based project management" they showed up on page 4. They might want to spend some time on their SEO.
Christina 12:50 PM on January 04, 2013
Thanks for great examples and pointing out why they work. Will definitely be using some of these ideas to improve my homepage.
I find it interesting that so many of these examples use large banners/sliders at the top of the page and very little copy (unless they have more than what's shown in the screenshots).
Without a little more copy, how do they SEO their homepages?
Nathan Peters 1:10 PM on January 04, 2013
You guys have incredible content on your site. I would like to ask your permission to publish your RSS feed on www.nichespot.net in the Internet Marketing niche. Nichespot provides dofollow backlinks and rel=canonical protection from the duplicate content penalty. It also has a voting system where the most popular posts remain visible at all times.
Let me know what you think.
webmoghuls 1:14 PM on January 04, 2013
Excellent lists! and explanation... Really love this.
Bill Conerly 2:00 PM on January 04, 2013
Robin, thanks for the article. I like their implementations--for them--but I'm not sure they would work for the thousands (or millions) of us lone eagles selling consulting services, speeches, articles; people like yourself. I'd really love to see a compendium of the 15 best websites for lone-eagle thought leadership types.
Ciao
Bill
Etienne 2:59 PM on January 04, 2013
Great list. That reminds me that we need a CTA on the homepage of our website. It has to happen now.
LC 3:56 PM on January 04, 2013
Can you post a similar article that focuses on great e-commerce home pages?
Tom Sullivan 5:27 PM on January 04, 2013
Thanks for the comprehensive article and lots of great examples.
In particular, I thought the headlines for Box, Evernote, Eventbrite, and Good Data were strong.
A few quibbles:
* Fresh Books (#1) - "Say Hello to XYZ" headlines are rarely the most compelling especially when what follows is not a benefit/pain point removal. Yes, it sort of feels friendly and there's lots of other good direct copy, but think that's some wasted space.
* Mint (#2) - headline is OK but think could be better. The layout so strongly point to all the different devices you can SEE your financial info on but none of the copy mentions that. And "Understand" in the headline suggests more work on users part (even if it's "easy" to understand). WIth all the visual charts, better would be something like:
"See what's going on with your money.
Anytime. From any device"
* Evernote (#7) - Really like the headers and layout EXCEPT it was only on my 3rd glance back at the screenshot that I noticed a GREEN CTA button on a GREEN background. I'd wager that didn't really win the split test for most effective button color.
* Unlocking (#8) - you mention it's so obvious what they do as a virtue. When I looked at the page, my eye went from Get Started to Trusted by Millions to the row of icons to the Why People Choose Us header and NONE of them suggests what the site does. The most direct copy is the most obscure since it's black on dark blue. The other copy pops based on contrasts.
* Desk.com (#9) I found the main headline very hard to read over the busy photo background.
* TechValidate (#14) - didn't find the headline compelling, as you did. I did like how the keywords popped visually but I don't believe Credible Content comes from a Machine so i wasn't sold. And wasn't sure what the subhead meant about making content from my customers.
* Endeavor (#15) - Don't think headlines based on "COMPANY is the LEADING XYZ" are very good. And they're leading the "High Impact Entrepreneurship Movement" ... is that a movement with a lot of competition to lead? ;-)
andres 11:13 AM on January 05, 2013
i am i little confused about some home pages here, for example ( carbonate ), if you don't explain me
What if you lost all your family photos in an instant?
i don't know what they do. You say, a great home page must explain clearly and fast what they do
Dat To 3:37 PM on January 05, 2013
Thank you for this wonderful post. Love reading 'Best of...' lists from leading experts. These many examples and the reasons why you value them is jammed pack with great tips.
You save anyone reading this tons of time to have a chance to build on, and test out these ideas.
We always are looking for great ideas and ways to improve our designs so that our Clients connect with their visitors in a meaningful and rewarding way.
Fernland Agencies 4:13 PM on January 05, 2013
Great post guys. It would be interesting to see your recommendation on homepages for businesses outside of internet based software & technology etc. etc.
Susan 6:40 PM on January 05, 2013
How about some examples of great design for content-rich sites, e.g. magazines, newspapers, content portals. The sites chosen here are all offering a single service--a very different design problem (and a simpler one) than presenting a great deal of content.
Trish Arnott 2:48 AM on January 06, 2013
Great article, Jessica. I concur with most of your choices. I quite like these ones as well.
http://smithslawyers.com.au/
http://www.shine.com.au/
http://www.smartpups.org.au/
Frank Z. 12:02 PM on January 06, 2013
I really appreciate HubSpots content, but it's really frustrating when almost every example of brilliant home pages are digital products or services. Sure there are some common themes a non-digital product or service company could take away from this... But more diversity would be a lot better.
Ronan 4:41 PM on January 06, 2013
I really like this article but have to agree with the others that there's not enough diversity.
Nearly all of the examples are online services - most real business still takes place offline even if they find us online. We need this blog done for conventional business models, not all online/digital services.
Nigel 1:49 AM on January 07, 2013
I was interested to see the number of Call to action and links on your new home page. To be honest I got about half way through it and didn't know where to go next and clicked off. Any thoughts?
Chad Polk 5:01 PM on January 07, 2013
how did whitehouse.gov make the list?
Sarah Busque 8:51 PM on January 07, 2013
Very useful blog entry! These websites all provide french new ideas, and are easy to figure out during the very first navigation. Will definitely look into these when it is time to design a corporate website!
Sailaja Neelam 4:08 AM on January 08, 2013
Fantastic! Now I clearly know what has been done wrong and how to rectify it. The article gave me clear direction.
Sonu Nilam 12:47 PM on January 08, 2013
Most of the websites here are providing some services through downloadable software or app. It seems very obvious to have a Try, Demo or Download button on home page. After all that is what the website does. Add a creative one or two liner with small paragraph explaning services and that is all it takes. This is very informative for websites providing services.
Sorry to disagree with Jessica here, but the title '15 Examples of Brilliant Homepage Design' is lame. It should include '... for Websites Providing Services' (except for whitehouse.org)
I would like to see other categories of websites that includes News, information, picture, retail and may be then we can compare within each niche.
Jeff Windle 3:09 PM on January 08, 2013
I agree with Sonu Nilam. These examples are almost exclusively sites for web-based services. CTAs have always been a difficult thing for me to get a handle on, especially for a service business that isn't web-based, like a traditional accountant, lawn care company or business consultant. I would like to see some examples of effective CTAs for more traditional companies who want to use their websites to funnel in viewers and prospects.
Gene K. 3:22 PM on January 09, 2013
Sorry, I found a lot of what was written to be self-serving which is a huge turn off for me. Further, I really disagree with your choices. I found most of the selected sites to be boring and it would NOT make me want to see more. whitehouse.gov is a nightmare to navigate so this is a poor example. Me thinks you need to find better examples. Try more diversity. Your post came through a professional organization I am a member of and there is nothing that is remotely related to that. Also agree with Sonu.
Gene K. 3:23 PM on January 09, 2013
Sorry, I found a lot of what was written to be self-serving which is a huge turn off for me. Further, I really disagree with your choices. I found most of the selected sites to be boring and it would NOT make me want to see more. whitehouse.gov is a nightmare to navigate so this is a poor example. Me thinks you need to find better examples. Try more diversity. Your post came through a professional organization I am a member of and there is nothing that is remotely related to that. Also agree with Sonu.
Jennifer@slim-shoppin 4:13 PM on January 09, 2013
I've changed my site a few times, the current theme I have was a free wordpress theme BUT I have used www.elegantthemes.com for clients of mine and they have awesome themes for only $39.00 per year and you can use as many as you like
Chris 8:50 PM on January 09, 2013
I like Cloud Passage's site the best but I do agree with Sonu - not enough diversity.
@Jennifer, elegant themes is ok but their underlying engine strips a lot of wordpress functionality away.
SH 7:35 AM on January 10, 2013
Perfect, we have taken some inspiration and applied it to our site.
Joseph Young 10:12 AM on January 10, 2013
Each one of the examples above creates a distinct message for all aspiring bloggers to pay attn to. "Make the message clear and the visitor stay to look further into it."
In animation we were taught that every scene, pose, all the elements, had to be clear to the viewer - no second guessing or "I didn't get that allowed!"
great list and a lot of interesting design elements.
Best,
Joe Young
sites I created:
http://john316marketingnetwork.com
http://americarunsonwind.com
Jonathan Wilhelm 10:44 AM on January 10, 2013
So According to this author Google.com is a horrible homepage.
Phyllis Doran 2:36 PM on January 10, 2013
Curious as to how many of these were created with HubSpot's CMS?